/* Activity cards: clean no-bg v2 */
:root {
  --bg: #080706;
  --bg2: #0f0d0b;
  --bg3: #17130f;
  --text: #fff7ed;
  --text2: rgba(255, 247, 237, 0.62);
  --accent: #ff6b00;
  --accent2: #ff8c38;
  --accent-magenta: #e11d6b;
  --accent-glow: rgba(255, 107, 0, 0.2);
  --success: #16A34A;
  --border: rgba(255, 107, 0, 0.12);
  --glass: rgba(255, 255, 255, 0.025);
  --radius: 24px;
}

/* CUSTOM SCROLLBAR */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text2);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

h1,
h2,
h3 {
  font-family: 'Outfit', sans-serif;
  color: var(--text);
}

/* GLOBAL BACKEND LOADING */
.restoup-backend-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.restoup-backend-loader.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.restoup-backend-loader-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  overflow: hidden;
  background: rgba(255, 107, 0, 0.1);
}

.restoup-backend-loader-track span {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 107, 0, 0), #ff6b00 45%, #ffd166 100%);
  box-shadow: 0 0 18px rgba(255, 107, 0, 0.65);
  animation: restoupBackendBar 1.05s ease-in-out infinite;
}

.restoup-backend-loader-pill {
  position: absolute;
  top: 12px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: calc(100vw - 32px);
  padding: 9px 13px;
  border: 1px solid rgba(255, 107, 0, 0.24);
  border-radius: 999px;
  background: rgba(15, 13, 11, 0.9);
  color: #fff7ed;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34), 0 0 24px rgba(255, 107, 0, 0.14);
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
}

.restoup-backend-loader-spinner {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 247, 237, 0.24);
  border-top-color: #ff8c38;
  border-radius: 999px;
  animation: restoupBackendSpin 0.72s linear infinite;
}

.restoup-backend-loader-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
}

@keyframes restoupBackendBar {
  0% {
    transform: translateX(-45vw);
  }

  100% {
    transform: translateX(115vw);
  }
}

@keyframes restoupBackendSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 640px) {
  .restoup-backend-loader-pill {
    top: 8px;
    padding: 8px 11px;
  }

  .restoup-backend-loader-label {
    font-size: 0.72rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .restoup-backend-loader,
  .restoup-backend-loader-track span,
  .restoup-backend-loader-spinner {
    animation: none;
    transition: none;
  }
}

/* Users table must keep all columns reachable inside its own scroll region. */
#panel-users .table-container {
  overflow-x: auto !important;
}

/* Narrow desktop: reserve the fixed activity rail without squeezing the overview grid under it. */
@media (min-width: 1101px) and (max-width: 1350px) {
  #panel-overview.active .overview-admin-dashboard {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #panel-overview.active .overview-admin-dashboard > * {
    min-width: 0;
  }

  #panel-overview.active .overview-admin-dashboard .overview-analytics-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #panel-overview.active .overview-admin-dashboard .overview-analytics-head {
    align-items: stretch !important;
    flex-direction: column;
  }

  #panel-overview.active .overview-admin-dashboard .overview-head-actions {
    width: 100%;
    align-items: stretch !important;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  #panel-overview.active .overview-admin-dashboard .overview-filter-container {
    flex: 1 1 100%;
    min-width: 0;
  }

  #panel-overview.active .overview-admin-dashboard .overview-filter-container select {
    width: 100%;
    min-width: 0;
  }
}

/* Contract audit detail v2 */
.contract-audit-workspace,
.contract-audit-overlay {
  --contract-surface: rgba(255, 255, 255, 0.035);
  --contract-surface-strong: rgba(255, 255, 255, 0.06);
  --contract-line: rgba(255, 255, 255, 0.12);
  --contract-muted: var(--text2, #a3aab8);
  --contract-accent: var(--accent, #ff7b00);
  min-width: 0;
  color: var(--text, #f8fafc);
}

body.contract-audit-active .right-activity-sidebar {
  display: none !important;
}

body.contract-audit-active .main-content {
  margin-right: 0 !important;
}

body.contract-audit-active .panels-wrapper {
  padding-right: 32px;
}

body.contract-audit-active #sub-fixed-support {
  display: none !important;
}

#subscriber-contracts-container.contract-audit-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg, #0a0a0a);
  padding: 0;
}

.contract-audit-detail-shell,
.contract-audit-list-shell {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.contract-audit-detail-shell {
  padding: 20px 0 48px;
}

.contract-audit-list-shell {
  padding: 28px 0 48px;
}

.contract-audit-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-bottom: 18px;
  color: var(--contract-muted);
  font-size: 0.78rem;
}

.contract-audit-detail-header,
.contract-audit-list-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.contract-audit-detail-header {
  position: sticky;
  top: 0;
  z-index: 5;
  align-items: center;
  padding: 14px 16px;
  margin: -20px -16px 22px;
  background: color-mix(in srgb, var(--bg, #0a0a0a) 92%, transparent);
  border-bottom: 1px solid var(--contract-line);
  backdrop-filter: blur(16px);
}

.contract-audit-detail-heading,
.contract-audit-header-actions,
.contract-audit-hero,
.contract-audit-section-heading,
.contract-audit-summary-heading,
.contract-audit-artifact-heading,
.contract-audit-share-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contract-audit-detail-heading {
  flex-wrap: wrap;
  min-width: 0;
}

.contract-audit-detail-heading h2,
.contract-audit-list-header h2,
.contract-audit-hero h3,
.contract-audit-section-heading h3,
.contract-audit-summary-card h3 {
  margin: 0;
  color: var(--text, #f8fafc);
}

.contract-audit-detail-heading h2 {
  font-family: 'Fira Code', 'SFMono-Regular', Consolas, monospace;
  font-size: clamp(1.05rem, 2vw, 1.45rem);
}

.contract-audit-list-header h2 {
  margin-top: 5px;
  font-size: clamp(1.2rem, 2vw, 1.65rem);
}

.contract-audit-list-header p,
.contract-audit-hero p {
  margin: 6px 0 0;
  color: var(--contract-muted);
  line-height: 1.5;
}

.contract-audit-eyebrow {
  display: block;
  color: var(--contract-muted);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.contract-audit-version,
.contract-audit-list-count,
.contract-audit-section-count {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid var(--contract-line);
  border-radius: 999px;
  color: var(--contract-muted);
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.contract-audit-header-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.contract-audit-hero {
  justify-content: space-between;
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid var(--contract-line);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 123, 0, 0.1), var(--contract-surface));
}

.contract-audit-hero h3 {
  margin-top: 6px;
  font-size: 1.25rem;
}

.contract-audit-status-rail {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  margin-bottom: 22px;
  padding: 10px 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.contract-audit-status-step {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 7px;
  color: var(--contract-muted);
  font-size: 0.73rem;
  font-weight: 700;
  white-space: nowrap;
}

.contract-audit-status-step.is-done,
.contract-audit-status-step.is-current {
  color: var(--text, #f8fafc);
}

.contract-audit-status-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--contract-line);
  border-radius: 50%;
  color: var(--contract-muted);
  background: var(--contract-surface);
}

.contract-audit-status-step.is-done .contract-audit-status-mark,
.contract-audit-status-step.is-current .contract-audit-status-mark {
  border-color: #22c55e;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
}

.contract-audit-status-line {
  flex: 0 0 34px;
  height: 1px;
  background: var(--contract-line);
}

.contract-audit-status-line.is-done {
  background: #22c55e;
}

.contract-audit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 24px;
  align-items: start;
}

.contract-audit-main,
.contract-audit-aside {
  min-width: 0;
}

.contract-audit-aside {
  position: sticky;
  top: 76px;
  display: grid;
  gap: 14px;
}

.contract-audit-section,
.contract-audit-summary-card,
.contract-audit-technical {
  padding: 20px;
  border: 1px solid var(--contract-line);
  border-radius: 14px;
  background: var(--contract-surface);
}

.contract-audit-section + .contract-audit-section {
  margin-top: 16px;
}

.contract-audit-section-heading {
  justify-content: space-between;
  margin-bottom: 16px;
}

.contract-audit-section-heading h3 {
  margin-top: 5px;
  font-size: 1rem;
}

.contract-audit-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  overflow-x: auto;
  padding-bottom: 3px;
}

.contract-audit-filter,
.contract-audit-primary-action,
.contract-audit-secondary-action,
.contract-audit-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  border: 1px solid var(--contract-line);
  border-radius: 9px;
  color: var(--text, #f8fafc);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 8px 13px;
  touch-action: manipulation;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.contract-audit-filter {
  flex: 0 0 auto;
  min-height: 44px;
  padding-inline: 12px;
  color: var(--contract-muted);
  font-size: 0.68rem;
}

.contract-audit-filter:hover,
.contract-audit-filter.is-active {
  border-color: var(--contract-accent);
  color: var(--text, #f8fafc);
  background: rgba(255, 123, 0, 0.12);
}

.contract-audit-primary-action {
  border-color: var(--contract-accent);
  color: #fff;
  background: var(--contract-accent);
  box-shadow: 0 8px 24px rgba(255, 123, 0, 0.18);
}

.contract-audit-primary-action:hover,
.contract-audit-secondary-action:hover,
.contract-audit-copy:hover {
  border-color: var(--contract-accent);
  background: rgba(255, 123, 0, 0.12);
  transform: translateY(-1px);
}

.contract-audit-secondary-action:focus-visible,
.contract-audit-primary-action:focus-visible,
.contract-audit-filter:focus-visible,
.contract-audit-card:focus-visible,
.contract-audit-copy:focus-visible,
.contract-audit-technical summary:focus-visible,
.contract-audit-notifications summary:focus-visible {
  outline: 3px solid rgba(255, 123, 0, 0.45);
  outline-offset: 2px;
}

.contract-audit-card {
  display: grid;
  grid-template-columns: minmax(160px, 1.2fr) minmax(140px, 1fr) auto auto 30px;
  align-items: center;
  width: 100%;
  min-height: 72px;
  gap: 14px;
  padding: 14px 16px;
  margin: 0 0 8px;
  border: 1px solid var(--contract-line);
  border-radius: 12px;
  color: var(--text, #f8fafc);
  background: rgba(255, 255, 255, 0.018);
  cursor: pointer;
  font: inherit;
  text-align: left;
  touch-action: manipulation;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.contract-audit-card:hover {
  border-color: var(--contract-accent);
  background: rgba(255, 123, 0, 0.07);
  transform: translateY(-1px);
}

.contract-audit-card-main,
.contract-audit-artifact-heading > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.contract-audit-card-id {
  overflow: hidden;
  color: var(--text, #f8fafc);
  font-family: 'Fira Code', 'SFMono-Regular', Consolas, monospace;
  font-size: 0.8rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contract-audit-card-meta,
.contract-audit-card-person,
.contract-audit-artifact-heading small {
  overflow: hidden;
  color: var(--contract-muted);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contract-audit-card-person {
  min-width: 0;
}

.contract-audit-card-arrow {
  display: inline-flex;
  color: var(--contract-accent);
}

.contract-audit-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: fit-content;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 800;
  white-space: nowrap;
}

.contract-audit-badge.is-success { color: #4ade80; background: rgba(34, 197, 94, 0.1); }
.contract-audit-badge.is-warning { color: #fbbf24; background: rgba(245, 158, 11, 0.1); }
.contract-audit-badge.is-accent { color: #fb923c; background: rgba(249, 115, 22, 0.1); }
.contract-audit-badge.is-info { color: #60a5fa; background: rgba(59, 130, 246, 0.1); }
.contract-audit-badge.is-danger { color: #f87171; background: rgba(239, 68, 68, 0.1); }
.contract-audit-badge.is-muted { color: #a3aab8; background: rgba(148, 163, 184, 0.1); }
.contract-audit-card-payment.is-success { color: #4ade80; }
.contract-audit-card-payment.is-warning { color: #fbbf24; }
.contract-audit-card-payment.is-danger { color: #f87171; }
.contract-audit-card-payment.is-muted { color: var(--contract-muted); }
.contract-audit-card-payment { font-size: 0.68rem; font-weight: 700; white-space: nowrap; }

.contract-audit-events {
  display: grid;
  gap: 0;
}

.contract-audit-event {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 18px;
}

.contract-audit-event:not(:last-child)::before {
  position: absolute;
  top: 34px;
  bottom: 0;
  left: 16px;
  width: 1px;
  background: var(--contract-line);
  content: '';
}

.contract-audit-event-marker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--contract-line);
  border-radius: 50%;
  color: var(--contract-accent);
  background: #11151d;
}

.contract-audit-event-marker.is-payment { color: #60a5fa; }
.contract-audit-event-marker.is-communication { color: #fbbf24; }
.contract-audit-event-marker.is-system { color: #a78bfa; }

.contract-audit-event-body {
  min-width: 0;
  padding-top: 1px;
}

.contract-audit-event-body time,
.contract-audit-event-body p {
  color: var(--contract-muted);
  font-size: 0.68rem;
}

.contract-audit-event-body h4 {
  margin: 4px 0 5px;
  color: var(--text, #f8fafc);
  font-size: 0.84rem;
}

.contract-audit-event-body h4 span {
  color: var(--contract-muted);
  font-size: 0.64rem;
  font-weight: 500;
}

.contract-audit-event-body p {
  margin: 0;
  line-height: 1.5;
}

.contract-audit-event-details,
.contract-audit-technical,
.contract-audit-notifications {
  overflow: hidden;
}

.contract-audit-event-details {
  margin-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.contract-audit-event-details summary,
.contract-audit-technical summary,
.contract-audit-notifications summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  color: var(--contract-muted);
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 700;
  list-style: none;
}

.contract-audit-event-details summary::-webkit-details-marker,
.contract-audit-technical summary::-webkit-details-marker,
.contract-audit-notifications summary::-webkit-details-marker { display: none; }

.contract-audit-event-details summary::after,
.contract-audit-technical summary::after,
.contract-audit-notifications summary::after { content: '+'; color: var(--contract-accent); font-size: 1rem; }
.contract-audit-event-details[open] summary::after,
.contract-audit-technical[open] summary::after,
.contract-audit-notifications[open] summary::after { content: '−'; }

.contract-audit-event-details dl,
.contract-audit-technical-body dl,
.contract-audit-summary-card dl,
.contract-audit-artifact-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 0;
}

.contract-audit-event-details dl > div,
.contract-audit-technical-body dl > div,
.contract-audit-summary-card dl > div,
.contract-audit-artifact-meta > div {
  min-width: 0;
}

.contract-audit-event-details dt,
.contract-audit-technical-body dt,
.contract-audit-summary-card dt,
.contract-audit-artifact-meta dt {
  margin-bottom: 3px;
  color: var(--contract-muted);
  font-size: 0.62rem;
}

.contract-audit-event-details dd,
.contract-audit-technical-body dd,
.contract-audit-summary-card dd,
.contract-audit-artifact-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text, #f8fafc);
  font-size: 0.7rem;
  line-height: 1.45;
}

.contract-audit-summary-heading {
  align-items: flex-start;
  margin-bottom: 18px;
}

.contract-audit-summary-heading > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: #4ade80;
  background: rgba(34, 197, 94, 0.12);
}

.contract-audit-summary-card h3 { margin-top: 4px; font-size: 0.95rem; }
.contract-audit-summary-card dl { grid-template-columns: 1fr; gap: 12px; }
.contract-audit-summary-card dd { font-weight: 700; }
.contract-audit-summary-card .contract-audit-badge { min-height: 24px; font-size: 0.62rem; }

.contract-audit-legal-note {
  display: grid;
  gap: 4px;
  margin-top: 16px;
  padding: 11px 12px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 9px;
  background: rgba(96, 165, 250, 0.06);
}

.subscriber-active-contract-budget {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(245, 158, 11, 0.24);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.11), rgba(255, 255, 255, 0.025));
  color: var(--text, #fff);
}

.subscriber-active-contract-budget.compact {
  margin: 10px 0 0;
  padding: 9px 10px;
  border-radius: 9px;
}

.subscriber-active-contract-budget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  color: var(--text2, #94a3b8);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.subscriber-active-contract-budget-head span,
.subscriber-active-contract-budget-head small,
.subscriber-active-contract-budget-meta {
  min-width: 0;
  overflow-wrap: anywhere;
}

.subscriber-active-contract-budget-head small {
  color: #fbbf24;
  font-size: 0.6rem;
  white-space: normal;
  text-align: right;
}

.subscriber-active-contract-budget strong {
  display: block;
  margin-top: 5px;
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.subscriber-active-contract-budget.compact strong {
  font-size: 0.76rem;
}

.subscriber-active-contract-budget-meta {
  display: block;
  margin-top: 5px;
  color: var(--text2, #94a3b8);
  font-size: 0.64rem;
  line-height: 1.35;
}

@media (max-width: 760px) {
  .subscriber-active-contract-budget-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .subscriber-active-contract-budget-head small {
    text-align: left;
  }
}

.contract-audit-legal-note strong { color: #bfdbfe; font-size: 0.68rem; }
.contract-audit-legal-note span { color: var(--text, #f8fafc); font-size: 0.72rem; font-weight: 700; }
.contract-audit-legal-note small { color: var(--contract-muted); font-size: 0.62rem; line-height: 1.45; }

.contract-audit-technical {
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.02);
}

.contract-audit-technical summary > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text, #f8fafc);
}

.contract-audit-technical summary > span:last-child {
  color: var(--contract-muted);
  font-size: 0.62rem;
  font-weight: 500;
}

.contract-audit-technical-body {
  padding: 0 0 16px;
}

.contract-audit-artifacts {
  display: grid;
  gap: 10px;
}

.contract-audit-artifact {
  padding: 15px;
  border: 1px solid var(--contract-line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.018);
}

.contract-audit-artifact-heading {
  justify-content: space-between;
  margin-bottom: 14px;
}

.contract-audit-artifact-heading > div:first-child {
  grid-template-columns: 24px minmax(0, 1fr);
}

.contract-audit-artifact-heading > div:first-child small {
  grid-column: 2;
}

.contract-audit-artifact-icon {
  grid-row: 1 / span 2;
  display: inline-flex;
  color: var(--contract-accent);
}

.contract-audit-artifact-heading strong {
  overflow-wrap: anywhere;
  font-size: 0.78rem;
}

.contract-audit-artifact-meta code,
.contract-audit-technical code {
  display: inline-block;
  max-width: 100%;
  padding: 2px 5px;
  border-radius: 4px;
  color: #4ade80;
  background: rgba(34, 197, 94, 0.08);
  font-size: 0.6rem;
  overflow-wrap: anywhere;
}

.contract-audit-artifact-meta dd {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.contract-audit-copy {
  flex: 0 0 32px;
  min-height: 32px;
  padding: 5px;
}

.contract-audit-empty,
.contract-audit-loading,
.contract-audit-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 150px;
  padding: 28px;
  border: 1px dashed var(--contract-line);
  border-radius: 14px;
  color: var(--contract-muted);
  text-align: center;
}

.contract-audit-empty,
.contract-audit-error { flex-direction: column; }
.contract-audit-empty strong,
.contract-audit-error strong { color: var(--text, #f8fafc); }
.contract-audit-empty span:not(.contract-audit-empty-icon),
.contract-audit-error span { max-width: 520px; font-size: 0.75rem; line-height: 1.5; }
.contract-audit-empty-icon { color: var(--contract-accent); }
.contract-audit-empty-compact { min-height: 90px; flex-direction: row; justify-content: flex-start; }
.contract-audit-error { color: #fca5a5; border-color: rgba(239, 68, 68, 0.35); }
.contract-audit-loading { min-height: 130px; }
.contract-audit-spinner { width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.18); border-top-color: var(--contract-accent); border-radius: 50%; animation: contract-audit-spin 0.8s linear infinite; }
@keyframes contract-audit-spin { to { transform: rotate(360deg); } }

.contract-audit-notifications summary > span:first-child {
  display: grid;
  gap: 4px;
}

.contract-audit-notification-list {
  display: grid;
  gap: 0;
  padding-top: 8px;
  border-top: 1px solid var(--contract-line);
}

.contract-audit-notification-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--contract-muted);
  font-size: 0.7rem;
}

.contract-audit-notification-list > div > span { display: inline-flex; align-items: center; gap: 7px; }
.contract-audit-notification-list strong { color: var(--text, #f8fafc); }
.contract-audit-notification-list time { white-space: nowrap; }
.contract-audit-feedback { min-height: 20px; color: #4ade80; font-size: 0.7rem; line-height: 1.4; }
.contract-audit-share-actions { flex-wrap: wrap; }

@media (max-width: 1100px) {
  .contract-audit-layout { grid-template-columns: 1fr; }
  .contract-audit-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contract-audit-aside .contract-audit-feedback { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .contract-audit-detail-shell,
  .contract-audit-list-shell { width: min(100% - 24px, 640px); }
  .contract-audit-detail-header,
  .contract-audit-list-header,
  .contract-audit-hero { align-items: flex-start; flex-direction: column; }
  .contract-audit-detail-header { margin-inline: -12px; padding-inline: 12px; }
  .contract-audit-header-actions { width: 100%; justify-content: flex-start; }
  .contract-audit-header-actions .contract-audit-primary-action,
  .contract-audit-header-actions .contract-audit-secondary-action { flex: 1 1 180px; }
  .contract-audit-aside { grid-template-columns: 1fr; }
  .contract-audit-card { grid-template-columns: minmax(0, 1fr) auto; gap: 9px 12px; }
  .contract-audit-card-person { grid-column: 1 / -1; }
  .contract-audit-card-payment { grid-column: 1; }
  .contract-audit-card-arrow { grid-column: 2; grid-row: 3; }
  .contract-audit-section { padding: 16px; }
  .contract-audit-event-details dl,
  .contract-audit-technical-body dl,
  .contract-audit-artifact-meta { grid-template-columns: 1fr; }
  .contract-audit-artifact-meta .is-wide { grid-column: auto; }
  .contract-audit-artifact-heading { align-items: flex-start; flex-direction: column; }
  .contract-audit-artifact-heading .contract-audit-secondary-action { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .contract-audit-card,
  .contract-audit-primary-action,
  .contract-audit-secondary-action,
  .contract-audit-filter { transition: none; }
  .contract-audit-spinner { animation: none; }
}

/* Admin tablet UI/UX v1 */
@media (max-width: 1100px) and (min-width: 761px) {
  html,
  body {
    overflow-x: hidden;
  }

  .right-activity-sidebar {
    display: none !important;
  }

  .main-content {
    margin-right: 0 !important;
    padding: 24px 0 32px !important;
  }

  .top-status-row,
  .topbar {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .topbar {
    margin-bottom: 16px !important;
  }

  .panels-wrapper {
    min-width: 0;
    overflow-x: hidden;
    padding: 16px 24px 32px !important;
  }

  .panel,
  .panel.active,
  .section-header > div {
    min-width: 0;
    max-width: 100%;
  }

  .section-header {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px;
  }

  #panel-overview.active .overview-admin-dashboard .overview-analytics-kpis,
  #panel-overview.active .overview-admin-dashboard .overview-subscriber-bar,
  #panel-overview.active .overview-admin-dashboard .overview-analytics-grid,
  #panel-overview.active .overview-admin-dashboard .overview-two-col-layout,
  #panel-overview.active .overview-admin-dashboard .overview-rep-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #panel-overview.active .overview-admin-dashboard {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .tablet-touch-target,
  .sidebar-nav a,
  .logout-btn,
  .panel button,
  .panel select,
  .panel input:not([type="checkbox"]):not([type="radio"]),
  .ops-popup-modal-content button,
  .ops-popup-modal-content select {
    min-height: 44px !important;
  }

  input[type="checkbox"],
  input[type="radio"] {
    min-height: 0 !important;
  }

  .table-container {
    max-width: 100%;
    overscroll-behavior-x: contain;
    scrollbar-color: rgba(255, 107, 0, 0.55) rgba(255, 255, 255, 0.04);
  }

  .lead-panel-actions,
  .lead-panel-filter-row {
    width: 100%;
    min-width: 0;
  }

  .lead-panel-actions {
    align-items: stretch !important;
    flex-wrap: wrap;
    gap: 10px !important;
  }

  .lead-panel-actions > .dropdown,
  .lead-panel-actions > button {
    flex: 1 1 180px;
  }

  .lead-panel-filter-row {
    align-items: stretch !important;
    flex-direction: column;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }

  .lead-panel-filter-row .status-filters {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
    min-width: 0;
    width: 100%;
  }

  .lead-panel-filter-row .status-filters > button {
    min-width: 0;
    white-space: normal;
  }

  .lead-filter-controls {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px;
    gap: 8px;
    margin-left: 0 !important;
    min-width: 0;
  }

  .lead-filter-controls input,
  .lead-filter-controls select {
    width: 100% !important;
  }

  .lead-assignment-controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px !important;
    width: 100%;
    min-width: 0;
  }

  #lead-rep-filter,
  #bulk-assign-container,
  #bulk-assign-user,
  #bulk-assign-container button {
    width: 100%;
    min-width: 0 !important;
  }

  #bulk-assign-container {
    align-items: stretch !important;
    flex-wrap: wrap;
    border-radius: 12px !important;
    padding: 8px 10px !important;
  }

  #bulk-assign-container > span {
    flex: 1 1 100%;
  }

  #panel-subscribers .subscriber-section-header {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  #panel-subscribers .subscriber-section-heading {
    min-width: 0;
  }

  #panel-subscribers .subscriber-section-toolbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    justify-content: stretch;
    gap: 8px;
    width: 100%;
  }

  #panel-subscribers .subscriber-search-wrap,
  #panel-subscribers #subscriber-search-input {
    width: 100% !important;
    min-width: 0;
  }

  #panel-subscribers .subscriber-search-wrap,
  #panel-subscribers .subscriber-bulk-toolbar {
    grid-column: 1 / -1;
  }

  #panel-subscribers #subscriber-page-size,
  #panel-subscribers .subscriber-primary-action,
  #panel-subscribers .subscriber-actions-dropdown,
  #panel-subscribers .subscriber-toolbar-button {
    width: 100%;
    min-width: 0;
  }

  #panel-subscribers .subscriber-primary-action,
  #panel-subscribers .subscriber-toolbar-button {
    justify-content: center;
  }

  #panel-subscribers .subscriber-bulk-toolbar {
    flex-wrap: wrap;
    justify-content: stretch;
    border-radius: 12px;
  }

  #panel-subscribers .subscriber-bulk-toolbar select,
  #panel-subscribers .subscriber-bulk-toolbar button {
    flex: 1 1 180px;
    min-width: 0;
  }

  #panel-subscribers .sub-view-tab-container {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  #panel-subscribers .sub-view-tab-btn {
    flex: 0 0 auto;
    min-height: 44px !important;
  }

  #panel-requests.active .ops-command-top-row {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px;
  }

  #panel-requests.active .ops-command-top-row .ops-dashboard-clock-wrapper,
  #panel-requests.active .ops-command-top-row .ops-dashboard-stats-compact {
    width: 100%;
    min-width: 0;
  }

  #panel-requests.active .ops-command-top-row .ops-dashboard-clock-wrapper,
  #panel-requests.active .ops-command-top-row .ops-dashboard-stats-compact {
    grid-column: auto !important;
    justify-self: stretch !important;
  }

  #panel-requests.active .ops-dashboard-stats-compact {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  #panel-requests.active .ops-stat-badge-compact {
    flex: 1 1 130px;
    min-height: 44px;
  }

  #panel-requests.active .ops-command-search-strip {
    align-items: stretch;
  }

  #panel-requests.active .ops-search-box {
    width: 100%;
    min-width: 0;
    height: 44px;
  }

  #panel-requests.active .ops-filters-and-owner-group {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  #panel-requests.active .ops-filter-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  #panel-requests.active .request-filter-chip {
    min-width: 0;
    min-height: 44px !important;
  }

  #panel-requests.active .ops-area-filter,
  #panel-requests.active .ops-owner-filter,
  #panel-requests.active .ops-area-select,
  #panel-requests.active .ops-owner-select {
    width: 100%;
    min-width: 0;
  }

  .ops-popup-modal-backdrop {
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .ops-popup-modal-wrapper {
    max-height: none !important;
    margin: 0 !important;
    padding-top: 0 !important;
  }

  .ops-modal-close-btn {
    top: 8px !important;
    right: 8px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
  }

  .ops-popup-modal-content {
    max-height: calc(100dvh - 24px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 68px 16px 20px !important;
    border-radius: 18px !important;
  }

  .ops-update-card-title {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px !important;
    align-items: start !important;
    padding-right: 0 !important;
  }

  .ops-update-card-title > span {
    min-width: 0;
    line-height: 1.35;
  }

  .ops-update-card-title > span small {
    display: block;
    line-height: 1.4;
    margin-top: 3px;
  }

  .ops-update-card-title > div {
    grid-column: 1 / -1;
    position: static !important;
    transform: none !important;
    justify-content: flex-start !important;
    min-height: 44px;
    margin-top: 2px;
  }

  .ops-update-control-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .lead-modal-dialog,
  .representative-modal-content {
    max-height: calc(100dvh - 24px) !important;
  }
}

/* BUTTONS */
button {
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  border: none;
  outline: none;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  transition: 0.2s;
  box-shadow: 0 4px 12px var(--accent-glow);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px var(--accent-glow);
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text2);
  padding: 8px 16px;
  border-radius: 6px;
  transition: 0.2s;
}

.btn-ghost:hover {
  background: var(--bg3);
  color: var(--text);
}

.btn-success {
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(34, 197, 94, 0.2);
  font-size: 0.8rem;
  font-weight: 600;
}

.btn-success:hover {
  background: var(--success);
  color: #fff;
}

/* LOGIN SCREEN */
.login-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, var(--bg2), var(--bg));
  z-index: 1000;
}

.login-box {
  background: var(--bg2);
  padding: 40px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  width: 100%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.login-box h2 {
  font-size: 2rem;
  margin-bottom: 8px;
}

.login-box h2 span {
  color: var(--accent);
}

.login-box p {
  color: var(--text2);
  margin-bottom: 24px;
  font-size: 0.9rem;
}

.login-box .form-group {
  margin-bottom: 20px;
}

/* Lead detail modal: compact mobile layout without an inner scroll column. */
.lead-modal-dialog,
.lead-modal-body,
.lead-modal-left,
.lead-modal-right {
  min-width: 0;
}

@media (max-width: 1400px) {
  .lead-modal-left {
    overflow: visible !important;
    gap: 12px !important;
  }

  .lead-modal-hero-card {
    padding: 16px !important;
  }

  .lead-modal-hero-card h3 {
    font-size: 1.6rem !important;
  }

  .lead-modal-info-grid {
    gap: 12px !important;
  }

  .lead-modal-info-grid .info-item label {
    margin-bottom: 4px !important;
    font-size: 0.58rem !important;
  }

  .lead-modal-info-grid .info-item > div {
    font-size: 0.82rem !important;
    line-height: 1.2 !important;
  }

  .lead-modal-expectations {
    padding: 9px !important;
    font-size: 0.76rem !important;
    line-height: 1.3 !important;
  }

  .lead-modal-contact-actions {
    gap: 5px !important;
    margin-top: 6px !important;
  }

  .lead-modal-contact-actions button {
    padding: 6px 8px !important;
    font-size: 0.68rem !important;
  }

  .lead-modal-assignee-card {
    margin-top: 0 !important;
    padding: 12px !important;
  }

  .lead-modal-assignee-card label {
    margin-bottom: 8px !important;
  }

  .lead-modal-assignee-card select,
  .lead-modal-delete {
    padding: 9px !important;
  }

  .lead-modal-delete {
    margin-top: 8px !important;
  }
}

@media (max-width: 720px) {
  #lead-modal-overlay {
    align-items: flex-start !important;
    overflow: hidden !important;
    padding: 12px !important;
  }

  #lead-modal-overlay > .lead-modal-dialog {
    width: 100% !important;
    max-width: none !important;
    height: calc(100vh - 24px) !important;
    padding: 16px !important;
    overflow: hidden !important;
  }

  #lead-modal-overlay > .lead-modal-dialog > h2 {
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    font-size: 1rem !important;
  }

  .lead-modal-body {
    display: block !important;
    overflow: visible !important;
  }

  .lead-modal-left {
    overflow: visible !important;
    padding-right: 0 !important;
    border-right: 0 !important;
    gap: 12px !important;
  }

  .lead-modal-right {
    display: none !important;
  }

  .lead-modal-hero-card {
    padding: 16px !important;
  }

  .lead-modal-hero-card h3 {
    font-size: 1.5rem !important;
  }

  .lead-modal-info-grid {
    gap: 12px !important;
  }

  .lead-modal-info-grid .info-item label {
    margin-bottom: 4px !important;
    font-size: 0.58rem !important;
  }

  .lead-modal-info-grid .info-item > div {
    font-size: 0.82rem !important;
    line-height: 1.2 !important;
  }

  .lead-modal-expectations {
    padding: 9px !important;
    font-size: 0.76rem !important;
    line-height: 1.3 !important;
  }

  .lead-modal-assignee-card {
    margin-top: 0 !important;
    padding: 12px !important;
  }

  .lead-modal-assignee-card select {
    padding: 9px !important;
  }

  .lead-modal-delete {
    margin-top: 8px !important;
    padding: 9px !important;
  }
}

.login-capslock-slot {
  height: 14px;
  margin-top: 4px;
  position: relative;
  pointer-events: none;
  overflow: hidden;
}

.login-capslock-hint {
  position: absolute;
  right: 2px;
  top: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(251, 191, 36, 0.65);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 14px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
}

.login-capslock-hint > span {
  margin-right: 2px;
  font-size: 0.6rem;
  opacity: 0.8;
}

.login-capslock-hint.is-visible {
  opacity: 1;
  visibility: visible;
}

.login-box input {
  width: 100%;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  outline: none;
  transition: 0.2s;
}

.login-box input:focus {
  border-color: var(--accent);
}

#admin-password,
#admin-password:focus,
#admin-password:focus-visible,
#admin-password:active {
  -webkit-text-security: unset !important;
  text-security: unset !important;
}

.action-panel-input[type="password"],
#user-password,
#security-password-input {
  -webkit-text-security: disc !important;
  text-security: disc !important;
}

.login-box .btn-primary {
  width: 100%;
}

.error-msg {
  color: #ef4444;
  font-size: 0.85rem;
  margin-top: 16px;
  min-height: 20px;
}

/* DASHBOARD LAYOUT - BULLETPROOF FIXED SYSTEM */
.dashboard-wrapper {
  display: flex !important;
  width: 100%;
  min-height: 100vh;
  background: var(--bg);
}

/* Ensure content can shrink if needed */
.main-content {
  min-width: 0;
}

/* SIDEBAR */
.sidebar {
  width: 260px;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  z-index: 100;
}

.sidebar-header {
  padding: 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-header .logo {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
}

.sidebar-header .logo span {
  color: var(--accent);
}
.sidebar-header .logo-image{display:block;width:72px;height:72px;object-fit:contain;border-radius:12px}
.login-box .login-logo{display:block;width:104px;height:104px;object-fit:contain;border-radius:16px;margin:0 auto 20px}

.sidebar-header .badge {
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 100px;
}

.sidebar-nav {
  padding: 24px 16px;
  flex: 1;
}

.sidebar-nav-category {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 24px 0 12px 16px;
  opacity: 0.6;
}

.sidebar-nav-category:first-child {
  margin-top: 0;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--text2);
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  margin-bottom: 4px;
  transition: 0.2s;
}

.sidebar-nav a svg {
  width: 20px;
  height: 20px;
  opacity: 0.7;
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
  background: var(--bg3);
  color: var(--text);
}

.sidebar-nav a.active {
  background: var(--accent-glow);
  color: var(--accent);
}

.sidebar-nav a.active svg {
  color: var(--accent);
  opacity: 1;
}

.sidebar-admin-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-admin-section .sidebar-nav-category {
  margin-top: 0;
}

.sidebar-admin-section+.sidebar-admin-section {
  margin-top: 10px;
}

.sidebar-nav a.sidebar-secondary-link {
  padding: 10px 14px;
}

.sidebar-footer {
  padding: 24px;
  border-top: 1px solid var(--border);
}

/* SIDEBAR STATUS SUMMARY */
.sidebar-status-summary {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 12px;
  padding: 4px 12px 16px 40px;
  margin-top: -6px;
}

.status-summary-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  color: var(--text2);
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.2s;
}

.status-summary-item:hover {
  color: var(--text);
}

.status-summary-item.hidden {
  display: none !important;
}

.status-summary-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-summary-dot.bekliyor {
  background: #e11d6b;
  box-shadow: 0 0 8px rgba(225, 29, 107, 0.4);
}

.status-summary-dot.tekrar {
  background: #ffa500;
  box-shadow: 0 0 8px rgba(255, 165, 0, 0.4);
}

.status-summary-count {
  margin-left: 6px;
  background: var(--bg3);
  color: var(--text);
  padding: 1px 7px;
  border-radius: 100px;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
  border: 1px solid var(--border);
}

.status-summary-item[data-status="bekliyor"]:hover .status-summary-count {
  background: #e11d6b;
  border-color: #e11d6b;
  color: #fff;
}

.status-summary-item[data-status="tekrar"]:hover .status-summary-count {
  background: #ffa500;
  border-color: #ffa500;
  color: #fff;
}

.logout-btn {
  width: 100%;
  padding: 12px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: 8px;
  font-weight: 600;
  transition: 0.2s;
}

.logout-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.2);
}

/* MAIN CONTENT */
.main-content {
  flex: 1;
  padding: 40px;
  overflow-y: auto;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.topbar h1 {
  font-size: 1.8rem;
}

.date-display {
  color: var(--text2);
  font-size: 0.9rem;
}

.panel {
  display: none;
}

.panel.active {
  display: block;
  animation: fade 0.3s ease;
}

@keyframes fade {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: 260px;
  /* Sidebar width */
  margin-right: 420px;
  /* Activity Sidebar width */
  min-height: 100vh;
  background: var(--bg);
  transition: margin 0.3s ease;
}

.main-content.no-right-sidebar {
  margin-right: 0;
}

.main-content.no-left-sidebar {
  margin-left: 0;
}

/* Live subscriber <> representative chat */
.live-chat-widget {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 2147482000;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  width: min(368px, calc(100vw - 32px));
  pointer-events: none;
}

.live-chat-widget[hidden] {
  display: none !important;
}

.live-chat-launcher,
.live-chat-panel {
  pointer-events: auto;
}

.live-chat-launcher {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: rgba(15, 17, 21, 0.96);
  color: var(--text);
  min-height: 60px;
  max-width: 100%;
  border-radius: 8px;
  padding: 10px 14px 10px 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.live-chat-launcher:hover {
  transform: translateY(-2px);
  background: rgba(22, 25, 32, 0.98);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(234, 179, 8, 0.08);
  border-color: rgba(234, 179, 8, 0.26);
}

.live-chat-launcher.is-open {
  opacity: 0.32;
  transform: translateY(0) scale(0.96);
  filter: saturate(0.55);
  pointer-events: none;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.live-chat-launcher.is-hiding {
  animation: liveChatLauncherHide 0.2s ease forwards;
}

.live-chat-launcher.is-returning {
  animation: liveChatLauncherReturn 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.live-chat-launcher-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #050505;
  flex: 0 0 auto;
  box-shadow: 0 8px 20px rgba(234, 179, 8, 0.16);
}

.live-chat-launcher-copy {
  min-width: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.live-chat-launcher-copy b {
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1.1;
  white-space: nowrap;
}

.live-chat-launcher-copy small {
  color: var(--text2);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.live-chat-unread-badge {
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ef4444;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.8);
  font-size: 0.72rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(239, 68, 68, 0.36);
}

.live-chat-panel {
  position: absolute;
  right: 0;
  bottom: 76px;
  width: 100%;
  overflow: visible;
  border-radius: 8px;
  background: rgba(15, 17, 21, 0.98);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(18px);
  transform-origin: right bottom;
  will-change: transform, opacity, clip-path;
}

.live-chat-panel.is-opening {
  animation: liveChatPanelOpen 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

.live-chat-panel::after {
  content: "";
  position: absolute;
  right: 26px;
  bottom: -8px;
  width: 16px;
  height: 16px;
  background: rgba(15, 17, 21, 0.98);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.18);
}

@keyframes liveChatPanelOpen {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.22);
    clip-path: circle(28px at calc(100% - 30px) calc(100% - 30px));
    filter: blur(2px);
  }

  58% {
    opacity: 1;
    transform: translateY(0) scale(1.015);
    clip-path: circle(135% at 100% 100%);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    clip-path: circle(150% at 100% 100%);
    filter: blur(0);
  }
}

@keyframes liveChatLauncherHide {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: saturate(1);
  }

  to {
    opacity: 0.32;
    transform: translateY(0) scale(0.96);
    filter: saturate(0.55);
  }
}

@keyframes liveChatLauncherReturn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.86);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.live-chat-header {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(5, 5, 5, 0.28);
}

.live-chat-header-avatar,
.live-chat-thread-avatar {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--accent);
  color: #050505;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: 0 8px 20px rgba(234, 179, 8, 0.14);
}

.live-chat-header-copy,
.live-chat-thread-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.live-chat-header-copy strong {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1.15;
}

.live-chat-header-copy span {
  color: var(--text2);
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-chat-close {
  margin-left: auto;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text2);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 900;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.live-chat-close:hover {
  background: rgba(234, 179, 8, 0.08);
  border-color: rgba(234, 179, 8, 0.22);
  color: var(--accent);
}

.live-chat-hours-card {
  margin: 8px 10px 0;
  padding: 8px 9px;
  border-radius: 8px;
  border: 1px solid rgba(34, 197, 94, 0.16);
  background: rgba(34, 197, 94, 0.055);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
}

.live-chat-hours-card div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

.live-chat-hours-card span {
  color: var(--text2);
  font-size: 0.6rem;
  font-weight: 850;
  letter-spacing: 0.45px;
  text-transform: uppercase;
}

.live-chat-hours-card strong {
  color: #bbf7d0;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.15;
}

.live-chat-hours-card em {
  margin: 0;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.1);
  color: #86efac;
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.live-chat-hours-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12), 0 0 14px rgba(34, 197, 94, 0.42);
  flex: 0 0 auto;
}

.live-chat-hours-card.is-closed {
  border-color: rgba(234, 179, 8, 0.18);
  background: rgba(234, 179, 8, 0.055);
}

.live-chat-hours-card.is-closed strong {
  color: var(--accent);
}

.live-chat-hours-card.is-closed em {
  background: rgba(234, 179, 8, 0.1);
  color: #fcd34d;
}

.live-chat-hours-card.is-closed .live-chat-hours-dot {
  background: #eab308;
  box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.12), 0 0 14px rgba(234, 179, 8, 0.42);
}

.live-chat-request-actions {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 0;
  flex: 0 0 auto;
}

.live-chat-request-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 28px;
  border: 1px solid rgba(234, 179, 8, 0.18);
  border-radius: 999px;
  background: rgba(234, 179, 8, 0.075);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 850;
  padding: 0 9px;
  cursor: pointer;
  white-space: nowrap;
}

.live-chat-request-actions svg {
  width: 13px;
  height: 13px;
}

.live-chat-request-actions button:hover:not(:disabled) {
  background: rgba(234, 179, 8, 0.13);
  border-color: rgba(234, 179, 8, 0.3);
}

.live-chat-request-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.live-chat-thread-list {
  max-height: 136px;
  overflow: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  background: rgba(5, 5, 5, 0.14);
}

.live-chat-thread-item {
  width: 100%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
  color: var(--text);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  text-align: left;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.live-chat-thread-item:hover,
.live-chat-thread-item.active {
  background: rgba(234, 179, 8, 0.07);
  border-color: rgba(234, 179, 8, 0.24);
}

.live-chat-thread-avatar {
  width: 32px;
  height: 32px;
  background: var(--bg3);
  color: var(--accent);
  border: 1px solid rgba(234, 179, 8, 0.18);
  box-shadow: none;
}

.live-chat-thread-copy {
  flex: 1;
}

.live-chat-thread-copy b,
.live-chat-thread-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-chat-thread-copy b {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 850;
}

.live-chat-thread-copy small {
  color: var(--text2);
  font-size: 0.68rem;
  font-weight: 650;
}

.live-chat-thread-item i {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ef4444;
  color: #ffffff;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
}

.live-chat-thread-empty,
.live-chat-empty-state {
  color: var(--text2);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
}

.live-chat-thread-empty {
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.live-chat-messages {
  height: 310px;
  overflow: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(5, 5, 5, 0.52);
}

.live-chat-empty-state {
  height: 100%;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px;
}

.live-chat-empty-state strong {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 900;
}

.live-chat-empty-state span {
  max-width: 270px;
  line-height: 1.45;
}

.live-chat-message {
  display: flex;
  justify-content: flex-start;
}

.live-chat-message.mine {
  justify-content: flex-end;
}

.live-chat-message-bubble {
  max-width: min(78%, 270px);
  border-radius: 8px;
  padding: 9px 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

.live-chat-message.mine .live-chat-message-bubble {
  background: var(--accent);
  border-color: rgba(234, 179, 8, 0.32);
  color: #050505;
  box-shadow: 0 10px 22px rgba(234, 179, 8, 0.16);
}

.live-chat-message-bubble p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.42;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.live-chat-message-bubble span {
  display: block;
  margin-top: 5px;
  color: var(--text2);
  font-size: 0.62rem;
  font-weight: 750;
}

.live-chat-message.mine .live-chat-message-bubble span {
  color: rgba(5, 5, 5, 0.62);
}

.live-chat-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px;
  background: rgba(15, 17, 21, 0.98);
  border-top: 1px solid var(--border);
}

.live-chat-composer textarea {
  flex: 1;
  min-height: 42px;
  max-height: 100px;
  resize: vertical;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  padding: 11px 12px;
  outline: none;
  font: inherit;
  font-size: 0.82rem;
}

.live-chat-composer textarea:focus {
  border-color: rgba(234, 179, 8, 0.45);
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.1);
}

.live-chat-composer button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #050505;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 12px 22px rgba(234, 179, 8, 0.18);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.live-chat-composer button:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(234, 179, 8, 0.24);
}

.live-chat-composer button:disabled,
.live-chat-composer textarea:disabled {
  opacity: 0.52;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .live-chat-widget {
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
  }

  .live-chat-panel {
    bottom: 76px;
    max-height: calc(100vh - 96px);
  }

  .live-chat-messages {
    height: min(310px, calc(100vh - 340px));
    min-height: 210px;
  }

  .live-chat-launcher {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {

  .live-chat-panel.is-opening,
  .live-chat-launcher.is-hiding,
  .live-chat-launcher.is-returning {
    animation: none;
  }
}

body.subscriber-logged-in {
  overflow-x: hidden;
}

body.subscriber-logged-in .main-content {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

body.subscriber-logged-in .top-status-row,
body.subscriber-logged-in #subscriber-header-info,
body.subscriber-logged-in #sub-fixed-support {
  display: none !important;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0;
  padding: 18px 40px 24px;
  background: var(--bg);
  z-index: 10;
  flex-shrink: 0;
}

.top-status-row {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 40px 0;
  background: var(--bg);
  border-bottom: 0;
  flex-shrink: 0;
}

.top-status-row .date-display {
  margin-left: auto;
  display: flex;
  align-items: center;
  align-self: center;
  gap: 12px;
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 0.78rem;
  color: var(--text2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transform: translateY(-4px);
}

.top-status-row .clock-time {
  color: var(--text);
  font-weight: 800;
  border-left: 0;
  padding-left: 12px;
  min-width: 50px;
  text-align: right;
}

.top-status-row .alarm-bar {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.panels-wrapper {
  flex: 1;
  overflow-y: auto;
  padding: 24px 40px;
}

.right-activity-sidebar {
  width: 420px;
  position: fixed;
  right: 0;
  top: 0;
  height: calc(100vh - 104px) !important;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-left: 1px solid var(--border);
  padding: 20px 16px !important;
  z-index: 90;
  transition: transform 0.3s ease;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.right-activity-sidebar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--border);
}

.notifications-feed {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  overflow-y: auto;
}

/* STATS & PREMIUM CARDS */
.glass-card {
  background: var(--glass);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.premium-glow {
  position: relative;
}

.premium-glow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0 0 30px var(--accent-glow);
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: inherit;
  pointer-events: none;
}

.premium-glow:hover::after {
  opacity: 1;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 48px;
}

.stat-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  transition: 0.3s;
}

.stat-card:hover {
  border-color: var(--accent);
}

.stat-icon {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--bg3), var(--bg2));
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
}

.stat-info h3 {
  font-size: 0.75rem;
  color: var(--text2);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}

.stat-info p {
  font-size: 2.4rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  letter-spacing: -1px;
}

/* SECTIONS */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

/* Subscriber Dashboard Tabs */
.sub-tabs {
  position: sticky;
  top: 80px;
  z-index: 10;
  backdrop-filter: blur(10px);
}

.tab-btn {
  flex: 1;
  padding: 12px;
  border: none;
  background: transparent;
  color: var(--text2);
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.tab-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.tab-btn.active {
  background: var(--accent);
  color: #000;
}

.sub-tab-content {
  display: none;
  animation: subFadeIn 0.3s ease;
}

.sub-tab-content.active {
  display: block;
}

@keyframes subFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Action Buttons for Esnaf */
.action-card-btn {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 24px;
  border-radius: 16px;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.action-card-btn:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  background: rgba(234, 179, 8, 0.05);
}

.action-card-btn strong {
  font-size: 0.9rem;
  font-weight: 800;
}

.section-header h2 {
  font-size: 1.3rem;
}

/* TABLES */
.table-container {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
}

.leads-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.leads-table th {
  padding: 16px 24px;
  color: var(--text2);
  font-size: 0.8rem;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.leads-table td {
  padding: 16px 24px;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border);
}

.leads-table tr:last-child td {
  border-bottom: none;
}

.leads-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-badge.pending {
  background: rgba(225, 29, 107, 0.1);
  color: #e11d6b;
}

.status-badge.contacted {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

/* SETTINGS CARD */
.settings-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}

.setting-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.setting-item h4 {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  margin-bottom: 4px;
}

.setting-item p {
  color: var(--text2);
  font-size: 0.85rem;
}

.setting-item.disabled {
  opacity: 0.6;
  pointer-events: none;
}

.settings-console {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

.settings-console-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.settings-console-head span {
  display: block;
  color: var(--text2);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.settings-console-head h2 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 850;
}

.settings-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.settings-tabs {
  display: flex;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.018);
  overflow-x: auto;
}

.settings-tab-btn {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text2);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.settings-tab-btn:hover,
.settings-tab-btn.active {
  background: rgba(234, 179, 8, 0.1);
  border-color: rgba(234, 179, 8, 0.18);
  color: var(--accent);
}

.settings-pane {
  display: none;
}

.settings-pane.active {
  display: block;
}

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

.settings-console .settings-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 24px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.018);
}

.settings-console .settings-card h3 {
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
  font-weight: 850;
}

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

.settings-field,
.settings-plan-row label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.settings-field.wide,
.settings-check.wide {
  grid-column: 1 / -1;
}

.settings-field span,
.settings-plan-row label span,
.settings-check span {
  color: var(--text2);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.settings-field input,
.settings-field textarea,
.settings-field select,
.settings-plan-row input {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.84rem;
  outline: none;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.settings-field textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.45;
}

.settings-field input:focus,
.settings-field textarea:focus,
.settings-field select:focus,
.settings-plan-row input:focus {
  border-color: rgba(234, 179, 8, 0.44);
  background: rgba(255, 255, 255, 0.025);
}

.settings-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.015);
}

.settings-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex: 0 0 auto;
}

.settings-check span {
  text-transform: none;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.3;
}

.settings-plan-grid {
  display: grid;
  gap: 12px;
}

.settings-plan-row {
  display: grid;
  grid-template-columns: 110px repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}

.settings-plan-row strong {
  align-self: center;
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 850;
}

@media (max-width: 1180px) {

  .settings-grid,
  .settings-form-grid {
    grid-template-columns: 1fr;
  }

  .settings-field.wide,
  .settings-check.wide {
    grid-column: auto;
  }

  .settings-plan-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .settings-console-head {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-actions {
    justify-content: stretch;
  }

  .settings-actions button {
    flex: 1;
  }
}

/* DESIGNER MILESTONE - SLEEK TIMELINE */
.milestone-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
  width: 100%;
  padding: 10px 0;
  gap: 12px;
}

.milestone-step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.milestone-line {
  width: 50px;
  height: 1px;
  background: var(--border);
  opacity: 0.5;
}

.milestone-line.completed {
  background: var(--success);
  opacity: 1;
}

.milestone-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.milestone-step.active .milestone-dot {
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  transform: scale(1.2);
}

.milestone-step.completed .milestone-dot {
  background: var(--success);
}

.milestone-step.rejected .milestone-dot {
  background: #64748b;
}

.milestone-label {
  font-size: 0.65rem;
  color: var(--text2);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.milestone-step.active .milestone-label {
  color: var(--text);
}

.milestone-step.completed .milestone-label {
  color: var(--success);
}

/* ACTION CENTER MINIMALIST */
.action-panel-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  transition: all 0.2s;
  outline: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
}

.action-panel-input:focus {
  border-color: var(--accent);
  background: var(--bg2);
}

.journal-entry-minimal {
  padding: 20px 0;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  position: relative;
}

/* Vertical Timeline Line */
.journal-entry-minimal::before {
  content: '';
  position: absolute;
  left: 110px;
  /* Aligned with the center of the gap */
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
  opacity: 0.3;
}

.journal-entry-minimal:last-child::before {
  height: 20px;
  /* End the line at the last dot */
}

.journal-entry-time {
  font-size: 0.72rem;
  color: var(--text2);
  text-align: right;
  padding-right: 12px;
}

.journal-entry-content {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text);
  position: relative;
}

/* Timeline Dot */
.journal-entry-content::before {
  content: '';
  position: absolute;
  left: -28px;
  /* Positioned on the vertical line */
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
  z-index: 2;
}

.journal-status-badge {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 8px;
}

.journal-age-tag {
  font-size: 0.65rem;
  color: #ef4444;
  font-weight: 700;
  margin-top: 4px;
}

/* SUBSCRIBER COCKPIT SPECIFIC JOURNAL */
.sub-journal-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 32px;
  padding: 24px 0;
  position: relative;
}

.sub-journal-card::before {
  content: '';
  position: absolute;
  left: 120px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
  opacity: 0.2;
}

.sub-journal-card:last-child::before {
  height: 24px;
}

.sub-journal-dot {
  position: absolute;
  left: -37.5px;
  /* Aligned with the line */
  top: 10px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 15px var(--accent-glow);
  z-index: 5;
  border: 2px solid var(--bg);
}

.sub-journal-time-col {
  text-align: right;
  padding-right: 16px;
}

.sub-journal-content-col {
  position: relative;
}

/* CUSTOM CHECKBOXES */
.lead-checkbox,
#selectAllCheckbox {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background-color: var(--bg);
  border: 2px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
}

.lead-checkbox:hover,
#selectAllCheckbox:hover {
  border-color: var(--text2);
}

.lead-checkbox:checked,
#selectAllCheckbox:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.lead-checkbox:checked::after,
#selectAllCheckbox:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 6px;
  width: 4px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.alarm-bar {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 165, 0, 0.06);
  border: 1px solid rgba(255, 165, 0, 0.15);
  border-radius: 8px;
  padding: 6px 15px;
  margin-right: 20px;
  /* Moves entire bar further left from clock */
}

.alarm-bar-label {
  display: flex;
  align-items: center;
  font-size: 1rem;
  flex-shrink: 0;
  padding-right: 12px;
  border-right: 1px solid rgba(255, 165, 0, 0.2);
}

.alarm-bar-items {
  display: flex;
  align-items: center;
  /* Center arrows vertically */
  gap: 8px;
  overflow-x: auto;
  flex: 1;
  padding: 8px 4px;
  /* More vertical padding to allow scaling/vibration without clipping */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 165, 0, 0.3) transparent;
}

.alarm-nav-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  transition: all 0.2s;
  flex-shrink: 0;
  cursor: pointer;
}

.alarm-nav-btn:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: scale(1.1);
}

.alarm-nav-btn:disabled {
  opacity: 0.2;
  cursor: not-allowed;
}

.alarm-bar-items::-webkit-scrollbar {
  height: 3px;
}

.alarm-bar-items::-webkit-scrollbar-thumb {
  background: rgba(255, 165, 0, 0.3);
  border-radius: 4px;
}

.alarm-bar-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s;
  font-size: 0.8rem;
}

.alarm-bar-chip:hover {
  background: var(--bg3);
  border-color: rgba(255, 165, 0, 0.3);
  transform: translateY(-1px);
}

.alarm-bar-chip-due {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.08);
}

.alarm-bar-chip-due:hover {
  border-color: #ef4444;
}

.alarm-bar-chip-time {
  font-weight: 700;
  color: #ffa500;
  font-size: 0.78rem;
}

.alarm-bar-chip-due .alarm-bar-chip-time {
  color: #ef4444;
}

.alarm-bar-chip-overdue {
  border-color: rgba(239, 68, 68, 0.5) !important;
  background: rgba(239, 68, 68, 0.12) !important;
  animation: overduePulse 2s infinite;
}

@keyframes overduePulse {

  0%,
  100% {
    box-shadow: none;
  }

  50% {
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
  }
}

#lead-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
}

.alarm-bar-chip-name {
  color: var(--text);
  font-weight: 500;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alarm-bar-chip-close {
  background: transparent;
  border: none;
  color: var(--text2);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0 2px;
  opacity: 0.5;
  transition: 0.2s;
  flex-shrink: 0;
}

.alarm-bar-chip-close:hover {
  color: #ef4444;
  opacity: 1;
}

/* Compact Alarm Emoji Button */
.alarm-emoji-btn {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.alarm-emoji-btn:hover {
  background: rgba(255, 165, 0, 0.1);
  border-color: rgba(255, 165, 0, 0.4);
}

.alarm-emoji-btn.active {
  background: rgba(255, 165, 0, 0.15);
  border-color: #ffa500;
  box-shadow: 0 0 8px rgba(255, 165, 0, 0.25);
}

/* Compact Inline Alarm Fields Row */
.inline-alarm-compact {
  display: flex;
  gap: 8px;
  align-items: center;
  background: rgba(255, 165, 0, 0.05);
  border: 1px solid rgba(255, 165, 0, 0.15);
  border-radius: 8px;
  padding: 8px;
  animation: alarmFieldsSlide 0.2s ease-out;
}

@keyframes alarmFieldsSlide {
  from {
    opacity: 0;
    max-height: 0;
    padding: 0 8px;
  }

  to {
    opacity: 1;
    max-height: 60px;
    padding: 8px;
  }
}

.alarm-input {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
}

.alarm-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
}

/* Fix for date/time input color scheme in dark mode */
.alarm-input::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
}

/* ===== TOAST NOTIFICATIONS ===== */
.toast-notification {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  color: var(--text);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  min-width: 300px;
  max-width: 420px;
  animation: toastSlideIn 0.3s ease-out;
  backdrop-filter: blur(10px);
}

.toast-success {
  border-left: 4px solid #22c55e;
}

.toast-error {
  border-left: 4px solid #ef4444;
}

.toast-info {
  border-left: 4px solid var(--accent);
}

.toast-alarm {
  border-left: 4px solid #ffa500;
  background: linear-gradient(135deg, var(--bg2), rgba(255, 165, 0, 0.08));
  box-shadow: 0 8px 32px rgba(255, 165, 0, 0.15);
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toastSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(40px);
  }
}

/* DROPDOWN MENU */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
  min-width: 200px;
  display: none;
  z-index: 1000;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.dropdown-menu.show {
  display: block;
}

.dropdown-menu a {
  display: block;
  padding: 12px 16px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.85rem;
  transition: background 0.2s;
}

.dropdown-menu a:hover {
  background: var(--bg3);
}

/* ALARM VIBRATION */
@keyframes alarmVibrate {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.02) rotate(-0.5deg);
  }

  50% {
    transform: scale(1) rotate(0.5deg);
  }

  75% {
    transform: scale(1.02) rotate(-0.5deg);
  }

  100% {
    transform: scale(1);
  }
}

.alarm-vibrate {
  animation: alarmVibrate 0.6s ease-in-out infinite;
  border-color: #ef4444 !important;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.4) !important;
  z-index: 10;
}

.main-content>.alarm-bar,
.top-status-row .alarm-bar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--bg2);
  border: 1px solid rgba(255, 165, 0, 0.18);
  border-radius: 12px;
  padding: 14px 16px;
  margin: -18px 0 28px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.top-status-row .alarm-bar {
  width: auto;
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
}

.main-content>.alarm-bar .alarm-bar-label,
.top-status-row .alarm-bar .alarm-bar-label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
  padding-right: 16px;
  border-right: 0;
}

.main-content>.alarm-bar .alarm-bar-label strong,
.top-status-row .alarm-bar .alarm-bar-label strong {
  display: block;
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.2;
}

.main-content>.alarm-bar .alarm-bar-label small,
.top-status-row .alarm-bar .alarm-bar-label small {
  display: block;
  color: var(--text2);
  font-size: 0.72rem;
  margin-top: 2px;
}

.main-content>.alarm-bar .alarm-bar-items,
.top-status-row .alarm-bar .alarm-bar-items {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 2px;
  flex: 1;
}

.alarm-bar-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  transition: 0.18s ease;
  white-space: nowrap;
}

.alarm-bar-chip:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 165, 0, 0.35);
}

.alarm-bar-chip-due {
  border-color: rgba(239, 68, 68, 0.38);
  background: rgba(239, 68, 68, 0.08);
}

.alarm-bar-chip-time {
  color: #ffa500;
  font-size: 0.76rem;
  font-weight: 800;
}

.alarm-bar-chip-due .alarm-bar-chip-time {
  color: #ef4444;
}

.alarm-bar-chip-name {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alarm-bar-chip-close {
  background: transparent;
  border: 0;
  color: var(--text2);
  cursor: pointer;
  opacity: 0.65;
  padding: 0 2px;
}

.alarm-bar-chip-close:hover {
  color: #ef4444;
  opacity: 1;
}

.status-badge {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  /* Standardized width for balance */
  text-align: center;
}

.filter-badge {
  background: var(--accent);
  color: white;
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 100px;
  margin-left: 6px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#badge-Bekliyor {
  background: #e11d6b;
  color: #fff;
  box-shadow: 0 0 10px rgba(225, 29, 107, 0.35);
}

#badge-Tekrar-aranacak {
  background: #ffa500;
  color: #111827;
  box-shadow: 0 0 10px rgba(255, 165, 0, 0.35);
}

#badge-Whatsapp-a-gecildi {
  background: #25d366;
  color: #fff;
  box-shadow: 0 0 10px rgba(37, 211, 102, 0.35);
}

.notifications-feed {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: none;
  overflow-y: auto;
}

.notif-card {
  display: grid;
  grid-template-columns: 12px 1fr 60px;
  gap: 12px;
  padding: 10px 4px;
  cursor: pointer;
  transition: all 0.2s;
  align-items: start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.notif-card:hover {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  transform: translateX(-2px) !important;
  padding-left: 10px;
}

.notif-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notif-content h4 {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  margin: 0;
  opacity: 0.9;
}

.notif-status-pill {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

.date-display {
  font-size: 0.85rem;
  color: var(--text2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--bg2);
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  white-space: nowrap;
}

.clock-date {
  opacity: 0.8;
}

.clock-time {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 85px;
  /* Fixed width to prevent jitter */
  text-align: right;
  border-left: 1px solid var(--border);
  padding-left: 12px;
}

.top-status-row .date-display {
  margin-left: auto;
  display: flex;
  align-items: center;
  align-self: center;
  gap: 12px;
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 0.78rem;
  color: var(--text2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transform: translateY(-4px);
}

.top-status-row .clock-time {
  color: var(--text);
  font-weight: 800;
  border-left: 0;
  padding-left: 12px;
  min-width: 50px;
  text-align: right;
}

.leads-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  table-layout: auto;
  /* Changed back to auto for better content fit */
  min-width: 1100px;
  /* Ensures table doesn't get too squeezed */
}

.table-container {
  overflow-x: auto;
  /* Allows horizontal scroll on small screens */
}

.leads-table th,
.leads-table td {
  padding: 12px 15px;
  vertical-align: middle;
}

/* Header styling */
.leads-table th {
  background: var(--bg2);
  color: var(--text2);
  font-size: 0.75rem;
  font-weight: 700;
  border-bottom: 2px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
}

/* Row styling */
.leads-table td {
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text);
  transition: background 0.2s;
  padding: 16px 15px;
  /* Consistent padding */
}

/* Specific column treatments */
.leads-table th:nth-child(1),
.leads-table td:nth-child(1) {
  width: 50px;
  text-align: center;
}

/* Checkbox */
.leads-table th:nth-child(2),
.leads-table td:nth-child(2) {
  width: 180px;
}

/* Tarih */
.leads-table th:nth-child(3),
.leads-table td:nth-child(3) {
  width: 160px;
}

/* Ad Soyad */
.leads-table th:nth-child(4),
.leads-table td:nth-child(4) {
  width: 200px;
}

/* İletişim */
.leads-table th:nth-child(5),
.leads-table td:nth-child(5) {
  min-width: 250px;
}

/* Hedef/Beklenti */
.leads-table th:nth-child(6),
.leads-table td:nth-child(6) {
  width: 140px;
  text-align: center;
}

/* Platformlar */
.leads-table th:nth-child(7),
.leads-table td:nth-child(7) {
  width: 180px;
  text-align: center;
}

/* Temsilci */
.leads-table th:nth-child(8),
.leads-table td:nth-child(8) {
  width: 160px;
  text-align: center;
}

/* Durum */

.leads-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.notif-card h4 {
  font-size: 0.82rem;
  font-weight: 500;
  margin-bottom: 1px;
  color: var(--text);
  opacity: 0.9;
}

.notif-note-box {
  font-size: 0.75rem;
  color: var(--text2);
  opacity: 0.6;
  margin: 0;
  line-height: 1.4;
}

.notif-meta {
  text-align: right;
}

.notif-time-badge {
  font-size: 0.75rem;
  color: var(--text2);
  display: block;
}

.notif-performer-tag {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.5;
}

.journal-performer {
  color: var(--accent);
  margin-left: 8px;
  font-weight: 600;
  font-size: 0.7rem;
  background: var(--accent-glow);
  padding: 2px 6px;
  border-radius: 4px;
}

/* MODAL OVERLAY & CONTENT */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  display: none;
  /* Will be flex via JS or style override */
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

/* COCKPIT AND REQUEST WORKFLOW */
.subscriber-cockpit-shell,
.requests-dashboard,
.request-detail-shell {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.subscriber-hero-card,
.request-detail-hero,
.request-detail-section,
.request-update-card,
.requests-list-shell,
.subscriber-panel-card,
.subscriber-platform-shell {
  border-radius: 10px;
}

.subscriber-hero-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 32px;
}

.subscriber-hero-card h1 {
  font-size: 2rem;
  margin-bottom: 10px;
}

.subscriber-hero-card p {
  color: var(--text2);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 760px;
}

.subscriber-hero-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.subscriber-hero-side {
  min-width: 180px;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.subscriber-hero-side span,
.subscriber-hero-side small {
  color: var(--text2);
}

.subscriber-hero-side strong {
  font-size: 1.8rem;
  font-family: 'Outfit', sans-serif;
}

.subscriber-tabs-shell {
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 16px;
  top: 0;
}

.subscriber-metric-grid,
.request-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.subscriber-metric-card,
.request-summary-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.subscriber-metric-card span,
.request-summary-card span {
  color: var(--text2);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.subscriber-metric-card strong,
.request-summary-card strong {
  font-size: 1.7rem;
  font-family: 'Outfit', sans-serif;
}

.subscriber-metric-card small,
.request-summary-card small {
  color: var(--text2);
  font-size: 0.78rem;
  line-height: 1.5;
}

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

.subscriber-grid.wide-right {
  grid-template-columns: 0.95fr 1.05fr;
}

.subscriber-card-header,
.requests-list-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

.subscriber-card-header h3,
.requests-list-toolbar h3 {
  font-size: 1.06rem;
}

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

.action-card-btn.compact {
  min-height: 112px;
  padding: 16px;
  border-radius: 14px;
  gap: 10px;
}

.action-card-btn.compact span {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.95rem;
  font-weight: 800;
}

.subscriber-platform-list,
.subscriber-request-list,
.sub-timeline-list,
.subscriber-report-list,
.subscriber-insight-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.subscriber-platform-card,
.subscriber-request-card,
.sub-timeline-item,
.subscriber-report-row,
.subscriber-insight-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 16px;
}

.subscriber-platform-top,
.subscriber-request-card-top,
.subscriber-report-row,
.request-list-card-top,
.request-list-footer,
.subscriber-request-footer,
.sub-timeline-meta,
.request-timeline-meta,
.request-detail-actions-inline,
.subscriber-platform-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.subscriber-platform-state,
.subscriber-request-footer,
.sub-timeline-meta span:last-child,
.sub-timeline-by {
  color: var(--text2);
  font-size: 0.76rem;
}

.subscriber-platform-card p,
.subscriber-request-desc,
.request-list-desc,
.request-description-box,
.request-timeline-note,
.subscriber-insight-item span {
  color: var(--text2);
  line-height: 1.6;
  font-size: 0.85rem;
}

.platform-pill,
.request-mini-pill,
.request-badge-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.request-badge-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.66rem;
  font-weight: 900;
}

.subscriber-request-title,
.request-list-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text);
}

.subscriber-request-subtitle,
.request-list-subtitle {
  margin-top: 3px;
  color: var(--text2);
  font-size: 0.74rem;
}

.request-form-grid,
.request-update-grid,
.request-detail-grid,
.request-info-grid,
.subscriber-platform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.request-info-grid label,
.request-field-label {
  display: block;
  color: var(--text2);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}

.request-info-grid strong {
  font-size: 0.92rem;
}

.request-field-input {
  width: 100%;
  min-height: 42px;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #11151d;
  color: var(--text);
  font: inherit;
  outline: none;
}

select.request-field-input,
select.action-panel-input {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text2) 50%),
    linear-gradient(135deg, var(--text2) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.request-field-input option,
.action-panel-input option,
select option {
  background: #11151d;
  color: #ffffff;
}

.request-field-input.textarea {
  min-height: 124px;
  resize: vertical;
}

.request-update-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.request-search-input {
  min-width: 240px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  outline: none;
}

.request-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.request-filter-chip {
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text2);
  font-size: 0.76rem;
  font-weight: 800;
}

.request-filter-chip.active {
  color: var(--text);
  border-color: rgba(234, 179, 8, 0.35);
  background: rgba(234, 179, 8, 0.08);
}

.requests-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 20px;
}

.requests-list-shell {
  padding: 24px;
  min-height: 640px;
}

.request-list-scroll,
.request-timeline-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}

.request-list-scroll {
  max-height: 540px;
}

.request-timeline-list {
  max-height: 360px;
}

.request-list-card {
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: 0.2s ease;
}

.request-list-card:hover,
.request-list-card.active {
  border-color: rgba(234, 179, 8, 0.34);
  background: rgba(234, 179, 8, 0.06);
}

.request-list-badges,
.request-detail-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.request-detail-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 24px;
}

.request-detail-label {
  color: var(--text2);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.request-detail-hero h3 {
  font-size: 1.35rem;
  margin-bottom: 12px;
}

.request-detail-side {
  min-width: 140px;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text2);
}

.request-detail-side strong {
  font-size: 0.9rem;
  color: var(--text);
}

.request-detail-section,
.request-update-card {
  padding: 24px;
}

.request-detail-section-title {
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 16px;
}

.request-description-box {
  margin-top: 16px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.request-detail-actions-inline {
  margin-top: 14px;
}

.request-timeline-item {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.request-timeline-item.internal {
  border-color: rgba(239, 68, 68, 0.18);
  background: rgba(239, 68, 68, 0.04);
}

.request-timeline-by,
.request-timeline-type {
  font-size: 0.74rem;
  font-weight: 800;
}

.request-timeline-meta span:last-child,
.request-timeline-type {
  color: var(--text2);
}

.request-update-grid.two-column {
  margin-top: 14px;
}

.empty-state-card {
  min-height: 180px;
  border-radius: 16px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.015);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  color: var(--text2);
  padding: 24px;
}

.empty-state-card strong {
  color: var(--text);
}

.subscriber-platform-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.subscriber-report-row strong,
.subscriber-insight-item strong,
.subscriber-platform-line strong {
  font-size: 0.88rem;
  color: var(--text);
}

.report-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

@media (max-width: 1380px) {

  .requests-layout,
  .request-detail-grid,
  .subscriber-grid,
  .subscriber-grid.wide-right {
    grid-template-columns: 1fr;
  }

  .subscriber-metric-grid,
  .request-summary-grid,
  .subscriber-platform-grid,
  .request-info-grid,
  .request-form-grid,
  .request-update-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {

  .subscriber-hero-card,
  .request-detail-hero,
  .requests-list-toolbar,
  .subscriber-card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .subscriber-metric-grid,
  .request-summary-grid,
  .subscriber-action-grid,
  .subscriber-platform-grid,
  .request-info-grid,
  .request-form-grid,
  .request-update-grid {
    grid-template-columns: 1fr;
  }

  .request-search-input {
    min-width: 100%;
  }
}

/* SUBSCRIBER SIMPLE COCKPIT */
.sub-simple-shell {
  gap: 14px;
}

.sub-simple-hero {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: 14px;
  background: var(--bg2);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.sub-simple-hero-main h1 {
  font-size: 1.65rem;
  margin-bottom: 8px;
}

.sub-simple-hero-main p {
  color: var(--text2);
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 700px;
}

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

.sub-simple-strip-item {
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.sub-simple-strip-item span {
  display: block;
  color: var(--text2);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}

.sub-simple-strip-item strong {
  display: block;
  font-size: 0.95rem;
  color: var(--text);
}

.sub-simple-tabs {
  padding: 4px;
  border-radius: 12px;
  background: var(--bg2);
}

.sub-simple-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.sub-simple-section-grid.single-column {
  grid-template-columns: 1fr;
}

.sub-simple-card {
  padding: 18px;
  border-radius: 14px;
  background: var(--bg2);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.sub-simple-card-wide {
  grid-column: 1 / -1;
}

.sub-simple-shell .glass-card:hover,
.sub-simple-card:hover,
.sub-simple-hero:hover {
  transform: none;
  box-shadow: none;
  background: var(--bg2);
  border-color: rgba(255, 255, 255, 0.06);
}

.sub-simple-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.sub-simple-card h3 {
  font-size: 0.85rem;
}

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

.sub-simple-action-btn {
  text-align: left;
  padding: 14px 15px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text);
  transition: 0.18s ease;
}

.sub-simple-action-btn:hover {
  border-color: rgba(234, 179, 8, 0.24);
  background: rgba(255, 255, 255, 0.035);
}

.sub-simple-action-btn strong {
  display: block;
  font-size: 0.88rem;
  margin-bottom: 5px;
}

.sub-simple-action-btn span {
  display: block;
  color: var(--text2);
  font-size: 0.76rem;
  line-height: 1.5;
}

.sub-simple-info-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sub-simple-info-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sub-simple-info-row:last-child {
  border-bottom: 0;
}

.sub-simple-info-row span {
  color: var(--text2);
  font-size: 0.82rem;
}

.sub-simple-info-row strong {
  color: var(--text);
  font-size: 0.88rem;
}

.sub-simple-platform-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.sub-simple-request-row,
.sub-simple-timeline-row,
.sub-simple-empty {
  padding: 13px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.sub-simple-request-row+.sub-simple-request-row,
.sub-simple-timeline-row+.sub-simple-timeline-row {
  margin-top: 10px;
}

.sub-simple-request-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
}

.sub-simple-request-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}

.sub-simple-request-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sub-simple-request-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  color: var(--text2);
  font-size: 0.74rem;
  text-align: right;
}

.sub-simple-timeline-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 0.76rem;
}

.sub-simple-timeline-top span {
  color: var(--text2);
}

.sub-simple-timeline-note {
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.55;
}

.sub-simple-timeline-by {
  margin-top: 8px;
  color: var(--text2);
  font-size: 0.75rem;
}

.sub-simple-empty {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
  color: var(--text2);
}

.sub-simple-empty strong {
  color: var(--text);
}

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

.sub-simple-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.sub-simple-step strong {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(234, 179, 8, 0.16);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
}

.sub-simple-step span {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
}

.sub-simple-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.sub-simple-helper-text {
  margin-top: 6px;
  color: var(--text2);
  font-size: 0.82rem;
  line-height: 1.55;
}

@media (max-width: 1100px) {

  .sub-simple-section-grid,
  .sub-simple-hero-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {

  .sub-simple-action-grid,
  .sub-simple-form-grid,
  .sub-simple-steps,
  .sub-simple-request-row {
    grid-template-columns: 1fr;
  }

  .sub-simple-request-side {
    align-items: flex-start;
    text-align: left;
  }

  .sub-simple-card-head,
  .sub-simple-timeline-top {
    flex-direction: column;
    align-items: flex-start;
  }
}

.request-field-input::placeholder,
.request-search-input::placeholder {
  color: var(--text2);
}

/* COCKPIT V3 */
.cockpit-v3 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

.cockpit-v3-hero,
.cockpit-v3-panel,
.cockpit-v3-tabs {
  background: var(--bg2);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.cockpit-v3-hero,
.cockpit-v3-panel {
  padding: 24px;
}

.cockpit-v3-hero {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cockpit-v3-hero-copy h1 {
  font-size: 1.7rem;
  margin-bottom: 8px;
}

.cockpit-v3-hero-copy p {
  color: var(--text2);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 680px;
}

.cockpit-v3-eyebrow,
.cockpit-v3-label {
  color: var(--text2);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.45px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.cockpit-v3-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cockpit-v3-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.cockpit-v3-summary-item {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.cockpit-v3-summary-item span {
  display: block;
  color: var(--text2);
  font-size: 0.72rem;
  margin-bottom: 6px;
}

.cockpit-v3-summary-item strong {
  display: block;
  color: var(--text);
  font-size: 0.95rem;
}

.cockpit-v3-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
}

.cockpit-v3-tab {
  flex: 1;
  min-height: 40px;
  border-radius: 10px;
  background: transparent;
  color: var(--text2);
  font-size: 0.82rem;
  font-weight: 800;
}

.cockpit-v3-tab.active {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.cockpit-v3-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: 16px;
}

.cockpit-v3-panel-wide {
  grid-column: 1 / -1;
}

.cockpit-v3-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.cockpit-v3-panel h3 {
  font-size: 1rem;
}

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

.cockpit-v3-template-btn,
.cockpit-v3-choice {
  text-align: left;
  padding: 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text);
  transition: 0.18s ease;
}

.cockpit-v3-template-btn:hover,
.cockpit-v3-choice:hover {
  border-color: rgba(234, 179, 8, 0.24);
  background: rgba(255, 255, 255, 0.03);
}

.cockpit-v3-choice.active {
  border-color: rgba(234, 179, 8, 0.32);
  background: rgba(234, 179, 8, 0.08);
}

.cockpit-v3-template-btn strong,
.cockpit-v3-choice strong {
  display: block;
  font-size: 0.88rem;
  margin-bottom: 5px;
}

.cockpit-v3-template-btn span,
.cockpit-v3-choice span {
  display: block;
  color: var(--text2);
  font-size: 0.76rem;
  line-height: 1.45;
}

.cockpit-v3-fact-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cockpit-v3-fact-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cockpit-v3-fact-row:last-child {
  border-bottom: 0;
}

.cockpit-v3-fact-row span {
  color: var(--text2);
  font-size: 0.8rem;
}

.cockpit-v3-fact-row strong {
  color: var(--text);
  font-size: 0.86rem;
}

.cockpit-v3-channel-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.cockpit-v3-channel-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.cockpit-v3-request-row,
.cockpit-v3-timeline-row,
.cockpit-v3-empty {
  padding: 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.cockpit-v3-request-row+.cockpit-v3-request-row,
.cockpit-v3-timeline-row+.cockpit-v3-timeline-row {
  margin-top: 10px;
}

.cockpit-v3-request-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
}

.cockpit-v3-request-title {
  font-size: 0.9rem;
  font-weight: 800;
  margin-bottom: 7px;
}

.cockpit-v3-request-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--text2);
  font-size: 0.75rem;
}

.cockpit-v3-request-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  color: var(--text2);
  font-size: 0.74rem;
  text-align: right;
}

.cockpit-v3-timeline-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 0.76rem;
}

.cockpit-v3-timeline-top span,
.cockpit-v3-timeline-by {
  color: var(--text2);
}

.cockpit-v3-timeline-note {
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.55;
}

.cockpit-v3-timeline-by {
  margin-top: 8px;
  font-size: 0.74rem;
}

.cockpit-v3-empty {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 120px;
  color: var(--text2);
}

.cockpit-v3-empty strong {
  color: var(--text);
}

.cockpit-v3-single {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cockpit-v3-helper {
  margin-top: 6px;
  color: var(--text2);
  font-size: 0.82rem;
  line-height: 1.55;
}

.cockpit-v3-form-block+.cockpit-v3-form-block {
  margin-top: 16px;
}

.cockpit-v3-form-label {
  display: block;
  color: var(--text2);
  font-size: 0.76rem;
  font-weight: 800;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

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

.cockpit-v3-choice-grid.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cockpit-v3-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.cockpit-v3-submit-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.cockpit-v3 .request-field-input {
  background: #11151d;
  border-color: rgba(255, 255, 255, 0.08);
  min-height: 48px;
  font-size: 0.9rem;
}

.cockpit-v3 .request-field-input:focus {
  border-color: rgba(234, 179, 8, 0.34);
}

@media (max-width: 1100px) {

  .cockpit-v3-grid,
  .cockpit-v3-summary-strip,
  .cockpit-v3-choice-grid,
  .cockpit-v3-choice-grid.compact,
  .cockpit-v3-form-grid,
  .cockpit-v3-template-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {

  .cockpit-v3-tabs,
  .cockpit-v3-hero-actions,
  .cockpit-v3-panel-head,
  .cockpit-v3-timeline-top,
  .cockpit-v3-request-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .cockpit-v3-request-row {
    display: flex;
  }

  .cockpit-v3-request-side {
    align-items: flex-start;
    text-align: left;
  }

  .cockpit-v3-tab {
    width: 100%;
  }
}

/* COCKPIT V4 */
.cockpit-v4-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
  gap: 20px;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  align-items: start;
}

.cockpit-v4-main,
.cockpit-v4-side-sticky {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cockpit-v4-side-sticky {
  position: sticky;
  top: 18px;
}

.cockpit-v4-hero,
.cockpit-v4-tabs,
.cockpit-v4-panel,
.cockpit-v4-side-card {
  background: linear-gradient(180deg, rgba(19, 26, 36, 0.98) 0%, rgba(14, 18, 26, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 20px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}

.cockpit-v4-hero,
.cockpit-v4-panel,
.cockpit-v4-side-card {
  padding: 24px;
}

.cockpit-v4-hero {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cockpit-v4-eyebrow,
.cockpit-v4-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.cockpit-v4-hero-copy h1 {
  font-size: clamp(1.7rem, 2vw, 2.2rem);
  margin-bottom: 10px;
}

.cockpit-v4-hero-copy p {
  color: var(--text2);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 760px;
}

.cockpit-v4-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cockpit-v4-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.cockpit-v4-summary-item {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.cockpit-v4-summary-item span,
.cockpit-v4-metric-card span,
.cockpit-v4-fact-card span,
.cockpit-v4-platform-metrics span,
.cockpit-v4-week-labels span,
.cockpit-v4-step-head span:last-child,
.cockpit-v4-insight-row span:last-child {
  color: var(--text2);
  font-size: 0.76rem;
}

.cockpit-v4-summary-item strong,
.cockpit-v4-metric-card strong,
.cockpit-v4-fact-card strong,
.cockpit-v4-platform-metrics strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 1rem;
}

.cockpit-v4-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
}

.cockpit-v4-tab {
  flex: 1;
  min-height: 44px;
  border-radius: 12px;
  background: transparent;
  color: #94a3b8;
  font-size: 0.84rem;
  font-weight: 800;
}

.cockpit-v4-tab.active {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.cockpit-v4-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cockpit-v4-panel-head,
.cockpit-v4-side-head,
.cockpit-v4-platform-top,
.cockpit-v4-request-row,
.cockpit-v4-timeline-top,
.cockpit-v4-step-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.cockpit-v4-panel h3,
.cockpit-v4-side-card h3 {
  font-size: 1.05rem;
}

.cockpit-v4-helper {
  margin-top: 6px;
  color: var(--text2);
  font-size: 0.84rem;
  line-height: 1.65;
  max-width: 700px;
}

.cockpit-v4-quick-grid,
.cockpit-v4-facts,
.cockpit-v4-choice-grid,
.cockpit-v4-metric-grid {
  display: grid;
  gap: 12px;
}

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

.cockpit-v4-facts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cockpit-v4-quick-card,
.cockpit-v4-fact-card,
.cockpit-v4-choice,
.cockpit-v4-request-row,
.cockpit-v4-timeline-row,
.cockpit-v4-empty,
.cockpit-v4-step-panel,
.cockpit-v4-platform-card,
.cockpit-v4-metric-card,
.cockpit-v4-step-locked {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  background: rgba(255, 255, 255, 0.02);
}

.cockpit-v4-quick-card,
.cockpit-v4-choice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  text-align: left;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.cockpit-v4-quick-card:hover,
.cockpit-v4-choice:hover {
  transform: translateY(-1px);
  border-color: rgba(248, 250, 252, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

.cockpit-v4-choice {
  width: 100%;
  --choice-color: #f8fafc;
}

.cockpit-v4-choice.active {
  border-color: color-mix(in srgb, var(--choice-color) 48%, transparent);
  background: color-mix(in srgb, var(--choice-color) 12%, rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--choice-color) 24%, transparent);
}

.cockpit-v4-quick-icon,
.cockpit-v4-choice-icon,
.cockpit-v4-step-index,
.cockpit-v4-platform-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.6px;
}

.cockpit-v4-quick-icon,
.cockpit-v4-choice-icon {
  width: 46px;
  height: 46px;
}

.cockpit-v4-choice-icon {
  background: color-mix(in srgb, var(--choice-color) 14%, rgba(255, 255, 255, 0.02));
  color: var(--choice-color);
  border-color: color-mix(in srgb, var(--choice-color) 28%, transparent);
}

.cockpit-v4-quick-copy,
.cockpit-v4-choice-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cockpit-v4-quick-copy strong,
.cockpit-v4-choice-copy strong {
  font-size: 0.92rem;
}

.cockpit-v4-quick-copy span,
.cockpit-v4-choice-copy span {
  color: var(--text2);
  font-size: 0.78rem;
  line-height: 1.55;
}

.cockpit-v4-fact-card {
  padding: 16px;
}

.cockpit-v4-request-row,
.cockpit-v4-timeline-row,
.cockpit-v4-empty {
  padding: 16px;
}

.cockpit-v4-request-row+.cockpit-v4-request-row,
.cockpit-v4-timeline-row+.cockpit-v4-timeline-row {
  margin-top: 10px;
}

.cockpit-v4-request-main {
  min-width: 0;
}

.cockpit-v4-request-title {
  font-size: 0.94rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.cockpit-v4-request-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cockpit-v4-request-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  color: var(--text2);
  font-size: 0.74rem;
  text-align: right;
}

.cockpit-v4-timeline-top {
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.78rem;
}

.cockpit-v4-timeline-note {
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.6;
}

.cockpit-v4-timeline-by {
  margin-top: 8px;
  color: var(--text2);
  font-size: 0.76rem;
}

.cockpit-v4-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 132px;
  text-align: center;
  color: var(--text2);
}

.cockpit-v4-empty strong {
  color: var(--text);
}

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

.cockpit-v4-step-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.018);
  color: #94a3b8;
}

.cockpit-v4-step-pill span {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.72rem;
  font-weight: 900;
}

.cockpit-v4-step-pill strong {
  font-size: 0.82rem;
}

.cockpit-v4-step-pill.active {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.cockpit-v4-step-panel {
  padding: 18px;
}

.cockpit-v4-step-panel+.cockpit-v4-step-panel {
  margin-top: 12px;
}

.cockpit-v4-step-head {
  align-items: flex-start;
  margin-bottom: 14px;
}

.cockpit-v4-step-index {
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.cockpit-v4-step-head strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

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

.cockpit-v4-choice-grid.platform-first {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.cockpit-v4-step-locked {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cockpit-v4-step-locked strong {
  font-size: 0.88rem;
}

.cockpit-v4-step-locked span {
  color: var(--text2);
  font-size: 0.78rem;
  line-height: 1.55;
}

.cockpit-v4-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.cockpit-v4-form-full {
  grid-column: 1 / -1;
}

.cockpit-v4-form-label {
  display: block;
  margin-bottom: 8px;
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.cockpit-v4 .request-field-input,
.cockpit-v4-shell .request-field-input {
  min-height: 50px;
  font-size: 0.92rem;
  background: #11151d;
  border-color: rgba(255, 255, 255, 0.08);
}

.cockpit-v4 .request-field-input:focus,
.cockpit-v4-shell .request-field-input:focus {
  border-color: rgba(255, 255, 255, 0.18);
}

.cockpit-v4-submit-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.cockpit-v4-side {
  min-width: 0;
}

.cockpit-v4-side-hero {
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.18) 0%, rgba(15, 23, 42, 0.98) 72%);
}

.cockpit-v4-side-head {
  align-items: flex-start;
  margin-bottom: 16px;
}

.cockpit-v4-side-pill,
.cockpit-v4-growth-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 900;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.cockpit-v4-side-pill.is-up,
.cockpit-v4-growth-badge.is-up {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.24);
}

.cockpit-v4-side-pill.is-down,
.cockpit-v4-growth-badge.is-down {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.24);
}

.cockpit-v4-metric-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 18px;
}

.cockpit-v4-metric-card {
  padding: 16px;
}

.cockpit-v4-trend-chart {
  padding: 12px 0 0;
}

.cockpit-v4-sparkline {
  display: block;
  width: 100%;
  height: 92px;
}

.cockpit-v4-week-labels {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.cockpit-v4-week-labels span {
  text-align: center;
}

.cockpit-v4-platform-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cockpit-v4-platform-card {
  padding: 16px;
}

.cockpit-v4-platform-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cockpit-v4-platform-badge {
  width: 42px;
  height: 42px;
}

.cockpit-v4-platform-title strong {
  display: block;
  font-size: 0.92rem;
}

.cockpit-v4-platform-title span {
  color: var(--text2);
  font-size: 0.76rem;
}

.cockpit-v4-platform-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 6px;
}

.cockpit-v4-platform-chart .cockpit-v4-sparkline {
  height: 72px;
}

.cockpit-v4-insight-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cockpit-v4-insight-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cockpit-v4-insight-row strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.88rem;
}

.cockpit-v4-insight-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  margin-top: 5px;
  flex: 0 0 auto;
}

.cockpit-v4-insight-dot.is-up {
  background: #22c55e;
}

.cockpit-v4-insight-dot.is-info {
  background: #38bdf8;
}

.cockpit-v4-insight-dot.is-warn {
  background: #f59e0b;
}

.cockpit-v4-step-panel.is-hidden {
  display: block;
}

@media (max-width: 1320px) {
  .cockpit-v4-shell {
    grid-template-columns: 1fr;
  }

  .cockpit-v4-side-sticky {
    position: static;
  }
}

@media (max-width: 920px) {

  .cockpit-v4-summary-strip,
  .cockpit-v4-facts,
  .cockpit-v4-choice-grid,
  .cockpit-v4-choice-grid.platform-first,
  .cockpit-v4-choice-grid.compact,
  .cockpit-v4-form-grid,
  .cockpit-v4-metric-grid,
  .cockpit-v4-quick-grid,
  .cockpit-v4-step-strip,
  .cockpit-v4-platform-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {

  .cockpit-v4-tabs,
  .cockpit-v4-hero-actions,
  .cockpit-v4-panel-head,
  .cockpit-v4-side-head,
  .cockpit-v4-platform-top,
  .cockpit-v4-timeline-top,
  .cockpit-v4-request-row,
  .cockpit-v4-step-head,
  .cockpit-v4-submit-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .cockpit-v4-request-side {
    align-items: flex-start;
    text-align: left;
  }

  .cockpit-v4-tab {
    width: 100%;
  }

  .cockpit-v4-platform-title {
    align-items: flex-start;
  }
}

/* COCKPIT V5 */
.cockpit-v5-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
  gap: 22px;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  align-items: start;
}

.cockpit-v5-main,
.cockpit-v5-side-sticky,
.cockpit-v5-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cockpit-v5-side-sticky {
  position: sticky;
  top: 18px;
}

.cockpit-v5-hero,
.cockpit-v5-tabs,
.cockpit-v5-panel,
.cockpit-v5-side-card {
  background: linear-gradient(180deg, rgba(17, 22, 30, 0.96) 0%, rgba(12, 16, 22, 0.96) 100%);
  border-radius: 22px;
}

.cockpit-v5-hero,
.cockpit-v5-panel,
.cockpit-v5-side-card {
  padding: 24px;
}

.cockpit-v5-hero,
.cockpit-v5-panel,
.cockpit-v5-side-card {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

.cockpit-v5-hero,
.cockpit-v5-panel,
.cockpit-v5-side-card {
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.cockpit-v5-shell,
.cockpit-v5-shell button,
.cockpit-v5-shell strong,
.cockpit-v5-shell h1,
.cockpit-v5-shell h3 {
  color: var(--text);
}

.cockpit-v5-eyebrow,
.cockpit-v5-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #9ca3af;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.cockpit-v5-hero {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cockpit-v5-hero-copy h1 {
  font-size: clamp(1.72rem, 2vw, 2.15rem);
  margin-bottom: 10px;
}

.cockpit-v5-hero-copy p,
.cockpit-v5-helper,
.cockpit-v5-timeline-by,
.cockpit-v5-info-card span,
.cockpit-v5-note-block span,
.cockpit-v5-summary-item span,
.cockpit-v5-metric-card span,
.cockpit-v5-platform-title span,
.cockpit-v5-platform-metrics span,
.cockpit-v5-week-labels span,
.cockpit-v5-step-head span:last-child,
.cockpit-v5-recommendation-row span:last-child {
  color: var(--text2);
}

.cockpit-v5-hero-copy p {
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 760px;
}

.cockpit-v5-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cockpit-v5-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.cockpit-v5-summary-item,
.cockpit-v5-step-pill,
.cockpit-v5-metric-card,
.cockpit-v5-platform-card,
.cockpit-v5-recommendation-row,
.cockpit-v5-request-row,
.cockpit-v5-timeline-row,
.cockpit-v5-empty,
.cockpit-v5-step-panel {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
}

.cockpit-v5-summary-item {
  padding: 14px 16px;
}

.cockpit-v5-summary-item strong,
.cockpit-v5-info-card strong,
.cockpit-v5-note-block strong,
.cockpit-v5-metric-card strong,
.cockpit-v5-platform-metrics strong {
  display: block;
  margin-top: 6px;
  font-size: 1rem;
  color: var(--text);
}

.cockpit-v5-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.025);
}

.cockpit-v5-tab {
  flex: 1;
  min-height: 44px;
  border-radius: 12px;
  background: transparent;
  color: #cbd5e1;
  font-size: 0.84rem;
  font-weight: 800;
}

.cockpit-v5-tab.active {
  background: rgba(255, 255, 255, 0.06);
}

.cockpit-v5-panel-head,
.cockpit-v5-side-head,
.cockpit-v5-request-row,
.cockpit-v5-timeline-top,
.cockpit-v5-platform-top,
.cockpit-v5-step-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.cockpit-v5-panel-head,
.cockpit-v5-side-head {
  align-items: flex-start;
  margin-bottom: 14px;
}

.cockpit-v5-panel h3,
.cockpit-v5-side-card h3 {
  font-size: 1.03rem;
}

.cockpit-v5-helper {
  font-size: 0.84rem;
  line-height: 1.62;
}

.cockpit-v5-overview-strip,
.cockpit-v5-quick-grid,
.cockpit-v5-choice-grid,
.cockpit-v5-step-strip,
.cockpit-v5-metric-grid,
.cockpit-v5-platform-metrics {
  display: grid;
  gap: 12px;
}

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

.cockpit-v5-overview-pill,
.cockpit-v5-metric-card,
.cockpit-v5-platform-card,
.cockpit-v5-request-row,
.cockpit-v5-timeline-row,
.cockpit-v5-empty,
.cockpit-v5-step-panel,
.cockpit-v5-recommendation-row,
.cockpit-v5-recommendation-hero {
  padding: 16px;
}

.cockpit-v5-overview-pill {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
}

.cockpit-v5-overview-pill span {
  color: var(--text2);
  font-size: 0.77rem;
}

.cockpit-v5-overview-pill strong {
  display: block;
  margin-top: 6px;
  font-size: 1rem;
}

.cockpit-v5-panel-accent {
  background: linear-gradient(180deg, rgba(25, 37, 53, 0.96) 0%, rgba(12, 16, 22, 0.96) 100%);
}

.cockpit-v5-inline-badge,
.cockpit-v5-side-pill,
.cockpit-v5-growth-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 11px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 900;
}

.cockpit-v5-inline-badge.is-loading {
  background: rgba(148, 163, 184, 0.14);
  color: #cbd5e1;
}

.cockpit-v5-inline-badge.is-live,
.cockpit-v5-side-pill.is-up,
.cockpit-v5-growth-badge.is-up {
  background: rgba(34, 197, 94, 0.14);
  color: #4ade80;
}

.cockpit-v5-side-pill.is-down,
.cockpit-v5-growth-badge.is-down {
  background: rgba(239, 68, 68, 0.14);
  color: #f87171;
}

.cockpit-v5-recommendation-list,
.cockpit-v5-insight-list,
.cockpit-v5-platform-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cockpit-v5-recommendation-hero {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.035);
  margin: 4px 0 14px;
}

.cockpit-v5-recommendation-hero strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1rem;
}

.cockpit-v5-recommendation-hero span:last-child {
  color: var(--text2);
  line-height: 1.65;
}

.cockpit-v5-recommendation-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cockpit-v5-recommendation-row strong,
.cockpit-v5-insight-row strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.9rem;
}

.cockpit-v5-recommendation-icon,
.cockpit-v5-quick-icon,
.cockpit-v5-choice-icon,
.cockpit-v5-step-index,
.cockpit-v5-platform-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.cockpit-v5-recommendation-icon,
.cockpit-v5-quick-icon,
.cockpit-v5-choice-icon,
.cockpit-v5-step-index,
.cockpit-v5-platform-badge {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 1.15rem;
}

.cockpit-v5-recommendation-row.is-warn .cockpit-v5-recommendation-icon {
  background: rgba(245, 158, 11, 0.12);
}

.cockpit-v5-recommendation-row.is-info .cockpit-v5-recommendation-icon {
  background: rgba(56, 189, 248, 0.12);
}

.cockpit-v5-recommendation-row.is-up .cockpit-v5-recommendation-icon {
  background: rgba(34, 197, 94, 0.12);
}

.cockpit-v5-quick-grid {
  grid-template-columns: 1fr;
}

.cockpit-v5-quick-card,
.cockpit-v5-choice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.018);
  color: var(--text);
  transition: background 0.18s ease, transform 0.18s ease;
}

.cockpit-v5-quick-card:hover,
.cockpit-v5-choice:hover {
  background: rgba(255, 255, 255, 0.032);
  transform: translateY(-1px);
}

.cockpit-v5-choice {
  width: 100%;
  --choice-color: #f8fafc;
}

.cockpit-v5-choice.active {
  background: color-mix(in srgb, var(--choice-color) 11%, rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--choice-color) 26%, transparent);
}

.cockpit-v5-choice-icon {
  color: var(--choice-color);
  background: color-mix(in srgb, var(--choice-color) 14%, rgba(255, 255, 255, 0.03));
}

.cockpit-v5-quick-copy,
.cockpit-v5-choice-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cockpit-v5-quick-copy strong,
.cockpit-v5-choice-copy strong {
  font-size: 0.85rem;
}

.cockpit-v5-quick-copy span,
.cockpit-v5-choice-copy span,
.cockpit-v5-step-locked span {
  color: var(--text2);
  font-size: 0.82rem;
  line-height: 1.6;
}

.cockpit-v5-request-row+.cockpit-v5-request-row,
.cockpit-v5-timeline-row+.cockpit-v5-timeline-row {
  margin-top: 10px;
}

.cockpit-v5-request-title {
  font-size: 0.94rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.cockpit-v5-request-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cockpit-v5-request-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  color: var(--text2);
  font-size: 0.74rem;
  text-align: right;
}

.cockpit-v5-timeline-top {
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.78rem;
}

.cockpit-v5-timeline-note {
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.6;
}

.cockpit-v5-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 132px;
  text-align: center;
  color: var(--text2);
}

.cockpit-v5-step-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.cockpit-v5-step-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: #cbd5e1;
}

.cockpit-v5-step-pill span {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 900;
}

.cockpit-v5-step-pill strong {
  font-size: 0.82rem;
}

.cockpit-v5-step-pill.active {
  background: rgba(255, 255, 255, 0.028);
}

.cockpit-v5-step-head {
  align-items: flex-start;
  margin-bottom: 14px;
}

.cockpit-v5-step-head strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.cockpit-v5-choice-grid {
  grid-template-columns: 1fr;
}

.cockpit-v5-choice-grid.platform-first {
  grid-template-columns: 1fr;
}

.cockpit-v5-choice-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cockpit-v5-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.cockpit-v5-form-full {
  grid-column: 1 / -1;
}

.cockpit-v5-form-label {
  display: block;
  margin-bottom: 8px;
  color: #9ca3af;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.cockpit-v5-shell .request-field-input {
  min-height: 50px;
  background: #141a23;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.92rem;
}

.cockpit-v5-shell .request-field-input:focus {
  border-color: rgba(255, 255, 255, 0.12);
}

.cockpit-v5-submit-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.cockpit-v5-metric-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 16px;
}

.cockpit-v5-trend-chart {
  padding-top: 8px;
}

.cockpit-v5-sparkline {
  display: block;
  width: 100%;
  height: 92px;
}

.cockpit-v5-week-labels {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.cockpit-v5-week-labels span {
  text-align: center;
  font-size: 0.72rem;
}

.cockpit-v5-platform-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cockpit-v5-platform-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 14px 0 6px;
}

.cockpit-v5-platform-chart .cockpit-v5-sparkline {
  height: 72px;
}

.cockpit-v5-insight-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cockpit-v5-insight-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 6px;
  flex: 0 0 auto;
}

.cockpit-v5-insight-dot.is-up {
  background: #22c55e;
}

.cockpit-v5-insight-dot.is-info {
  background: #38bdf8;
}

.cockpit-v5-insight-dot.is-warn {
  background: #f59e0b;
}

@media (max-width: 1320px) {
  .cockpit-v5-shell {
    grid-template-columns: 1fr;
  }

  .cockpit-v5-side-sticky {
    position: static;
  }
}

@media (max-width: 960px) {

  .cockpit-v5-overview-strip,
  .cockpit-v5-quick-grid,
  .cockpit-v5-choice-grid,
  .cockpit-v5-choice-grid.platform-first,
  .cockpit-v5-choice-grid.compact,
  .cockpit-v5-step-strip,
  .cockpit-v5-form-grid,
  .cockpit-v5-metric-grid,
  .cockpit-v5-platform-metrics,
  .cockpit-v5-summary-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {

  .cockpit-v5-tabs,
  .cockpit-v5-hero-actions,
  .cockpit-v5-panel-head,
  .cockpit-v5-side-head,
  .cockpit-v5-request-row,
  .cockpit-v5-request-side,
  .cockpit-v5-timeline-top,
  .cockpit-v5-platform-top,
  .cockpit-v5-step-head,
  .cockpit-v5-submit-row {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

.cockpit-v5-tab {
  width: 100%;
}

/* COCKPIT V6 */
.cockpit-v6-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(320px, 0.92fr);
  gap: 28px;
  align-items: start;
}

.cockpit-v6-main,
.cockpit-v6-side,
.cockpit-v6-content,
.cockpit-v6-side-sticky,
.cockpit-v6-quick-list,
.cockpit-v6-list,
.cockpit-v6-timeline-list,
.cockpit-v6-signal-list,
.cockpit-v6-channel-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cockpit-v6-shell,
.cockpit-v6-shell button,
.cockpit-v6-shell strong,
.cockpit-v6-shell h1,
.cockpit-v6-shell h3 {
  letter-spacing: 0;
  color: var(--text);
}

.cockpit-v6-hero,
.cockpit-v6-panel,
.cockpit-v6-side-card {
  background: var(--bg2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.cockpit-v6-hero,
.cockpit-v6-panel,
.cockpit-v6-side-card,
.cockpit-v6-step-card,
.cockpit-v6-choice,
.cockpit-v6-quick-action,
.cockpit-v6-list-row,
.cockpit-v6-timeline-row,
.cockpit-v6-summary-chip,
.cockpit-v6-review-card,
.cockpit-v6-empty,
.cockpit-v6-signal-main,
.cockpit-v6-signal-row,
.cockpit-v6-channel-row {
  box-shadow: none;
}

.cockpit-v6-kicker,
.cockpit-v6-label,
.cockpit-v6-helper,
.cockpit-v6-timeline-by,
.cockpit-v6-list-side span,
.cockpit-v6-hero-pill span,
.cockpit-v6-side-metrics span,
.cockpit-v6-week-labels span,
.cockpit-v6-channel-main span,
.cockpit-v6-generated-title span,
.cockpit-v6-review-card span,
.cockpit-v6-summary-chip span,
.cockpit-v6-step-indicator,
.cockpit-v6-signal-row span:last-child {
  color: var(--text2);
}

.cockpit-v6-kicker,
.cockpit-v6-label,
.cockpit-v6-step-indicator {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.cockpit-v6-hero {
  padding: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015));
}

.cockpit-v6-hero-top,
.cockpit-v6-panel-head,
.cockpit-v6-step-actions,
.cockpit-v6-list-row,
.cockpit-v6-list-side,
.cockpit-v6-timeline-top,
.cockpit-v6-tabs,
.cockpit-v6-channel-row,
.cockpit-v6-channel-main,
.cockpit-v6-channel-side {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cockpit-v6-hero-copy h1 {
  font-size: clamp(1.9rem, 2.5vw, 2.45rem);
  margin-top: 8px;
}

.cockpit-v6-hero-copy p,
.cockpit-v6-helper,
.cockpit-v6-step-card p,
.cockpit-v6-choice-copy span,
.cockpit-v6-quick-copy span,
.cockpit-v6-signal-main p,
.cockpit-v6-signal-row span,
.cockpit-v6-empty span,
.cockpit-v6-timeline-note {
  color: var(--text2);
  font-size: 0.93rem;
  line-height: 1.6;
}

.cockpit-v6-hero-actions,
.cockpit-v6-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cockpit-v6-hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.cockpit-v6-hero-pill,
.cockpit-v6-generated-title,
.cockpit-v6-review-card,
.cockpit-v6-empty {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
}

.cockpit-v6-hero-pill {
  padding: 14px 16px;
}

.cockpit-v6-hero-pill strong {
  display: block;
  margin-top: 6px;
  font-size: 1rem;
}

.cockpit-v6-tabs {
  gap: 6px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
}

.cockpit-v6-tab {
  flex: 1;
  padding: 8px 12px;
  border-radius: 10px;
  background: transparent;
  color: var(--text2);
  font-weight: 700;
  font-size: 0.92rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.cockpit-v6-tab.active {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.cockpit-v6-panel,
.cockpit-v6-side-card {
  padding: 24px;
}

.cockpit-v6-panel h3,
.cockpit-v6-side-card h3,
.cockpit-v6-step-card h3 {
  font-size: 1.12rem;
}

.cockpit-v6-panel-accent {
  background: linear-gradient(180deg, rgba(20, 184, 166, 0.08), rgba(255, 255, 255, 0.02));
}

.cockpit-v6-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
}

.cockpit-v6-badge.is-live,
.cockpit-v6-badge.is-up {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.22);
}

.cockpit-v6-badge.is-loading,
.cockpit-v6-badge.is-warn {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.22);
}

.cockpit-v6-badge.is-down {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.22);
}

.cockpit-v6-signal-main,
.cockpit-v6-signal-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.cockpit-v6-signal-main.is-warn,
.cockpit-v6-signal-row.is-warn {
  border-color: rgba(245, 158, 11, 0.18);
}

.cockpit-v6-signal-main.is-info,
.cockpit-v6-signal-row.is-info {
  border-color: rgba(59, 130, 246, 0.18);
}

.cockpit-v6-signal-main.is-up,
.cockpit-v6-signal-row.is-up {
  border-color: rgba(34, 197, 94, 0.18);
}

.cockpit-v6-signal-main strong,
.cockpit-v6-signal-row strong {
  display: block;
  margin-bottom: 6px;
}

.cockpit-v6-signal-icon,
.cockpit-v6-signal-mini,
.cockpit-v6-quick-icon,
.cockpit-v6-choice-icon,
.cockpit-v6-channel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.cockpit-v6-signal-icon,
.cockpit-v6-quick-icon,
.cockpit-v6-choice-icon,
.cockpit-v6-channel-icon {
  width: 42px;
  height: 42px;
  font-size: 1.18rem;
}

.cockpit-v6-signal-mini {
  width: 34px;
  height: 34px;
  font-size: 1rem;
}

.cockpit-v6-grid.two-up {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.cockpit-v6-quick-action,
.cockpit-v6-choice {
  width: 100%;
  text-align: left;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.cockpit-v6-quick-action:hover,
.cockpit-v6-choice:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.11);
  transform: translateY(-1px);
}

.cockpit-v6-choice.active {
  border-color: rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
}

.cockpit-v6-choice.active .cockpit-v6-choice-icon {
  background: rgba(255, 255, 255, 0.08);
  color: var(--choice-color);
}

.cockpit-v6-quick-copy,
.cockpit-v6-choice-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cockpit-v6-list {
  gap: 0;
}

.cockpit-v6-list-row,
.cockpit-v6-timeline-row,
.cockpit-v6-channel-row {
  padding: 16px 0;
}

.cockpit-v6-list-row+.cockpit-v6-list-row,
.cockpit-v6-timeline-row+.cockpit-v6-timeline-row,
.cockpit-v6-channel-row+.cockpit-v6-channel-row,
.cockpit-v6-signal-row+.cockpit-v6-signal-row {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.cockpit-v6-list-main,
.cockpit-v6-list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cockpit-v6-list-main {
  flex-direction: column;
  align-items: flex-start;
}

.cockpit-v6-inline-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.76rem;
  font-weight: 700;
}

.cockpit-v6-inline-pill-icon {
  font-size: 0.92rem;
}

.cockpit-v6-list-main strong,
.cockpit-v6-timeline-note,
.cockpit-v6-channel-main strong {
  color: var(--text);
}

.cockpit-v6-list-side {
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.cockpit-v6-timeline-top {
  align-items: baseline;
}

.cockpit-v6-timeline-note {
  margin-top: 6px;
}

.cockpit-v6-timeline-by {
  margin-top: 8px;
  font-size: 0.82rem;
}

.cockpit-v6-empty {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cockpit-v6-step-card {
  margin-top: 18px;
  padding: 24px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.cockpit-v6-step-card h3 {
  margin: 8px 0 6px;
}

.cockpit-v6-choice-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 18px;
}

.cockpit-v6-choice-list.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cockpit-v6-summary-chip {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.cockpit-v6-summary-chip.active {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.045);
}

.cockpit-v6-form-label {
  display: block;
  margin: 18px 0 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}

.cockpit-v6-shell .request-field-input {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.025);
  color: var(--text);
  padding: 14px 16px;
}

.cockpit-v6-shell .request-field-input.textarea {
  min-height: 150px;
  resize: vertical;
}

.cockpit-v6-shell .request-field-input:focus {
  border-color: rgba(234, 179, 8, 0.4);
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.08);
}

.cockpit-v6-generated-title {
  padding: 14px 16px;
  margin-top: 18px;
}

.cockpit-v6-generated-title strong {
  display: block;
  margin-top: 6px;
}

.cockpit-v6-step-actions {
  margin-top: 18px;
}

.cockpit-v6-review-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
  margin-top: 18px;
}

.cockpit-v6-review-card strong {
  display: block;
  margin-top: 6px;
  line-height: 1.5;
}

.cockpit-v6-review-card .full {
  grid-column: 1 / -1;
}

.cockpit-v6-side-sticky {
  position: sticky;
  top: 24px;
}

.cockpit-v6-side-highlight {
  margin-top: 18px;
}

.cockpit-v6-side-highlight span {
  display: block;
  color: var(--text2);
  font-size: 0.84rem;
}

.cockpit-v6-side-highlight strong {
  display: block;
  margin-top: 8px;
  font-size: 2rem;
}

.cockpit-v6-side-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.cockpit-v6-side-metrics strong {
  display: block;
  margin-top: 6px;
}

.cockpit-v6-chart-wrap {
  margin-top: 18px;
}

.cockpit-v6-sparkline {
  width: 100%;
  height: auto;
  display: block;
}

.cockpit-v6-week-labels {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.cockpit-v6-week-labels span {
  font-size: 0.74rem;
  text-align: center;
}

.cockpit-v6-channel-main {
  justify-content: flex-start;
  align-items: center;
}

.cockpit-v6-channel-main div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cockpit-v6-channel-side {
  align-items: flex-end;
  text-align: right;
}

.cockpit-v6-channel-chart {
  grid-column: 1 / -1;
}

.cockpit-v6-channel-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
}

.cockpit-v6-channel-chart .cockpit-v6-sparkline {
  height: 64px;
}

@media (max-width: 1180px) {
  .cockpit-v6-shell {
    grid-template-columns: 1fr;
  }

  .cockpit-v6-side-sticky {
    position: static;
  }
}

@media (max-width: 900px) {

  body.subscriber-logged-in .main-content,
  body.subscriber-logged-in .topbar,
  body.subscriber-logged-in .top-status-row {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body.subscriber-logged-in .topbar {
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  body.subscriber-logged-in #sub-header-welcome {
    border-left: 0 !important;
    padding-left: 0 !important;
  }

  .cockpit-v6-grid.two-up,
  .cockpit-v6-choice-list.compact,
  .cockpit-v6-hero-metrics,
  .cockpit-v6-review-card,
  .cockpit-v6-side-metrics {
    grid-template-columns: 1fr;
  }

  .cockpit-v6-hero-top,
  .cockpit-v6-panel-head,
  .cockpit-v6-list-row,
  .cockpit-v6-step-actions,
  .cockpit-v6-timeline-top,
  .cockpit-v6-channel-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .cockpit-v6-list-side,
  .cockpit-v6-channel-side {
    align-items: flex-start;
    text-align: left;
  }
}

@media (max-width: 640px) {

  body.subscriber-logged-in .main-content,
  body.subscriber-logged-in .topbar,
  body.subscriber-logged-in .top-status-row {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.subscriber-logged-in .top-status-row {
    min-height: 0;
    align-items: center;
  }

  body.subscriber-logged-in .date-display {
    gap: 8px;
    font-size: 0.72rem;
    transform: none;
  }

  body.subscriber-logged-in .sub-topbar-logo {
    width: 100%;
    justify-content: space-between;
  }

  body.subscriber-logged-in #sub-header-welcome {
    display: none;
  }

  .cockpit-v6-hero,
  .cockpit-v6-panel,
  .cockpit-v6-side-card,
  .cockpit-v6-step-card {
    padding: 18px;
    border-radius: 16px;
  }

  .cockpit-v6-tabs {
    overflow-x: auto;
  }

  .cockpit-v6-tab {
    min-width: 132px;
  }
}

/* OPERATIONS SYSTEM */
.operations-system {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.operations-system-hero {
  padding: 8px 0 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.operations-system-kicker,
.operations-system-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--text2);
}

.operations-system-hero-top,
.operations-system-panel-head,
.operations-system-row-top,
.operations-system-row-foot,
.operations-system-actions,
.operations-system-timeline-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.operations-system-hero-top h2 {
  font-size: clamp(1.9rem, 2.4vw, 2.6rem);
  margin: 10px 0 8px;
}

.operations-system-hero-top p,
.operations-system-copy,
.operations-system-row-sub,
.operations-system-row-note,
.operations-system-timeline-note,
.operations-system-empty span,
.operations-system-link-row span,
.operations-system-note-list span {
  color: var(--text2);
  line-height: 1.6;
}

.operations-system-hero-side {
  min-width: 170px;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--text2);
}

.operations-system-hero-side strong {
  color: var(--text);
  font-size: 1.5rem;
  font-family: 'Outfit', sans-serif;
}

.operations-system-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 20px;
  margin-top: 20px;
  color: var(--text2);
  font-size: 0.9rem;
}

.operations-system-meta strong {
  color: var(--text);
}

.operations-system-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr) 300px;
  gap: 40px;
  align-items: start;
}

.operations-system-queue,
.operations-system-detail,
.operations-system-rail {
  min-width: 0;
}

.operations-system-queue,
.operations-system-rail {
  position: sticky;
  top: 24px;
  align-self: start;
}

.operations-system-search {
  margin-top: 14px;
}

.operations-system-filters {
  margin-top: 14px;
}

.operations-system-owner-filter {
  margin-top: 12px;
}

.operations-system-list {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.operations-system-row {
  width: 100%;
  text-align: left;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: transparent;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: 0.2s ease;
}

.operations-system-row:hover,
.operations-system-row.active {
  color: var(--text);
}

.operations-system-row.active {
  padding-left: 14px;
  border-left: 2px solid var(--accent);
  background: rgba(234, 179, 8, 0.05);
}

.operations-system-row-top strong,
.operations-system-timeline-top strong,
.operations-system-link-row strong,
.operations-system-note-list strong,
.operations-system-facts strong {
  color: var(--text);
}

.operations-system-row-top span,
.operations-system-row-foot span,
.operations-system-timeline-top span,
.operations-system-timeline-type {
  color: var(--text2);
  font-size: 0.76rem;
}

.operations-system-row-badges,
.operations-system-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.operations-system-row-foot {
  align-items: center;
}

.operations-system-detail-hero,
.operations-system-section,
.operations-system-rail-section {
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.operations-system-detail-hero {
  padding-top: 0;
  border-top: 0;
}

.operations-system-detail h3,
.operations-system-rail h3,
.operations-system-queue h3 {
  font-size: 1.12rem;
}

.operations-system-actions {
  align-items: center;
  flex-wrap: wrap;
}

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

.operations-system-facts div,
.operations-system-note-list div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.operations-system-facts span {
  color: var(--text2);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.operations-system-timeline {
  display: flex;
  flex-direction: column;
}

.operations-system-timeline-item {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.operations-system-timeline-item.internal {
  opacity: 0.9;
}

.operations-system-timeline-item:last-child {
  border-bottom: 0;
}

.operations-system-link-list {
  display: flex;
  flex-direction: column;
}

.operations-system-link-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: inherit;
  text-decoration: none;
}

.operations-system-link-row:hover strong {
  color: var(--accent);
}

.operations-system-link-row:last-child {
  border-bottom: 0;
}

.operations-system-note-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.operations-system-empty {
  padding: 18px 0 0;
}

.operations-system-empty.large {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 1380px) {
  .operations-system-layout {
    grid-template-columns: 320px minmax(0, 1fr);
  }

  .operations-system-rail {
    grid-column: 1 / -1;
    position: static;
  }
}

@media (max-width: 980px) {

  .operations-system-layout,
  .operations-system-facts,
  .request-update-grid {
    grid-template-columns: 1fr;
  }

  .operations-system-queue {
    position: static;
  }

  .operations-system-hero-top,
  .operations-system-panel-head,
  .operations-system-row-top,
  .operations-system-row-foot,
  .operations-system-actions,
  .operations-system-timeline-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .operations-system-hero-side {
    text-align: left;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .operations-system {
    gap: 24px;
  }

  .operations-system-hero-top h2 {
    font-size: 1.72rem;
  }

  .operations-system-meta {
    grid-template-columns: 1fr;
  }
}

/* SUBSCRIBER WORKSPACE */
.subscriber-workspace-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: 48px;
  align-items: start;
}

.subscriber-workspace-main,
.subscriber-workspace-content {
  min-width: 0;
}

.subscriber-workspace-hero {
  padding: 8px 0 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.subscriber-workspace-kicker,
.subscriber-workspace-label,
.subscriber-workspace-step {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--text2);
}

.subscriber-workspace-hero-top,
.subscriber-workspace-section-head,
.subscriber-workspace-row,
.subscriber-workspace-row-main,
.subscriber-workspace-row-side,
.subscriber-workspace-actions,
.subscriber-workspace-composer-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.subscriber-workspace-hero h1 {
  font-size: clamp(2rem, 2.5vw, 2.8rem);
  margin: 10px 0 8px;
  font-family: 'Outfit', sans-serif;
}

.subscriber-workspace-hero p,
.subscriber-workspace-copy,
.subscriber-workspace-row-main span,
.subscriber-workspace-empty span,
.subscriber-workspace-choice-copy span,
.subscriber-workspace-generated span,
.subscriber-workspace-review span,
.subscriber-workspace-progress span,
.subscriber-workspace-plain-meta span {
  color: var(--text2);
  line-height: 1.6;
}

.subscriber-workspace-actions {
  align-items: center;
  flex-wrap: wrap;
}

.subscriber-workspace-note {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 18px;
  margin-top: 20px;
  color: var(--text2);
  font-size: 0.88rem;
}

.subscriber-workspace-note span {
  display: inline-flex;
  align-items: center;
}

.subscriber-workspace-tabs {
  display: flex;
  gap: 20px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 18px 0 0;
}

.subscriber-workspace-tab {
  background: transparent;
  color: var(--text2);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0 0 10px;
  border-bottom: 2px solid transparent;
  flex: 0 0 auto;
}

.subscriber-workspace-tab.active {
  color: var(--text);
  border-color: var(--accent);
}

.subscriber-workspace-section,
.subscriber-workspace-aside-section {
  padding: 28px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.subscriber-workspace-content .subscriber-workspace-section:first-child {
  border-top: 0;
}

.subscriber-workspace-section h3,
.subscriber-workspace-aside-section h3,
.subscriber-workspace-composer h3 {
  font-size: 1.18rem;
}

.subscriber-workspace-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px;
}

.subscriber-workspace-list {
  display: flex;
  flex-direction: column;
}

.subscriber-workspace-row {
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.subscriber-workspace-row:last-child {
  border-bottom: 0;
}

.subscriber-workspace-row-main {
  flex: 1;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.subscriber-workspace-row-main strong,
.subscriber-workspace-row-side strong,
.subscriber-workspace-generated strong,
.subscriber-workspace-review strong,
.subscriber-workspace-plain-meta strong {
  color: var(--text);
}

.subscriber-workspace-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.subscriber-workspace-inline-text {
  color: var(--text2);
  font-size: 0.84rem;
}

.subscriber-workspace-row-side {
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 6px;
}

.subscriber-workspace-link-row {
  color: inherit;
  text-decoration: none;
}

.subscriber-workspace-link-row:hover {
  color: var(--text);
}

.subscriber-workspace-link-row:hover strong {
  color: var(--accent);
}

.subscriber-workspace-empty {
  padding: 16px 0 0;
}

.subscriber-workspace-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 18px 0 0;
}

.subscriber-workspace-progress-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.subscriber-workspace-progress-items span {
  font-size: 0.88rem;
}

.subscriber-workspace-composer {
  padding: 18px 0 0;
}

.subscriber-workspace-choice-list {
  display: flex;
  flex-direction: column;
  margin-top: 18px;
}

.subscriber-workspace-choice {
  width: 100%;
  padding: 16px 0;
  text-align: left;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text);
}

.subscriber-workspace-choice:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.subscriber-workspace-choice:hover,
.subscriber-workspace-choice.active {
  color: var(--accent);
}

.subscriber-workspace-choice-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  text-align: center;
  font-size: 1.05rem;
}

.subscriber-workspace-choice-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.subscriber-workspace-generated {
  padding: 14px 0 0;
}

.subscriber-workspace-form-label {
  display: block;
  margin: 18px 0 8px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text);
}

.subscriber-workspace-shell .request-field-input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.015);
  color: var(--text);
  border-radius: 12px;
  padding: 14px 16px;
}

.subscriber-workspace-shell .request-field-input.textarea {
  min-height: 150px;
  resize: vertical;
}

.subscriber-workspace-shell .request-field-input:focus {
  border-color: rgba(234, 179, 8, 0.35);
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.08);
}

.subscriber-workspace-composer-actions {
  margin-top: 18px;
  align-items: center;
  flex-wrap: wrap;
}

.subscriber-workspace-review {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 18px;
}

.subscriber-workspace-review div,
.subscriber-workspace-plain-meta div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.subscriber-workspace-aside {
  position: sticky;
  top: 24px;
  min-width: 0;
  padding-left: 0;
}

.subscriber-workspace-plain-meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 14px;
}

@media (max-width: 1180px) {
  .subscriber-workspace-shell {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .subscriber-workspace-aside {
    position: static;
  }
}

@media (max-width: 900px) {
  .subscriber-workspace-split {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .subscriber-workspace-hero-top,
  .subscriber-workspace-section-head,
  .subscriber-workspace-row,
  .subscriber-workspace-composer-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .subscriber-workspace-row-side {
    align-items: flex-start;
    text-align: left;
  }
}

@media (max-width: 640px) {
  .subscriber-workspace-hero h1 {
    font-size: 1.85rem;
  }

  .subscriber-workspace-tabs {
    gap: 12px;
  }

  .subscriber-workspace-tab {
    font-size: 0.88rem;
    padding-bottom: 8px;
  }
}

/* MINIMAL PORTAL + OPERATIONS REDESIGN */
.portal-shell,
.ops-min {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  color: var(--text);
}

.portal-shell *,
.ops-min * {
  min-width: 0;
}

.portal-shell .btn-primary,
.ops-min .btn-primary {
  color: #111827;
  box-shadow: none;
}

.portal-shell .btn-ghost,
.ops-min .btn-ghost {
  border-color: rgba(255, 255, 255, 0.08);
  background: transparent;
  color: var(--text);
}

.portal-shell .btn-ghost:hover,
.ops-min .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.05);
}

.portal-header,
.ops-min-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px;
  padding: 4px 0 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.portal-header>div:first-child,
.ops-min-header>div:first-child {
  max-width: 720px;
}

.portal-header span,
.ops-min-header span,
.portal-section-head span,
.ops-min-section-head span {
  display: block;
  color: var(--text2);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.portal-header h1,
.ops-min-header h2 {
  margin: 8px 0;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.02;
  letter-spacing: 0;
}

.portal-header p,
.ops-min-header p,
.portal-list-row span,
.portal-link-row span,
.portal-choice small,
.portal-help p,
.ops-min-row-business,
.ops-min-row-note,
.ops-min-row-date,
.ops-min-row-owner small,
.ops-min-detail-head p,
.ops-min-timeline-row span,
.ops-min-timeline-row p,
.ops-min-drive-link span,
.ops-min-help p,
.ops-min-empty span {
  color: var(--text2);
  line-height: 1.55;
}

.portal-actions,
.ops-min-detail-actions,
.ops-min-filters,
.ops-min-stats,
.portal-status,
.ops-min-badges,
.portal-form-actions,
.ops-min-save {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.portal-status {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text2);
  font-size: 0.9rem;
}

.portal-status span,
.ops-min-stats span {
  white-space: nowrap;
}

.ops-min-stats {
  justify-content: flex-end;
  gap: 18px;
  color: var(--text2);
  font-size: 0.9rem;
}

.ops-min-stats strong {
  color: var(--text);
  font-size: 1.15rem;
}

.portal-tabs {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding: 18px 0 0;
}

.portal-tabs button {
  flex: 0 0 auto;
  padding: 0 0 10px;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text2);
  font-weight: 800;
  white-space: nowrap;
}

.portal-tabs button:hover,
.portal-tabs button.active {
  color: var(--text);
}

.portal-tabs button.active {
  border-color: var(--accent);
}

.portal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 52px;
  align-items: start;
}

.portal-main,
.portal-side,
.ops-min-queue,
.ops-min-detail,
.ops-min-context {
  min-width: 0;
}

.portal-side,
.ops-min-queue,
.ops-min-context {
  position: sticky;
  top: 24px;
  align-self: start;
}

.portal-side {
  padding-top: 24px;
}

.portal-side section+section,
.ops-min-context section+section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.portal-section,
.ops-min-section {
  padding: 28px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.portal-main .portal-section:first-child,
.ops-min-detail main .ops-min-section:first-child {
  padding-top: 24px;
}

.portal-section-head,
.ops-min-section-head {
  margin-bottom: 16px;
}

.portal-section-head h2,
.ops-min-section-head h3,
.ops-min-section-head h4 {
  margin-top: 6px;
  font-size: 1.15rem;
  line-height: 1.2;
}

.portal-list,
.portal-link-list,
.portal-choice-list,
.ops-min-list,
.ops-min-timeline,
.ops-min-drive-list {
  display: flex;
  flex-direction: column;
}

.portal-list-row,
.portal-link-row,
.ops-min-drive-link,
.ops-min-timeline-row {
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.portal-list-row,
.portal-link-row,
.ops-min-drive-link {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  color: inherit;
  text-decoration: none;
}

.portal-list-row strong,
.portal-link-row strong,
.ops-min-drive-link strong,
.ops-min-timeline-row strong,
.ops-min-facts strong,
.portal-empty strong,
.ops-min-empty strong {
  display: block;
  color: var(--text);
}

.portal-row-state {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 8px;
  text-align: right;
  flex: 0 0 auto;
}

.portal-row-state time {
  color: var(--text2);
  font-size: 0.78rem;
}

.portal-link-row:hover strong,
.ops-min-drive-link:hover strong {
  color: var(--accent);
}

.portal-choice {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  background: transparent;
  color: var(--text);
  text-align: left;
}

.portal-choice:hover,
.portal-choice.active {
  color: var(--accent);
}

.portal-choice.active {
  padding-left: 12px;
  border-left: 2px solid var(--accent);
}

.portal-choice>span:first-child {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.95rem;
}

.portal-choice div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.portal-form-note,
.portal-review-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  color: var(--text2);
}

.portal-form-note strong,
.portal-review-line span {
  color: var(--text);
}

.portal-form-actions {
  margin-top: 16px;
}

.portal-shell .request-field-input,
.ops-min .request-field-input,
.ops-min .request-search-input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
  color: var(--text);
  border-radius: 8px;
  padding: 13px 14px;
  box-shadow: none;
}

.portal-shell textarea.request-field-input,
.ops-min textarea.request-field-input {
  min-height: 140px;
  resize: vertical;
}

.portal-shell .request-field-input:focus,
.ops-min .request-field-input:focus,
.ops-min .request-search-input:focus {
  border-color: rgba(234, 179, 8, 0.42);
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.08);
}

.portal-shell select option,
.ops-min select option {
  background: #0f1115;
  color: #fff;
}

.portal-empty,
.ops-min-empty {
  padding: 18px 0;
  color: var(--text2);
}

.portal-empty span,
.ops-min-empty span {
  display: block;
  margin-top: 6px;
}

.portal-help {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 2px;
}

.ops-min-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ops-min-toolbar .ops-min-owner {
  grid-column: 1 / -1;
  max-width: 260px;
}

.ops-min-search {
  min-height: 44px;
}

.ops-min-filters {
  justify-content: flex-end;
}

.ops-min .request-filter-chip {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text2);
  border-radius: 999px;
  padding: 9px 12px;
  font-size: 0.78rem;
  font-weight: 800;
}

.ops-min .request-filter-chip:hover,
.ops-min .request-filter-chip.active {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.16);
}

.ops-min-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.ops-min-queue {
  padding-top: 24px;
}

.ops-min-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  background: transparent;
  color: var(--text);
  text-align: left;
}

.ops-min-row:hover,
.ops-min-row.active {
  color: var(--text);
}

.ops-min-row.active {
  padding-left: 12px;
  border-left: 2px solid var(--accent);
}

.ops-min-row-date {
  font-size: 0.72rem;
}

.ops-min-row strong {
  font-size: 0.85rem;
  line-height: 1.35;
}

.ops-min-row-business {
  font-size: 0.86rem;
}

.ops-min-row-note {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.82rem;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ops-min-row-meta,
.ops-min-row-owner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.ops-min-row-owner {
  width: 100%;
  justify-content: space-between;
}

.ops-min-detail {
  padding-top: 24px;
}

.ops-min-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ops-min-detail-head>div:first-child {
  max-width: 760px;
}

.ops-min-detail-head span {
  color: var(--text2);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ops-min-detail-head h3 {
  margin: 6px 0 8px;
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1.15;
}

.ops-min-badges {
  padding: 14px 0 4px;
}

.ops-min-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 42px;
  align-items: start;
}

.ops-min-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
}

.ops-min-facts div {
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  padding-top: 12px;
}

.ops-min-facts span {
  display: block;
  margin-bottom: 5px;
  color: var(--text2);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ops-min-timeline-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 18px;
}

.ops-min-timeline-row div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ops-min-update-row,
.ops-min-note-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.ops-min-note-grid {
  margin-top: 16px;
}

.ops-min-save {
  justify-content: flex-end;
  margin-top: 16px;
}

.ops-min-context {
  padding-top: 28px;
}

.ops-min-help {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ops-min-empty-large {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 1260px) {

  .ops-min-layout,
  .portal-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .portal-side,
  .ops-min-queue,
  .ops-min-context {
    position: static;
  }

  .ops-min-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0 20px;
  }
}

@media (max-width: 980px) {

  .portal-header,
  .ops-min-header,
  .ops-min-detail-head {
    flex-direction: column;
  }

  .ops-min-stats,
  .ops-min-filters {
    justify-content: flex-start;
  }

  .ops-min-toolbar,
  .ops-min-detail-grid {
    grid-template-columns: 1fr;
  }

  .ops-min-toolbar .ops-min-owner {
    max-width: none;
  }
}

@media (max-width: 680px) {

  .portal-header h1,
  .ops-min-header h2 {
    font-size: 1.9rem;
  }

  .portal-status,
  .ops-min-stats {
    gap: 10px 14px;
  }

  .portal-list-row,
  .portal-link-row,
  .portal-form-note,
  .portal-review-line,
  .ops-min-drive-link {
    flex-direction: column;
  }

  .portal-row-state {
    align-items: flex-start;
    text-align: left;
  }

  .ops-min-facts,
  .ops-min-update-row,
  .ops-min-note-grid,
  .ops-min-timeline-row {
    grid-template-columns: 1fr;
  }
}

/* PayTR SaaS panel: sade 3 sekmeli kontrol ekranı */
.paytr-top-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--paytr-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}

.paytr-top-tabs button {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--paytr-muted);
  padding: 9px 14px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.paytr-top-tabs button.is-active {
  background: rgba(255, 255, 255, 0.075);
  color: var(--paytr-text);
}

.paytr-metrics-compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.paytr-info-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--paytr-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--paytr-muted);
}

.paytr-info-strip strong {
  color: var(--paytr-text);
  white-space: nowrap;
}

.paytr-package-grid,
.paytr-automation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.paytr-package-card,
.paytr-automation-card {
  display: grid;
  gap: 14px;
  border: 1px solid var(--paytr-border);
  border-radius: 12px;
  background: var(--paytr-surface);
  padding: 16px;
}

.paytr-package-card header,
.paytr-automation-card header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.paytr-package-card h3,
.paytr-automation-header h3,
.paytr-automation-card h4 {
  margin: 0;
  color: var(--paytr-text);
}

.paytr-package-card p,
.paytr-package-card span,
.paytr-automation-header p,
.paytr-selected-item span,
.paytr-automation-item span,
.paytr-automation-item small,
.paytr-form-note {
  color: var(--paytr-muted);
}

.paytr-package-price {
  display: grid;
  gap: 2px;
}

.paytr-package-price strong {
  color: var(--paytr-text);
  font-size: 1.25rem;
}

.paytr-package-form,
.paytr-selected-list,
.paytr-automation-list {
  display: grid;
  gap: 8px;
}

.paytr-selected-item,
.paytr-automation-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--paytr-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}

.paytr-selected-item>div,
.paytr-automation-item>div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.paytr-selected-item strong,
.paytr-automation-item strong {
  color: var(--paytr-text);
}

.paytr-button-ghost {
  background: transparent;
  border-color: var(--paytr-border);
  color: var(--paytr-muted);
}

.paytr-button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.paytr-select-col {
  width: 38px;
  text-align: center;
}

.paytr-select-col input {
  width: 16px;
  height: 16px;
  accent-color: #ff7a1a;
}

.paytr-automation-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--paytr-border);
  border-radius: 12px;
  background: var(--paytr-surface);
}

.paytr-automation-card {
  min-height: 240px;
}

.paytr-automation-card header {
  align-items: center;
  margin-bottom: 2px;
}

.paytr-automation-card header span {
  color: var(--paytr-muted);
  font-weight: 800;
}

.paytr-form-note {
  margin: 0;
  font-size: .78rem;
  line-height: 1.45;
}

@media (max-width: 1120px) {

  .paytr-metrics-compact,
  .paytr-package-grid,
  .paytr-automation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {

  .paytr-metrics-compact,
  .paytr-package-grid,
  .paytr-automation-grid {
    grid-template-columns: 1fr;
  }

  .paytr-info-strip,
  .paytr-automation-header,
  .paytr-selected-item,
  .paytr-automation-item {
    align-items: stretch;
    flex-direction: column;
  }
}

/* HARD REDESIGN: SUBSCRIBER CLIENT OS + OPERATIONS DESK */
.subos,
.opsdesk {
  --surface-paper: #f7f8fb;
  --surface-ink: #111827;
  --surface-muted: #667085;
  --surface-line: rgba(17, 24, 39, 0.12);
  --surface-soft: rgba(17, 24, 39, 0.045);
  --surface-deep: #101828;
  --surface-teal: #0f766e;
  --surface-coral: #e11d48;
  width: 100%;
  min-height: calc(100vh - 120px);
  margin: -6px 0 0;
  padding: 30px;
  background: var(--surface-paper);
  color: var(--surface-ink);
  border-radius: 0;
}

.subos *,
.opsdesk * {
  min-width: 0;
}

.subos h1,
.subos h2,
.subos h3,
.subos h4,
.opsdesk h2,
.opsdesk h3,
.opsdesk h4 {
  color: inherit;
  letter-spacing: 0;
}

.subos p,
.opsdesk p {
  color: var(--surface-muted);
  line-height: 1.65;
}

.subos .btn-primary,
.opsdesk .btn-primary {
  background: var(--surface-ink);
  color: #fff;
  border: 1px solid var(--surface-ink);
  box-shadow: none;
}

.subos .btn-ghost,
.opsdesk .btn-ghost {
  background: transparent;
  color: var(--surface-ink);
  border: 1px solid var(--surface-line);
  box-shadow: none;
}

.subos .request-field-input,
.opsdesk .request-field-input,
.opsdesk .request-search-input {
  width: 100%;
  color: var(--surface-ink);
  background: #fff;
  border: 1px solid var(--surface-line);
  border-radius: 10px;
  padding: 13px 14px;
  box-shadow: none;
}

.subos .request-field-input:focus,
.opsdesk .request-field-input:focus,
.opsdesk .request-search-input:focus {
  border-color: rgba(15, 118, 110, 0.45);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
}

.subos textarea.request-field-input,
.opsdesk textarea.request-field-input {
  min-height: 150px;
  resize: vertical;
}

.subos select option,
.opsdesk select option {
  background: #fff;
  color: #111827;
}

.subos-hero,
.opsdesk-top {
  background: var(--surface-deep);
  color: #fff;
  padding: 32px;
  border-radius: 0;
}

.subos-hero p,
.opsdesk-top p {
  color: rgba(255, 255, 255, 0.72);
  max-width: 760px;
}

.subos-brand-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.subos-brand-line span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2dd4bf;
}

.subos-kicker,
.opsdesk-kicker {
  display: block;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
}

.subos-hero-grid,
.opsdesk-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;
}

.subos-hero h1,
.opsdesk-top h2 {
  font-size: clamp(2.6rem, 5vw, 5.8rem);
  line-height: 0.94;
  margin: 0 0 14px;
}

.subos-quick,
.opsdesk-focus-actions,
.opsdesk-filters,
.opsdesk-save,
.subos-flow-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.subos-quick {
  justify-content: flex-end;
}

.subos-status-line {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.68);
}

.subos-status-line strong {
  display: block;
  color: #fff;
  font-size: 0.95rem;
}

.subos-routes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--surface-line);
}

.subos-routes button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  align-items: start;
  min-height: 110px;
  padding: 22px 18px;
  background: transparent;
  color: var(--surface-muted);
  text-align: left;
  border-right: 1px solid var(--surface-line);
}

.subos-routes button:last-child {
  border-right: 0;
}

.subos-routes button span {
  grid-row: span 2;
  color: var(--surface-teal);
  font-weight: 900;
}

.subos-routes button strong {
  color: var(--surface-ink);
  font-size: 0.95rem;
}

.subos-routes button small {
  color: var(--surface-muted);
  line-height: 1.35;
}

.subos-routes button.active {
  background: #fff;
  color: var(--surface-ink);
  box-shadow: inset 0 -3px 0 var(--surface-teal);
}

.subos-layout {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 36px;
}

.subos-side {
  border-right: 1px solid var(--surface-line);
  padding: 34px 28px 34px 0;
}

.subos-side section+section {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--surface-line);
}

.subos-side span,
.subos-section-title span,
.opsdesk-queue-head span,
.opsdesk-lane-head span,
.opsdesk-right section>span,
.opsdesk-focus-head span,
.subos-empty-state>span {
  display: block;
  color: var(--surface-muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}

.subos-side h2 {
  font-size: 1.25rem;
  margin-bottom: 10px;
}

.subos-main {
  padding: 34px 0;
}

.subos-board+.subos-board {
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1px solid var(--surface-line);
}

.subos-section-title {
  margin-bottom: 22px;
}

.subos-section-title.compact {
  margin-top: 38px;
}

.subos-section-title h2 {
  font-size: clamp(1.6rem, 2.2vw, 2.35rem);
  margin-bottom: 8px;
}

.subos-feed,
.subos-request-list,
.subos-drive-grid,
.subos-choice-grid,
.opsdesk-feed,
.opsdesk-drive {
  display: flex;
  flex-direction: column;
}

.subos-feed-item {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 28px;
  padding: 22px 0;
  border-top: 1px solid var(--surface-line);
}

.subos-feed-item.latest {
  border-top: 2px solid var(--surface-ink);
}

.subos-feed-item time,
.subos-feed-item span,
.subos-request-row span,
.subos-request-row small,
.subos-drive-row small,
.subos-empty span {
  color: var(--surface-muted);
}

.subos-feed-item strong,
.subos-request-row strong,
.subos-drive-row strong {
  display: block;
  color: var(--surface-ink);
}

.subos-request-row,
.subos-drive-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  padding: 18px 0;
  border-top: 1px solid var(--surface-line);
  color: inherit;
  text-decoration: none;
}

.subos-drive-row {
  align-items: center;
}

.subos-drive-row>span:first-child {
  color: var(--surface-teal);
  font-weight: 900;
}

.subos-drive-row b {
  color: var(--surface-teal);
}

.subos-flow {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 42px;
}

.subos-stepper {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--surface-line);
}

.subos-stepper button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  background: transparent;
  color: var(--surface-muted);
  text-align: left;
}

.subos-stepper button span {
  color: var(--surface-teal);
  font-weight: 900;
}

.subos-stepper button strong {
  color: inherit;
}

.subos-stepper button.active strong,
.subos-stepper button.done strong {
  color: var(--surface-ink);
}

.subos-flow-main {
  max-width: 900px;
}

.subos-choice {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  width: 100%;
  padding: 18px 0;
  border-top: 1px solid var(--surface-line);
  background: transparent;
  color: var(--surface-ink);
  text-align: left;
}

.subos-choice>span:first-child {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-soft);
  border-radius: 50%;
  font-size: 1.25rem;
}

.subos-choice small {
  color: var(--surface-muted);
}

.subos-choice.active {
  padding-left: 14px;
  border-left: 4px solid var(--surface-teal);
  background: #fff;
}

.subos-generated-title,
.subos-review {
  margin-bottom: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--surface-line);
  border-bottom: 1px solid var(--surface-line);
}

.subos-generated-title span,
.subos-review span {
  display: block;
  color: var(--surface-muted);
}

.subos-generated-title strong {
  display: block;
  margin-top: 4px;
  color: var(--surface-ink);
  font-size: 1.2rem;
}

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

.subos-flow-actions {
  justify-content: flex-end;
  margin-top: 18px;
}

.subos-empty,
.opsdesk-empty {
  padding: 28px 0;
  color: var(--surface-muted);
}

.subos-empty strong,
.opsdesk-empty strong {
  display: block;
  color: var(--surface-ink);
  margin-bottom: 6px;
}

.subos-empty-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 520px;
}

.subos-empty-state h1 {
  font-size: clamp(2.5rem, 5vw, 5.4rem);
  line-height: 0.95;
  margin-bottom: 18px;
}

.opsdesk {
  padding-bottom: 44px;
}

.opsdesk-top {
  grid-template-columns: minmax(0, 1fr) minmax(330px, 460px);
  align-items: stretch;
}

.opsdesk-score {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.opsdesk-score div {
  padding: 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.opsdesk-score div:nth-child(2n) {
  border-right: 0;
}

.opsdesk-score div:nth-last-child(-n+2) {
  border-bottom: 0;
}

.opsdesk-score strong {
  display: block;
  color: #fff;
  font-size: 2.2rem;
  line-height: 1;
}

.opsdesk-score span {
  color: rgba(255, 255, 255, 0.68);
  font-weight: 800;
}

.opsdesk-command {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--surface-line);
}

.opsdesk-filters {
  justify-content: flex-end;
}

.opsdesk .request-filter-chip {
  background: transparent;
  color: var(--surface-muted);
  border: 1px solid var(--surface-line);
  border-radius: 999px;
  padding: 9px 12px;
  font-weight: 900;
}

.opsdesk .request-filter-chip.active,
.opsdesk .request-filter-chip:hover {
  background: var(--surface-ink);
  color: #fff;
  border-color: var(--surface-ink);
}

.opsdesk-owner {
  grid-column: 1 / -1;
  max-width: 280px;
}

.opsdesk-shell {
  display: grid;
  grid-template-columns: 370px minmax(0, 1fr);
  gap: 36px;
}

.opsdesk-queue {
  border-right: 1px solid var(--surface-line);
  padding: 30px 28px 30px 0;
}

.opsdesk-queue-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 16px;
}

.opsdesk-queue-head strong {
  color: var(--surface-ink);
}

.opsdesk-stream {
  display: flex;
  flex-direction: column;
}

.opsdesk-ticket {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 18px 0 18px 18px;
  background: transparent;
  border-top: 1px solid var(--surface-line);
  color: var(--surface-ink);
  text-align: left;
}

.opsdesk-ticket-mark {
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 4px;
}

.opsdesk-ticket.active {
  background: #fff;
  padding-right: 14px;
}

.opsdesk-ticket-date,
.opsdesk-ticket small,
.opsdesk-ticket p,
.opsdesk-ticket-footer em {
  color: var(--surface-muted);
}

.opsdesk-ticket strong {
  color: var(--surface-ink);
  font-size: 1rem;
}

.opsdesk-ticket p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.opsdesk-ticket-tags,
.opsdesk-ticket-footer,
.opsdesk-badge-line,
.opsdesk-focus-actions,
.opsdesk-save {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.opsdesk-ticket-footer {
  justify-content: space-between;
}

.opsdesk-focus {
  padding: 30px 0 0;
}

.opsdesk-focus-empty {
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.opsdesk-focus-empty h3 {
  font-size: clamp(2.2rem, 4vw, 4.4rem);
  line-height: 0.95;
  max-width: 720px;
}

.opsdesk-focus-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--surface-line);
}

.opsdesk-focus-head h3 {
  margin: 6px 0 10px;
  font-size: clamp(2rem, 3vw, 3.8rem);
  line-height: 0.98;
  max-width: 860px;
}

.opsdesk-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 38px;
}

.opsdesk-work,
.opsdesk-right {
  padding-top: 26px;
}

.opsdesk-meta-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--surface-line);
}

.opsdesk-meta-strip div {
  padding: 0 18px 18px 0;
}

.opsdesk-meta-strip span {
  display: block;
  color: var(--surface-muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}

.opsdesk-meta-strip strong {
  color: var(--surface-ink);
}

.opsdesk-badge-line {
  padding: 18px 0;
  border-bottom: 1px solid var(--surface-line);
}

.opsdesk-lane,
.opsdesk-editor,
.opsdesk-right section+section {
  padding: 28px 0;
  border-bottom: 1px solid var(--surface-line);
}

.opsdesk-lane-head {
  margin-bottom: 16px;
}

.opsdesk-lane-head h4,
.opsdesk-right h4 {
  font-size: 1.25rem;
}

.opsdesk-feed-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--surface-line);
}

.opsdesk-feed-row time,
.opsdesk-feed-row p,
.opsdesk-drive-row small {
  color: var(--surface-muted);
}

.opsdesk-feed-row strong,
.opsdesk-drive-row strong {
  color: var(--surface-ink);
}

.opsdesk-form-grid,
.opsdesk-note-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.opsdesk-note-grid {
  margin-top: 16px;
}

.opsdesk-save {
  justify-content: flex-end;
  margin-top: 16px;
}

.opsdesk-right {
  border-left: 1px solid var(--surface-line);
  padding-left: 28px;
}

.opsdesk-drive-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--surface-line);
  color: inherit;
  text-decoration: none;
}

.opsdesk-drive-row>span:first-child,
.opsdesk-drive-row b {
  color: var(--surface-teal);
  font-weight: 900;
}

@media (max-width: 1280px) {

  .subos-hero-grid,
  .opsdesk-top,
  .subos-layout,
  .opsdesk-shell,
  .opsdesk-detail-layout {
    grid-template-columns: 1fr;
  }

  .subos-side,
  .opsdesk-queue,
  .opsdesk-right {
    border-right: 0;
    border-left: 0;
    padding-right: 0;
    padding-left: 0;
  }

  .opsdesk-stream {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0 22px;
  }
}

@media (max-width: 900px) {

  .subos,
  .opsdesk {
    padding: 18px;
  }

  .subos-hero,
  .opsdesk-top {
    padding: 24px;
  }

  .subos-routes,
  .subos-status-line,
  .opsdesk-meta-strip,
  .opsdesk-score,
  .subos-review,
  .subos-flow,
  .opsdesk-command,
  .opsdesk-form-grid,
  .opsdesk-note-grid {
    grid-template-columns: 1fr;
  }

  .subos-routes button {
    border-right: 0;
    border-bottom: 1px solid var(--surface-line);
    min-height: 86px;
  }

  .subos-stepper {
    border-right: 0;
    border-bottom: 1px solid var(--surface-line);
    padding-bottom: 14px;
  }

  .opsdesk-filters,
  .subos-quick,
  .opsdesk-focus-actions {
    justify-content: flex-start;
  }

  .opsdesk-owner {
    max-width: none;
  }
}

@media (max-width: 680px) {

  .subos-hero h1,
  .opsdesk-top h2,
  .opsdesk-focus-head h3 {
    font-size: 2.35rem;
  }

  .subos-feed-item,
  .opsdesk-feed-row,
  .subos-request-row {
    grid-template-columns: 1fr;
  }

  .subos-request-row {
    flex-direction: column;
  }
}

.modal-content {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  animation: modalIn 0.3s ease-out;
}

.restoup-modal-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18), 0 0 22px rgba(239, 68, 68, 0.18) !important;
  animation: modalFieldShake 0.24s ease-in-out 0s 2;
}

@keyframes modalFieldShake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-4px);
  }

  75% {
    transform: translateX(4px);
  }
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* CONTROL PANEL REDESIGN */
#panel-requests>.section-header {
  display: none;
}

.opcp,
.subcp {
  --cp-bg: #070a0f;
  --cp-panel: #0d121a;
  --cp-panel-2: #111824;
  --cp-line: rgba(255, 255, 255, 0.08);
  --cp-line-strong: rgba(255, 255, 255, 0.14);
  --cp-text: #f8fafc;
  --cp-muted: #8b95a7;
  --cp-accent: #eab308;
  --cp-good: #22c55e;
  --cp-bad: #ef4444;
  width: 100%;
  min-height: calc(100vh - 150px);
  background: var(--cp-bg);
  color: var(--cp-text);
  border: 1px solid var(--cp-line);
  border-radius: 12px;
  overflow: hidden;
}

.opcp *,
.subcp * {
  min-width: 0;
}

.opcp h1,
.opcp h2,
.opcp h3,
.opcp h4,
.subcp h1,
.subcp h2,
.subcp h3,
.subcp h4 {
  color: var(--cp-text);
  letter-spacing: 0;
}

.opcp p,
.subcp p {
  color: var(--cp-muted);
  line-height: 1.45;
}

.opcp .btn-primary,
.subcp .btn-primary {
  background: var(--cp-accent);
  border: 1px solid var(--cp-accent);
  color: #111827;
  box-shadow: none;
  padding: 10px 14px;
}

.opcp .btn-ghost,
.subcp .btn-ghost {
  background: transparent;
  border: 1px solid var(--cp-line-strong);
  color: var(--cp-text);
  padding: 10px 14px;
}

.opcp .request-field-input,
.opcp .request-search-input,
.subcp .request-field-input {
  width: 100%;
  background: #0a0f16;
  border: 1px solid var(--cp-line-strong);
  color: var(--cp-text);
  border-radius: 8px;
  padding: 11px 12px;
  box-shadow: none;
}

.opcp .request-field-input:focus,
.opcp .request-search-input:focus,
.subcp .request-field-input:focus {
  border-color: rgba(234, 179, 8, 0.55);
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.1);
}

.opcp textarea.request-field-input,
.subcp textarea.request-field-input {
  min-height: 112px;
  resize: vertical;
}

.opcp select option,
.subcp select option {
  background: #0d121a;
  color: #fff;
}

.opcp-top,
.subcp-top {
  min-height: 68px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  background: #0a0f16;
  border-bottom: 1px solid var(--cp-line);
}

.subcp-top {
  grid-template-columns: minmax(220px, 1fr) minmax(320px, auto) auto;
}

.opcp-top>div:first-child,
.subcp-top>div:first-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.opcp-top span,
.subcp-top span,
.opcp-panel-title span,
.subcp-panel-title span,
.opcp-work-head span {
  color: var(--cp-muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.opcp-top strong,
.subcp-top strong {
  color: var(--cp-text);
  font-size: 1.05rem;
  line-height: 1.2;
}

.opcp-metrics,
.subcp-metrics {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(82px, auto);
  border: 1px solid var(--cp-line);
  border-radius: 8px;
  overflow: hidden;
}

.opcp-metrics div,
.subcp-metrics div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  border-right: 1px solid var(--cp-line);
  background: rgba(255, 255, 255, 0.025);
}

.opcp-metrics div:last-child,
.subcp-metrics div:last-child {
  border-right: 0;
}

.opcp-metrics b,
.subcp-metrics b {
  color: var(--cp-text);
  font-size: 1rem;
  line-height: 1.1;
}

.opcp-metrics span,
.subcp-metrics span {
  color: var(--cp-muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.opcp-command {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(420px, 1.4fr) minmax(180px, auto);
  gap: 10px;
  align-items: center;
  padding: 12px 18px;
  background: var(--cp-panel);
  border-bottom: 1px solid var(--cp-line);
}

.opcp-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.opcp .request-filter-chip {
  background: #0a0f16;
  border: 1px solid var(--cp-line);
  color: var(--cp-muted);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 0.74rem;
  font-weight: 800;
}

.opcp .request-filter-chip.active,
.opcp .request-filter-chip:hover {
  background: rgba(234, 179, 8, 0.14);
  border-color: rgba(234, 179, 8, 0.42);
  color: var(--cp-accent);
}

.opcp-grid {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr) 292px;
  min-height: calc(100vh - 290px);
}

.opcp-queue,
.opcp-inspector,
.subcp-nav,
.subcp-rail {
  background: var(--cp-panel);
}

.opcp-queue,
.opcp-center,
.opcp-inspector,
.subcp-nav,
.subcp-main,
.subcp-rail {
  min-width: 0;
}

.opcp-queue,
.opcp-inspector {
  border-right: 1px solid var(--cp-line);
}

.opcp-inspector {
  border-right: 0;
  border-left: 1px solid var(--cp-line);
}

.opcp-panel-title,
.subcp-panel-title {
  min-height: 46px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--cp-line);
}

.opcp-panel-title strong,
.subcp-panel-title strong {
  color: var(--cp-text);
  font-size: 0.9rem;
}

.opcp-queue-list {
  max-height: calc(100vh - 340px);
  overflow: auto;
}

.opcp-queue-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 14px;
  background: transparent;
  border-bottom: 1px solid var(--cp-line);
  color: var(--cp-text);
  text-align: left;
}

.opcp-queue-row:hover,
.opcp-queue-row.active {
  background: rgba(234, 179, 8, 0.07);
}

.opcp-queue-row.active {
  box-shadow: inset 3px 0 0 var(--cp-accent);
}

.opcp-queue-top,
.opcp-queue-bottom,
.opcp-queue-meta,
.opcp-actions,
.opcp-badge-line,
.opcp-save,
.subcp-actions,
.subcp-request-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.opcp-queue-top,
.opcp-queue-bottom,
.subcp-request-row {
  justify-content: space-between;
}

.opcp-queue-top strong {
  color: var(--cp-text);
  font-size: 0.9rem;
}

.opcp-queue-top small,
.opcp-queue-bottom em,
.opcp-queue-title,
.opcp-note-box span,
.opcp-timeline-row time,
.opcp-timeline-row p,
.opcp-drive-row span,
.subcp-feed-row time,
.subcp-feed-row p,
.subcp-request-row span,
.subcp-drive-row span,
.subcp-empty span,
.opcp-empty span {
  color: var(--cp-muted);
}

.opcp-queue-title {
  font-size: 0.82rem;
  line-height: 1.35;
}

.opcp-center {
  background: var(--cp-bg);
}

.opcp-work-head {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 54px 16px 18px;
  border-bottom: 1px solid var(--cp-line);
}

.opcp-work-head h3 {
  margin-top: 4px;
  font-size: 0.95rem;
  line-height: 1.25;
}

.opcp-badge-line {
  padding: 12px 18px;
  border-bottom: 1px solid var(--cp-line);
}

.opcp-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--cp-line);
}

.opcp-facts div {
  padding: 8px 12px;
  border-right: 1px solid var(--cp-line);
}

.opcp-facts div:last-child {
  border-right: 0;
}

.opcp-facts span {
  display: block;
  margin-bottom: 5px;
  color: var(--cp-muted);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.opcp-facts strong {
  color: var(--cp-text);
  font-size: 0.86rem;
}

.opcp-note-box {
  padding: 12px 18px;
  border-bottom: 1px solid var(--cp-line);
  background: rgba(255, 255, 255, 0.02);
}

.opcp-note-box p {
  margin-top: 5px;
  font-size: 0.86rem;
}

.opcp-lanes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--cp-line);
}

.opcp-lanes section:first-child {
  border-right: 1px solid var(--cp-line);
}

.opcp-timeline {
  max-height: 220px;
  overflow: auto;
}

.opcp-timeline-row,
.subcp-feed-row {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--cp-line);
}

.opcp-timeline-row strong,
.subcp-feed-row strong,
.subcp-request-row strong,
.subcp-drive-row strong,
.opcp-drive-row strong {
  color: var(--cp-text);
}

.opcp-update {
  padding-bottom: 14px;
}

.opcp-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px 14px 0;
}

.opcp-save {
  justify-content: flex-end;
  padding: 12px 14px 0;
}

.opcp-inspector section+section,
.subcp-rail section+section {
  border-top: 1px solid var(--cp-line);
}

.opcp-drive-row,
.subcp-drive-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--cp-line);
  color: inherit;
  text-decoration: none;
}

.opcp-drive-row b,
.subcp-drive-row b {
  color: var(--cp-accent);
}

.opcp-checklist,
.subcp-checklist {
  margin: 0;
  padding: 12px 14px 14px 32px;
  color: var(--cp-muted);
  line-height: 1.7;
  font-size: 0.84rem;
}

.opcp-empty,
.subcp-empty {
  padding: 18px 14px;
}

.opcp-empty.slim,
.subcp-empty.slim {
  padding: 14px;
}

.opcp-empty strong,
.subcp-empty strong {
  display: block;
  color: var(--cp-text);
  margin-bottom: 5px;
}

.opcp-center-empty {
  height: 100%;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px;
}

.opcp-center-empty span {
  color: var(--cp-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  font-weight: 800;
}

.opcp-center-empty strong {
  color: var(--cp-text);
  font-size: 1.45rem;
  margin: 8px 0;
}

.subcp-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 300px;
  min-height: calc(100vh - 290px);
}

.subcp-nav {
  border-right: 1px solid var(--cp-line);
}

.subcp-nav button {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 15px 16px;
  background: transparent;
  border-bottom: 1px solid var(--cp-line);
  color: var(--cp-muted);
  text-align: left;
}

.subcp-nav button strong {
  color: var(--cp-text);
}

.subcp-nav button.active {
  background: rgba(234, 179, 8, 0.08);
  box-shadow: inset 3px 0 0 var(--cp-accent);
}

.subcp-main {
  background: var(--cp-bg);
  padding: 14px;
}

.subcp-panel {
  background: var(--cp-panel);
  border: 1px solid var(--cp-line);
  border-radius: 10px;
  overflow: hidden;
}

.subcp-panel+.subcp-panel {
  margin-top: 14px;
}

.subcp-rail {
  border-left: 1px solid var(--cp-line);
}

.subcp-request-list,
.subcp-drive-list,
.subcp-choice-list,
.subcp-feed {
  display: flex;
  flex-direction: column;
}

.subcp-request-row,
.subcp-choice {
  padding: 13px 14px;
  border-bottom: 1px solid var(--cp-line);
}

.subcp-choice {
  width: 100%;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  background: transparent;
  color: var(--cp-text);
  text-align: left;
}

.subcp-choice>span:first-child {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.subcp-choice small {
  display: block;
  margin-top: 3px;
  color: var(--cp-muted);
}

.subcp-choice.active {
  background: rgba(234, 179, 8, 0.08);
  box-shadow: inset 3px 0 0 var(--cp-accent);
}

.subcp-generated {
  padding: 8px 12px;
  border-bottom: 1px solid var(--cp-line);
}

.subcp-generated span {
  display: block;
  color: var(--cp-muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.subcp-generated strong {
  display: block;
  margin-top: 4px;
  color: var(--cp-text);
}

.subcp-actions {
  justify-content: flex-end;
  padding: 8px 12px;
}

.subcp-actions.top {
  padding: 0;
  justify-content: flex-end;
}

.subcp-empty.large {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px;
}

@media (max-width: 1320px) {

  .opcp-grid,
  .subcp-grid {
    grid-template-columns: 1fr;
  }

  .opcp-queue,
  .opcp-inspector,
  .subcp-nav,
  .subcp-rail {
    border-right: 0;
    border-left: 0;
  }

  .opcp-queue-list,
  .opcp-timeline {
    max-height: none;
  }

  .subcp-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {

  .opcp-top,
  .subcp-top,
  .opcp-command,
  .opcp-lanes,
  .opcp-form-row,
  .opcp-facts,
  .subcp-metrics {
    grid-template-columns: 1fr;
  }

  .opcp-lanes section:first-child {
    border-right: 0;
  }

  .opcp-metrics,
  .subcp-metrics {
    grid-auto-flow: row;
  }

  .subcp-nav {
    grid-template-columns: 1fr 1fr;
  }
}

/* ACTIVE CONTROL OVERRIDE FOR CURRENT RENDER ROOTS */
#panel-requests>.section-header {
  display: none !important;
}

.opsdesk,
.subos {
  --live-bg: #070a0f;
  --live-panel: #0d121a;
  --live-panel-2: #111824;
  --live-line: rgba(255, 255, 255, 0.08);
  --live-line-2: rgba(255, 255, 255, 0.14);
  --live-text: #f8fafc;
  --live-muted: #8b95a7;
  --live-accent: #eab308;
  width: 100%;
  min-height: calc(100vh - 150px);
  margin: 0;
  padding: 0;
  background: var(--live-bg);
  color: var(--live-text);
  border: 1px solid var(--live-line);
  border-radius: 12px;
  overflow: hidden;
}

.opsdesk h2,
.opsdesk h3,
.opsdesk h4,
.subos h1,
.subos h2,
.subos h3 {
  color: var(--live-text);
  letter-spacing: 0;
}

.opsdesk p,
.subos p {
  color: var(--live-muted);
  line-height: 1.42;
}

.opsdesk .btn-primary,
.subos .btn-primary {
  background: var(--live-accent);
  border: 1px solid var(--live-accent);
  color: #111827;
  box-shadow: none;
  padding: 10px 14px;
}

.opsdesk .btn-ghost,
.subos .btn-ghost {
  background: transparent;
  border: 1px solid var(--live-line-2);
  color: var(--live-text);
  padding: 10px 14px;
}

.opsdesk .request-field-input,
.opsdesk .request-search-input,
.subos .request-field-input {
  width: 100%;
  background: #0a0f16;
  border: 1px solid var(--live-line-2);
  color: var(--live-text);
  border-radius: 8px;
  padding: 11px 12px;
  box-shadow: none;
}

.opsdesk textarea.request-field-input,
.subos textarea.request-field-input {
  min-height: 112px;
}

.opsdesk select option,
.subos select option {
  background: #0d121a;
  color: #fff;
}

.opsdesk-top,
.subos-hero {
  min-height: 68px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  background: #0a0f16;
  border-bottom: 1px solid var(--live-line);
  border-radius: 0;
}

.subos-hero {
  align-items: start;
}

.opsdesk-kicker,
.subos-brand-line,
.subos-kicker {
  margin: 0;
  color: var(--live-muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.subos-brand-line {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.opsdesk-top h2,
.subos-hero h1 {
  margin: 3px 0 0;
  font-size: 0.95rem;
  line-height: 1.2;
}

.opsdesk-top p,
.subos-hero-grid p {
  display: none;
}

.opsdesk-score,
.subos-status-line {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(82px, auto);
  grid-template-columns: none;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--live-line);
  border-radius: 8px;
  overflow: hidden;
}

.opsdesk-score div,
.subos-status-line span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  border: 0;
  border-right: 1px solid var(--live-line);
  background: rgba(255, 255, 255, 0.025);
  color: var(--live-muted);
}

.opsdesk-score div:last-child,
.subos-status-line span:last-child {
  border-right: 0;
}

.opsdesk-score strong,
.subos-status-line strong {
  color: var(--live-text);
  font-size: 1rem;
  line-height: 1.1;
}

.opsdesk-score span,
.subos-status-line span {
  color: var(--live-muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.opsdesk-command {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(420px, 1.4fr) minmax(180px, auto);
  gap: 10px;
  align-items: center;
  padding: 12px 18px;
  background: var(--live-panel);
  border-bottom: 1px solid var(--live-line);
}

.opsdesk-filters {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 7px;
}

.opsdesk .request-filter-chip {
  background: #0a0f16;
  border: 1px solid var(--live-line);
  color: var(--live-muted);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 0.74rem;
  font-weight: 800;
}

.opsdesk .request-filter-chip.active,
.opsdesk .request-filter-chip:hover {
  background: rgba(234, 179, 8, 0.14);
  border-color: rgba(234, 179, 8, 0.42);
  color: var(--live-accent);
}

.opsdesk-owner {
  max-width: none;
}

.opsdesk-shell,
.subos-layout {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr) 292px;
  gap: 0;
  min-height: calc(100vh - 290px);
}

.opsdesk-queue,
.opsdesk-right,
.subos-side,
.portal-side {
  background: var(--live-panel);
}

.opsdesk-queue,
.subos-side {
  border-right: 1px solid var(--live-line);
  padding: 0;
}

.opsdesk-right,
.portal-side {
  border-left: 1px solid var(--live-line);
  padding: 0;
}

.opsdesk-focus,
.subos-main {
  background: var(--live-bg);
  padding: 0;
}

.opsdesk-queue-head,
.opsdesk-lane-head,
.opsdesk-right section>span,
.subos-side section>span,
.portal-section-head,
.portal-side .portal-section-head {
  min-height: 46px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--live-line);
}

.opsdesk-queue-head span,
.opsdesk-lane-head span,
.opsdesk-right section>span,
.subos-side section>span,
.portal-section-head span {
  color: var(--live-muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.opsdesk-queue-head strong,
.opsdesk-lane-head h4,
.opsdesk-right h4,
.subos-side h2,
.portal-section-head h2 {
  margin: 0;
  color: var(--live-text);
  font-size: 0.92rem;
}

.opsdesk-stream {
  max-height: calc(100vh - 340px);
  overflow: auto;
}

.opsdesk-ticket {
  width: 100%;
  padding: 13px 14px 13px 18px;
  background: transparent;
  border-top: 0;
  border-bottom: 1px solid var(--live-line);
  color: var(--live-text);
  border-radius: 0;
}

.opsdesk-ticket.active,
.opsdesk-ticket:hover {
  background: rgba(234, 179, 8, 0.07);
}

.opsdesk-ticket.active {
  box-shadow: inset 3px 0 0 var(--live-accent);
}

.opsdesk-ticket strong {
  font-size: 0.9rem;
}

.opsdesk-ticket p {
  color: var(--live-muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.opsdesk-focus-head {
  min-height: 76px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--live-line);
}

.opsdesk-focus-head h3,
.opsdesk-focus-empty h3 {
  margin: 4px 0 0;
  font-size: 0.95rem;
  line-height: 1.25;
  max-width: none;
}

.opsdesk-focus-head p,
.opsdesk-focus-empty p {
  display: none;
}

.opsdesk-detail-layout {
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 0;
}

.opsdesk-work,
.opsdesk-right {
  padding-top: 0;
}

.opsdesk-meta-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--live-line);
}

.opsdesk-meta-strip div {
  padding: 8px 12px;
  border-right: 1px solid var(--live-line);
}

.opsdesk-meta-strip span {
  color: var(--live-muted);
}

.opsdesk-meta-strip strong {
  color: var(--live-text);
  font-size: 0.86rem;
}

.opsdesk-badge-line {
  padding: 12px 18px;
  border-bottom: 1px solid var(--live-line);
}

.opsdesk-lane,
.opsdesk-editor {
  padding: 0;
  border-bottom: 1px solid var(--live-line);
}

.opsdesk-feed-row {
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 12px;
  padding: 8px 12px;
  border-top: 0;
  border-bottom: 1px solid var(--live-line);
}

.opsdesk-form-grid,
.opsdesk-note-grid {
  padding: 12px 14px 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.opsdesk-save {
  padding: 8px 12px;
  justify-content: flex-end;
}

.opsdesk-drive-row,
.portal-link-row,
.portal-list-row {
  padding: 8px 12px;
  border-top: 0;
  border-bottom: 1px solid var(--live-line);
}

.subos-routes {
  display: flex;
  flex-direction: column;
  border-bottom: 0;
}

.subos-routes button {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 15px 16px;
  background: transparent;
  border-right: 0;
  border-bottom: 1px solid var(--live-line);
  color: var(--live-muted);
}

.subos-routes button.active {
  background: rgba(234, 179, 8, 0.08);
  box-shadow: inset 3px 0 0 var(--live-accent);
}

.subos-routes button span {
  display: none;
}

.subos-routes button strong {
  color: var(--live-text);
  font-size: 0.9rem;
}

.subos-side {
  grid-row: 1;
}

.subos-main {
  grid-column: 2;
  padding: 14px;
}

.subos-side section,
.portal-side section {
  margin: 0;
  padding: 0;
  border: 0;
}

.subos-side p,
.portal-help {
  padding: 8px 12px;
}

.portal-section {
  padding: 0;
  border: 1px solid var(--live-line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--live-panel);
}

.portal-section+.portal-section {
  margin-top: 14px;
}

.portal-empty {
  padding: 16px 14px;
}

@media (max-width: 1320px) {

  .opsdesk-shell,
  .subos-layout {
    grid-template-columns: 1fr;
  }

  .opsdesk-queue,
  .opsdesk-right,
  .subos-side,
  .portal-side {
    border-right: 0;
    border-left: 0;
  }

  .subos-main {
    grid-column: auto;
  }
}

@media (max-width: 900px) {

  .opsdesk-top,
  .subos-hero,
  .opsdesk-command,
  .opsdesk-detail-layout,
  .opsdesk-meta-strip,
  .opsdesk-form-grid,
  .opsdesk-note-grid {
    grid-template-columns: 1fr;
  }

  .opsdesk-score,
  .subos-status-line {
    grid-auto-flow: row;
  }
}

/* CLIENT HUB - SIMPLE SUBSCRIBER PANEL */
.client-hub {
  --hub-bg: #f4f6f8;
  --hub-panel: #ffffff;
  --hub-text: #172033;
  --hub-muted: #6b7280;
  --hub-line: #e5e7eb;
  --hub-soft: #f8fafc;
  --hub-accent: #0f766e;
  --hub-accent-soft: #e7f7f4;
  width: 100%;
  min-height: calc(100vh - 130px);
  padding: 24px;
  background: var(--hub-bg);
  color: var(--hub-text);
  border-radius: 10px;
}

.client-hub *,
.client-hub *::before,
.client-hub *::after {
  box-sizing: border-box;
}

.client-hub h1,
.client-hub strong {
  color: var(--hub-text);
}

.client-hub-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, auto);
  gap: 18px;
  align-items: center;
  margin-bottom: 16px;
}

.client-hub-header span,
.client-hub-panel-title span,
.client-hub-form label>span,
.client-hub-subtitle {
  display: block;
  color: var(--hub-muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.client-hub-header h1 {
  margin: 4px 0 0;
  font-size: clamp(1.75rem, 3vw, 2.65rem);
  line-height: 1.05;
}

.client-hub-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.client-hub-summary div {
  min-height: 70px;
  padding: 12px;
  background: var(--hub-panel);
  border: 1px solid var(--hub-line);
  border-radius: 14px;
}

.client-hub-summary strong {
  display: block;
  overflow: hidden;
  max-width: 100%;
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.client-hub-summary span {
  display: block;
  margin-top: 5px;
  color: var(--hub-muted);
  font-size: 0.78rem;
}

.client-hub-quick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.client-hub-quick a {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  background: var(--hub-panel);
  border: 1px solid var(--hub-line);
  border-radius: 14px;
  color: var(--hub-text);
  text-decoration: none;
  font-weight: 850;
}

.client-hub-quick a:hover {
  border-color: rgba(15, 118, 110, 0.35);
  background: var(--hub-accent-soft);
  color: var(--hub-accent);
}

.client-hub-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.9fr);
  grid-template-areas:
    "actions folders"
    "actions request";
  gap: 16px;
  align-items: start;
}

.client-hub-panel {
  background: var(--hub-panel);
  border: 1px solid var(--hub-line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.client-hub-actions-panel {
  grid-area: actions;
}

.client-hub-folders-panel {
  grid-area: folders;
}

.client-hub-request-panel {
  grid-area: request;
}

.client-hub-panel-title {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--hub-line);
  background: var(--hub-soft);
}

.client-hub-panel-title strong {
  font-size: 1.05rem;
}

.client-hub-activity-list,
.client-hub-folder-list,
.client-hub-open-list {
  display: flex;
  flex-direction: column;
}

.client-hub-activity {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--hub-line);
}

.client-hub-activity time {
  color: var(--hub-muted);
  font-size: 0.82rem;
  font-weight: 750;
}

.client-hub-activity strong,
.client-hub-folder strong,
.client-hub-open-request strong {
  display: block;
  margin-bottom: 4px;
}

.client-hub-activity p {
  margin: 0;
  color: var(--hub-muted);
  line-height: 1.55;
}

.client-hub-activity span {
  display: block;
  margin-top: 7px;
  color: var(--hub-accent);
  font-size: 0.82rem;
  font-weight: 800;
}

.client-hub-subtitle {
  padding: 16px 18px 8px;
}

.client-hub-open-request,
.client-hub-folder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--hub-line);
}

.client-hub-folder {
  color: inherit;
  text-decoration: none;
}

.client-hub-folder:hover {
  background: var(--hub-accent-soft);
}

.client-hub-folder-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 12px;
  background: var(--hub-soft);
  font-size: 1.2rem;
}

.client-hub-folder div,
.client-hub-open-request div {
  flex: 1;
}

.client-hub-folder small,
.client-hub-open-request span,
.client-hub-note,
.client-hub-empty span {
  color: var(--hub-muted);
  line-height: 1.45;
}

.client-hub-folder b {
  color: var(--hub-accent);
  font-size: 0.9rem;
}

.client-hub-form {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.client-hub-form label {
  display: grid;
  gap: 7px;
}

.client-hub .request-field-input {
  width: 100%;
  min-height: 46px;
  padding: 12px 13px;
  background: #fff;
  border: 1px solid var(--hub-line);
  border-radius: 12px;
  color: var(--hub-text);
  box-shadow: none;
}

.client-hub .request-field-input:focus {
  border-color: rgba(15, 118, 110, 0.48);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
}

.client-hub textarea.request-field-input {
  min-height: 118px;
  resize: vertical;
}

.client-hub select option {
  background: #fff;
  color: var(--hub-text);
}

.client-hub-submit {
  min-height: 50px;
  width: 100%;
  background: var(--hub-accent);
  color: #fff;
  border: 0;
  border-radius: 14px;
  font-weight: 900;
  font-size: 0.85rem;
}

.client-hub-submit:hover {
  background: #0b5f59;
}

.client-hub-empty,
.client-hub-note {
  padding: 18px;
}

.client-hub-empty strong {
  display: block;
  margin-bottom: 5px;
}

.client-hub-empty-state {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px;
}

@media (max-width: 1120px) {

  .client-hub-header,
  .client-hub-grid {
    grid-template-columns: 1fr;
  }

  .client-hub-grid {
    grid-template-areas:
      "actions"
      "folders"
      "request";
  }
}

@media (max-width: 760px) {
  .client-hub {
    padding: 14px;
    border-radius: 12px;
  }

  .client-hub-summary,
  .client-hub-quick {
    grid-template-columns: 1fr;
  }

  .client-hub-activity {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .client-hub-open-request,
  .client-hub-folder {
    align-items: flex-start;
  }
}

/* Client hub: flat work screen, not a card stack */
.client-hub {
  --hub-bg: #f6f8fb;
  --hub-panel: #ffffff;
  --hub-soft: #f9fafb;
  --hub-line: #d9e2ec;
  --hub-text: #111827;
  --hub-muted: #667085;
  --hub-accent: #0f766e;
  --hub-accent-soft: #e9f7f4;
  min-height: calc(100vh - 24px);
  padding: 28px;
  background: var(--hub-bg);
  border-radius: 0;
  box-shadow: none;
}

.client-hub-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, auto);
  gap: 24px;
  align-items: end;
  padding: 0 0 22px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hub-line);
}

.client-hub-header h1 {
  margin: 6px 0 0;
  font-size: clamp(1.7rem, 2vw, 2.45rem);
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--hub-text);
}

.client-hub-header span,
.client-hub-panel-title span {
  color: var(--hub-muted);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0;
}

.client-hub-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 0;
  background: #fff;
  border: 1px solid var(--hub-line);
  border-radius: 0;
  box-shadow: none;
}

.client-hub-summary div {
  min-height: 76px;
  padding: 14px 16px;
  border-right: 1px solid var(--hub-line);
}

.client-hub-summary div:last-child {
  border-right: 0;
}

.client-hub-summary strong {
  display: block;
  color: var(--hub-text);
  font-size: 1.12rem;
  line-height: 1.2;
}

.client-hub-summary span {
  display: block;
  margin-top: 5px;
  color: var(--hub-muted);
  font-size: 0.78rem;
}

.client-hub-quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 18px 0 0;
  border: 1px solid var(--hub-line);
  border-bottom: 0;
  background: #fff;
}

.client-hub-quick a {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--hub-line);
  border-radius: 0;
  color: var(--hub-text);
  font-weight: 850;
  text-decoration: none;
}

.client-hub-quick a:last-child {
  border-right: 0;
}

.client-hub-quick a:hover {
  background: var(--hub-accent-soft);
  color: var(--hub-accent);
}

.client-hub-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1.15fr) minmax(280px, 0.85fr) minmax(340px, 0.95fr);
  grid-template-areas: "actions folders request";
  gap: 0;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--hub-line);
  border-radius: 0;
  box-shadow: none;
}

.client-hub-panel {
  min-height: 590px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.client-hub-folders-panel,
.client-hub-request-panel {
  border-left: 1px solid var(--hub-line);
}

.client-hub-panel-title {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  background: transparent;
  border-bottom: 1px solid var(--hub-line);
}

.client-hub-panel-title strong {
  color: var(--hub-text);
  font-size: 0.95rem;
}

.client-hub-activity,
.client-hub-open-request,
.client-hub-folder {
  border-bottom: 1px solid var(--hub-line);
}

.client-hub-activity {
  grid-template-columns: 108px minmax(0, 1fr);
  padding: 17px 20px;
}

.client-hub-activity strong,
.client-hub-folder strong,
.client-hub-open-request strong {
  color: var(--hub-text);
}

.client-hub-activity p,
.client-hub-folder small,
.client-hub-open-request span,
.client-hub-note,
.client-hub-empty span {
  color: var(--hub-muted);
}

.client-hub-folder {
  padding: 16px 20px;
}

.client-hub-folder-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--hub-soft);
}

.client-hub-subtitle {
  padding: 18px 20px 9px;
  color: var(--hub-muted);
  font-size: 0.83rem;
  font-weight: 850;
  border-bottom: 1px solid var(--hub-line);
}

.client-hub-form {
  gap: 15px;
  padding: 20px;
}

.client-hub-form label>span {
  color: var(--hub-text);
  font-size: 0.9rem;
  font-weight: 850;
}

.client-hub .request-field-input {
  min-height: 48px;
  border-radius: 8px;
  border-color: #cfd8e3;
  background: #fff;
  color: var(--hub-text);
  font-size: 0.95rem;
}

.client-hub textarea.request-field-input {
  min-height: 132px;
}

.client-hub-submit {
  min-height: 52px;
  border-radius: 8px;
  background: var(--hub-accent);
  box-shadow: none;
}

.client-hub-empty,
.client-hub-note {
  padding: 20px;
}

@media (max-width: 1180px) {
  .client-hub-header {
    grid-template-columns: 1fr;
  }

  .client-hub-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "actions"
      "folders"
      "request";
  }

  .client-hub-panel {
    min-height: auto;
  }

  .client-hub-folders-panel,
  .client-hub-request-panel {
    border-left: 0;
    border-top: 1px solid var(--hub-line);
  }
}

@media (max-width: 760px) {
  .client-hub {
    padding: 16px;
  }

  .client-hub-summary,
  .client-hub-quick {
    grid-template-columns: 1fr;
  }

  .client-hub-summary div,
  .client-hub-quick a {
    border-right: 0;
    border-bottom: 1px solid var(--hub-line);
  }

  .client-hub-summary div:last-child,
  .client-hub-quick a:last-child {
    border-bottom: 0;
  }

  .client-hub-grid {
    border-left: 0;
    border-right: 0;
  }
}

/* subscriber topbar rules merged above */

.client-hub {
  --hub-bg: #f3f7f8;
  --hub-panel: #ffffff;
  --hub-soft: #f7faf9;
  --hub-line: #d7e2e4;
  --hub-text: #111827;
  --hub-muted: #607078;
  --hub-accent: #0f766e;
  --hub-accent-soft: #e8f6f3;
  min-height: calc(100vh - 54px);
  padding: 28px;
  background:
    radial-gradient(circle at top left, rgba(15, 118, 110, 0.08), transparent 32%),
    var(--hub-bg);
  border-radius: 32px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}

.client-hub-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 560px);
  gap: 18px;
  align-items: stretch;
  padding: 22px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--hub-line);
  border-radius: 30px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}

.client-hub-heading {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}

.client-hub-heading h1 {
  margin: 3px 0 0;
  color: var(--hub-text);
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.client-hub-heading p {
  max-width: 560px;
  margin: 12px 0 0;
  color: var(--hub-muted);
  font-size: 1rem;
  line-height: 1.55;
}

.client-hub-header-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
}

.client-hub-summary {
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--hub-line);
}

.client-hub-summary div {
  min-height: 82px;
  padding: 15px 17px;
  background: #fff;
}

.client-hub-summary strong {
  color: var(--hub-text);
  font-size: 0.95rem;
}

.client-hub-summary span {
  color: var(--hub-muted);
}

.client-hub-logout {
  min-width: 78px;
  padding: 0 18px;
  background: #fff;
  border: 1px solid #f0c8c8;
  border-radius: 14px;
  color: #c24141;
  font-weight: 850;
  cursor: pointer;
}

.client-hub-logout:hover {
  background: #fff5f5;
}

.client-hub-quick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
  background: transparent;
  border: 0;
}

.client-hub-quick a {
  min-height: 58px;
  border: 1px solid var(--hub-line);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
}

.client-hub-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1.15fr) minmax(290px, 0.85fr) minmax(350px, 0.95fr);
  grid-template-areas: "actions folders request";
  gap: 18px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.client-hub-panel {
  min-height: 580px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--hub-line);
  border-radius: 28px;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.055);
}

.client-hub-folders-panel,
.client-hub-request-panel {
  border-left: 1px solid var(--hub-line);
}

.client-hub-panel-title {
  min-height: 76px;
  padding: 20px 22px;
  background: rgba(247, 250, 249, 0.78);
  border-bottom: 1px solid var(--hub-line);
}

.client-hub-panel-title strong {
  font-size: 1.1rem;
}

.client-hub-activity {
  grid-template-columns: 112px minmax(0, 1fr);
  padding: 18px 22px;
}

.client-hub-folder,
.client-hub-open-request {
  padding: 17px 22px;
}

.client-hub-folder:hover,
.client-hub-open-request:hover,
.client-hub-activity:hover {
  background: var(--hub-soft);
}

.client-hub-folder-icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: var(--hub-accent-soft);
}

.client-hub-subtitle {
  padding: 20px 22px 10px;
}

.client-hub-form {
  gap: 17px;
  padding: 22px;
}

.client-hub-form label {
  gap: 8px;
}

.client-hub .request-field-input {
  min-height: 52px;
  padding: 13px 15px;
  border-radius: 10px;
  border-color: #c9d8dc;
  background: #fff;
  color: var(--hub-text);
}

.client-hub textarea.request-field-input {
  min-height: 142px;
  border-radius: 22px;
}

.client-hub-submit {
  min-height: 56px;
  border-radius: 999px;
  background: var(--hub-accent);
}

@media (max-width: 1180px) {
  body.subscriber-logged-in .main-content {
    padding: 16px !important;
  }

  .client-hub-header,
  .client-hub-header-side,
  .client-hub-grid {
    grid-template-columns: 1fr;
  }

  .client-hub-grid {
    grid-template-areas:
      "actions"
      "folders"
      "request";
  }
}

@media (max-width: 760px) {
  .client-hub {
    min-height: calc(100vh - 32px);
    padding: 14px;
    border-radius: 14px;
  }

  .client-hub-header {
    padding: 18px;
    border-radius: 14px;
  }

  .client-hub-summary,
  .client-hub-quick {
    grid-template-columns: 1fr;
  }

  .client-hub-quick a,
  .client-hub-logout {
    border-radius: 10px;
  }

  .client-hub-panel {
    border-radius: 14px;
  }

  .client-hub-activity {
    grid-template-columns: 1fr;
  }
}

/* subscriber cockpit v4 merged above */

.customer-cockpit {
  --cc-bg: #edf3f5;
  --cc-panel: #ffffff;
  --cc-line: #d9e3e7;
  --cc-soft: #f6fafb;
  --cc-text: #111827;
  --cc-muted: #66757d;
  --cc-accent: #0f766e;
  --cc-accent-soft: #e7f5f2;
  width: min(100%, 1380px);
  min-height: calc(100vh - 48px);
  margin: 0 auto;
  padding: 0;
  color: var(--cc-text);
}

.customer-cockpit *,
.customer-cockpit *::before,
.customer-cockpit *::after {
  box-sizing: border-box;
}

.customer-top {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(520px, 0.95fr) auto;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px;
}

.customer-title,
.customer-metrics,
.customer-logout,
.customer-panel,
.customer-nav a {
  background: var(--cc-panel);
  border: 1px solid var(--cc-line);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.055);
}

.customer-title {
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px 30px;
  border-radius: 28px;
}

.customer-title span,
.customer-panel-head span,
.customer-request-form label>span {
  display: block;
  color: var(--cc-muted);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0;
}

.customer-title h1 {
  margin: 3px 0 0;
  color: var(--cc-text);
  font-size: clamp(2.4rem, 4vw, 4rem);
  line-height: 0.95;
  letter-spacing: 0;
}

.customer-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border-radius: 28px;
}

.customer-metrics div {
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 20px;
  border-right: 1px solid var(--cc-line);
}

.customer-metrics div:last-child {
  border-right: 0;
}

.customer-metrics b {
  display: block;
  overflow: hidden;
  color: var(--cc-text);
  font-size: 1.25rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-metrics span {
  color: var(--cc-muted);
  font-size: 0.82rem;
  font-weight: 750;
}

.customer-logout {
  min-width: 90px;
  min-height: 132px;
  padding: 0 18px;
  border-color: #f1cccc;
  border-radius: 28px;
  color: #c24141;
  font-weight: 850;
  cursor: pointer;
}

.customer-logout:hover {
  background: #fff6f6;
}

.customer-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.customer-nav a {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--cc-text);
  font-weight: 850;
  text-decoration: none;
}

.customer-nav a:hover {
  background: var(--cc-accent-soft);
  border-color: rgba(15, 118, 110, 0.3);
  color: var(--cc-accent);
}

.customer-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 16px;
  align-items: stretch;
}

.customer-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.customer-panel {
  overflow: hidden;
  border-radius: 28px;
}

.customer-work-panel {
  min-height: 650px;
}

.customer-panel-head {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: var(--cc-soft);
  border-bottom: 1px solid var(--cc-line);
}

.customer-panel-head.slim {
  min-height: 68px;
  border-top: 1px solid var(--cc-line);
}

.customer-panel-head h2 {
  margin: 3px 0 0;
  color: var(--cc-text);
  font-size: 1.15rem;
  line-height: 1.2;
  letter-spacing: 0;
}

.customer-panel-head strong,
.customer-panel-head a {
  color: var(--cc-accent);
  font-size: 0.86rem;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
}

.customer-timeline,
.customer-folder-list,
.customer-request-list {
  display: grid;
}

.customer-timeline-row {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr) minmax(82px, auto);
  gap: 18px;
  align-items: start;
  min-height: 92px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--cc-line);
}

.customer-timeline-row time,
.customer-timeline-row>span,
.customer-request-row span,
.customer-folder-link small,
.customer-empty span {
  color: var(--cc-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.customer-timeline-row time {
  font-weight: 850;
}

.customer-timeline-row strong,
.customer-request-row strong,
.customer-folder-link strong,
.customer-empty strong {
  display: block;
  color: var(--cc-text);
  font-size: 0.85rem;
  line-height: 1.25;
}

.customer-timeline-row p {
  margin: 6px 0 0;
  color: var(--cc-muted);
  line-height: 1.55;
}

.customer-request-row,
.customer-folder-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 76px;
  padding: 17px 24px;
  border-bottom: 1px solid var(--cc-line);
}

.customer-folder-link {
  color: inherit;
  text-decoration: none;
}

.customer-folder-link:hover,
.customer-request-row:hover,
.customer-timeline-row:hover {
  background: var(--cc-soft);
}

.customer-folder-link>span {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 16px;
  background: var(--cc-accent-soft);
  font-size: 1.25rem;
}

.customer-folder-link div,
.customer-request-row div {
  min-width: 0;
  flex: 1;
}

.customer-folder-link b {
  color: var(--cc-accent);
  font-size: 0.86rem;
}

.customer-request-form {
  display: grid;
  gap: 15px;
  padding: 22px 24px 24px;
}

.customer-request-form label {
  display: grid;
  gap: 8px;
}

.customer-cockpit .request-field-input {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  background: #fff;
  border: 1px solid #cbd9de;
  border-radius: 10px;
  color: var(--cc-text);
  font-size: 0.95rem;
  outline: none;
}

.customer-cockpit .request-field-input:focus {
  border-color: rgba(15, 118, 110, 0.5);
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.1);
}

.customer-cockpit textarea.request-field-input {
  min-height: 128px;
  border-radius: 22px;
  resize: vertical;
}

.customer-cockpit select option {
  background: #fff;
  color: var(--cc-text);
}

.customer-submit {
  min-height: 56px;
  margin-top: 2px;
  background: var(--cc-accent);
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.customer-submit:hover {
  background: #0b5f59;
}

.customer-empty {
  display: grid;
  gap: 6px;
  padding: 24px;
}

.customer-empty.compact {
  padding: 20px 24px;
}

.customer-empty-state {
  min-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px;
}

@media (max-width: 1180px) {
  body.subscriber-logged-in .main-content {
    padding: 16px !important;
  }

  .customer-top,
  .customer-board {
    grid-template-columns: 1fr;
  }

  .customer-logout {
    min-height: 56px;
  }

  .customer-side {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 820px) {
  .customer-cockpit {
    min-height: calc(100vh - 32px);
  }

  .customer-metrics,
  .customer-nav,
  .customer-side {
    grid-template-columns: 1fr;
  }

  .customer-metrics div {
    min-height: 78px;
    border-right: 0;
    border-bottom: 1px solid var(--cc-line);
  }

  .customer-metrics div:last-child {
    border-bottom: 0;
  }

  .customer-timeline-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .customer-title,
  .customer-metrics,
  .customer-logout,
  .customer-panel {
    border-radius: 22px;
  }
}

/* Customer cockpit v5: files first, task-stage timeline */
.customer-files-panel {
  margin-bottom: 16px;
}

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

.customer-file-card {
  min-height: 116px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 18px 20px;
  color: inherit;
  text-decoration: none;
  border-right: 1px solid var(--cc-line);
}

.customer-file-card:last-child {
  border-right: 0;
}

.customer-file-card:hover {
  background: var(--cc-soft);
}

.customer-file-card>span {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 17px;
  background: var(--cc-accent-soft);
  font-size: 1.28rem;
}

.customer-file-card div {
  min-width: 0;
}

.customer-file-card strong {
  display: block;
  color: var(--cc-text);
  font-size: 0.85rem;
  line-height: 1.25;
}

.customer-file-card small {
  display: block;
  margin-top: 5px;
  color: var(--cc-muted);
  line-height: 1.4;
}

.customer-file-card b {
  color: var(--cc-accent);
  font-size: 0.86rem;
}

.customer-task-list {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.customer-task-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--cc-line);
  border-radius: 14px;
}

.customer-task-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px 10px;
}

.customer-task-head span,
.customer-task-stage span,
.customer-task-body-title span,
.customer-legacy-feed time {
  display: block;
  color: var(--cc-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.customer-task-head h3 {
  margin: 3px 0 0;
  color: var(--cc-text);
  font-size: 0.95rem;
  line-height: 1.28;
  letter-spacing: 0;
}

.customer-task-stage {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 20px;
  padding: 8px 12px;
  background: var(--cc-accent-soft);
  border-radius: 10px;
}

.customer-task-stage strong {
  color: var(--cc-accent);
  font-size: 0.85rem;
}

.customer-stage-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 16px 4px;
}

.customer-stage-rail div {
  position: relative;
  display: grid;
  gap: 7px;
  min-width: 0;
}

.customer-stage-rail div::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 30px;
  right: -8px;
  height: 2px;
  background: #d8e4e7;
}

.customer-stage-rail div:last-child::before {
  display: none;
}

.customer-stage-rail i {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #cbd9de;
  border-radius: 999px;
  color: var(--cc-muted);
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 900;
}

.customer-stage-rail span {
  color: var(--cc-muted);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.25;
}

.customer-stage-rail .done i,
.customer-stage-rail .active i {
  background: var(--cc-accent);
  border-color: var(--cc-accent);
  color: #fff;
}

.customer-stage-rail .done::before {
  background: var(--cc-accent);
}

.customer-stage-rail .active span {
  color: var(--cc-accent);
}

.customer-task-body {
  margin-top: 12px;
  border-top: 1px solid var(--cc-line);
}

.customer-task-body-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 20px 10px;
}

.customer-task-body-title b {
  color: var(--cc-muted);
  font-size: 0.78rem;
}

.customer-task-events {
  --timeline-rail-inset: 10px;
  --timeline-dot-top: 21px;
  --timeline-dot-size: 8px;
  --timeline-dot-size-latest: 11px;
  --timeline-dot-shift-x: -1.5px;
  --timeline-line-gap: 5px;
  --timeline-bridge-gap: 16px;
  --timeline-events-gap: 16px;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 12px 20px 24px var(--timeline-rail-inset) !important;
  position: relative !important;
  overflow: visible !important;
}

.customer-task-events::before {
  display: none !important;
}

.customer-task-event {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  margin-left: 0 !important;
  padding: 0 0 calc(4px + var(--timeline-events-gap)) 18px !important;
  border: none !important;
  background: transparent !important;
  transition: all 0.3s ease !important;
  overflow: visible !important;
}

.customer-task-event:last-child,
.customer-task-event:has(+ .customer-task-event-more) {
  padding-bottom: 4px !important;
}

/* Connector centered in bridge between dot bottoms/tops */
.customer-task-event:has(+ .customer-task-event)::after {
  content: "" !important;
  position: absolute !important;
  left: calc(var(--timeline-dot-shift-x) + (var(--timeline-dot-size) / 2) - 0.5px) !important;
  top: calc(var(--timeline-dot-top) + var(--timeline-dot-size) + var(--timeline-bridge-gap)) !important;
  bottom: calc(-1 * (var(--timeline-dot-top) - var(--timeline-bridge-gap))) !important;
  height: auto !important;
  width: 1px !important;
  background: #d1d5db !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Milestone dot — fully inside rail column, no negative offset clipping */
.customer-task-event::before {
  content: "" !important;
  position: absolute !important;
  left: var(--timeline-dot-shift-x) !important;
  top: var(--timeline-dot-top) !important;
  box-sizing: border-box !important;
  width: var(--timeline-dot-size) !important;
  height: var(--timeline-dot-size) !important;
  background: #cbd5e1 !important;
  border: 2px solid #ffffff !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px #ffffff !important;
  transform-origin: center center !important;
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 2 !important;
}

.customer-task-events .customer-task-event.is-latest-update::before,
.customer-task-events .customer-task-event:first-child::before {
  width: var(--timeline-dot-size-latest) !important;
  height: var(--timeline-dot-size-latest) !important;
  left: calc(var(--timeline-dot-shift-x) - ((var(--timeline-dot-size-latest) - var(--timeline-dot-size)) / 2)) !important;
  top: calc(var(--timeline-dot-top) - ((var(--timeline-dot-size-latest) - var(--timeline-dot-size)) / 2)) !important;
  background: #22c55e !important;
  animation: requestLatestPointPulseGreen 1.12s ease-out infinite !important;
  transform-origin: center center !important;
  box-shadow: 0 0 0 2px #f1f5f9 !important;
}

.customer-task-events .customer-task-event.is-latest-update:has(+ .customer-task-event)::after,
.customer-task-events .customer-task-event:first-child:has(+ .customer-task-event)::after {
  top: calc(var(--timeline-dot-top) + var(--timeline-dot-size-latest) + var(--timeline-bridge-gap)) !important;
}

.customer-task-event:not(.is-latest-update):hover::before {
  transform: scale(1.3) !important;
  background: #eab308 !important;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.25) !important;
}

/* Floating Clean Timestamp inside Card */
.customer-task-event time {
  position: absolute !important;
  right: 16px !important;
  top: 13px !important;
  color: #94a3b8 !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  z-index: 3 !important;
}

/* Modern Minimalist Card Content Bubble */
.customer-task-event>div {
  width: 100% !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-align: left !important;
}

.customer-task-event:hover>div {
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
  transform: translateX(3px) !important;
}

/* Brand name / author */
.customer-task-event strong.customer-task-event-brand {
  display: inline-flex !important;
  align-items: center !important;
  color: #0f172a !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  margin: 0 6px 0 0 !important;
}

.customer-task-event .customer-task-event-author {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 0 0 12px !important;
  color: #5f6f7a !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 0.84rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.customer-task-event strong.customer-task-event-brand span {
  color: #ca8a04 !important;
}

.customer-task-event p {
  margin: 6px 0 0 0 !important;
  color: #334155 !important;
  font-size: 0.84rem !important;
  line-height: 1.5 !important;
}

/* Completed Events: Beautiful soft emerald glow card */
.customer-task-event.is-event-completed::before {
  background: #22c55e !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2) !important;
}

.customer-task-event.is-event-completed:hover::before {
  transform: scale(1.3) !important;
  background: #22c55e !important;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.35) !important;
}

.customer-task-event.is-event-completed>div {
  background: rgba(240, 253, 244, 0.6) !important;
  /* extremely elegant faint green */
  border-color: rgba(34, 197, 94, 0.16) !important;
}

.customer-task-event.is-event-completed:hover>div {
  background: rgba(240, 253, 244, 0.9) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

/* Green complete badge */
.completed-check-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  background: rgba(34, 197, 94, 0.1) !important;
  border: 1px solid rgba(34, 197, 94, 0.18) !important;
  color: #166534 !important;
  /* rich dark green */
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  vertical-align: middle !important;
  margin-left: 6px !important;
}

.customer-legacy-feed {
  display: grid;
  gap: 10px;
  padding: 0 18px 18px;
}

.customer-legacy-feed div {
  padding: 14px 16px;
  background: var(--cc-soft);
  border-radius: 10px;
}

.customer-legacy-feed strong {
  display: block;
  margin-top: 4px;
}

.customer-legacy-feed span {
  display: block;
  margin-top: 4px;
  color: var(--cc-muted);
}

@media (max-width: 1180px) {
  .customer-file-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-file-card:nth-child(2n) {
    border-right: 0;
  }

  .customer-file-card:nth-child(n + 3) {
    border-top: 1px solid var(--cc-line);
  }
}

@media (max-width: 820px) {

  .customer-file-grid,
  .customer-stage-rail {
    grid-template-columns: 1fr;
  }

  .customer-file-card {
    border-right: 0;
    border-bottom: 1px solid var(--cc-line);
  }

  .customer-file-card:last-child {
    border-bottom: 0;
  }

  .customer-stage-rail div::before {
    display: none;
  }

  .customer-task-head,
  .customer-task-stage,
  .customer-task-body-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .customer-task-event {
    grid-template-columns: 1fr;
  }
}

/* Customer cockpit v6: RestoUp branded header, no redundant quick nav */
.customer-cockpit {
  --cc-bg: #eef2f6;
  --cc-accent: #eab308;
  --cc-accent-soft: #fff5cc;
  --cc-brand-dark: #0f1115;
  --cc-brand-line: rgba(255, 255, 255, 0.12);
}

body.subscriber-logged-in,
body.subscriber-logged-in .main-content {
  background:
    linear-gradient(180deg, rgba(15, 17, 21, 0.055), transparent 260px),
    var(--cc-bg);
}

.customer-top {
  grid-template-columns: minmax(390px, 1fr) minmax(520px, 0.95fr) auto;
  margin-bottom: 16px;
}

.customer-brand-card {
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 24px 28px;
  background:
    linear-gradient(135deg, rgba(234, 179, 8, 0.14), transparent 36%),
    var(--cc-brand-dark);
  border: 1px solid rgba(234, 179, 8, 0.28);
  border-radius: 28px;
  box-shadow: 0 18px 44px rgba(15, 17, 21, 0.16);
}

.customer-brand-lockup {
  display: flex;
  align-items: center;
  gap: 18px;
}

.customer-logo {
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
}

.customer-logo span {
  color: var(--cc-accent);
}

.customer-welcome {
  min-width: 0;
  padding-left: 18px;
  border-left: 1px solid var(--cc-brand-line);
}

.customer-welcome span {
  display: block;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.82rem;
  font-weight: 750;
}

.customer-welcome strong {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: #fff;
  font-size: clamp(1.55rem, 2.2vw, 2.15rem);
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-brand-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.9rem;
  font-weight: 650;
}

.customer-metrics,
.customer-panel,
.customer-logout {
  border-color: rgba(15, 17, 21, 0.08);
}

.customer-panel-head {
  background: linear-gradient(180deg, #fffdf6, var(--cc-soft));
}

.customer-submit,
.customer-stage-rail .done i,
.customer-stage-rail .active i,
.customer-task-event::before {
  background: var(--cc-accent);
}

.customer-stage-rail .done i,
.customer-stage-rail .active i {
  border-color: var(--cc-accent);
  color: #111827;
}

.customer-stage-rail .done::before {
  background: var(--cc-accent);
}

.customer-stage-rail .active span,
.customer-task-stage strong,
.customer-panel-head strong,
.customer-panel-head a,
.customer-file-card b,
.customer-folder-link b {
  color: #b77905;
}

.customer-task-stage,
.customer-file-card>span,
.customer-folder-link>span {
  background: var(--cc-accent-soft);
}

.customer-submit {
  color: #111827;
}

.customer-nav {
  display: none !important;
}

@media (max-width: 1180px) {
  .customer-top {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .customer-brand-card {
    border-radius: 22px;
  }

  .customer-brand-lockup {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .customer-welcome {
    width: 100%;
    padding-left: 0;
    padding-top: 12px;
    border-left: 0;
    border-top: 1px solid var(--cc-brand-line);
  }
}

/* Customer cockpit v7: compact metrics and cleaner file strip */
.customer-top {
  grid-template-columns: minmax(320px, 1fr) auto auto;
  align-items: center;
}

.customer-brand-card {
  min-height: 108px;
  padding: 22px 26px;
}

.customer-brand-card p {
  display: none;
}

.customer-metrics {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 58px;
  padding: 7px;
  overflow: visible;
  border-radius: 22px;
  box-shadow: 0 10px 24px rgba(15, 17, 21, 0.05);
}

.customer-metrics div {
  min-width: 104px;
  min-height: 44px;
  display: grid;
  gap: 1px;
  justify-content: center;
  padding: 7px 12px;
  background: #fffaf0;
  border-right: 0;
  border-radius: 16px;
  text-align: center;
}

.customer-metrics div:last-child {
  min-width: 150px;
  background: #fff;
}

.customer-metrics b {
  max-width: 170px;
  color: #111827;
  font-size: 1.05rem;
  line-height: 1.1;
}

.customer-metrics span {
  color: #7c6a38;
  font-size: 0.72rem;
  font-weight: 850;
}

.customer-logout {
  min-height: 58px;
  border-radius: 22px;
  box-shadow: 0 10px 24px rgba(15, 17, 21, 0.04);
}

.customer-files-panel {
  border-radius: 14px;
}

.customer-files-panel .customer-file-grid {
  border-top: 0;
}

.customer-file-card {
  min-height: 104px;
}

@media (max-width: 1180px) {
  .customer-top {
    grid-template-columns: 1fr;
  }

  .customer-metrics {
    width: 100%;
  }

  .customer-metrics div {
    flex: 1;
  }
}

@media (max-width: 820px) {
  .customer-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .customer-metrics div,
  .customer-metrics div:last-child {
    min-width: 0;
  }

  .customer-metrics div:last-child {
    grid-column: 1 / -1;
  }
}

/* Customer cockpit v8: task stats inside brand card, refined file strip */
.customer-top {
  grid-template-columns: minmax(420px, 1fr) auto auto;
  gap: 14px;
}

.customer-brand-card {
  min-height: 118px;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 24px 26px;
}

.customer-brand-stats {
  display: flex;
  gap: 8px;
  align-items: center;
}

.customer-brand-stats div {
  min-width: 92px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(234, 179, 8, 0.22);
  border-radius: 10px;
}

.customer-brand-stats b {
  display: block;
  color: #fff;
  font-size: 1.18rem;
  line-height: 1;
}

.customer-brand-stats span {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.72rem;
  font-weight: 850;
}

.customer-last-metric {
  width: 176px;
  background: #fff;
}

.customer-last-metric div,
.customer-last-metric div:last-child {
  min-width: 0;
  width: 100%;
  background: #fffaf0;
}

.customer-files-panel {
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(234, 179, 8, 0.12), transparent 42%),
    #fff;
  border-color: rgba(234, 179, 8, 0.18);
}

.customer-file-grid {
  gap: 0;
}

.customer-file-card {
  position: relative;
  min-height: 112px;
  padding: 20px 22px;
  background: rgba(255, 255, 255, 0.82);
  transition: background 0.18s ease, transform 0.18s ease;
}

.customer-file-card::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cc-accent), rgba(234, 179, 8, 0));
  opacity: 0.75;
}

.customer-file-card:hover {
  background: #fff9e8;
  transform: translateY(-1px);
}

.customer-file-card > span {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, rgba(234, 179, 8, 0.28), rgba(234, 179, 8, 0.08));
  border: 1px solid rgba(234, 179, 8, 0.22);
  color: #111827;
}

.customer-file-card strong {
  font-size: 1rem;
}

.customer-file-card small {
  color: #756b54;
}

@media (max-width: 1180px) {

  .customer-top,
  .customer-brand-card {
    grid-template-columns: 1fr;
  }

  .customer-brand-stats {
    justify-content: stretch;
  }

  .customer-brand-stats div {
    flex: 1;
  }

  .customer-last-metric {
    width: 100%;
  }
}

@media (max-width: 820px) {
  .customer-brand-stats {
    flex-direction: column;
  }

  .customer-brand-stats div {
    width: 100%;
  }
}

/* Customer cockpit v9: all header controls inside brand card, richer file cards */
.customer-top {
  grid-template-columns: 1fr;
}

.customer-brand-card {
  grid-template-columns: minmax(260px, 1fr) minmax(0, auto) auto;
  width: 100%;
}

.customer-brand-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(96px, auto));
  gap: 8px;
}

.customer-brand-stats .customer-brand-last {
  min-width: 150px;
}

.customer-brand-logout {
  min-height: 46px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 850;
  cursor: pointer;
}

.customer-brand-logout:hover {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(248, 113, 113, 0.32);
  color: #fecaca;
}

.customer-last-metric,
.customer-logout {
  display: none !important;
}

.customer-files-panel {
  background:
    linear-gradient(135deg, rgba(15, 17, 21, 0.035), transparent 44%),
    #fff;
  border: 1px solid rgba(15, 17, 21, 0.08);
  box-shadow: 0 14px 34px rgba(15, 17, 21, 0.065);
}

.customer-file-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

.customer-file-card {
  grid-template-columns: 48px minmax(0, 1fr);
  min-height: 122px;
  padding: 18px;
  background:
    linear-gradient(180deg, #fffdf6, #ffffff);
  border: 1px solid rgba(234, 179, 8, 0.18);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.customer-file-card::before {
  left: 18px;
  right: auto;
  top: 18px;
  bottom: 18px;
  width: 3px;
  height: auto;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--cc-accent), rgba(234, 179, 8, 0.12));
}

.customer-file-card:hover {
  background:
    linear-gradient(180deg, #fff8df, #ffffff);
  border-color: rgba(234, 179, 8, 0.42);
  transform: translateY(-2px);
}

.customer-file-card>span {
  margin-left: 8px;
  border-radius: 10px;
}

.customer-file-card div {
  align-self: center;
}

@media (max-width: 1180px) {
  .customer-brand-card {
    grid-template-columns: 1fr;
  }

  .customer-brand-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

@media (max-width: 820px) {

  .customer-brand-stats,
  .customer-file-grid {
    grid-template-columns: 1fr;
  }
}

/* Customer cockpit v10: operation flow split into active and completed requests */
.customer-task-section {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.customer-task-section+.customer-task-section {
  padding-top: 0;
}

.customer-task-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
}

.customer-task-section-head h3 {
  margin: 0;
  color: var(--cc-text);
  font-size: 1.03rem;
  line-height: 1.2;
  letter-spacing: 0;
}

.customer-task-section-head span {
  min-width: max-content;
  padding: 6px 10px;
  background: #fff8df;
  border: 1px solid rgba(234, 179, 8, 0.22);
  border-radius: 999px;
  color: #8a6500;
  font-size: 0.75rem;
  font-weight: 850;
}

.customer-task-section.completed {
  border-top: 1px solid rgba(15, 17, 21, 0.08);
}

.customer-task-list {
  padding: 0;
}

.customer-task-list.completed .customer-task-card {
  background: #fbfbfa;
  border-color: rgba(15, 17, 21, 0.065);
}

.customer-task-list.completed .customer-task-stage {
  background: #f4f4f2;
}

.customer-task-list.completed .customer-stage-rail .done i,
.customer-task-list.completed .customer-stage-rail .active i {
  background: #111827;
  border-color: #111827;
  color: #fff;
}

.customer-task-list.completed .customer-stage-rail .done::before {
  background: #111827;
}

@media (max-width: 820px) {
  .customer-task-section {
    padding: 14px;
  }

  .customer-task-section-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Customer cockpit v11: collapsible task cards with compact stage preview */
.customer-task-card.is-collapsible {
  border-radius: 22px;
  border-color: rgba(15, 17, 21, 0.08);
  box-shadow: 0 10px 26px rgba(15, 17, 21, 0.045);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.customer-task-card.is-collapsible:hover,
.customer-task-card.is-collapsible.is-open {
  border-color: #000;
  box-shadow: 0 16px 34px rgba(15, 17, 21, 0.08);
}

.customer-task-toggle {
  width: 100%;
  display: grid;
  gap: 13px;
  padding: 18px;
  background: linear-gradient(180deg, #ffffff, #fffdf7);
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.customer-task-toggle:focus-visible {
  outline: 3px solid rgba(234, 179, 8, 0.34);
  outline-offset: -3px;
}

.customer-task-preview-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.customer-task-preview-top>div {
  min-width: 0;
}

.customer-task-preview-top span:first-child,
.customer-task-preview-mid small {
  display: block;
  color: var(--cc-muted);
  font-size: 0.76rem;
  font-weight: 850;
}

.customer-task-preview-top h3 {
  margin: 3px 0 0;
  color: var(--cc-text);
  font-size: 1.03rem;
  line-height: 1.28;
  letter-spacing: 0;
}

.customer-task-preview-mid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(234, 179, 8, 0.08);
  border-radius: 16px;
}

.customer-task-preview-mid strong {
  color: #9a6c00;
  font-size: 0.92rem;
}

/* ==========================================================================
   STAGES TIMELINE: MINI CARD PREVIEW & GRAND DETAILED ROADMAP VERSION
   ========================================================================== */

/* 1. MINI VERSION: Used on Cockpit Request Card Previews */
.customer-task-card .customer-stage-preview {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  position: relative !important;
  width: 100% !important;
  padding: 8px 0 !important;
  margin-top: 12px !important;
  box-sizing: border-box !important;
}

.customer-task-card .customer-stage-preview span {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  position: relative !important;
  min-width: 0 !important;
  z-index: auto !important;
  /* Auto so it doesn't block z-index globally! */
}

/* Mini Connecting Lines */
.customer-task-card .customer-stage-preview span:not(:first-child)::before {
  content: "" !important;
  position: absolute !important;
  top: 6px !important;
  /* vertically centered on 12px nodes */
  left: auto !important;
  right: calc(50% - 1px) !important;
  width: calc(100% + 2px) !important;
  height: 2px !important;
  background: #cbd5e1 !important;
  z-index: 1 !important;
  transition: all 0.3s ease !important;
}

/* Done and Active lines leading to steps */
.customer-task-card .customer-stage-preview .done:not(:first-child)::before,
.customer-task-card .customer-stage-preview .active:not(:first-child)::before {
  background: #22c55e !important;
}

/* Active Segment filling towards next step (With flowing laser animation!) */
.customer-task-card .customer-stage-preview .active+span::before {
  background: linear-gradient(90deg, #22c55e 0%, #eab308 50%, #cbd5e1 100%) !important;
  background-size: 200% 100% !important;
  animation: miniFlowingLaserPathway 2.2s linear infinite !important;
}

@keyframes miniFlowingLaserPathway {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.customer-task-card .customer-stage-preview b {
  display: none !important;
  /* Hide labels completely in small cards */
}

/* Mini Circular Nodes */
.customer-task-card .customer-stage-preview i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 2px solid #cbd5e1 !important;
  z-index: 2 !important;
  /* globally above lines! */
  margin: 0 !important;
  position: relative !important;
  /* enables z-index globally! */
  box-sizing: border-box !important;
  transition: all 0.3s ease !important;
}

/* Done Step Mini Node */
.customer-task-card .customer-stage-preview .done i {
  background: #22c55e !important;
  border-color: #22c55e !important;
  box-shadow: 0 1px 3px rgba(34, 197, 94, 0.2) !important;
}

/* Active Step Mini Node */
.customer-task-card .customer-stage-preview .active i {
  background: #eab308 !important;
  border-color: #eab308 !important;
  box-shadow: 0 0 8px rgba(234, 179, 8, 0.6), 0 0 0 2px rgba(234, 179, 8, 0.2) !important;
  animation: miniActiveNeonPulse 1.8s ease-in-out infinite !important;
}

@keyframes miniActiveNeonPulse {
  0% {
    box-shadow: 0 0 6px rgba(234, 179, 8, 0.4), 0 0 0 0px rgba(234, 179, 8, 0.2);
  }

  50% {
    box-shadow: 0 0 12px rgba(234, 179, 8, 0.8), 0 0 0 3px rgba(234, 179, 8, 0);
  }

  100% {
    box-shadow: 0 0 6px rgba(234, 179, 8, 0.4), 0 0 0 0px rgba(234, 179, 8, 0);
  }
}


/* 2. GRAND DETAILED ROADMAP VERSION: Used inside Details Popup Modal */
.customer-task-modal-stage .customer-stage-preview {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  position: relative !important;
  width: 100% !important;
  padding: 12px 0 !important;
  counter-reset: stage-step !important;
  /* Dynamic counters for numbers */
}

.customer-task-modal-stage .customer-stage-preview span {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  position: relative !important;
  min-width: 0 !important;
  z-index: auto !important;
  /* Auto so lines sit below nodes globally! */
  counter-increment: stage-step !important;
}

/* Premium Segment Connection Lines: Subpixel-overlap fix to completely eliminate gaps */
.customer-task-modal-stage .customer-stage-preview span:not(:first-child)::before {
  content: "" !important;
  position: absolute !important;
  top: 14px !important;
  /* Vertically centered on the 28px nodes */
  left: auto !important;
  /* OVERRIDE INHERITED LEFT TO PREVENT CONSTAINING POSITION! FIXES THE GAPS! */
  right: calc(50% - 1px) !important;
  /* overlap adjacent segments to eliminate subpixel gaps! */
  width: calc(100% + 2px) !important;
  height: 3px !important;
  /* thicker, robust line */
  background: #e2e8f0 !important;
  z-index: 1 !important;
  transition: all 0.4s ease !important;
}

/* Completed Pathway Lines: Solid Emerald Green leading up to done & active steps */
.customer-task-modal-stage .customer-stage-preview .done:not(:first-child)::before,
.customer-task-modal-stage .customer-stage-preview .active:not(:first-child)::before {
  background: #22c55e !important;
  box-shadow: none !important;
}

/* Active Segment (The line currently filling towards the next step): Gradient from active Gold to gray track */
.customer-task-modal-stage .customer-stage-preview .active+span::before {
  background: linear-gradient(90deg, #eab308 0%, #e2e8f0 100%) !important;
  box-shadow: 0 0 8px rgba(234, 179, 8, 0.25) !important;
  transition: all 0.4s ease !important;
}

/* Detailed Large Nodes */
.customer-task-modal-stage .customer-stage-preview i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 2px solid #cbd5e1 !important;
  color: #94a3b8 !important;
  /* standard grey color for step number */
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  font-style: normal !important;
  position: relative !important;
  /* Required to enable global z-index stacking! */
  z-index: 2 !important;
  /* sits globally above lines! */
  margin: 0 !important;
  box-sizing: border-box !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Set node content to step number (1, 2, 3, 4) dynamically */
.customer-task-modal-stage .customer-stage-preview i::before {
  content: counter(stage-step) !important;
}

/* Completed Step (Done): Solid Emerald Green with crisp White Checkmark (Perfect, solid filling!) */
.customer-task-modal-stage .customer-stage-preview .done i {
  background: #22c55e !important;
  border-color: #22c55e !important;
  color: #ffffff !important;
  /* high-contrast white checkmark! */
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3) !important;
}

.customer-task-modal-stage .customer-stage-preview .done i::before {
  content: "\2713" !important;
  /* override number with beautiful checkmark! */
}

/* Active Step: Solid Glowing Amber/Gold with crisp White Number (Fully filled, no hollow gaps!) */
.customer-task-modal-stage .customer-stage-preview .active i {
  background: #eab308 !important;
  border-color: #eab308 !important;
  color: #ffffff !important;
  /* high-contrast white step number! */
  box-shadow: 0 0 15px rgba(234, 179, 8, 0.5), 0 0 0 4px rgba(234, 179, 8, 0.15) !important;
  animation: detailedActiveNeonPulse 1.8s ease-in-out infinite !important;
}

@keyframes detailedActiveNeonPulse {
  0% {
    box-shadow: 0 0 10px rgba(234, 179, 8, 0.35), 0 0 0 0px rgba(234, 179, 8, 0.15);
  }

  50% {
    box-shadow: 0 0 18px rgba(234, 179, 8, 0.65), 0 0 0 6px rgba(234, 179, 8, 0);
  }

  100% {
    box-shadow: 0 0 10px rgba(234, 179, 8, 0.35), 0 0 0 0px rgba(234, 179, 8, 0);
  }
}

/* Elegant Text Labels for Detailed Version */
.customer-task-modal-stage .customer-stage-preview b {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #64748b !important;
  /* crisp label text */
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  transition: all 0.3s ease !important;
  max-width: 95% !important;
}

/* Highlighted state labels */
.customer-task-modal-stage .customer-stage-preview .done b {
  color: #334155 !important;
  font-weight: 800 !important;
}

.customer-task-modal-stage .customer-stage-preview .active b {
  color: #0f172a !important;
  /* ultra high-contrast dark charcoal slate */
  font-weight: 900 !important;
  transform: scale(1.04) !important;
}

.customer-task-open-label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  color: var(--cc-accent);
  font-size: 0.8rem;
  font-weight: 900;
}

.customer-task-open-label i {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(234, 179, 8, 0.12);
  border-radius: 999px;
  color: #9a6c00;
  font-style: normal;
  transition: transform 0.18s ease;
}

.customer-task-card.is-open .customer-task-open-label i {
  transform: rotate(180deg);
}

.customer-task-card.is-collapsible .customer-task-body {
  margin-top: 0;
  background: #fff;
}

.customer-task-card.is-collapsible .customer-task-body[hidden] {
  display: none;
}

.customer-task-list.completed .customer-task-toggle {
  background: linear-gradient(180deg, #ffffff, #fafafa);
}

.customer-task-list.completed .customer-task-preview-mid {
  background: rgba(15, 17, 21, 0.045);
}

.customer-task-list.completed .customer-task-preview-mid strong,
.customer-task-list.completed .customer-stage-preview .active b {
  color: #111827;
}

.customer-task-list.completed .customer-stage-preview .done i,
.customer-task-list.completed .customer-stage-preview .active i {
  background: #111827;
  border-color: #111827;
}

.customer-task-list.completed .customer-stage-preview .done::before {
  background: #111827;
}

@media (max-width: 820px) {
  .customer-task-toggle {
    padding: 16px;
  }

  .customer-task-preview-top,
  .customer-task-preview-mid {
    align-items: flex-start;
    flex-direction: column;
  }

  .customer-stage-preview b {
    white-space: normal;
  }
}

/* Customer cockpit v12: denser four-column task cards */
.customer-board {
  grid-template-columns: minmax(0, 1fr) 360px;
}

.customer-task-list,
.customer-task-list.completed {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.customer-task-card.is-collapsible {
  min-width: 0;
  border-radius: 16px;
  box-shadow: none;
}

.customer-task-card.is-collapsible:hover,
.customer-task-card.is-collapsible.is-open {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15, 17, 21, 0.065);
}

.customer-task-toggle {
  min-height: 174px;
  gap: 10px;
  padding: 12px;
  background: #fff;
}

#subscriber-cockpit-root .customer-task-card.stage-created .customer-task-toggle {
  background: #fff4e6 !important;
  border-top: 3px solid rgba(59, 130, 246, 0.55) !important;
}

#subscriber-cockpit-root .customer-task-card.stage-review .customer-task-toggle {
  background: #fff4e6 !important;
  border-top: 3px solid rgba(234, 179, 8, 0.6) !important;
}

#subscriber-cockpit-root .customer-task-card.stage-work .customer-task-toggle {
  background: #fff4e6 !important;
  border-top: 3px solid rgba(20, 184, 166, 0.55) !important;
}

.customer-task-card.stage-done .customer-task-toggle {
  background: linear-gradient(180deg, #ffffff, #f5f5f4) !important;
  border-top: 3px solid rgba(17, 24, 39, 0.22) !important;
}

.customer-task-preview-top {
  display: grid;
  gap: 8px;
}

.customer-task-preview-top .request-mini-pill {
  width: max-content;
  max-width: 100%;
  padding: 4px 8px;
  font-size: 0.68rem;
}

.customer-task-preview-top h3 {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.92rem;
  line-height: 1.55;
  max-height: 3.1em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-word;
}

.customer-task-preview-top span:first-child {
  overflow: hidden;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-task-preview-mid {
  display: grid;
  gap: 2px;
  padding: 0;
  background: transparent;
}

.customer-task-preview-mid strong {
  font-size: 0.82rem;
}

.customer-task-preview-mid small {
  overflow: hidden;
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-task-preview-mid p {
  display: -webkit-box;
  min-height: 28px;
  margin: 3px 0 0;
  overflow: hidden;
  color: #4b5563;
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.customer-task-completion-time {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin-top: 7px !important;
  padding: 7px 9px !important;
  border: 1px solid rgba(37, 99, 235, 0.16) !important;
  border-radius: 9px !important;
  background: rgba(37, 99, 235, 0.08) !important;
  color: #1d4ed8 !important;
  font-style: normal !important;
  line-height: 1 !important;
}

.customer-task-completion-time span {
  color: #2563eb !important;
  font-size: 0.58rem !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.customer-task-completion-time b {
  color: #0f172a !important;
  font-size: 0.64rem !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.customer-task-completion-time.is-priority-resolution {
  border-color: rgba(234, 179, 8, 0.28) !important;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.13), rgba(37, 99, 235, 0.07)) !important;
}

.customer-task-completion-time.is-priority-resolution span {
  color: #b45309 !important;
}

.customer-task-completion-time.is-priority-resolution b {
  color: #92400e !important;
  white-space: normal !important;
}

.customer-completion-time-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  min-height: 74px;
  padding: 13px 14px;
  border: 1px solid rgba(37, 99, 235, 0.15);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.09), rgba(14, 165, 233, 0.08));
}

.customer-detail-metrics .customer-completion-time-tile {
  min-height: 0;
  padding: 5px 6px;
  gap: 2px;
  border-radius: 6px;
  border-width: 1.5px;
  border-color: rgba(235, 94, 40, 0.22);
  background: rgba(255, 255, 255, 0.7);
}

.customer-completion-time-tile span {
  color: #2563eb;
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.customer-completion-time-tile strong {
  color: #0f172a;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.15;
  white-space: nowrap;
}

.customer-completion-time-tile.is-priority-resolution {
  border-color: rgba(234, 179, 8, 0.24);
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.12), rgba(37, 99, 235, 0.06));
}

.customer-completion-time-tile.is-priority-resolution span {
  color: #b45309;
}

.customer-completion-time-tile.is-priority-resolution strong {
  color: #78350f;
  font-size: 0.95rem;
  line-height: 1.15;
  white-space: nowrap;
}

.customer-stage-preview {
  gap: 0;
  padding: 2px 0;
}

.customer-stage-preview span {
  min-height: 12px;
}

.customer-stage-preview span::before {
  top: 5px;
  left: 12px;
  right: -2px;
}

.customer-stage-preview i {
  width: 12px;
  height: 12px;
  border-width: 2px;
}

.customer-stage-preview b {
  display: none;
}

.customer-stage-preview .active i {
  animation: customerStagePulse 1.45s ease-out infinite;
  box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.14);
}

.customer-task-open-label {
  display: none;
}

@keyframes customerStagePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.38);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(234, 179, 8, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(234, 179, 8, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .customer-stage-preview .active i {
    animation: none;
  }
}

.customer-task-open-label i {
  width: 19px;
  height: 19px;
  font-size: 0.8rem;
}

.customer-task-card.is-collapsible .customer-task-body-title {
  display: grid;
  gap: 3px;
  padding: 12px 12px 6px;
}

.customer-task-card.is-collapsible .customer-task-events {
  padding: 0 12px 12px;
}

.customer-task-card.is-collapsible .customer-task-event {
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 9px 0 9px 14px;
}

.customer-task-card.is-collapsible .customer-task-event p {
  font-size: 0.82rem;
  line-height: 1.38;
}

.customer-task-event-brand {
  display: inline-flex !important;
  align-items: baseline;
  width: max-content;
  color: #111827 !important;
  font-family: Outfit, Inter, sans-serif;
  font-size: 0.96rem !important;
  font-weight: 900;
  letter-spacing: 0;
}

.customer-task-event-brand span {
  color: #eab308;
}

@media (max-width: 1320px) {

  .customer-task-list,
  .customer-task-list.completed {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1120px) {
  .customer-board {
    grid-template-columns: 1fr;
  }

  .customer-task-list,
  .customer-task-list.completed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {

  .customer-task-list,
  .customer-task-list.completed {
    grid-template-columns: 1fr;
  }
}

/* Customer cockpit v13: task details open in popup, cards keep grid height */
html.customer-task-modal-open,
body.customer-task-modal-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.customer-task-modal-open #dashboard-wrapper,
body.customer-task-modal-open .main-content,
body.customer-task-modal-open .panels-wrapper,
body.customer-task-modal-open #subscriber-cockpit-root,
body.customer-task-modal-open main:has(#subscriber-cockpit-root),
body.customer-task-modal-open .cc-card__body--scroll,
body.customer-task-modal-open .customer-notifications-minimalist-list {
  overflow: hidden !important;
  overflow-y: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

body.customer-task-modal-open .customer-task-modal:not([hidden]) {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  touch-action: auto !important;
}

body.customer-task-modal-open .customer-task-modal:not([hidden]) * {
  touch-action: auto !important;
}

.customer-task-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 22px;
}

.customer-task-modal[hidden] {
  display: none;
}

.customer-task-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 17, 21, 0.46);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

.customer-task-modal-dialog {
  position: relative;
  width: min(680px, 100%);
  max-height: min(720px, calc(100vh - 44px));
  overflow: auto;
  padding: 22px;
  background: #fff;
  border: 1px solid rgba(15, 17, 21, 0.09);
  border-radius: 14px;
  box-shadow: 0 30px 90px rgba(15, 17, 21, 0.24);
}

.customer-task-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f5f6f8;
  border: 1px solid rgba(15, 17, 21, 0.08);
  border-radius: 999px;
  color: #111827;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}

.customer-task-modal-close:hover {
  background: #111827;
  color: #fff;
}

.customer-task-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-right: 42px;
}

.customer-task-modal-meta {
  display: block;
  color: var(--cc-muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.customer-task-modal-head h3 {
  margin: 6px 0 0;
  color: var(--cc-text);
  font-size: 1.24rem;
  line-height: 1.22;
  letter-spacing: 0;
}

.customer-task-modal-status {
  display: inline-flex;
  flex: 0 0 auto;
  margin-top: 2px;
}

.customer-task-modal-stage {
  margin-top: 24px !important;
  padding: 16px 20px !important;
  background: #f8fafc !important;
  /* slate 50 clean light background */
  border: 1px solid #e2e8f0 !important;
  /* clean solid boundary */
  border-radius: 16px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
}

.customer-task-modal-stage[hidden] {
  display: none !important;
}

.customer-task-modal-content {
  margin-top: 16px;
  border: 1px solid rgba(15, 17, 21, 0.08);
  border-radius: 20px;
}

.customer-task-modal-content .customer-task-body-title {
  display: flex;
  padding: 15px 18px 8px;
}

.customer-task-modal-content .customer-task-events-scroll {
  padding: 0 2px 14px 0;
  overflow-x: visible;
}

.customer-task-modal-content .customer-task-events-scroll > .customer-task-events {
  padding: 8px 4px 16px 6px;
  overflow: visible !important;
}

.customer-task-modal-content .customer-task-event {
  padding-left: 14px !important;
  padding-right: 2px !important;
}

.customer-task-modal-content .customer-task-event.is-latest-update::before,
.customer-task-modal-content .customer-task-event:first-child::before {
  width: var(--timeline-dot-size-latest, 11px) !important;
  height: var(--timeline-dot-size-latest, 11px) !important;
  top: calc(var(--timeline-dot-top, 21px) - 1.5px) !important;
  background: #22c55e !important;
  animation: requestLatestPointPulseGreen 1.12s ease-out infinite !important;
  box-shadow: 0 0 0 2px #f1f5f9 !important;
  outline: none !important;
}

.customer-task-empty-detail {
  display: grid;
  gap: 5px;
  padding: 18px;
}

.customer-task-empty-detail strong {
  color: var(--cc-text);
  font-size: 0.94rem;
}

.customer-task-empty-detail span {
  color: var(--cc-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.customer-task-card.is-collapsible .customer-task-body[hidden] {
  display: none;
}

.customer-task-card.is-collapsible.is-open .customer-task-toggle {
  background: #fffaf0;
}

/* Customer cockpit v14: completed tasks are collapsed; task cards open modal only */
.customer-completed-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.customer-completed-toggle span {
  min-width: max-content;
  padding: 6px 10px;
  background: #f4f4f2;
  border: 1px solid rgba(15, 17, 21, 0.08);
  border-radius: 999px;
  color: #4b5563;
  font-size: 0.75rem;
  font-weight: 850;
}

.customer-completed-toggle i {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(15, 17, 21, 0.1);
  border-radius: 999px;
  color: #111827;
  font-style: normal;
  font-weight: 900;
  transition: transform 0.18s ease, background 0.18s ease;
}

.customer-completed-toggle:hover i,
.customer-completed-toggle:focus-visible i {
  background: #111827;
  color: #fff;
}

.customer-task-section.completed.is-open .customer-completed-toggle i {
  transform: rotate(180deg);
}

.customer-completed-body[hidden] {
  display: none !important;
}

.customer-task-list.completed .customer-task-toggle {
  min-height: 132px;
}

.customer-task-list.completed .customer-task-open-label {
  margin-top: auto;
}

.customer-task-section.completed:not(.is-open) {
  padding-bottom: 14px;
}

.customer-task-section.completed:not(.is-open) .customer-task-section-head {
  margin-bottom: 0;
}

.customer-task-detail-template {
  display: none;
}

.customer-work-panel {
  min-height: 0;
}

@media (max-width: 700px) {
  .customer-task-modal {
    padding: 12px;
  }

  .customer-task-modal-dialog {
    max-height: calc(100vh - 24px);
    padding: 18px;
    border-radius: 20px;
  }

  .customer-task-modal-head {
    display: grid;
    padding-right: 34px;
  }

  .customer-task-modal-stage .customer-stage-preview b {
    display: none;
  }

  .customer-task-modal-content .customer-task-body-title {
    display: grid;
  }
}

/* Customer cockpit v17: RestoUp themed task popup */
.customer-task-modal {
  padding: clamp(14px, 3vw, 34px);
}

.customer-task-modal-backdrop {
  background:
    radial-gradient(circle at 50% 12%, rgba(234, 179, 8, 0.2), transparent 34%),
    rgba(10, 12, 16, 0.72);
  backdrop-filter: blur(10px);
}

.customer-task-modal-dialog {
  width: min(640px, 100%);
  overflow: hidden;
  padding: 0;
  background: #f7f4ea;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 28px;
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.36);
}

.customer-task-modal-close {
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff7d6;
}

.customer-task-modal-close:hover,
.customer-task-modal-close:focus-visible {
  background: #eab308;
  border-color: #eab308;
  color: #111827;
}

.customer-task-modal-head {
  min-height: 132px;
  align-items: flex-end;
  padding: 28px 72px 24px 28px;
  background:
    linear-gradient(135deg, rgba(234, 179, 8, 0.2), transparent 44%),
    #0f1115;
}

.customer-task-modal-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.78rem;
  text-transform: none;
}

.customer-task-id-tag {
  display: inline-flex !important;
  align-items: center;
  flex: 0 0 auto;
  width: max-content;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(2, 132, 199, 0.1);
  border: 1px solid rgba(2, 132, 199, 0.16);
  color: #0284c7;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.customer-task-modal-meta-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-task-modal-meta .customer-task-id-tag {
  background: rgba(235, 94, 40, 0.15);
  border-color: rgba(235, 94, 40, 0.3);
  color: #ffedd5;
}

.customer-task-recurring-tag,
.customer-task-special-request-tag {
  display: inline-flex !important;
  align-items: center !important;
  width: max-content !important;
  max-width: 100% !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: rgba(14, 165, 233, 0.12) !important;
  border: 1px solid rgba(14, 165, 233, 0.24) !important;
  color: #7dd3fc !important;
  font-size: 0.66rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  letter-spacing: 0.35px !important;
}

.customer-task-modal-head h3 {
  max-width: 460px;
  color: #fff;
  font-size: 1.32rem;
}

.customer-task-modal-status .request-mini-pill {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #fff7d6 !important;
}

.customer-task-modal-stage {
  margin: 16px 18px 0;
  padding: 15px 16px;
  background: #fff;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 10px 24px rgba(15, 17, 21, 0.06);
}

.customer-task-modal-content {
  margin: 14px 18px 18px;
  overflow: hidden;
  background: #fff;
  border: 0;
  border-radius: 22px;
  color: #111827;
  box-shadow: 0 10px 24px rgba(15, 17, 21, 0.06);
}

.customer-task-modal-content .customer-task-body {
  margin-top: 0;
  border-top: 0;
  color: #111827 !important;
}

.customer-task-modal-content .customer-task-body-title {
  align-items: center;
  padding: 16px 8px 8px;
}

.customer-task-modal-content .customer-task-body-title span {
  color: #9a6c00 !important;
}

.customer-task-modal-content .customer-task-body-title b {
  color: #6b7280 !important;
}

.customer-task-modal-content .customer-task-events {
  padding: 8px 4px 16px 6px;
  overflow: visible !important;
}



.customer-task-modal-content .customer-task-event::before {
  background: #eab308;
  box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.16);
}

.customer-task-modal-content .customer-task-event time {
  color: #6b7280 !important;
}

.customer-task-modal-content .customer-task-event strong {
  color: #111827 !important;
}

.customer-task-modal-content .customer-task-event p {
  color: #4b5563 !important;
}

.customer-task-empty-detail {
  background: #fff;
  color: #111827;
}

@media (max-width: 700px) {
  .customer-task-modal-dialog {
    border-radius: 22px;
  }

  .customer-task-modal-head {
    min-height: 116px;
    padding: 24px 62px 22px 22px;
  }

  .customer-task-modal-stage,
  .customer-task-modal-content {
    margin-left: 12px;
    margin-right: 12px;
  }
}

/* Customer cockpit v22: stronger stage colors and completed popup timeline */
#subscriber-cockpit-root .customer-task-card.stage-created {
  background: #fff4e6 !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
}

#subscriber-cockpit-root .customer-task-card.stage-created .customer-task-toggle {
  background: #fff4e6 !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  border-top-color: rgba(59, 130, 246, 0.58) !important;
}

#subscriber-cockpit-root .customer-task-card.stage-review {
  background: #fff4e6 !important;
  border-color: rgba(234, 179, 8, 0.38) !important;
}

#subscriber-cockpit-root .customer-task-card.stage-review .customer-task-toggle {
  background: #fff4e6 !important;
  border-color: rgba(234, 179, 8, 0.28) !important;
  border-top-color: rgba(234, 179, 8, 0.65) !important;
}

#subscriber-cockpit-root .customer-task-card.stage-work {
  background: #fff4e6 !important;
  border-color: rgba(20, 184, 166, 0.35) !important;
}

#subscriber-cockpit-root .customer-task-card.stage-work .customer-task-toggle {
  background: #fff4e6 !important;
  border-color: rgba(20, 184, 166, 0.28) !important;
  border-top-color: rgba(20, 184, 166, 0.58) !important;
}

#subscriber-cockpit-root .customer-task-card.stage-done {
  background: #f5f5f4 !important;
  border-color: rgba(34, 197, 94, 0.18) !important;
}

.customer-task-card.stage-done .customer-task-toggle {
  background: #eaf8ef;
  border-color: rgba(34, 197, 94, 0.26);
  border-top-color: rgba(34, 197, 94, 0.58);
}

.customer-task-modal.is-completed .customer-task-modal-content .customer-task-event {
  border-left-color: rgba(34, 197, 94, 0.36);
}

.customer-task-modal.is-completed .customer-task-modal-content .customer-task-event::before {
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.16);
}

.customer-task-modal.is-completed .customer-task-modal-content .customer-task-body-title span {
  color: #15803d !important;
}

/* Operation panel v23: compact control desk */
.opflow {
  width: 100%;
  color: #15191f;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.opflow-top {
  min-height: 116px;
  padding: 24px 26px;
  border-radius: 28px;
  background: linear-gradient(135deg, #111318 0%, #1c1b16 56%, #2a220e 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 18px 42px rgba(17, 19, 24, 0.16);
}

.opflow-top span {
  display: block;
  margin-bottom: 8px;
  color: #f2bf28;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.opflow-top h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1;
  letter-spacing: 0;
}

.opflow-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(78px, 1fr));
  gap: 8px;
  min-width: min(460px, 100%);
}

.opflow-stats div {
  min-height: 72px;
  padding: 13px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.opflow-stats b {
  display: block;
  color: #fff;
  font-size: 26px;
  line-height: 1;
}

.opflow-stats span {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  text-transform: none;
}

.opflow-toolbar {
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr minmax(190px, 230px);
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 28px rgba(15, 17, 21, 0.06);
}

.opflow-search,
.opflow-owner {
  min-height: 44px;
  border: 0 !important;
  border-radius: 16px !important;
  background: #f5f6f8 !important;
  color: #15191f !important;
}

.opflow-filters {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.opflow-filters .request-filter-chip {
  min-height: 38px;
  padding: 0 13px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: #667085;
  white-space: nowrap;
  box-shadow: none;
}

.opflow-filters .request-filter-chip:hover,
.opflow-filters .request-filter-chip.active {
  background: #111318;
  color: #fff;
}

.opflow-layout {
  display: grid;
  grid-template-columns: minmax(320px, 390px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.opflow-left,
.opflow-detail {
  min-width: 0;
}

.opflow-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.opflow-task-section,
.opflow-detail,
.opflow-update,
.opflow-context section,
.opflow-history-grid>div {
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 17, 21, 0.06);
}

.opflow-task-section {
  padding: 16px;
}

.opflow-section-title {
  margin-bottom: 13px;
}

.opflow-section-title.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.opflow-section-title span {
  display: block;
  color: #8a93a2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.opflow-section-title h3,
.opflow-section-title h4 {
  margin: 3px 0 0;
  color: #15191f;
  font-size: 18px;
  line-height: 1.15;
}

.opflow-section-title h4 {
  font-size: 15px;
}

.opflow-section-title.row>strong {
  padding: 7px 11px;
  border-radius: 999px;
  background: #f5f6f8;
  color: #4b5563;
  font-size: 12px;
}

.opflow-card-list {
  display: grid;
  gap: 10px;
}

.opflow-card {
  width: 100%;
  min-height: 128px;
  padding: 14px;
  border: 1px solid transparent;
  border-radius: 20px;
  color: #15191f;
  text-align: left;
  display: grid;
  gap: 7px;
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.opflow-card:hover,
.opflow-card.active {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(15, 17, 21, 0.1);
}

.opflow-card.stage-created {
  background: #eef6ff;
  border-color: rgba(59, 130, 246, 0.24);
}

.opflow-card.stage-review {
  background: #fff5cc;
  border-color: rgba(234, 179, 8, 0.32);
}

.opflow-card.stage-work {
  background: #e8fbf4;
  border-color: rgba(20, 184, 166, 0.28);
}

.opflow-card.stage-done {
  background: #eaf8ef;
  border-color: rgba(34, 197, 94, 0.3);
}

.opflow-card.active {
  outline: 3px solid rgba(242, 191, 40, 0.34);
  outline-offset: 1px;
}

.opflow-card-meta {
  color: #7b8492;
  font-size: 11px;
  font-weight: 800;
}

.opflow-card strong {
  color: #15191f;
  font-size: 15px;
  line-height: 1.2;
}

.opflow-card small {
  color: #5b6472;
  font-size: 12px;
}

.opflow-card p {
  min-height: 34px;
  margin: 0;
  color: #424b57;
  font-size: 12px;
  line-height: 1.4;
}

.opflow-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.opflow-completed-toggle {
  width: 68px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: #ecfdf3;
  color: #15803d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
}

.opflow-completed-toggle i {
  font-style: normal;
  font-size: 12px;
  transition: transform 0.18s ease;
}

.opflow-completed.is-open .opflow-completed-toggle i {
  transform: rotate(180deg);
}

.opflow-completed-body {
  margin-top: 10px;
}

.opflow-completed-body[hidden] {
  display: none;
}

.opflow-card-list.completed .opflow-card {
  min-height: 108px;
}

.opflow-detail {
  padding: 20px;
}

.opflow-detail.empty {
  min-height: 420px;
  display: grid;
  place-items: center;
}

.opflow-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #edf0f4;
}

.opflow-detail-head span {
  color: #f2a900;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.opflow-detail-head h3 {
  margin: 5px 0 6px;
  color: #111318;
  font-size: 26px;
  line-height: 1.08;
}

.opflow-detail-head p {
  max-width: 760px;
  margin: 0;
  color: #5b6472;
  font-size: 14px;
  line-height: 1.5;
}

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

.opflow-actions .btn-primary,
.opflow-actions .btn-ghost,
.opflow-save .btn-primary {
  min-height: 40px;
  border-radius: 999px;
}

.opflow-selected-card {
  margin: 16px 0;
  padding: 16px;
  border-radius: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid transparent;
}

.opflow-selected-card.stage-created {
  background: #eef6ff;
  border-color: rgba(59, 130, 246, 0.2);
}

.opflow-selected-card.stage-review {
  background: #fff6d7;
  border-color: rgba(234, 179, 8, 0.28);
}

.opflow-selected-card.stage-work {
  background: #e9fbf5;
  border-color: rgba(20, 184, 166, 0.24);
}

.opflow-selected-card.stage-done {
  background: #ecfdf3;
  border-color: rgba(34, 197, 94, 0.26);
}

.opflow-stage {
  display: grid;
  grid-template-columns: repeat(4, minmax(70px, 1fr));
  gap: 8px;
}

.opflow-stage span {
  position: relative;
  min-height: 48px;
  padding: 0 0 0 22px;
  color: #818a98;
  display: flex;
  align-items: center;
}

.opflow-stage span::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 25px;
  width: calc(100% + 8px);
  height: 2px;
  background: rgba(17, 19, 24, 0.12);
}

.opflow-stage span:last-child::before {
  display: none;
}

.opflow-stage i {
  position: absolute;
  left: 0;
  top: 19px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #d6dbe3;
  z-index: 1;
}

.opflow-stage b {
  position: relative;
  z-index: 1;
  color: inherit;
  font-size: 12px;
  line-height: 1.15;
}

.opflow-stage .done,
.opflow-stage .active {
  color: #111318;
}

.opflow-stage .done i {
  background: #22c55e;
}

.opflow-stage .active i {
  background: #f2bf28;
  box-shadow: 0 0 0 6px rgba(242, 191, 40, 0.22);
}

.opflow-selected-card.stage-done .opflow-stage .done i,
.opflow-selected-card.stage-done .opflow-stage .active i {
  background: #22c55e;
  box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.18);
}

.opflow-selected-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.opflow-work-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
  gap: 14px;
}

.opflow-update,
.opflow-context section,
.opflow-history-grid>div {
  padding: 16px;
  border: 1px solid #edf0f4;
  box-shadow: none;
}

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

.opflow-form-row label,
.opflow-note-row label {
  display: grid;
  gap: 7px;
  color: #5b6472;
  font-size: 12px;
  font-weight: 800;
}

.opflow-form-row .request-field-input,
.opflow-note-row .request-field-input {
  border-radius: 16px !important;
  border-color: #e5e9f0 !important;
  background: #f8fafc !important;
  color: #15191f !important;
}

.opflow .request-field-input option,
.customer-cockpit .request-field-input option {
  background: #fff;
  color: #15191f;
}

.opflow-note-row {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.opflow-note-row textarea {
  min-height: 116px;
}

.opflow-save {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.opflow-context {
  display: grid;
  gap: 14px;
}

.opflow-facts {
  display: grid;
  gap: 9px;
}

.opflow-facts div {
  padding: 10px 0;
  border-bottom: 1px solid #edf0f4;
}

.opflow-facts div:last-child {
  border-bottom: 0;
}

.opflow-facts span {
  display: block;
  color: #8a93a2;
  font-size: 11px;
}

.opflow-facts strong {
  display: block;
  margin-top: 3px;
  color: #15191f;
  font-size: 13px;
}

.opflow-drive-list {
  display: grid;
  gap: 9px;
}

.opflow-drive-link {
  min-height: 58px;
  padding: 10px;
  border-radius: 10px;
  background: #f7f8fa;
  color: #15191f;
  text-decoration: none;
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 10px;
}

.opflow-drive-link>span {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: #111318;
  color: #f2bf28;
  display: grid;
  place-items: center;
  font-weight: 900;
}

.opflow-drive-link strong {
  display: block;
  color: #15191f;
  font-size: 13px;
}

.opflow-drive-link small {
  display: block;
  margin-top: 2px;
  color: #7b8492;
  font-size: 11px;
}

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

.opflow-timeline {
  display: grid;
  gap: 12px;
}

.opflow-timeline-row {
  position: relative;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  border-left: 2px solid rgba(242, 191, 40, 0.28);
}

.opflow-timeline-row::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f2bf28;
  box-shadow: 0 0 0 4px rgba(242, 191, 40, 0.16);
}

.opflow-timeline-row.internal {
  border-left-color: rgba(17, 19, 24, 0.16);
}

.opflow-timeline-row.internal::before {
  background: #111318;
  box-shadow: 0 0 0 4px rgba(17, 19, 24, 0.08);
}

.opflow-selected-card.stage-done~.opflow-work-grid+.opflow-history-grid .opflow-timeline-row:not(.internal) {
  border-left-color: rgba(34, 197, 94, 0.34);
}

.opflow-selected-card.stage-done~.opflow-work-grid+.opflow-history-grid .opflow-timeline-row:not(.internal)::before {
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.16);
}

.opflow-timeline-row time {
  color: #8a93a2;
  font-size: 11px;
  font-weight: 800;
}

.opflow-timeline-row strong {
  color: #15191f;
  font-size: 13px;
}

.opflow-timeline-row p {
  margin: 3px 0 0;
  color: #5b6472;
  font-size: 13px;
  line-height: 1.45;
}

.opflow-empty {
  min-height: 110px;
  padding: 18px;
  border-radius: 20px;
  background: #f8fafc;
  color: #5b6472;
  display: grid;
  align-content: center;
  gap: 5px;
}

.opflow-empty.compact {
  min-height: 78px;
}

.opflow-empty.large {
  min-height: 260px;
  justify-items: center;
  text-align: center;
}

.opflow-empty strong {
  color: #15191f;
}

@media (max-width: 1180px) {

  .opflow-top,
  .opflow-detail-head {
    align-items: stretch;
    flex-direction: column;
  }

  .opflow-toolbar,
  .opflow-layout,
  .opflow-work-grid,
  .opflow-history-grid,
  .opflow-selected-card {
    grid-template-columns: 1fr;
  }

  .opflow-stats {
    min-width: 0;
  }

  .opflow-selected-badges {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .opflow-top {
    padding: 20px;
    border-radius: 22px;
  }

  .opflow-top h2 {
    font-size: 30px;
  }

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

  .opflow-toolbar,
  .opflow-detail,
  .opflow-task-section {
    border-radius: 20px;
  }

  .opflow-form-row,
  .opflow-note-row,
  .opflow-stage {
    grid-template-columns: 1fr;
  }

  .opflow-stage span::before {
    display: none;
  }
}

/* Request operations v23: files, editable Drive links and calmer task colors */
.customer-stage-preview span:not(.active) i,
.customer-task-modal-stage .customer-stage-preview span:not(.active) i,
.opflow-stage span:not(.active) i {
  animation: none !important;
}

.customer-stage-preview .active i,
.customer-task-modal-stage .customer-stage-preview .active i,
.opflow-stage .active i {
  animation: requestLatestPointPulse 1.55s ease-out infinite;
}

.customer-task-events .customer-task-event:not(.is-latest-update):not(:first-child)::before,
.opflow-timeline-row:not(:first-child)::before {
  animation: none;
}

.customer-task-events .customer-task-event.is-latest-update::before,
.customer-task-events .customer-task-event:first-child::before,
.opflow-timeline .opflow-timeline-row:first-child::before {
  background: #22c55e !important;
  animation: requestLatestPointPulseGreen 1.12s ease-out infinite;
  outline: none !important;
  outline-offset: 0 !important;
  transform-origin: center center;
  box-shadow: 0 0 0 2px #f1f5f9 !important;
}

.customer-task-events .customer-task-event.is-latest-update::before,
.customer-task-events .customer-task-event:first-child::before {
  animation-name: requestLatestPointPulseGreen !important;
}

.customer-task-event.is-latest-update:hover::before,
.customer-task-events .customer-task-event:first-child:hover::before {
  background: #16a34a !important;
}

.customer-task-modal.is-completed .customer-task-events .customer-task-event:first-child::before,
.opflow-selected-card.stage-done~.opflow-work-grid+.opflow-history-grid .opflow-timeline .opflow-timeline-row:first-child::before {
  animation-name: requestLatestPointPulseGreen;
}

@keyframes requestLatestPointPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.52), 0 0 0 8px rgba(234, 179, 8, 0.12);
  }

  55% {
    transform: scale(1.18);
    box-shadow: 0 0 0 9px rgba(234, 179, 8, 0.22), 0 0 0 18px rgba(234, 179, 8, 0.05);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 17px rgba(234, 179, 8, 0), 0 0 0 25px rgba(234, 179, 8, 0);
  }
}

@keyframes requestLatestPointPulseGreen {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.48), 0 0 0 8px rgba(34, 197, 94, 0.12);
  }

  55% {
    transform: scale(1.18);
    box-shadow: 0 0 0 9px rgba(34, 197, 94, 0.2), 0 0 0 18px rgba(34, 197, 94, 0.05);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 17px rgba(34, 197, 94, 0), 0 0 0 25px rgba(34, 197, 94, 0);
  }
}

.customer-task-card.stage-created,
.customer-task-card.stage-review,
.customer-task-card.stage-work {
  background: #fff;
  border-color: rgba(15, 17, 21, 0.08);
}

.customer-task-card.stage-created .customer-task-toggle,
.customer-task-card.stage-review .customer-task-toggle,
.customer-task-card.stage-work .customer-task-toggle {
  background: #fff;
  border-color: rgba(15, 17, 21, 0.08);
  border-top-color: rgba(15, 17, 21, 0.08);
}

.customer-task-card.stage-done,
.customer-task-card.stage-done .customer-task-toggle {
  background: #ecfdf3;
  border-color: rgba(34, 197, 94, 0.28);
  border-top-color: rgba(34, 197, 94, 0.58);
}

.opflow-card.stage-created,
.opflow-card.stage-review,
.opflow-card.stage-work,
.opflow-selected-card.stage-created,
.opflow-selected-card.stage-review,
.opflow-selected-card.stage-work {
  background: #fff;
  border-color: #e8ecf2;
}

.opflow-card.stage-done,
.opflow-selected-card.stage-done {
  background: #ecfdf3;
  border-color: rgba(34, 197, 94, 0.3);
}

.opflow-card.stage-created:hover,
.opflow-card.stage-review:hover,
.opflow-card.stage-work:hover,
.opflow-card.active {
  border-color: rgba(242, 191, 40, 0.38);
}

.opflow-card-attach {
  background: #111318 !important;
  color: #fff !important;
  border-color: #111318 !important;
}

.request-attachment-empty {
  min-height: 76px;
  padding: 14px;
  border-radius: 10px;
  background: #f7f8fa;
  color: #6b7280;
  display: grid;
  align-content: center;
  gap: 4px;
}

.request-attachment-empty strong {
  color: #15191f;
}

.request-attachment-list {
  display: grid;
  gap: 9px;
}

.request-attachment-card {
  min-height: 62px;
  padding: 9px;
  border-radius: 10px;
  background: #f7f8fa;
  border: 1px solid #edf0f4;
  color: #15191f;
  text-decoration: none;
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 10px;
}

.request-attachment-card:hover {
  border-color: rgba(242, 191, 40, 0.45);
  box-shadow: 0 10px 22px rgba(15, 17, 21, 0.07);
}

.request-attachment-card>span {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: #111318;
  color: #f2bf28;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
}

.request-attachment-card img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 15px;
  background: #e5e7eb;
}

.request-attachment-card strong {
  display: block;
  color: #15191f;
  font-size: 13px;
  line-height: 1.25;
}

.request-attachment-card small {
  display: block;
  margin-top: 3px;
  color: #7b8492;
  font-size: 11px;
}

.request-update-attachments {
  margin-top: 10px;
}

.customer-task-file-count {
  width: fit-content;
  margin-top: 6px;
  padding: 6px 9px;
  border-radius: 999px;
  background: #111318;
  color: #f2bf28;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.customer-task-event .request-update-attachments,
.opflow-timeline-row .request-update-attachments {
  max-width: 100%;
}

.customer-task-event .request-attachment-list,
.opflow-timeline-row .request-attachment-list {
  gap: 7px;
}

.customer-task-event .request-attachment-card,
.opflow-timeline-row .request-attachment-card {
  min-height: 54px;
  grid-template-columns: 42px 1fr;
  background: #fff;
}

.customer-task-event .request-attachment-card>span,
.customer-task-event .request-attachment-card img,
.opflow-timeline-row .request-attachment-card>span,
.opflow-timeline-row .request-attachment-card img {
  width: 42px;
  height: 42px;
  border-radius: 13px;
}

.customer-task-attachments {
  padding: 0 20px 20px;
}

.customer-task-attachments .customer-task-body-title {
  padding: 14px 0 10px;
}

.customer-request-attachments {
  display: grid;
  gap: 10px;
}

.customer-request-link-row,
.opflow-attachment-grid,
.opflow-drive-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.opflow-attachment-uploader {
  margin-top: 12px;
  padding: 13px;
  border-radius: 20px;
  background: #f8fafc;
  border: 1px solid #edf0f4;
}

.opflow-section-title.compact {
  margin-bottom: 10px;
}

.opflow-attachment-grid label,
.opflow-drive-fields label {
  display: grid;
  gap: 7px;
  color: #5b6472;
  font-size: 12px;
  font-weight: 800;
}

.opflow-drive-manager {
  display: grid;
  gap: 10px;
}

.opflow-drive-editor {
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #edf0f4;
  overflow: hidden;
}

.opflow-drive-editor summary {
  min-height: 48px;
  padding: 0 14px;
  color: #15191f;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.opflow-drive-fields {
  padding: 0 14px 14px;
}

.opflow-drive-editor .btn-primary {
  margin: 0 14px 14px;
  width: calc(100% - 28px);
  min-height: 40px;
  border-radius: 999px;
}

.opflow-top {
  box-shadow: 0 14px 34px rgba(17, 19, 24, 0.12);
}

.opflow-task-section,
.opflow-detail,
.opflow-update,
.opflow-context section,
.opflow-history-grid>div {
  box-shadow: 0 8px 24px rgba(15, 17, 21, 0.045);
}

@media (prefers-reduced-motion: reduce) {

  .customer-stage-preview .active i,
  .customer-task-modal-stage .customer-stage-preview .active i,
  .opflow-stage .active i,
  .customer-task-events .customer-task-event.is-latest-update::before,
  .customer-task-events .customer-task-event:first-child::before,
  .opflow-timeline .opflow-timeline-row:first-child::before {
    animation: none !important;
  }
}

@media (max-width: 720px) {

  .customer-request-link-row,
  .opflow-attachment-grid,
  .opflow-drive-fields {
    grid-template-columns: 1fr;
  }
}

/* Operation panel v26: inline Drive editing, multi links and top-only motion */
.customer-stage-preview .active i,
.customer-task-modal-stage .customer-stage-preview .active i,
.opflow-stage .active i {
  animation: requestLatestPointPulse 1.05s ease-out infinite !important;
  transform-origin: center;
}

.customer-task-modal.is-completed .customer-task-modal-stage .customer-stage-preview .active i,
.opflow-selected-card.stage-done .opflow-stage .active i {
  animation-name: requestLatestPointPulseGreen !important;
}

.customer-task-events .customer-task-event.is-latest-update::before,
.customer-task-events .customer-task-event:first-child::before,
.opflow-timeline .opflow-timeline-row:first-child::before {
  animation: requestLatestPointPulseGreen 1.12s ease-out infinite !important;
  background: #22c55e !important;
  outline: none !important;
  outline-offset: 0 !important;
  transform-origin: center center;
  box-shadow: 0 0 0 2px #f1f5f9 !important;
}

.customer-task-events .customer-task-event.is-latest-update::before,
.customer-task-events .customer-task-event:first-child::before {
  animation-name: requestLatestPointPulseGreen !important;
}

.opflow-focus-strip {
  margin: -4px 0 16px;
  display: grid;
  grid-template-columns: minmax(220px, 1.8fr) repeat(4, minmax(110px, 1fr));
  gap: 10px;
}

.opflow-focus-strip div {
  min-height: 72px;
  padding: 13px 14px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #edf0f4;
  display: grid;
  align-content: center;
  gap: 5px;
}

.opflow-focus-strip span {
  color: #87909f;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.opflow-focus-strip strong {
  overflow: hidden;
  color: #15191f;
  font-size: 13px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.request-link-stack {
  display: grid;
  gap: 8px;
}

.request-link-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.42fr) minmax(180px, 0.58fr);
  gap: 8px;
}

.opflow-link-field {
  grid-column: 1 / -1;
}

.customer-request-link-row>label {
  grid-column: 1 / -1;
}

.opflow-drive-manager {
  gap: 9px;
}

.opflow-drive-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.opflow-drive-row .opflow-drive-link {
  min-width: 0;
}

.opflow-drive-inline-edit {
  min-width: 106px;
  border-radius: 10px;
  background: #f7f8fa;
  border: 1px solid #edf0f4;
  overflow: hidden;
}

.opflow-drive-inline-edit summary {
  height: 58px;
  padding: 0 12px;
  color: #15191f;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.opflow-drive-inline-edit[open] {
  grid-column: 1 / -1;
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.opflow-drive-inline-edit[open] summary {
  grid-column: 1 / -1;
  height: auto;
  min-height: 28px;
  padding: 0;
  justify-content: flex-start;
}

.opflow-drive-inline-edit .request-field-input {
  min-height: 40px;
  border-radius: 14px !important;
  background: #fff !important;
}

.opflow-drive-inline-edit .btn-primary {
  min-height: 40px;
  border-radius: 999px;
}

@media (max-width: 1100px) {
  .opflow-focus-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {

  .opflow-focus-strip,
  .request-link-row,
  .opflow-drive-row,
  .opflow-drive-inline-edit[open] {
    grid-template-columns: 1fr;
  }

  .opflow-drive-inline-edit summary {
    height: 42px;
  }
}

/* Operation panel v28: right-side queue, calmer management surface, explicit multi-file uploads */
.opflow {
  max-width: 100%;
}

.opflow-top {
  min-height: 86px;
  padding: 18px 20px;
  border-radius: 14px;
  background: #111318;
  box-shadow: none;
}

.opflow-top span {
  margin-bottom: 5px;
}

.opflow-top h2 {
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.05;
}

.opflow-stats {
  gap: 8px;
}

.opflow-stats div {
  min-height: 54px;
  padding: 9px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.opflow-stats b {
  font-size: 20px;
}

.opflow-toolbar {
  margin: 14px 0;
  padding: 10px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #edf0f4;
  box-shadow: none;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1fr) auto;
  gap: 10px;
}

.opflow-owner {
  min-width: 190px;
}

.opflow-filters {
  gap: 7px;
}

.opflow-filters .request-filter-chip {
  min-height: 36px;
  border-radius: 999px;
}

.opflow-layout {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 14px;
}

.opflow-queue-side {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding-right: 2px;
}

.opflow-task-section,
.opflow-detail,
.opflow-update,
.opflow-context section,
.opflow-history-grid>div {
  border-radius: 20px;
  border: 1px solid #edf0f4;
  box-shadow: none;
}

.opflow-detail {
  padding: 16px;
}

.opflow-detail-head {
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #f1f3f6;
}

.opflow-detail-head h3 {
  margin: 4px 0 5px;
  font-size: 22px;
  line-height: 1.12;
}

.opflow-detail-head p {
  max-width: 680px;
  font-size: 13px;
  line-height: 1.45;
}

.opflow-actions {
  gap: 8px;
}

.opflow-actions .btn-primary,
.opflow-actions .btn-ghost {
  min-height: 38px;
  padding: 0 13px;
  border-radius: 999px;
}

.opflow-selected-card {
  margin: 0 0 12px;
  padding: 12px;
  border-radius: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}

.opflow-stage {
  gap: 8px;
}

.opflow-stage span b {
  font-size: 11px;
}

.opflow-selected-badges {
  gap: 6px;
}

.opflow-focus-strip {
  margin: 0 0 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.opflow-focus-strip div {
  min-height: 56px;
  padding: 10px 12px;
  border-radius: 15px;
  background: #fbfcfe;
  border-color: #edf0f4;
}

.opflow-focus-strip span {
  font-size: 10px;
}

.opflow-focus-strip strong {
  font-size: 12px;
  line-height: 1.25;
}

.opflow-work-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.65fr);
  gap: 12px;
}

.opflow-update,
.opflow-context section,
.opflow-history-grid>div {
  padding: 14px;
}

.opflow-section-title {
  margin-bottom: 10px;
}

.opflow-section-title span {
  font-size: 10px;
}

.opflow-section-title h3,
.opflow-section-title h4 {
  font-size: 15px;
}

.opflow-form-row,
.opflow-note-row {
  gap: 10px;
}

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

.opflow-note-row .textarea {
  min-height: 106px;
}

.opflow-attachment-uploader {
  margin-top: 10px;
  padding: 12px;
  border-radius: 10px;
  background: #fffdf6;
  border-color: #f4e7b6;
}

.opflow-attachment-grid {
  grid-template-columns: minmax(0, 0.58fr) minmax(150px, 0.22fr);
  gap: 9px;
}

.opflow-file-field small,
.customer-file-field small {
  color: #7b8492;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.opflow-link-field {
  grid-column: 1 / -1;
}

.request-link-stack {
  gap: 7px;
}

.request-link-row {
  grid-template-columns: minmax(120px, 0.36fr) minmax(180px, 0.64fr);
}

.opflow-save {
  margin-top: 12px;
  justify-content: flex-end;
}

.opflow-save .btn-primary {
  min-width: 148px;
  min-height: 42px;
  border-radius: 999px;
}

.opflow-context {
  gap: 12px;
}

.opflow-facts {
  gap: 8px;
}

.opflow-facts div {
  min-height: 54px;
  padding: 10px 11px;
  border-radius: 15px;
}

.opflow-drive-manager {
  gap: 8px;
}

.opflow-drive-row {
  gap: 7px;
}

.opflow-drive-link {
  min-height: 52px;
  border-radius: 15px;
}

.opflow-drive-inline-edit {
  min-width: 92px;
  border-radius: 15px;
}

.opflow-drive-inline-edit summary {
  height: 52px;
  font-size: 11px;
}

.opflow-history-grid {
  margin-top: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.opflow-timeline-row {
  padding: 10px 0 10px 14px;
}

.opflow-task-section {
  padding: 12px;
}

.opflow-card-list {
  gap: 8px;
}

.opflow-card {
  min-height: 96px;
  padding: 12px;
  border-radius: 16px;
  gap: 6px;
  box-shadow: none;
}

.opflow-card:hover,
.opflow-card.active {
  transform: none;
  box-shadow: none;
}

.opflow-card.active {
  outline: 2px solid rgba(242, 191, 40, 0.42);
  outline-offset: 1px;
}

.opflow-card p {
  min-height: 0;
  font-size: 12px;
  -webkit-line-clamp: 2;
}

.opflow-card small,
.opflow-card-meta {
  font-size: 11px;
}

.opflow-completed:not(.is-open) {
  padding-bottom: 12px;
}

.opflow-completed-body[hidden] {
  display: none !important;
}

.opflow-completed-toggle {
  min-width: 54px;
  height: 34px;
  border-radius: 999px;
}

@media (max-width: 1180px) {

  .opflow-toolbar,
  .opflow-layout,
  .opflow-work-grid,
  .opflow-history-grid,
  .opflow-focus-strip,
  .opflow-selected-card {
    grid-template-columns: 1fr;
  }

  .opflow-queue-side {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

@media (max-width: 760px) {
  .opflow-top {
    padding: 16px;
    border-radius: 20px;
  }

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

  .opflow-detail,
  .opflow-task-section,
  .opflow-update,
  .opflow-context section,
  .opflow-history-grid>div {
    border-radius: 10px;
  }

  .opflow-detail-head {
    align-items: stretch;
  }

  .opflow-actions {
    flex-wrap: wrap;
  }

  .opflow-attachment-grid,
  .opflow-note-row,
  .request-link-row {
    grid-template-columns: 1fr;
  }

  .opflow-save .btn-primary {
    width: 100%;
  }
}

/* Operation/customer v29: attachment tables, optional links and scrollable task popup */
.request-file-picker {
  position: relative;
  min-height: 118px;
  padding: 13px;
  border: 1px dashed #d7dde6;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  display: grid !important;
  align-content: center;
  gap: 8px;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.request-file-picker:hover,
.request-file-picker:focus-within {
  border-color: rgba(242, 191, 40, 0.72);
  background: #fffdf5;
}

.request-file-picker input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.request-file-picker span {
  color: #5b6472;
  font-size: 12px;
  font-weight: 900;
}

.request-file-picker strong {
  width: max-content;
  min-height: 38px;
  padding: 0 15px;
  border-radius: 999px;
  background: #111318;
  color: #f2bf28;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 950;
}

.request-file-picker small {
  max-width: 360px;
}

.request-link-details {
  grid-column: 1 / -1;
}

.request-link-details summary {
  width: max-content;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #dfe5ec;
  color: #15191f;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 900;
  list-style: none;
}

.request-link-details summary::-webkit-details-marker {
  display: none;
}

.request-link-details summary::before {
  content: "+";
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #f2bf28;
  color: #111318;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
}

.request-link-details[open] summary {
  background: #111318;
  border-color: #111318;
  color: #fff;
}

.request-link-details[open] summary::before {
  content: "-";
}

.request-link-details .request-link-stack {
  margin-top: 10px;
  padding: 10px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #edf0f4;
}

.customer-request-link-row {
  grid-template-columns: 1fr;
}

.request-attachment-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  background: #fff;
  border: 1px solid #edf0f4;
  border-radius: 16px;
}

.request-attachment-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  color: #15191f;
  font-size: 12px;
}

.request-attachment-table th {
  padding: 10px 12px;
  background: #f8fafc;
  color: #7b8492;
  font-size: 10px;
  font-weight: 950;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.request-attachment-table td {
  padding: 10px 12px;
  border-top: 1px solid #edf0f4;
  vertical-align: middle;
}

.request-attachment-name {
  min-width: 0;
  color: #15191f;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 9px;
}

.request-attachment-name span,
.request-attachment-name img {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 10px;
}

.request-attachment-name span {
  background: #111318;
  color: #f2bf28;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 950;
}

.request-attachment-name img {
  object-fit: cover;
  background: #e5e7eb;
}

.request-attachment-name strong {
  overflow: hidden;
  color: #15191f;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.request-attachment-table td>span {
  display: block;
  color: #15191f;
  font-weight: 850;
}

.request-attachment-table td small {
  display: block;
  margin-top: 2px;
  color: #7b8492;
  font-size: 10px;
  font-weight: 800;
}

.request-attachment-table em {
  padding: 5px 8px;
  border-radius: 999px;
  background: #f8fafc;
  color: #5b6472;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.request-attachment-open {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #fffaf0;
  border: 1px solid rgba(242, 191, 40, 0.36);
  color: #9a6c00;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.request-attachment-open:hover,
.request-attachment-name:hover strong {
  color: #111318;
}

.customer-task-event .request-attachment-table-wrap,
.opflow-timeline-row .request-attachment-table-wrap {
  margin-top: 8px;
}

.customer-task-event .request-attachment-table,
.opflow-timeline-row .request-attachment-table {
  min-width: 460px;
}

.customer-task-modal-dialog {
  max-height: min(760px, calc(100vh - 36px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.customer-task-modal-head,
.customer-task-modal-stage {
  flex: 0 0 auto;
}

.customer-task-modal-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.customer-task-modal-content::-webkit-scrollbar,
.opflow-queue-side::-webkit-scrollbar,
.request-attachment-table-wrap::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.customer-task-modal-content::-webkit-scrollbar-thumb,
.opflow-queue-side::-webkit-scrollbar-thumb,
.request-attachment-table-wrap::-webkit-scrollbar-thumb {
  background: #d9dee7;
  border-radius: 999px;
}

.customer-task-modal-content::-webkit-scrollbar-track,
.opflow-queue-side::-webkit-scrollbar-track,
.request-attachment-table-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.customer-side {
  gap: 12px;
}

.customer-request-panel {
  position: sticky;
  top: 18px;
}

@media (max-width: 1120px) {
  .customer-request-panel {
    position: static;
  }
}

@media (max-width: 700px) {
  .customer-task-modal-dialog {
    max-height: calc(100vh - 20px);
  }

  .request-file-picker {
    min-height: 108px;
  }

  .request-link-details summary,
  .request-file-picker strong {
    width: 100%;
  }
}

/* Operation panel v30: minimal control surface */
.opflow {
  gap: 12px;
  color: #171a1f;
}

.opflow-top {
  min-height: auto;
  padding: 4px 0 12px;
  border-radius: 0;
  background: transparent;
  color: #171a1f;
  box-shadow: none;
  border-bottom: 1px solid #e8ebef;
}

.opflow-top>div:first-child {
  min-width: 0;
}

.opflow-top span {
  margin-bottom: 4px;
  color: #8a929f;
  font-size: 11px;
  font-weight: 850;
  text-transform: none;
}

.opflow-top h2 {
  color: #111318;
  font-size: 25px;
  font-weight: 900;
  line-height: 1.12;
}

.opflow-stats {
  min-width: 0;
  width: auto;
  display: flex;
  justify-content: flex-end;
  gap: 14px;
}

.opflow-stats div {
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.opflow-stats b {
  color: #111318;
  font-size: 18px;
  font-weight: 950;
}

.opflow-stats span {
  margin-top: 2px;
  color: #8a929f;
  font-size: 11px;
}

.opflow-toolbar {
  margin: 0 0 4px;
  padding: 0 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid #edf0f4;
  grid-template-columns: minmax(250px, 340px) minmax(0, 1fr) auto;
}

.opflow-search,
.opflow-owner,
.opflow .request-field-input {
  border: 1px solid #e2e7ee !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.opflow-search,
.opflow-owner {
  min-height: 40px;
}

.opflow-filters {
  gap: 6px;
}

.opflow-filters .request-filter-chip {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #67707d;
  font-size: 12px;
  font-weight: 850;
}

.opflow-filters .request-filter-chip:hover {
  background: #f6f7f9;
}

.opflow-filters .request-filter-chip.active {
  background: #111318;
  border-color: #111318;
  color: #fff;
  box-shadow: none;
}

.opflow-layout {
  grid-template-columns: minmax(0, 1fr) minmax(292px, 340px);
  gap: 18px;
}

.opflow-detail {
  padding: 0;
  border: 1px solid #e8ebef;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
}

.opflow-detail-head {
  margin: 0;
  padding: 18px 18px 14px;
  border-bottom: 1px solid #edf0f4;
}

.opflow-detail-head span {
  color: #8a929f;
  font-size: 11px;
  text-transform: none;
}

.opflow-detail-head h3 {
  margin-top: 3px;
  color: #111318;
  font-size: 22px;
  line-height: 1.15;
}

.opflow-detail-head p {
  color: #68717d;
  font-size: 13px;
}

.opflow-actions .btn-primary,
.opflow-actions .btn-ghost,
.opflow-save .btn-primary {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  box-shadow: none;
  font-size: 12px;
}

.opflow-actions .btn-primary,
.opflow-save .btn-primary {
  background: #111318;
  color: #fff;
}

.opflow-selected-card {
  margin: 0;
  padding: 15px 18px;
  border: 0;
  border-radius: 0;
  background: #fff;
  border-bottom: 1px solid #edf0f4;
  box-shadow: none;
}

.opflow-selected-card.stage-created,
.opflow-selected-card.stage-review,
.opflow-selected-card.stage-work,
.opflow-selected-card.stage-done {
  background: #fff;
  border-color: #edf0f4;
}

.opflow-stage i {
  width: 14px;
  height: 14px;
  border-color: #ccd3dc;
  background: #fff;
}

.opflow-stage b {
  color: #7b8492;
  font-size: 10px;
}

.opflow-stage .done i,
.opflow-stage .active i {
  background: #f2bf28;
  border-color: #f2bf28;
}

.opflow-stage .done::before {
  background: #f2bf28;
}

.opflow-focus-strip {
  margin: 0;
  padding: 12px 18px;
  grid-template-columns: minmax(180px, 1.5fr) repeat(4, minmax(92px, 1fr));
  gap: 0;
  border-bottom: 1px solid #edf0f4;
}

.opflow-focus-strip div {
  min-height: 48px;
  padding: 3px 13px;
  border: 0;
  border-right: 1px solid #edf0f4;
  border-radius: 0;
  background: transparent;
}

.opflow-focus-strip div:first-child {
  padding-left: 0;
}

.opflow-focus-strip div:last-child {
  border-right: 0;
}

.opflow-focus-strip span {
  color: #8a929f;
  font-size: 10px;
}

.opflow-focus-strip strong {
  color: #171a1f;
  font-size: 12px;
  font-weight: 900;
}

.opflow-work-grid {
  padding: 18px;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
  gap: 18px;
  border-bottom: 1px solid #edf0f4;
}

.opflow-update,
.opflow-context section,
.opflow-history-grid>div {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.opflow-context section+section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #edf0f4;
}

.opflow-section-title {
  margin-bottom: 10px;
}

.opflow-section-title span {
  color: #9aa2ae;
  font-size: 10px;
  text-transform: none;
}

.opflow-section-title h3,
.opflow-section-title h4 {
  color: #111318;
  font-size: 15px;
}

.opflow-form-row,
.opflow-note-row {
  gap: 10px;
}

.opflow-form-row label,
.opflow-note-row label,
.opflow-attachment-grid label,
.opflow-drive-fields label {
  color: #68717d;
  font-size: 12px;
  font-weight: 850;
}

.opflow-note-row .textarea {
  min-height: 96px;
}

.opflow-attachment-uploader {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #edf0f4;
  border-radius: 14px;
  background: #fafbfc;
}

.opflow-attachment-grid {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 190px);
}

.request-file-picker {
  min-height: 106px;
  border-radius: 14px;
  background: #fff;
}

.request-file-picker strong {
  min-height: 34px;
  background: #111318;
  color: #fff;
}

.request-link-details summary {
  min-height: 34px;
  border-color: #e2e7ee;
  background: #fff;
}

.opflow-facts {
  gap: 6px;
}

.opflow-facts div {
  min-height: auto;
  padding: 0 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid #edf0f4;
}

.opflow-facts div:last-child {
  border-bottom: 0;
}

.opflow-drive-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.opflow-drive-link {
  min-height: 48px;
  padding: 8px;
  border: 1px solid #edf0f4;
  border-radius: 12px;
  background: #fff;
}

.opflow-drive-link>span {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.opflow-drive-inline-edit {
  border-radius: 12px;
  background: #fff;
}

.opflow-drive-inline-edit summary {
  height: 48px;
}

.opflow-history-grid {
  margin: 0;
  padding: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.opflow-timeline-row {
  padding: 9px 0 9px 14px;
}

.opflow-queue-side {
  top: 14px;
  max-height: calc(100vh - 28px);
}

.opflow-task-section {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.opflow-task-section+.opflow-task-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #edf0f4;
}

.opflow-section-title.row {
  margin-bottom: 9px;
}

.opflow-section-title.row>strong,
.opflow-completed-toggle {
  height: 28px;
  min-width: 0;
  padding: 0 9px;
  border-radius: 999px;
  background: #f6f7f9;
  color: #67707d;
  border: 1px solid #edf0f4;
}

.opflow-card-list {
  gap: 6px;
}

.opflow-card {
  position: relative;
  min-height: 84px;
  padding: 10px 11px 10px 13px;
  border: 1px solid #edf0f4;
  border-left-width: 3px;
  border-radius: 12px;
  background: #fff !important;
  box-shadow: none;
  text-align: left;
}

.opflow-card.stage-created {
  border-left-color: #3b82f6;
}

.opflow-card.stage-review {
  border-left-color: #eab308;
}

.opflow-card.stage-work {
  border-left-color: #14b8a6;
}

.opflow-card.stage-done {
  border-left-color: #22c55e;
}

.opflow-card:hover {
  border-color: #dfe5ec;
}

.opflow-card.active {
  outline: 0;
  border-color: rgba(242, 191, 40, 0.6);
  border-left-color: #f2bf28;
  background: #fffdf6 !important;
}

.opflow-card-meta {
  color: #98a1ad;
  font-size: 10px;
}

.opflow-card strong {
  color: #111318;
  font-size: 13px;
}

.opflow-card small,
.opflow-card p {
  color: #68717d;
  font-size: 11px;
}

.opflow-card-badges .request-mini-pill,
.opflow-selected-badges .request-mini-pill,
.opflow-selected-badges .request-badge-inline {
  padding: 4px 7px;
  font-size: 10px;
}

.opflow-card-attach {
  background: #f6f7f9 !important;
  color: #67707d !important;
  border-color: #e4e8ee !important;
}

.request-attachment-table-wrap {
  border-radius: 12px;
}

.request-attachment-table th {
  background: #fafbfc;
}

@media (max-width: 1180px) {
  .opflow-top {
    gap: 12px;
  }

  .opflow-layout,
  .opflow-work-grid,
  .opflow-history-grid,
  .opflow-toolbar,
  .opflow-focus-strip {
    grid-template-columns: 1fr;
  }

  .opflow-focus-strip {
    gap: 8px;
  }

  .opflow-focus-strip div {
    padding: 0 0 8px;
    border-right: 0;
    border-bottom: 1px solid #edf0f4;
  }

  .opflow-focus-strip div:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 760px) {
  .opflow-top {
    align-items: flex-start;
  }

  .opflow-stats {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .opflow-detail-head,
  .opflow-selected-card,
  .opflow-work-grid,
  .opflow-history-grid,
  .opflow-focus-strip {
    padding-left: 14px;
    padding-right: 14px;
  }

  .opflow-detail {
    border-radius: 14px;
  }

  .opflow-note-row,
  .opflow-attachment-grid {
    grid-template-columns: 1fr;
  }
}

/* Operation panel v31: organized workflow */
.opflow-detail {
  background: #fff;
}

.opflow-command {
  padding: 14px 18px;
  border-bottom: 1px solid #edf0f4;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 16px;
  align-items: center;
}

.opflow-command-main {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.opflow-command-main .opflow-stage {
  max-width: 520px;
}

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

.opflow-command-facts div {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid #edf0f4;
  border-radius: 12px;
  background: #fafbfc;
}

.opflow-command-facts span {
  display: block;
  margin-bottom: 4px;
  color: #8a929f;
  font-size: 10px;
  font-weight: 900;
}

.opflow-command-facts strong {
  display: -webkit-box;
  overflow: hidden;
  color: #171a1f;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.opflow-operate-layout {
  padding: 18px;
  border-bottom: 1px solid #edf0f4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
  gap: 16px;
  align-items: start;
}

.opflow-pane {
  min-width: 0;
  padding: 14px;
  border: 1px solid #edf0f4;
  border-radius: 14px;
  background: #fff;
}

.opflow-side-stack {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.opflow-pane .opflow-section-title span {
  width: max-content;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #f6f7f9;
  color: #6f7783;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.opflow-pane .opflow-section-title h4 {
  font-size: 16px;
}

.opflow-update.opflow-pane {
  display: grid;
  gap: 12px;
}

.opflow-update .opflow-section-title,
.opflow-attachment-uploader .opflow-section-title {
  margin-bottom: 0;
}

.opflow-update .opflow-form-row,
.opflow-update .opflow-note-row {
  margin: 0;
}

.opflow-attachment-uploader {
  margin-top: 0;
  padding: 12px;
  border-radius: 12px;
  background: #fafbfc;
}

.opflow-save {
  margin-top: 0;
  padding-top: 2px;
}

.opflow-compact-context .opflow-facts {
  gap: 0;
}

.opflow-compact-context .opflow-facts div {
  padding: 8px 0;
}

.opflow-drive-readiness {
  width: max-content;
  margin: -3px 0 10px;
  padding: 5px 8px;
  border-radius: 999px;
  background: #f6f7f9;
  color: #68717d;
  font-size: 11px;
  font-weight: 900;
}

.opflow-history-accordion {
  padding: 0;
}

.opflow-history-accordion details {
  border-bottom: 1px solid #edf0f4;
}

.opflow-history-accordion details:last-child {
  border-bottom: 0;
}

.opflow-history-accordion summary {
  min-height: 52px;
  padding: 0 18px;
  color: #111318;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
}

.opflow-history-accordion summary::-webkit-details-marker {
  display: none;
}

.opflow-history-accordion summary span {
  font-size: 14px;
  font-weight: 900;
}

.opflow-history-accordion summary strong {
  padding: 5px 9px;
  border-radius: 999px;
  background: #f6f7f9;
  color: #68717d;
  font-size: 11px;
  font-weight: 900;
}

.opflow-history-accordion summary::after {
  content: "v";
  width: 24px;
  height: 24px;
  border: 1px solid #edf0f4;
  border-radius: 999px;
  color: #68717d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  transition: transform 0.16s ease;
}

.opflow-history-accordion details[open] summary::after {
  transform: rotate(180deg);
}

.opflow-history-accordion .opflow-timeline,
.opflow-history-accordion .opflow-empty {
  margin: 0 18px 18px;
}

.opflow-history-accordion .opflow-timeline-row {
  padding-top: 8px;
  padding-bottom: 8px;
}

.opflow-left .opflow-section-title h3 {
  font-size: 14px;
}

.opflow-card {
  min-height: 76px;
}

.opflow-card p {
  display: none;
}

.opflow-card-badges {
  margin-top: 2px;
}

@media (max-width: 1180px) {

  .opflow-command,
  .opflow-operate-layout {
    grid-template-columns: 1fr;
  }

  .opflow-command-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {

  .opflow-command,
  .opflow-operate-layout {
    padding: 14px;
  }

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

  .opflow-note-row,
  .opflow-form-row {
    grid-template-columns: 1fr;
  }

  .opflow-history-accordion summary {
    padding-left: 14px;
    padding-right: 14px;
  }

  .opflow-history-accordion .opflow-timeline,
  .opflow-history-accordion .opflow-empty {
    margin-left: 14px;
    margin-right: 14px;
  }
}

/* Operation panel v32: consistent alignment and calm color system */
.opflow {
  --ops-bg: #f7f8fa;
  --ops-surface: #ffffff;
  --ops-line: #e4e8ee;
  --ops-line-soft: #eef1f4;
  --ops-text: #171a1f;
  --ops-muted: #737b87;
  --ops-soft: #f3f5f7;
  --ops-accent: #f2bf28;
  --ops-accent-soft: #fff8db;
  color: var(--ops-text);
  gap: 14px;
  font-size: 14px;
}

.opflow *,
.opflow *::before,
.opflow *::after {
  box-sizing: border-box;
}

.opflow-top {
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
}

.opflow-top span,
.opflow-section-title span,
.opflow-detail-head span,
.opflow-command-facts span,
.opflow-facts span,
.opflow-card-top span {
  color: var(--ops-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.opflow-top h2 {
  margin: 0;
  color: var(--ops-text);
  font-size: 24px;
  font-weight: 850;
  letter-spacing: 0;
}

.opflow-stats {
  gap: 18px;
  align-items: end;
}

.opflow-stats div {
  min-width: 48px;
  text-align: right;
}

.opflow-stats b {
  color: var(--ops-text);
  font-size: 18px;
  font-weight: 850;
}

.opflow-stats span {
  color: var(--ops-muted);
  font-size: 11px;
  font-weight: 750;
}

.opflow-toolbar {
  padding: 10px;
  border: 1px solid var(--ops-line);
  border-radius: 16px;
  background: var(--ops-surface);
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr) minmax(180px, 220px);
  align-items: center;
  gap: 10px;
}

.opflow-search,
.opflow-owner,
.opflow .request-field-input {
  min-height: 40px;
  border: 1px solid var(--ops-line) !important;
  border-radius: 10px !important;
  background: var(--ops-surface) !important;
  color: var(--ops-text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.opflow .textarea {
  line-height: 1.45;
}

.opflow-filters {
  gap: 5px;
  align-items: center;
}

.opflow-filters .request-filter-chip {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 9px;
  color: var(--ops-muted);
  font-size: 12px;
  font-weight: 800;
}

.opflow-filters .request-filter-chip.active {
  background: var(--ops-text);
  border-color: var(--ops-text);
  color: #fff;
}

.opflow-layout {
  grid-template-columns: minmax(0, 1fr) 326px;
  gap: 16px;
  align-items: start;
}

.opflow-detail {
  border: 1px solid var(--ops-line);
  border-radius: 16px;
  background: var(--ops-surface);
  overflow: hidden;
}

.opflow-detail-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--ops-line-soft);
  align-items: center;
}

.opflow-detail-head h3 {
  margin: 4px 0 5px;
  color: var(--ops-text);
  font-size: 21px;
  font-weight: 850;
  line-height: 1.18;
}

.opflow-detail-head p {
  max-width: 760px;
  color: var(--ops-muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}

.opflow-actions {
  gap: 8px;
  align-items: center;
}

.opflow-actions .btn-primary,
.opflow-actions .btn-ghost,
.opflow-save .btn-primary {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 850;
  box-shadow: none !important;
}

.opflow-actions .btn-primary,
.opflow-save .btn-primary {
  background: var(--ops-text) !important;
  border-color: var(--ops-text) !important;
  color: #fff !important;
}

.opflow-actions .btn-ghost {
  background: var(--ops-surface) !important;
  border: 1px solid var(--ops-line) !important;
  color: var(--ops-text) !important;
}

.opflow-command {
  padding: 16px 20px;
  border-bottom: 1px solid var(--ops-line-soft);
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
}

.opflow-command-main {
  gap: 14px;
}

.opflow-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.opflow-meta-line span,
.opflow-meta-line strong {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid var(--ops-line);
  border-radius: 999px;
  background: var(--ops-soft);
  color: var(--ops-muted);
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.opflow-meta-line strong {
  background: var(--ops-text);
  border-color: var(--ops-text);
  color: #fff;
}

.opflow-stage {
  max-width: 520px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.opflow-stage span {
  min-width: 0;
  gap: 7px;
}

.opflow-stage span::before {
  top: 7px;
  left: 18px;
  right: 0;
  height: 1px;
  background: var(--ops-line);
}

.opflow-stage i {
  width: 14px;
  height: 14px;
  border: 2px solid #cfd5dd;
  background: var(--ops-surface);
}

.opflow-stage b {
  overflow: hidden;
  color: var(--ops-muted);
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opflow-stage .done i,
.opflow-stage .active i {
  background: var(--ops-accent);
  border-color: var(--ops-accent);
}

.opflow-stage .done::before {
  background: var(--ops-accent);
}

.opflow-stage .active i {
  animation: none !important;
  box-shadow: 0 0 0 4px rgba(242, 191, 40, 0.14);
}

.opflow-command-facts {
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--ops-line);
  border-radius: 12px;
  overflow: hidden;
}

.opflow-command-facts div {
  min-height: 58px;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--ops-line-soft);
  border-radius: 0;
  background: var(--ops-surface);
}

.opflow-command-facts div:last-child {
  border-bottom: 0;
}

.opflow-command-facts strong {
  color: var(--ops-text);
  font-size: 12px;
  font-weight: 800;
}

.opflow-operate-layout {
  padding: 18px 20px;
  border-bottom: 1px solid var(--ops-line-soft);
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
}

.opflow-pane {
  padding: 14px;
  border: 1px solid var(--ops-line);
  border-radius: 12px;
  background: var(--ops-surface);
}

.opflow-section-title {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.opflow-section-title h3,
.opflow-section-title h4 {
  margin: 0;
  color: var(--ops-text);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.2;
}

.opflow-pane .opflow-section-title span {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border: 1px solid var(--ops-line);
  border-radius: 999px;
  background: var(--ops-soft);
  color: var(--ops-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.opflow-update.opflow-pane {
  gap: 12px;
}

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

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

.opflow-form-row label,
.opflow-note-row label,
.opflow-attachment-grid label,
.opflow-drive-fields label {
  display: grid;
  gap: 6px;
  color: var(--ops-muted);
  font-size: 12px;
  font-weight: 800;
}

.opflow-note-row .textarea {
  min-height: 102px;
}

.opflow-attachment-uploader {
  padding: 12px;
  border: 1px solid var(--ops-line-soft);
  border-radius: 12px;
  background: #fbfcfd;
  display: grid;
  gap: 12px;
}

.opflow-attachment-grid {
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 10px;
}

.request-file-picker {
  min-height: 96px;
  border-color: #d7dde5;
  border-radius: 12px;
}

.request-file-picker strong,
.request-link-details summary {
  min-height: 34px;
  border-radius: 10px;
}

.request-link-details summary {
  border-color: var(--ops-line);
  color: var(--ops-text);
}

.opflow-save {
  justify-content: flex-end;
}

.opflow-side-stack {
  gap: 12px;
}

.opflow-facts div {
  padding: 9px 0;
  display: grid;
  gap: 3px;
}

.opflow-facts strong {
  color: var(--ops-text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.opflow-drive-readiness {
  margin: -2px 0 10px;
  background: var(--ops-soft);
  color: var(--ops-muted);
}

.opflow-drive-link {
  min-height: 46px;
  border-color: var(--ops-line);
  border-radius: 10px;
}

.opflow-drive-link strong {
  font-size: 12px;
}

.opflow-drive-link small {
  color: var(--ops-muted);
  font-size: 11px;
}

.opflow-history-accordion summary {
  min-height: 50px;
  padding: 0 20px;
}

.opflow-history-accordion summary span {
  color: var(--ops-text);
  font-size: 14px;
  font-weight: 850;
}

.opflow-history-accordion summary strong {
  background: var(--ops-soft);
  color: var(--ops-muted);
}

.opflow-history-accordion .opflow-timeline,
.opflow-history-accordion .opflow-empty {
  margin: 0 20px 18px;
}

.opflow-timeline-row {
  grid-template-columns: 116px minmax(0, 1fr);
  border-left-color: var(--ops-line);
}

.opflow-timeline-row::before {
  background: #aeb6c2;
  box-shadow: 0 0 0 4px #f1f3f5;
}

.opflow-timeline-row time {
  color: var(--ops-muted);
  font-size: 11px;
}

.opflow-timeline-row strong {
  color: var(--ops-text);
  font-size: 12px;
}

.opflow-timeline-row p {
  color: #4c5561;
  font-size: 12px;
  line-height: 1.45;
}

.opflow-queue-side {
  padding: 12px;
  border: 1px solid var(--ops-line);
  border-radius: 16px;
  background: var(--ops-surface);
}

.opflow-task-section+.opflow-task-section {
  margin-top: 14px;
  padding-top: 12px;
}

.opflow-section-title.row {
  margin-bottom: 10px;
}

.opflow-section-title.row>div {
  min-width: 0;
}

.opflow-section-title.row h3 {
  font-size: 14px;
}

.opflow-section-title.row>strong,
.opflow-completed-toggle {
  height: 26px;
  border-radius: 999px;
  background: var(--ops-soft);
  color: var(--ops-muted);
  font-size: 11px;
}

.opflow-card-list {
  gap: 7px;
}

.opflow-card {
  min-height: auto;
  padding: 10px;
  border: 1px solid var(--ops-line);
  border-radius: 10px;
  background: var(--ops-surface) !important;
  display: grid;
  gap: 5px;
}

.opflow-card.stage-created,
.opflow-card.stage-review,
.opflow-card.stage-work,
.opflow-card.stage-done {
  border-left-width: 1px;
  border-left-color: var(--ops-line);
}

.opflow-card:hover {
  border-color: #cfd6df;
}

.opflow-card.active {
  border-color: #d7b43d;
  background: var(--ops-accent-soft) !important;
}

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

.opflow-card-top em {
  min-width: max-content;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--ops-soft);
  color: var(--ops-muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.opflow-card.active .opflow-card-top em {
  background: var(--ops-text);
  color: #fff;
}

.opflow-card strong {
  color: var(--ops-text);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.24;
}

.opflow-card small {
  color: var(--ops-muted);
  font-size: 11px;
  font-weight: 700;
}

.opflow-card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.opflow-card-footer span {
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--ops-soft);
  color: var(--ops-muted);
  font-size: 10px;
  font-weight: 800;
}

.opflow .request-mini-pill,
.opflow .request-badge-inline {
  background: var(--ops-soft) !important;
  border-color: var(--ops-line) !important;
  color: var(--ops-muted) !important;
  box-shadow: none !important;
}

.opflow .request-badge-dot {
  background: #d8dee6 !important;
  color: var(--ops-text) !important;
}

.opflow .request-attachment-table th {
  color: var(--ops-muted);
}

@media (max-width: 1180px) {

  .opflow-top,
  .opflow-toolbar,
  .opflow-layout,
  .opflow-command,
  .opflow-operate-layout {
    grid-template-columns: 1fr;
  }

  .opflow-stats {
    justify-content: flex-start;
  }

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

@media (max-width: 760px) {

  .opflow-toolbar,
  .opflow-detail,
  .opflow-queue-side {
    border-radius: 12px;
  }

  .opflow-command,
  .opflow-operate-layout,
  .opflow-detail-head {
    padding-left: 14px;
    padding-right: 14px;
  }

  .opflow-command-facts,
  .opflow-form-row,
  .opflow-note-row,
  .opflow-attachment-grid {
    grid-template-columns: 1fr;
  }

  .opflow-actions {
    flex-wrap: wrap;
  }

  .opflow-timeline-row {
    grid-template-columns: 1fr;
  }
}

/* Operation panel v33: compact separated cards */
.opflow {
  gap: 12px;
}

.opflow-layout {
  grid-template-columns: minmax(0, 1fr) 318px;
  gap: 12px;
}

.opflow-detail {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  display: grid;
  gap: 10px;
}

.opflow-detail-head,
.opflow-command,
.opflow-pane,
.opflow-save-card,
.opflow-history-accordion details {
  border: 1px solid var(--ops-line);
  border-radius: 13px;
  background: var(--ops-surface);
}

.opflow-detail-head {
  padding: 13px 14px;
  border-bottom: 1px solid var(--ops-line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.opflow-detail-head h3 {
  margin: 2px 0 3px;
  font-size: 19px;
}

.opflow-detail-head p {
  display: -webkit-box;
  max-width: 720px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.opflow-actions .btn-primary,
.opflow-actions .btn-ghost {
  min-height: 34px;
  padding: 0 11px;
}

.opflow-command {
  padding: 12px;
  border-bottom: 1px solid var(--ops-line);
  grid-template-columns: minmax(0, 1fr);
  gap: 11px;
}

.opflow-command-main {
  gap: 10px;
}

.opflow-meta-line span,
.opflow-meta-line strong {
  min-height: 25px;
  padding: 0 8px;
}

.opflow-stage {
  max-width: 620px;
}

.opflow-stage b {
  font-size: 10px;
}

.opflow-command-facts {
  border: 0;
  border-radius: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.opflow-command-facts div {
  min-height: 48px;
  padding: 8px 9px;
  border: 1px solid var(--ops-line-soft);
  border-radius: 10px;
  background: #fbfcfd;
}

.opflow-command-facts div:last-child {
  border-bottom: 1px solid var(--ops-line-soft);
}

.opflow-command-facts strong {
  font-size: 11px;
}

.opflow-operate-layout {
  padding: 0;
  border: 0;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 10px;
}

.opflow-main-stack,
.opflow-side-stack {
  display: grid;
  gap: 10px;
}

.opflow-pane {
  padding: 12px;
}

.opflow-section-title {
  margin-bottom: 10px;
}

.opflow-pane .opflow-section-title h4,
.opflow-section-title h3,
.opflow-section-title h4 {
  font-size: 14px;
}

.opflow-pane .opflow-section-title span {
  min-width: 20px;
  height: 20px;
  font-size: 10px;
}

.opflow-form-row,
.opflow-note-row {
  gap: 8px;
}

.opflow-note-row .textarea {
  min-height: 82px;
}

.opflow-attachment-card {
  display: grid;
  gap: 10px;
}

.opflow-attachment-grid {
  grid-template-columns: minmax(0, 1fr) 166px;
  gap: 8px;
}

.request-file-picker {
  min-height: 78px;
  padding: 10px;
  gap: 6px;
}

.request-file-picker strong,
.request-link-details summary {
  min-height: 32px;
  padding: 0 11px;
}

.request-file-picker small {
  font-size: 10px;
}

.request-link-details .request-link-stack {
  margin-top: 8px;
  padding: 8px;
}

.opflow-save-card {
  padding: 10px;
  justify-content: flex-end;
  display: flex;
}

.opflow-save-card .btn-primary {
  min-width: 132px;
  min-height: 36px;
}

.opflow-facts div {
  padding: 7px 0;
}

.opflow-drive-readiness {
  margin-bottom: 8px;
}

.opflow-drive-link {
  min-height: 42px;
  padding: 7px;
}

.opflow-drive-link>span {
  width: 30px;
  height: 30px;
}

.opflow-drive-inline-edit summary {
  height: 42px;
}

.opflow-history-accordion {
  display: grid;
  gap: 10px;
}

.opflow-history-accordion details {
  border-bottom: 1px solid var(--ops-line);
  overflow: hidden;
}

.opflow-history-accordion summary {
  min-height: 44px;
  padding: 0 12px;
}

.opflow-history-accordion summary span {
  font-size: 13px;
}

.opflow-history-accordion summary strong {
  padding: 4px 8px;
}

.opflow-history-accordion .opflow-timeline,
.opflow-history-accordion .opflow-empty {
  margin: 0 12px 12px;
}

.opflow-timeline-row {
  grid-template-columns: 104px minmax(0, 1fr);
  padding-top: 7px;
  padding-bottom: 7px;
}

.opflow-queue-side {
  padding: 10px;
  border-radius: 13px;
}

.opflow-task-section+.opflow-task-section {
  margin-top: 12px;
  padding-top: 10px;
}

.opflow-card {
  padding: 9px;
  gap: 4px;
}

.opflow-card strong {
  font-size: 12px;
}

.opflow-card-footer span,
.opflow-card-top em {
  padding: 3px 7px;
}

@media (max-width: 1180px) {

  .opflow-layout,
  .opflow-operate-layout,
  .opflow-detail-head {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 760px) {

  .opflow-command-facts,
  .opflow-attachment-grid {
    grid-template-columns: 1fr;
  }

  .opflow-detail-head,
  .opflow-command,
  .opflow-pane,
  .opflow-save-card,
  .opflow-history-accordion details {
    border-radius: 11px;
  }
}

/* Operation panel v34: three-purpose card redesign */
.opflow {
  --ops-page: #f4f6f8;
  --ops-surface: #fff;
  --ops-line: #e1e6ec;
  --ops-soft-line: #edf1f5;
  --ops-muted: #68727f;
  --ops-text: #161a20;
  --ops-soft: #f7f9fb;
  --ops-accent: #f2bf28;
  --ops-accent-soft: #fff8df;
  gap: 12px;
}

.opflow-top {
  padding: 8px 12px;
  border: 1px solid var(--ops-line);
  border-radius: 16px;
  background: var(--ops-surface);
  align-items: center;
}

.opflow-top h2 {
  font-size: 22px;
}

.opflow-stats {
  gap: 0;
  border: 1px solid var(--ops-soft-line);
  border-radius: 12px;
  overflow: hidden;
}

.opflow-stats div {
  min-width: 70px;
  padding: 8px 11px;
  border-right: 1px solid var(--ops-soft-line);
  text-align: left;
}

.opflow-stats div:last-child {
  border-right: 0;
}

.opflow-toolbar {
  padding: 8px;
  border-radius: 14px;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr) minmax(180px, 210px);
}

.opflow-layout {
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 12px;
}

.opflow-detail.opflow-three-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 12px;
  align-items: start;
}

.opflow-trio-card {
  min-width: 0;
  border: 1px solid var(--ops-line);
  border-radius: 16px;
  background: var(--ops-surface);
  box-shadow: 0 1px 0 rgba(15, 17, 21, 0.02);
}

.opflow-edit-card {
  padding: 14px;
  display: grid;
  gap: 12px;
}

.opflow-user-card {
  padding: 14px;
  display: grid;
  gap: 12px;
}

.opflow-flow-card {
  grid-column: 1 / -1;
  overflow: hidden;
}

.opflow-trio-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.opflow-trio-head.compact {
  align-items: center;
}

.opflow-trio-head span {
  display: block;
  margin-bottom: 4px;
  color: var(--ops-muted);
  font-size: 11px;
  font-weight: 850;
}

.opflow-trio-head h3 {
  margin: 0;
  color: var(--ops-text);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.18;
}

.opflow-trio-head p {
  display: -webkit-box;
  max-width: 780px;
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--ops-muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.opflow-trio-head>strong {
  min-width: max-content;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--ops-soft);
  color: var(--ops-muted);
  font-size: 11px;
  font-weight: 900;
}

.opflow-actions {
  align-self: start;
  justify-content: flex-end;
}

.opflow-actions .btn-primary,
.opflow-actions .btn-ghost,
.opflow-save .btn-primary {
  min-height: 34px;
  border-radius: 10px;
}

.opflow-edit-summary {
  padding: 11px;
  border: 1px solid var(--ops-soft-line);
  border-radius: 12px;
  background: var(--ops-soft);
  display: grid;
  gap: 11px;
}

.opflow-edit-summary .opflow-stage {
  max-width: 560px;
}

.opflow-meta-line {
  gap: 5px;
}

.opflow-meta-line span,
.opflow-meta-line strong {
  min-height: 24px;
  padding: 0 8px;
  background: var(--ops-surface);
}

.opflow-meta-line strong {
  background: var(--ops-text);
}

.opflow-command-facts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  border: 0;
}

.opflow-command-facts div {
  min-height: 46px;
  padding: 8px 9px;
  border: 1px solid var(--ops-soft-line);
  border-radius: 10px;
  background: var(--ops-surface);
}

.opflow-command-facts div:last-child {
  border-bottom: 1px solid var(--ops-soft-line);
}

.opflow-command-facts span,
.opflow-facts span {
  color: var(--ops-muted);
  font-size: 10px;
  font-weight: 850;
}

.opflow-command-facts strong {
  color: var(--ops-text);
  font-size: 11px;
  font-weight: 850;
}

.opflow-form-row,
.opflow-note-row {
  gap: 9px;
}

.opflow-form-row label,
.opflow-note-row label,
.opflow-attachment-grid label {
  display: grid;
  gap: 6px;
  color: var(--ops-muted);
  font-size: 12px;
  font-weight: 850;
}

.opflow-note-row .textarea {
  min-height: 86px;
}

.opflow-attachment-grid {
  padding: 11px;
  border: 1px solid var(--ops-soft-line);
  border-radius: 12px;
  background: var(--ops-soft);
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 9px;
}

.request-file-picker {
  min-height: 74px;
  background: var(--ops-surface);
}

.opflow-link-field {
  grid-column: 1 / -1;
}

.opflow-save {
  margin-top: 0;
  justify-content: flex-end;
}

.opflow-user-file-grid {
  display: grid;
  gap: 12px;
}

.opflow-facts {
  border: 1px solid var(--ops-soft-line);
  border-radius: 12px;
  overflow: hidden;
}

.opflow-facts div {
  padding: 9px 10px;
  border-bottom: 1px solid var(--ops-soft-line);
  background: var(--ops-surface);
}

.opflow-facts div:last-child {
  border-bottom: 0;
}

.opflow-facts strong {
  color: var(--ops-text);
  font-size: 12px;
}

.opflow-drive-block {
  display: grid;
  gap: 7px;
}

.opflow-drive-manager {
  gap: 7px;
}

.opflow-drive-link {
  min-height: 42px;
  border-color: var(--ops-soft-line);
}

.opflow-drive-inline-edit summary {
  height: 42px;
}

.opflow-flow-card .opflow-trio-head {
  padding: 13px 14px;
  border-bottom: 1px solid var(--ops-soft-line);
}

.opflow-flow-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
}

.opflow-flow-columns details {
  min-width: 0;
  border-right: 1px solid var(--ops-soft-line);
}

.opflow-flow-columns details:last-child {
  border-right: 0;
}

.opflow-flow-columns summary {
  min-height: 42px;
  padding: 0 14px;
  color: var(--ops-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  font-weight: 900;
  list-style: none;
}

.opflow-flow-columns summary::-webkit-details-marker {
  display: none;
}

.opflow-flow-columns summary strong {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--ops-soft);
  color: var(--ops-muted);
  font-size: 11px;
}

.opflow-flow-columns .opflow-timeline,
.opflow-flow-columns .opflow-empty {
  margin: 0 14px 14px;
}

.opflow-flow-columns .opflow-timeline-row {
  grid-template-columns: 94px minmax(0, 1fr);
}

.opflow-queue-side {
  border-radius: 16px;
  background: var(--ops-surface);
}

.opflow-card {
  border-radius: 11px;
}

@media (max-width: 1180px) {

  .opflow-detail.opflow-three-card,
  .opflow-layout,
  .opflow-toolbar {
    grid-template-columns: 1fr;
  }

  .opflow-flow-columns {
    grid-template-columns: 1fr;
  }

  .opflow-flow-columns details {
    border-right: 0;
    border-bottom: 1px solid var(--ops-soft-line);
  }

  .opflow-flow-columns details:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 760px) {

  .opflow-top,
  .opflow-trio-card,
  .opflow-queue-side {
    border-radius: 13px;
  }

  .opflow-trio-head,
  .opflow-command-facts,
  .opflow-form-row,
  .opflow-note-row,
  .opflow-attachment-grid {
    grid-template-columns: 1fr;
  }

  .opflow-actions {
    justify-content: flex-start;
  }
}

/* Operation panel v35: workbench background, ticket editor and broadcast flow */
#panel-requests.active {
  margin: 0px !important;
  padding: 0px !important;
  /* Eliminate duplicate container padding to pull everything fully flush with top and edges! */
  border-radius: 0px !important;
  background: transparent !important;
  border: none !important;
}

#panel-requests.active>* {
  position: relative;
  z-index: 1;
}

#panel-requests.active>.section-header {
  display: none !important;
  /* Hide redundant template header, allowing custom telemetry header to sit flush with browser chrome! */
}

#panel-requests.active>.section-header h2 {
  color: #151515;
  font-size: 1.35rem;
  letter-spacing: 0;
}

#panel-requests.active>.section-header p {
  max-width: 740px;
  color: #66707c !important;
}

.opflow {
  --ops-surface: #fffefa;
  --ops-paper: #fffaf0;
  --ops-ink: #14161a;
  --ops-muted: #67717e;
  --ops-line: rgba(20, 22, 26, 0.12);
  --ops-soft-line: rgba(20, 22, 26, 0.075);
  --ops-soft: #f6f2e9;
  --ops-accent: #f2bf28;
  --ops-green: #1f8a5b;
  --ops-blue: #2d6cdf;
  color: var(--ops-ink);
}

.opflow-top,
.opflow-toolbar,
.opflow-queue-side,
.opflow-trio-card {
  box-shadow: 0 18px 48px rgba(27, 31, 38, 0.08);
}

.opflow-top {
  background: rgba(255, 254, 250, 0.88);
  backdrop-filter: blur(14px);
}

.opflow-toolbar {
  background: rgba(255, 254, 250, 0.9);
  backdrop-filter: blur(14px);
}

.opflow-detail.opflow-three-card {
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
  gap: 14px;
}

.opflow-trio-card {
  border-color: rgba(17, 19, 24, 0.1);
  background: rgba(255, 254, 250, 0.94);
  backdrop-filter: blur(14px);
}

.opflow-edit-card {
  padding: 0;
  overflow: hidden;
}

.opflow-edit-shell {
  display: grid;
  gap: 0;
}

.opflow-edit-hero {
  min-height: 132px;
  padding: 20px;
  background:
    linear-gradient(90deg, rgba(242, 191, 40, 0.22), transparent 42%),
    #121417;
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}

.opflow-edit-hero span {
  display: block;
  margin-bottom: 7px;
  color: #f2bf28;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.opflow-edit-hero h3 {
  max-width: 760px;
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 950;
  line-height: 1.05;
}

.opflow-edit-hero p {
  display: -webkit-box;
  max-width: 780px;
  margin: 10px 0 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.opflow-edit-hero .btn-primary {
  background: #f2bf28 !important;
  border-color: #f2bf28 !important;
  color: #121417 !important;
}

.opflow-edit-hero .btn-ghost {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
}

.opflow-edit-summary {
  margin: 0;
  padding: 14px 20px;
  border: 0;
  border-bottom: 1px solid var(--ops-soft-line);
  border-radius: 0;
  background: #fffaf0;
}

.opflow-edit-summary .opflow-stage {
  max-width: 640px;
}

.opflow-command-facts {
  padding: 14px 20px;
  background: #fff;
  border-bottom: 1px solid var(--ops-soft-line);
}

.opflow-command-facts div {
  background: #fbfbf8;
}

.opflow-edit-form-shell {
  padding: 14px 16px 10px;
  background: #fff;
  display: grid;
  gap: 12px;
}

.opflow-edit-form-shell .opflow-form-row,
.opflow-edit-form-shell .opflow-note-row {
  gap: 12px;
}

.opflow-edit-form-shell label span,
.opflow-edit-files label span {
  color: #5f6976;
  font-size: 12px;
  font-weight: 900;
}

.opflow-edit-form-shell .textarea {
  min-height: 108px;
}

.opflow-edit-files {
  margin: 0 20px 16px;
  padding: 14px;
  border: 1px solid rgba(17, 19, 24, 0.09);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(242, 191, 40, 0.08), transparent 58%),
    #fbfcf8;
  display: grid;
  gap: 12px;
}

.opflow-mini-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.opflow-mini-title span {
  color: #9a6c00;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.opflow-mini-title strong {
  color: #151515;
  font-size: 14px;
  font-weight: 950;
}

.opflow-edit-files .opflow-attachment-grid {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  grid-template-columns: minmax(0, 1fr) 170px;
}

.opflow-edit-files .request-file-picker {
  border-style: solid;
  background: #fff;
}

.opflow-edit-card .opflow-save {
  padding: 0 20px 20px;
  display: flex;
  justify-content: flex-end;
}

.opflow-edit-card .opflow-save .btn-primary {
  min-width: 154px;
  min-height: 42px;
  border-radius: 14px;
  background: #121417 !important;
}

.opflow-flow-card {
  background: #111318;
  color: #fff;
}

.opflow-flow-hero {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  background:
    linear-gradient(90deg, rgba(31, 138, 91, 0.22), transparent 40%),
    #111318;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.opflow-flow-hero span {
  display: block;
  margin-bottom: 6px;
  color: #f2bf28;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.opflow-flow-hero h3 {
  margin: 0;
  color: #fff;
  font-size: 24px;
  font-weight: 950;
}

.opflow-flow-hero p {
  margin: 7px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
}

.opflow-flow-hero>strong {
  min-width: max-content;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 12px;
}

.opflow-flow-columns {
  padding: 14px;
  gap: 14px;
  background: #111318;
}

.opflow-flow-columns details {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: #fff;
  color: #151515;
  overflow: hidden;
}

.opflow-flow-columns details:last-child {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.opflow-flow-columns summary {
  min-height: 54px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(17, 19, 24, 0.08);
  background: #fbfaf5;
  color: #151515;
}

.opflow-flow-columns summary span {
  font-size: 14px;
  font-weight: 950;
}

.opflow-flow-lane.public summary {
  border-top: 4px solid #1f8a5b;
}

.opflow-flow-lane.internal summary {
  border-top: 4px solid #f2bf28;
}

.opflow-flow-columns summary strong {
  background: #111318;
  color: #fff;
}

.opflow-flow-columns .opflow-timeline,
.opflow-flow-columns .opflow-empty {
  margin: 0;
  padding: 12px 16px 16px;
}

.opflow-flow-columns .opflow-timeline-row {
  grid-template-columns: 92px minmax(0, 1fr);
  padding: 10px 0 10px 15px;
}

.opflow-flow-columns .opflow-timeline-row p {
  color: #46505d;
}

.opflow-user-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 254, 250, 0.96)),
    #fff;
}

.opflow-queue-side {
  background: rgba(255, 254, 250, 0.92);
  backdrop-filter: blur(14px);
}

@media (max-width: 1180px) {

  .opflow-edit-hero,
  .opflow-flow-hero {
    display: grid;
  }
}

@media (max-width: 760px) {
  #panel-requests.active {
    margin: -4px;
    padding: 10px;
    border-radius: 10px;
  }

  .opflow-edit-hero,
  .opflow-edit-form-shell,
  .opflow-command-facts,
  .opflow-edit-files,
  .opflow-edit-card .opflow-save,
  .opflow-flow-hero {
    padding-left: 14px;
    padding-right: 14px;
  }

  .opflow-edit-files {
    margin-left: 14px;
    margin-right: 14px;
  }

  .opflow-edit-files .opflow-attachment-grid,
  .opflow-flow-columns {
    grid-template-columns: 1fr;
  }
}

/* Operation panel v36: dark desk, preview table first, detail on demand */
.operation-top-title[hidden] {
  display: none !important;
}

.operation-top-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  margin-right: 16px;
  padding: 7px 12px;
  border: 1px solid rgba(242, 191, 40, 0.2);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(17, 19, 24, 0.92), rgba(33, 36, 34, 0.9));
  color: #fff;
  box-shadow: 0 14px 34px rgba(17, 19, 24, 0.14);
}

.operation-top-title div {
  display: grid;
  gap: 1px;
}

.operation-top-title span {
  color: #f2bf28;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.operation-top-title strong {
  color: #fff;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.1;
}

.operation-top-title small {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

#panel-requests.active {
  margin: -8px;
  padding: 18px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 18% 0%, rgba(242, 191, 40, 0.16), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(31, 138, 91, 0.14), transparent 30%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px),
    linear-gradient(135deg, #151719 0%, #20241f 48%, #121417 100%);
  background-size: auto, auto, 28px 28px, 28px 28px, auto;
}

#panel-requests.active>.section-header {
  display: none !important;
}

#panel-requests.active .opflow {
  color: #16181b;
}

#panel-requests.active .opflow-top {
  display: none !important;
}

#panel-requests.active .opflow-toolbar {
  margin: 0 0 14px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  backdrop-filter: blur(18px);
}

#panel-requests.active .opflow-search,
#panel-requests.active .opflow-owner {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  color: #16181b;
  box-shadow: none;
}

#panel-requests.active .opflow-filters {
  gap: 7px;
}

#panel-requests.active .request-filter-chip {
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
  font-weight: 850;
  box-shadow: none;
}

#panel-requests.active .request-filter-chip.active {
  border-color: rgba(242, 191, 40, 0.45);
  background: #f2bf28;
  color: #141414;
}

.opflow-preview-card {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 254, 248, 0.96);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
}

.opflow-preview-card.empty {
  min-height: 260px;
  display: grid;
  place-items: center;
}

.opflow-preview-headline {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(17, 19, 24, 0.08);
  background:
    linear-gradient(90deg, rgba(242, 191, 40, 0.13), transparent 46%),
    #fffdf6;
}

.opflow-preview-headline span {
  display: block;
  margin-bottom: 4px;
  color: #9b6b00;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.opflow-preview-headline h3 {
  margin: 0;
  color: #151515;
  font-size: 22px;
  font-weight: 950;
}

.opflow-preview-headline strong {
  min-width: max-content;
  padding: 8px 10px;
  border-radius: 999px;
  background: #151515;
  color: #fff;
  font-size: 12px;
}

.opflow-preview-table {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.opflow-preview-heading,
.opflow-preview-row {
  display: grid;
  grid-template-columns: minmax(240px, 1.55fr) minmax(120px, 0.72fr) minmax(150px, 0.92fr) minmax(130px, 0.75fr) minmax(150px, 0.78fr);
  gap: 12px;
  align-items: center;
}

.opflow-preview-heading {
  padding: 0 12px 4px;
  color: #7a828d;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.opflow-preview-row {
  width: 100%;
  min-height: 74px;
  padding: 12px;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 10px;
  background: #fff;
  color: #16181b;
  text-align: left;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.opflow-preview-row:hover {
  transform: translateY(-2px);
  border-color: rgba(242, 191, 40, 0.48);
  box-shadow: 0 16px 30px rgba(17, 19, 24, 0.1);
}

.opflow-preview-row.is-complete {
  border-color: rgba(31, 138, 91, 0.16);
  background:
    linear-gradient(90deg, rgba(31, 138, 91, 0.1), transparent 50%),
    #fbfff9;
}

.opflow-preview-main,
.opflow-preview-row>span:not(.opflow-preview-status) {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.opflow-preview-row b {
  overflow: hidden;
  color: #151515;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opflow-preview-row small {
  overflow: hidden;
  color: #69717d;
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opflow-preview-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  padding: 7px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--status-color) 14%, #fff);
  color: color-mix(in srgb, var(--status-color) 78%, #111);
  font-size: 12px;
  font-weight: 950;
}

.opflow-preview-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-color);
}

.opflow-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin: 0 0 12px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.opflow-back-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.opflow-detail-mode .opflow-layout {
  display: block;
}

.opflow-detail-mode .opflow-three-card {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  gap: 14px;
}

.opflow-detail-mode .opflow-flow-card {
  grid-column: 1 / -1;
}

.opflow-detail-mode .opflow-trio-card {
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.18);
}

.opflow-actions {
  align-items: center;
}

.opflow-icon-action {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 14px !important;
}

.opflow-icon-action span {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
}

.opflow-drive-action span::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 5px;
  width: 14px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 4px;
  transform: skewX(-8deg);
}

.opflow-drive-action span::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 3px;
  width: 7px;
  height: 4px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  border-radius: 3px 3px 0 0;
}

.opflow-subscriber-action span::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.opflow-subscriber-action span::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 2px;
  width: 14px;
  height: 7px;
  border: 2px solid currentColor;
  border-radius: 999px 999px 4px 4px;
}

.opflow-lead-action span::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.opflow-lead-action span::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 7px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(45deg);
}

.opflow-note-row {
  grid-template-columns: 1fr 1fr;
}

.opflow-note-toggle {
  overflow: hidden;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 16px;
  background: #fbfbf8;
}

.opflow-note-toggle summary {
  min-height: 48px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #151515;
  cursor: pointer;
  list-style: none;
}

.opflow-note-toggle summary::-webkit-details-marker {
  display: none;
}

.opflow-note-toggle summary span {
  color: #151515;
  font-size: 13px;
  font-weight: 950;
}

.opflow-note-toggle summary strong {
  min-width: 34px;
  padding: 5px 8px;
  border-radius: 999px;
  background: #151515;
  color: #fff;
  font-size: 11px;
  text-align: center;
}

.opflow-note-toggle[open] summary strong {
  background: #f2bf28;
  color: #151515;
  font-size: 0;
}

.opflow-note-toggle[open] summary strong::after {
  content: "Kapat";
  font-size: 11px;
}

.opflow-note-toggle[open] label {
  display: grid;
  gap: 7px;
  padding: 0 12px 12px;
}

.opflow-note-toggle .textarea {
  min-height: 118px;
  background: #fff;
}

.opflow-flow-columns {
  grid-template-columns: 1fr 1fr;
}

.opflow-flow-columns details {
  background: transparent;
}

.opflow-flow-columns summary {
  min-height: 50px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
}

.opflow-flow-columns summary::marker,
.opflow-flow-columns summary::-webkit-details-marker {
  display: none;
}

.opflow-flow-columns summary::after {
  content: "+";
  margin-left: auto;
  color: rgba(255, 255, 255, 0.55);
  font-size: 18px;
  font-weight: 950;
}

.opflow-flow-columns details[open] summary::after {
  content: "-";
}

.opflow-flow-columns summary strong {
  margin-left: auto;
  background: #f2bf28;
  color: #151515;
}

.opflow-flow-columns details[open] summary {
  border-color: rgba(242, 191, 40, 0.42) !important;
  background: rgba(242, 191, 40, 0.14);
}

.opflow-flow-columns .opflow-timeline,
.opflow-flow-columns .opflow-empty {
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: #fff;
}

@media (max-width: 1180px) {
  .opflow-preview-heading {
    display: none;
  }

  .opflow-preview-row {
    grid-template-columns: 1fr 1fr;
  }

  .opflow-detail-mode .opflow-three-card,
  .opflow-flow-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  #panel-requests.active {
    margin: -4px;
    padding: 10px;
    border-radius: 22px;
  }

  .operation-top-title {
    width: 100%;
    justify-content: space-between;
  }

  #panel-requests.active .opflow-toolbar,
  .opflow-preview-row,
  .opflow-note-row {
    grid-template-columns: 1fr;
  }

  .opflow-preview-headline {
    align-items: flex-start;
    display: grid;
  }
}

/* Operation panel v37: five-card board and visible subscriber update */
.opflow-preview-board {
  display: grid;
  gap: 16px;
  padding: 14px;
}

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

.opflow-preview-grid .opflow-preview-row {
  min-height: 172px;
  padding: 13px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: start;
  border-radius: 10px;
}

.opflow-preview-grid .opflow-preview-row b,
.opflow-preview-grid .opflow-preview-row small {
  white-space: normal;
}

.opflow-preview-grid .opflow-preview-main b {
  display: -webkit-box;
  min-height: 34px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.opflow-preview-grid .opflow-preview-status {
  width: max-content;
  max-width: 100%;
  font-size: 11px;
}

.opflow-preview-grid .opflow-preview-platform,
.opflow-preview-grid .opflow-preview-date {
  padding-top: 8px;
  border-top: 1px solid rgba(17, 19, 24, 0.07);
}

.opflow-preview-grid.completed .opflow-preview-row {
  background:
    linear-gradient(135deg, rgba(31, 138, 91, 0.12), transparent 56%),
    #fbfff9;
}

.opflow-preview-completed {
  display: grid;
  gap: 12px;
  padding-top: 4px;
}

.opflow-completed-card-toggle {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(31, 138, 91, 0.18);
  border-radius: 16px;
  background: #f5fbf4;
  color: #151515;
  cursor: pointer;
}

.opflow-completed-card-toggle span {
  color: #1f5f43;
  font-size: 13px;
  font-weight: 950;
}

.opflow-completed-card-toggle strong {
  min-width: 34px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #1f8a5b;
  color: #fff;
  font-size: 12px;
}

.opflow-preview-completed.is-open .opflow-completed-card-toggle {
  background: #ebf8ec;
}

.opflow-public-note {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 16px;
  background: #fffdf6;
}

.opflow-public-note .textarea {
  min-height: 128px;
  background: #fff;
}

.opflow-note-toggle.internal {
  align-self: start;
}

@media (max-width: 1500px) {
  .opflow-preview-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

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

@media (max-width: 860px) {
  .opflow-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .opflow-preview-grid {
    grid-template-columns: 1fr;
  }
}

/* Operation panel v38: dark cards, calmer surfaces, platform access desk */
.opflow-preview-card {
  border-color: rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(circle at 12% 0%, rgba(242, 191, 40, 0.16), transparent 34%),
    linear-gradient(135deg, #141619, #20231f 58%, #151719);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.opflow-preview-headline {
  border-bottom-color: rgba(255, 255, 255, 0.09);
  background: transparent;
}

.opflow-preview-headline span {
  color: #f2bf28;
}

.opflow-preview-headline h3 {
  color: #fff;
}

.opflow-preview-headline strong {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.opflow-preview-grid .opflow-preview-row {
  border-color: rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)),
    #191c20;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.opflow-preview-grid .opflow-preview-row:hover {
  border-color: rgba(242, 191, 40, 0.55);
  background:
    linear-gradient(180deg, rgba(242, 191, 40, 0.11), rgba(255, 255, 255, 0.04)),
    #1e211f;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.opflow-preview-grid .opflow-preview-row b {
  color: #fff;
}

.opflow-preview-grid .opflow-preview-row small {
  color: rgba(255, 255, 255, 0.62);
}

.opflow-preview-grid .opflow-preview-platform,
.opflow-preview-grid .opflow-preview-date {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.opflow-preview-grid.completed .opflow-preview-row {
  border-color: rgba(31, 138, 91, 0.28);
  background:
    linear-gradient(135deg, rgba(31, 138, 91, 0.23), rgba(255, 255, 255, 0.04)),
    #172019;
}

.opflow-completed-card-toggle {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

.opflow-completed-card-toggle span {
  color: rgba(255, 255, 255, 0.86);
}

.opflow-completed-card-toggle strong {
  background: #1f8a5b;
}

.opflow-back-btn {
  min-height: 44px;
  padding: 0 16px 0 10px;
  border: 0;
  background: linear-gradient(135deg, #f2bf28, #ffe28a);
  color: #151515;
  box-shadow: 0 16px 36px rgba(242, 191, 40, 0.22);
}

.opflow-back-btn span {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(17, 19, 24, 0.12);
  font-weight: 950;
}

.opflow-back-btn:hover {
  background: linear-gradient(135deg, #ffd65d, #f2bf28);
  transform: translateY(-1px);
}

.opflow-detail-mode .opflow-edit-card,
.opflow-detail-mode .opflow-user-card {
  background: #f2eddf;
}

.opflow-detail-mode .opflow-edit-summary,
.opflow-detail-mode .opflow-edit-form-shell,
.opflow-detail-mode .opflow-command-facts {
  background: #f2eddf;
}

.opflow-detail-mode .opflow-command-facts div,
.opflow-detail-mode .opflow-facts div,
.opflow-public-note,
.opflow-note-toggle,
.opflow-edit-files,
.opflow-platform-card {
  border-color: rgba(65, 54, 31, 0.11);
  background: #ebe4d2;
}

.opflow-detail-mode .request-field-input,
.opflow-detail-mode .textarea {
  border-color: rgba(65, 54, 31, 0.13);
  background: #fbf5e7;
  color: #171717;
}

.opflow-edit-files .opflow-attachment-grid {
  grid-template-columns: minmax(250px, 0.9fr) minmax(0, 1.1fr);
}

.opflow-platform-card {
  margin: 14px 20px 20px;
  padding: 14px;
  border: 1px solid rgba(65, 54, 31, 0.11);
  border-radius: 10px;
  display: grid;
  gap: 12px;
}

.opflow-platform-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.opflow-platform-head span {
  display: block;
  margin-bottom: 4px;
  color: #9b6b00;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.opflow-platform-head strong {
  color: #151515;
  font-size: 15px;
  font-weight: 950;
}

.opflow-platform-head small {
  color: #756b5b;
  font-size: 11px;
  font-weight: 850;
}

.opflow-platform-grid {
  display: grid;
  gap: 10px;
}

.opflow-platform-row {
  display: grid;
  grid-template-columns: minmax(135px, 0.9fr) minmax(0, 1fr) minmax(0, 0.86fr) minmax(92px, auto);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(65, 54, 31, 0.1);
  border-radius: 15px;
  background: #f8f1df;
}

.opflow-platform-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.opflow-platform-title i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--platform-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--platform-color) 18%, transparent);
}

.opflow-platform-title strong {
  color: #151515;
  font-size: 13px;
  font-weight: 950;
}

.opflow-platform-title em {
  margin-left: auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--platform-color) 13%, #fff);
  color: color-mix(in srgb, var(--platform-color) 82%, #111);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.opflow-platform-secret {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.opflow-platform-secret span {
  color: #7b705f;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.opflow-platform-secret b {
  overflow: hidden;
  color: #171717;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opflow-platform-edit {
  justify-self: end;
  position: relative;
}

.opflow-platform-edit summary {
  min-height: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #151515;
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
  list-style: none;
}

.opflow-platform-edit summary::-webkit-details-marker {
  display: none;
}

.opflow-platform-edit[open] {
  grid-column: 1 / -1;
  justify-self: stretch;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
}

.opflow-platform-edit[open] summary {
  grid-column: 1 / -1;
  width: max-content;
}

.opflow-platform-edit[open] .btn-primary {
  min-height: 40px;
  border-radius: 12px;
}

.opflow-flow-columns {
  position: relative;
  grid-template-columns: 1fr;
  align-items: start;
}

.opflow-flow-columns:has(.opflow-flow-lane.internal[open]) {
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
}

.opflow-flow-lane.public {
  min-width: 0;
}

.opflow-flow-lane-title {
  min-height: 50px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.opflow-flow-lane-title span {
  font-size: 14px;
  font-weight: 950;
}

.opflow-flow-lane-title strong {
  padding: 5px 9px;
  border-radius: 999px;
  background: #f2bf28;
  color: #151515;
  font-size: 12px;
  font-weight: 950;
}

.opflow-flow-lane.internal:not([open]) {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
}

.opflow-flow-lane.internal:not([open]) summary {
  min-width: 174px;
  border-color: rgba(242, 191, 40, 0.42) !important;
  background: #f2bf28;
  color: #151515;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.opflow-flow-lane.internal:not([open]) summary strong {
  background: rgba(17, 19, 24, 0.14);
}

.opflow-flow-lane.internal[open] {
  position: static;
}

.opflow-flow-columns .opflow-timeline,
.opflow-flow-columns .opflow-empty {
  background: #f2eddf;
}

@media (max-width: 1180px) {

  .opflow-flow-columns:has(.opflow-flow-lane.internal[open]),
  .opflow-platform-row,
  .opflow-platform-edit[open] {
    grid-template-columns: 1fr;
  }

  .opflow-flow-lane.internal:not([open]) {
    position: static;
    justify-self: stretch;
  }
}

@media (max-width: 760px) {

  .opflow-edit-files .opflow-attachment-grid,
  .opflow-platform-row,
  .opflow-platform-edit[open] {
    grid-template-columns: 1fr;
  }

  .opflow-platform-card {
    margin-left: 14px;
    margin-right: 14px;
  }
}

/* Operation/customer v39: dynamic links, larger request popup, RestoUp dark workbench */
.opflow-back-btn {
  min-height: 52px;
  padding: 7px 18px 7px 8px;
  gap: 11px;
  border: 1px solid rgba(242, 191, 40, 0.55);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(242, 191, 40, 0.96), rgba(255, 232, 143, 0.98)),
    #f2bf28;
  color: #111318;
  box-shadow: 0 18px 42px rgba(242, 191, 40, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.opflow-back-icon {
  width: 36px !important;
  height: 36px !important;
  background: #111318 !important;
  color: #f2bf28;
  font-size: 17px;
}

.opflow-back-copy {
  display: grid;
  gap: 1px;
  text-align: left;
  line-height: 1.1;
}

.opflow-back-copy b {
  color: #111318;
  font-size: 13px;
  font-weight: 950;
}

.opflow-back-copy small {
  color: rgba(17, 19, 24, 0.62);
  font-size: 11px;
  font-weight: 850;
}

.request-link-dynamic {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(242, 191, 40, 0.14);
  border-radius: 16px;
  background: rgba(17, 19, 24, 0.04);
  display: grid;
  gap: 9px;
}

.request-link-details .request-link-stack {
  margin-top: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.request-link-row {
  grid-template-columns: minmax(130px, 0.36fr) minmax(180px, 0.64fr) 34px;
  align-items: center;
}

.request-link-add,
.request-link-remove {
  border: 0;
  cursor: pointer;
  font-weight: 950;
}

.request-link-add {
  width: max-content;
  min-height: 36px;
  padding: 0 13px;
  border-radius: 999px;
  background: #f2bf28;
  color: #111318;
}

.request-link-remove {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(17, 19, 24, 0.1);
  color: #4f5661;
}

.request-link-remove:hover {
  background: rgba(239, 68, 68, 0.14);
  color: #ef4444;
}

.customer-task-modal-dialog {
  width: min(1040px, calc(100vw - 36px));
  max-height: min(850px, calc(100vh - 28px));
}

.customer-task-modal-content {
  overflow-x: hidden;
}

.customer-task-modal-content .customer-task-body,
.customer-task-modal-content .customer-task-events,
.customer-task-modal-content .customer-task-event {
  min-width: 0;
  max-width: 100%;
}

.customer-task-modal-content .request-attachment-table-wrap {
  overflow-x: visible;
}

.customer-task-modal-content .request-attachment-table {
  min-width: 0;
  width: 100%;
}

.customer-task-modal-stage .customer-stage-preview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#panel-requests.active {
  background:
    radial-gradient(circle at 12% 0%, rgba(242, 191, 40, 0.16), transparent 30%),
    radial-gradient(circle at 92% 14%, rgba(31, 138, 91, 0.11), transparent 34%),
    linear-gradient(135deg, #0f1115 0%, #181b1f 52%, #111318 100%);
}

.opflow-detail-mode .opflow-edit-card,
.opflow-detail-mode .opflow-user-card,
.opflow-detail-mode .opflow-flow-card {
  border: 1px solid rgba(242, 191, 40, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    #15181c;
  color: #f8fafc;
  box-shadow: 0 24px 62px rgba(0, 0, 0, 0.28);
}

.opflow-detail-mode .opflow-edit-summary,
.opflow-detail-mode .opflow-edit-form-shell,
.opflow-detail-mode .opflow-command-facts {
  background: #15181c;
}

.opflow-detail-mode .opflow-command-facts {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.opflow-detail-mode .opflow-command-facts div,
.opflow-detail-mode .opflow-facts div,
.opflow-public-note,
.opflow-note-toggle,
.opflow-edit-files,
.opflow-platform-card {
  border-color: rgba(242, 191, 40, 0.12);
  background: #1c2025;
}

.opflow-detail-mode .opflow-command-facts div,
.opflow-detail-mode .opflow-facts div {
  color: #fff;
}

.opflow-detail-mode .opflow-command-facts span,
.opflow-detail-mode .opflow-facts span,
.opflow-detail-mode .opflow-edit-form-shell label span,
.opflow-detail-mode .opflow-edit-files label span,
.opflow-public-note>span,
.opflow-note-toggle summary span,
.opflow-platform-head span,
.opflow-platform-secret span,
.opflow-mini-title span {
  color: rgba(242, 191, 40, 0.82);
}

.opflow-detail-mode .opflow-command-facts strong,
.opflow-detail-mode .opflow-facts strong,
.opflow-platform-head strong,
.opflow-platform-title strong,
.opflow-platform-secret b,
.opflow-mini-title strong,
.opflow-note-toggle summary span {
  color: #fff;
}

.opflow-detail-mode .request-field-input,
.opflow-detail-mode .textarea {
  border-color: rgba(255, 255, 255, 0.1);
  background: #101216;
  color: #fff;
}

.opflow-detail-mode .request-field-input::placeholder,
.opflow-detail-mode .textarea::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

.opflow-detail-mode .request-field-input option {
  background: #15181c;
  color: #fff;
}

.opflow-public-note .textarea,
.opflow-note-toggle .textarea {
  background: #101216;
}

.opflow-platform-head small,
.opflow-platform-row small {
  color: rgba(255, 255, 255, 0.5);
}

.opflow-platform-row {
  border-color: rgba(255, 255, 255, 0.08);
  background: #111419;
}

.opflow-platform-title em {
  background: color-mix(in srgb, var(--platform-color) 22%, #111419);
  color: #fff;
}

.opflow-platform-edit summary {
  background: #f2bf28;
  color: #111318;
}

.opflow-drive-link {
  border-color: rgba(255, 255, 255, 0.08);
  background: #111419;
}

.opflow-drive-link strong {
  color: #fff;
}

.opflow-drive-link small {
  color: rgba(255, 255, 255, 0.54);
}

.request-link-details summary {
  border-color: rgba(242, 191, 40, 0.22);
  background: #111419;
  color: #f2bf28;
}

.request-link-details[open] summary {
  border-color: #f2bf28;
  background: #f2bf28;
  color: #111318;
}

.opflow-flow-card {
  background:
    radial-gradient(circle at 15% 0%, rgba(242, 191, 40, 0.15), transparent 35%),
    #111318;
}

.opflow-flow-hero {
  background:
    linear-gradient(90deg, rgba(242, 191, 40, 0.13), transparent 42%),
    #111318;
}

.opflow-flow-columns {
  background: #111318;
}

.opflow-flow-lane-title,
.opflow-flow-columns summary {
  border-color: rgba(242, 191, 40, 0.16) !important;
  background: rgba(255, 255, 255, 0.055);
}

.opflow-flow-columns .opflow-timeline,
.opflow-flow-columns .opflow-empty {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(242, 191, 40, 0.12);
  border-radius: 10px;
  background: #15181c;
}

.opflow-timeline {
  gap: 10px;
}

.opflow-flow-columns .opflow-timeline-row,
.opflow-timeline-row {
  position: relative;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 14px;
  min-height: 74px;
  padding: 14px 14px 14px 24px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-left: 0;
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(242, 191, 40, 0.08), transparent 30%),
    #1a1e23;
}

.opflow-timeline-row::before {
  left: 10px;
  top: 19px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f2bf28;
  box-shadow: 0 0 0 5px rgba(242, 191, 40, 0.12);
}

.opflow-timeline-row::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 32px;
  bottom: -12px;
  width: 2px;
  background: linear-gradient(180deg, rgba(242, 191, 40, 0.32), transparent);
}

.opflow-timeline-row:last-child::after {
  display: none;
}

.opflow-timeline-row.internal::before {
  background: #8a93a2;
  box-shadow: 0 0 0 5px rgba(138, 147, 162, 0.13);
}

.opflow-timeline-row time {
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.35;
}

.opflow-timeline-row strong {
  color: #fff;
  font-size: 13px;
  font-weight: 950;
}

.opflow-flow-columns .opflow-timeline-row p,
.opflow-timeline-row p {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  line-height: 1.55;
}

.opflow-timeline-row .request-attachment-card,
.opflow-timeline-row .request-attachment-table-wrap {
  border-color: rgba(255, 255, 255, 0.08);
  background: #111419;
}

@media (max-width: 760px) {
  .customer-task-modal-dialog {
    width: calc(100vw - 18px);
  }

  .customer-task-modal-stage .customer-stage-preview,
  .opflow-flow-columns .opflow-timeline-row,
  .opflow-timeline-row,
  .request-link-row {
    grid-template-columns: 1fr;
  }

  .request-link-remove {
    width: 100%;
  }
}

/* ==========================================================================
   RESTOUP PREMIUM SPLIT-PANE OPERATIONS DASHBOARD (ops-dashboard)
   ========================================================================== */

#panel-requests {
  padding: 0 !important;
  background: var(--bg) !important;
}

.ops-dashboard {
  display: flex;
  flex-direction: column;
  height: auto;
  /* Allow natural vertical growth */
  padding: 0 24px 24px 24px;
  /* Reclaimed padding, flush and perfectly sized */
  margin-top: 0px !important;
  /* Reclaimed zero-margin, flush alignment with top page bar! */
  gap: 20px;
  font-family: 'Inter', sans-serif;
  color: var(--text);
  box-sizing: border-box;
}

/* 1. Master Command Center Card Container */
.ops-command-center-card {
  display: flex;
  flex-direction: column;
  background: rgba(10, 10, 12, 0.45) !important;
  /* Elegant deep dark slate glass */
  border: 1px solid var(--border) !important;
  /* Clean standard dark borders */
  border-radius: 16px !important;
  padding: 20px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(20px) !important;
  gap: 16px;
}

.ops-command-top-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 15 !important;
}

.ops-command-top-row .ops-dashboard-clock-wrapper {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ops-command-top-row .ops-dashboard-stats-compact {
  grid-column: 3;
  justify-self: end;
}

.ops-brand-info h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}

/* Compact Scoreboard Statistics */
.ops-dashboard-stats-compact {
  display: flex;
  gap: 8px;
}

.ops-stat-badge-compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  transition: all 0.2s ease;
}

.ops-stat-badge-compact:hover {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.1);
}

.ops-stat-badge-compact strong {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
}

.ops-stat-badge-compact span {
  font-size: 0.65rem;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.ops-stat-badge-compact.pending strong {
  color: #38bdf8;
}

.ops-stat-badge-compact.overdue strong {
  color: #ef4444;
}

.ops-stat-badge-compact.success strong {
  color: #10b981;
}

/* 2. Unified Search & Command Filters Row */
.ops-command-search-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
}

.ops-search-box {
  display: flex;
  align-items: center;
  position: relative;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 12px;
  height: 36px;
  flex: 1;
  min-width: 250px;
}

.ops-search-icon {
  font-size: 0.8rem;
  color: var(--text2);
  margin-right: 8px;
}

.ops-search-input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #ffffff !important;
  font-size: 0.8rem !important;
  width: 100% !important;
  padding: 0 !important;
}

.ops-search-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.ops-filters-and-owner-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ops-filter-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.request-filter-chip {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--border) !important;
  color: var(--text2) !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#panel-requests.active .ops-command-search-strip {
  position: relative;
  z-index: 30;
}

#panel-requests.active .ops-filter-chips,
#panel-requests.active .ops-filter-chips .request-filter-chip {
  position: relative;
  z-index: 31;
  pointer-events: auto !important;
}

.request-filter-chip:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.request-filter-chip.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #000000 !important;
  font-weight: 800 !important;
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.2) !important;
}

.ops-area-filter .ops-area-select,
.ops-owner-filter .ops-owner-select {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  padding: 6px 12px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  height: 36px !important;
  min-width: 140px !important;
  outline: none !important;
}

.ops-area-filter .ops-area-select {
  min-width: 132px !important;
}

.ops-sla-control-card {
  margin: -6px 0 16px;
  padding: 16px;
  border: 1px solid rgba(234, 179, 8, 0.2);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(234, 179, 8, 0.1), rgba(37, 99, 235, 0.06)),
    rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ops-sla-collapsible {
  padding: 0;
  overflow: hidden;
}

.ops-sla-collapsible summary {
  list-style: none;
}

.ops-sla-collapsible summary::-webkit-details-marker {
  display: none;
}

.ops-sla-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  cursor: pointer;
  user-select: none;
}

.ops-sla-toggle:hover {
  background: rgba(255, 255, 255, 0.035);
}

.ops-sla-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(234, 179, 8, 0.14);
  color: #facc15;
  border: 1px solid rgba(234, 179, 8, 0.2);
  flex-shrink: 0;
}

.ops-sla-toggle-icon svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ops-sla-toggle-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.ops-sla-toggle-copy strong {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.74rem;
  font-weight: 850;
  line-height: 1.1;
}

.ops-sla-toggle-copy small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.2;
}

.ops-sla-toggle>b {
  min-width: 62px !important;
  padding: 5px 8px !important;
  border-radius: 7px !important;
  font-size: 0.78rem !important;
}

.ops-sla-collapsible[open] .ops-sla-toggle {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ops-sla-control-panel {
  padding: 12px 14px 14px;
}

.ops-sla-floating {
  position: absolute;
  top: -46px;
  right: 0;
  z-index: 20;
  width: auto;
  min-width: 0;
  margin: 0;
}

.ops-sla-floating .ops-sla-toggle {
  width: 118px;
  min-height: 30px;
  padding: 5px 7px;
  gap: 6px;
}

.ops-sla-floating .ops-sla-toggle-icon {
  width: 22px;
  height: 22px;
}

.ops-sla-floating .ops-sla-toggle-copy {
  display: none;
}

.ops-sla-floating .ops-sla-toggle>b {
  min-width: auto !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #facc15;
  font-size: 0.72rem !important;
}

.ops-sla-floating[open] {
  width: min(320px, calc(100vw - 40px));
  background:
    linear-gradient(135deg, rgba(234, 179, 8, 0.1), rgba(37, 99, 235, 0.06)),
    #10141f;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.ops-sla-floating[open] .ops-sla-toggle {
  width: 100%;
}

.ops-sla-floating[open] .ops-sla-toggle-copy {
  display: flex;
}

.ops-sla-floating[open] .ops-sla-toggle>b {
  min-width: 62px !important;
  padding: 5px 8px !important;
  border: 1px solid rgba(234, 179, 8, 0.26) !important;
  background: rgba(234, 179, 8, 0.16) !important;
}

.ops-sla-control-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.ops-sla-control-head span {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ops-sla-control-head strong {
  display: block;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.88rem;
  font-weight: 750;
}

.ops-sla-control-head b {
  min-width: 74px;
  padding: 7px 10px;
  border-radius: 9px;
  background: rgba(234, 179, 8, 0.16);
  border: 1px solid rgba(234, 179, 8, 0.26);
  color: #facc15;
  font-family: 'Outfit', sans-serif;
  font-size: 0.92rem;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}

.ops-sla-range {
  width: 100%;
  height: 8px;
  margin: 0;
  appearance: none;
  border-radius: 999px;
  outline: none;
  background: linear-gradient(90deg, #22c55e, #eab308 46%, #ef4444);
  cursor: pointer;
}

.ops-sla-range::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  appearance: none;
  border-radius: 50%;
  background: #ffffff;
  border: 4px solid #eab308;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.ops-sla-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: 4px solid #eab308;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.ops-sla-range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.62rem;
  font-weight: 750;
}

.ops-sla-due-preview {
  margin-top: 11px;
  padding: 9px 11px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.75rem;
  font-weight: 700;
}

.ops-sla-due-preview strong {
  color: #ffffff;
}

.ops-sla-control-card.requires-selection {
  border-color: rgba(239, 68, 68, 0.46) !important;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.16), 0 12px 26px rgba(239, 68, 68, 0.12) !important;
}

.ops-sla-control-card.requires-selection .ops-sla-control-head span {
  color: #f87171 !important;
}

.ops-sla-control-card.requires-selection::after {
  content: "İlk güncelleme için tamamlanma süresi seçilmelidir.";
  display: block;
  margin-top: 10px;
  color: #f87171;
  font-size: 0.72rem;
  font-weight: 800;
}

.ops-sla-approval-warning {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: -10px 0 22px;
  padding: 14px;
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(15, 23, 42, 0.62)),
    rgba(10, 10, 12, 0.9);
  box-shadow: 0 14px 32px rgba(245, 158, 11, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.ops-sla-approval-warning-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.32);
  color: #fbbf24;
  font-weight: 950;
  font-family: 'Outfit', sans-serif;
}

.ops-sla-approval-warning-copy {
  min-width: 0;
}

.ops-sla-approval-warning-copy strong {
  display: block;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 900;
}

.ops-sla-approval-warning-copy p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.76rem;
  line-height: 1.45;
}

.ops-sla-approval-warning-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ops-sla-approval-warning-actions button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 0.72rem;
  font-weight: 850;
  cursor: pointer;
}

.ops-sla-approval-cancel {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.78);
}

.ops-sla-approval-send {
  background: #f2bf28;
  border: 1px solid #f2bf28;
  color: #111216;
  box-shadow: 0 8px 18px rgba(242, 191, 40, 0.16);
}

.ops-sla-initial-modal {
  position: fixed;
  inset: 0;
  z-index: 100008;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px);
}

.ops-sla-initial-dialog {
  width: min(520px, 100%);
  padding: 22px;
  border: 1px solid rgba(242, 191, 40, 0.28);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(18, 21, 26, 0.98), rgba(10, 12, 16, 0.98));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.ops-sla-initial-head span {
  color: #f2bf28;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.ops-sla-initial-head strong {
  display: block;
  margin-top: 5px;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 950;
}

.ops-sla-initial-head p {
  margin: 8px 0 18px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.84rem;
  line-height: 1.45;
}

.ops-sla-initial-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.ops-sla-initial-value b {
  color: #f2bf28;
  font-size: 1.1rem;
  font-weight: 950;
}

.ops-sla-initial-value small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.76rem;
  text-align: right;
}

.ops-sla-initial-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.ops-sla-initial-actions button {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.ops-sla-initial-cancel {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.76);
}

.ops-sla-initial-confirm {
  background: #f2bf28;
  border: 1px solid #f2bf28;
  color: #111216;
}

.user-performance-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
  min-width: 460px;
}

.user-performance-section {
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.018);
}

.user-performance-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.user-performance-head span {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
}

.user-performance-head b {
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.66rem;
  font-weight: 800;
  white-space: nowrap;
}

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

.user-metric-grid.ops {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.user-metric-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 28px;
  padding: 5px 7px;
  border: 1px solid;
  border-radius: 8px;
}

.user-metric-pill span {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.64rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-metric-pill strong {
  font-size: 0.76rem;
  font-weight: 950;
}

.representative-modal-content {
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 107, 0, 0.08), rgba(225, 29, 107, 0.025) 36%, rgba(8, 7, 6, 0.96)),
    #0f0d0b !important;
  border-color: rgba(255, 107, 0, 0.2) !important;
}

.representative-card-shell {
  padding: 18px;
  display: grid;
  gap: 12px;
}

.representative-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.24);
  color: rgba(255, 247, 237, 0.64);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: 0.18s ease;
}

.representative-close-btn:hover {
  border-color: rgba(255, 107, 0, 0.32);
  background: rgba(255, 107, 0, 0.12);
  color: #ffffff;
}

.representative-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 54px 15px 16px;
  border: 1px solid rgba(255, 107, 0, 0.16);
  border-radius: 12px;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 107, 0, 0.18), transparent 36%),
    linear-gradient(135deg, rgba(255, 107, 0, 0.1), rgba(225, 29, 107, 0.045)),
    rgba(0, 0, 0, 0.2);
}

.representative-card-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.representative-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: #e11d6b;
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-size: 1.26rem;
  font-weight: 950;
  text-transform: uppercase;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.22);
}

.representative-card-kicker {
  color: #ff8c38;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.representative-card-head h2 {
  margin: 3px 0 0;
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1.15;
}

.representative-card-subline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 5px;
  color: rgba(255, 247, 237, 0.58);
  font-size: 0.7rem;
  font-weight: 750;
}

.representative-head-pills {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.representative-role-pill {
  padding: 6px 11px;
  border: 1px solid rgba(56, 189, 248, 0.24);
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.09);
  color: #7dd3fc;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.representative-status-pill {
  padding: 6px 11px;
  border: 1px solid rgba(255, 107, 0, 0.22);
  border-radius: 999px;
  background: rgba(255, 107, 0, 0.09);
  color: #ffb36f;
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.representative-role-pill.admin {
  border-color: rgba(168, 85, 247, 0.26);
  background: rgba(168, 85, 247, 0.11);
  color: #c084fc;
}

.representative-card-body {
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) minmax(420px, 1.22fr);
  gap: 12px;
  align-items: stretch;
}

.representative-card-body.no-performance {
  grid-template-columns: minmax(0, 1fr);
}

.representative-card-body.no-performance .representative-info-card {
  max-width: 620px;
  width: 100%;
}

.representative-info-card,
.user-modal-performance-card {
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 12px;
  background: rgba(8, 7, 6, 0.34);
}

.representative-info-card {
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.representative-card-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.representative-card-section-title i {
  color: #ff8c38;
  font-size: 0.82rem;
}

.representative-card-section-title strong {
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 850;
}

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

.representative-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.018);
  transition: border-color 0.18s ease, background 0.18s ease;
}

.representative-field:focus-within {
  border-color: rgba(255, 107, 0, 0.34);
  background: rgba(255, 107, 0, 0.045);
}

.representative-field.wide {
  grid-column: 1 / -1;
}

.representative-field span {
  color: rgba(255, 247, 237, 0.5);
  font-size: 0.6rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.representative-field input,
.representative-field select {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 5px 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  box-shadow: none !important;
  outline: none;
  font-size: 0.8rem;
  font-weight: 800;
}

.representative-field select {
  cursor: pointer;
}

.representative-readonly strong {
  min-height: 30px;
  display: flex;
  align-items: center;
  color: #ffb36f;
  font-size: 0.8rem;
  font-weight: 850;
}

.representative-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 2px;
}

.representative-card-actions button {
  flex: 0 0 auto !important;
  min-width: 160px;
  height: 42px;
  border-radius: 9px !important;
  font-weight: 850 !important;
}

.representative-save-btn {
  min-width: 190px !important;
}

.representative-cancel-btn {
  background: rgba(0, 0, 0, 0.18) !important;
}

.user-modal-performance-card {
  margin-top: 0;
  padding: 13px;
  border: 1px solid rgba(255, 107, 0, 0.22);
  border-radius: 12px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 107, 0, 0.12), transparent 32%),
    linear-gradient(135deg, rgba(255, 107, 0, 0.06), rgba(17, 13, 11, 0.74)),
    rgba(255, 255, 255, 0.018);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.user-modal-performance-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.user-modal-performance-head div {
  display: grid;
  gap: 3px;
}

.user-modal-performance-head span {
  color: #ff6b00;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.user-modal-performance-head strong {
  color: #ffffff;
  font-size: 0.96rem;
  font-weight: 900;
}

.user-modal-performance-head small {
  max-width: 360px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.45;
  text-align: right;
}

.user-modal-performance-card .user-performance-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.user-modal-performance-card .user-performance-section {
  padding: 9px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.17);
}

.user-modal-performance-card .user-performance-head {
  margin-bottom: 7px;
}

.user-modal-performance-card .user-metric-grid {
  gap: 5px;
}

.user-modal-performance-card .user-metric-pill {
  min-height: 26px;
  padding: 4px 7px;
}

@media (max-width: 1280px) {
  .user-performance-panel {
    grid-template-columns: 1fr;
    min-width: 300px;
  }
}

@media (max-width: 760px) {
  .representative-card-shell {
    padding: 14px;
  }

  .representative-card-head,
  .representative-card-body,
  .representative-card-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .representative-card-head {
    padding-right: 48px;
  }

  .representative-head-pills {
    justify-content: flex-start;
  }

  .representative-card-body {
    gap: 12px;
  }

  .representative-card-actions button,
  .representative-save-btn {
    width: 100%;
    min-width: 0 !important;
  }

  .representative-compact-grid {
    grid-template-columns: 1fr;
  }

  .user-modal-performance-head {
    display: grid;
  }

  .user-modal-performance-head small {
    max-width: none;
    text-align: left;
  }

  .user-modal-performance-card .user-performance-panel {
    grid-template-columns: 1fr;
  }

  .user-modal-performance-card .user-metric-grid.ops {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .ops-sla-approval-warning {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ops-sla-approval-warning-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .ops-sla-approval-warning-actions button {
    flex: 1;
  }

  .ops-sla-initial-value,
  .ops-sla-initial-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .ops-sla-initial-value small {
    text-align: left;
  }
}

/* 3. Main Dashboard 2-Column Split Workspace Layout (Top Horizontal & Bottom Workspace) */
.ops-dashboard-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  min-height: 0;
}

.ops-card.ops-command-center-card {
  background:
    linear-gradient(180deg, #12151a 0%, #0e1116 48%, #0a0c10 100%) !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  position: relative !important;
  overflow: visible !important;
}

.ops-command-center-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(242, 191, 40, 0.055), transparent 28%, transparent 72%, rgba(56, 189, 248, 0.035)),
    radial-gradient(circle at 14% 8%, rgba(242, 191, 40, 0.075), transparent 220px);
  opacity: 0.82;
}

.ops-command-center-card>* {
  position: relative;
  z-index: 1;
}

.ops-command-top-row {
  padding: 2px 2px 0;
}

.ops-dashboard-stats-compact {
  padding: 4px;
  border: 1px solid rgba(148, 163, 184, 0.08);
  border-radius: 12px;
  background: rgba(2, 6, 12, 0.24);
}

.ops-stat-badge-compact {
  background: rgba(15, 23, 42, 0.5) !important;
  border-color: rgba(148, 163, 184, 0.12) !important;
}

.ops-command-search-strip {
  margin-top: 2px !important;
  padding: 12px 14px !important;
  background:
    linear-gradient(180deg, rgba(2, 6, 12, 0.58), rgba(2, 6, 12, 0.36)) !important;
  border-color: rgba(148, 163, 184, 0.13) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

.ops-search-box,
.ops-owner-filter .ops-owner-select {
  background: rgba(5, 8, 13, 0.74) !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
}

.request-filter-chip {
  background: rgba(15, 23, 42, 0.52) !important;
  border-color: rgba(148, 163, 184, 0.13) !important;
}

.request-filter-chip:hover {
  background: rgba(30, 41, 59, 0.72) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
}

.request-filter-chip.active {
  box-shadow: 0 8px 18px rgba(242, 191, 40, 0.16) !important;
}

.ops-command-queue-row {
  margin-top: 18px !important;
  padding: 18px 20px 20px !important;
  border: 1px solid rgba(148, 163, 184, 0.13) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.48), rgba(2, 6, 12, 0.34)),
    rgba(6, 8, 12, 0.5) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 34px rgba(0, 0, 0, 0.18) !important;
}

.ops-queue-label-bar {
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075) !important;
}

.ops-queue-label-bar span {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.ops-queue-label-bar strong {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 0.78rem !important;
}

.ops-queue-ticket-grid {
  gap: 14px !important;
  margin-top: 14px !important;
}

/* Top Horizontal Queue Pane Styles */
.ops-dashboard-queue-pane-top {
  width: 100%;
  background: #111216 !important;
  /* Highly distinguishable solid dark slate charcoal */
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  /* Sharp, visible borders */
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
  /* Premium drop-shadow to lift it up */
}

.ops-pane-headline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.15);
}

.ops-pane-headline span {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text2);
}

.ops-pane-headline strong {
  font-size: 0.75rem;
  color: var(--accent);
}

.ops-pane-list-stream-horizontal {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  /* Prevent vertical scrolling inside the list pane */
  padding: 8px 12px;
  gap: 12px;
  scroll-behavior: smooth;
  min-height: auto;
  height: 114px;
  /* Perfectly frames the compact 94px tall ticket cards with zero vertical bloat! */
  box-sizing: border-box;
}

/* Custom horizontal scrollbar formatting */
.ops-pane-list-stream-horizontal::-webkit-scrollbar {
  height: 6px;
}

.ops-pane-list-stream-horizontal::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 100px;
}

.ops-pane-list-stream-horizontal::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 100px;
}

.ops-pane-list-stream-horizontal::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Make Ticket Cards fit perfectly inside horizontal list */
.ops-pane-list-stream-horizontal .ops-queue-ticket-card {
  flex: 0 0 250px !important;
  width: 250px !important;
  margin-bottom: 0;
  background: rgba(255, 255, 255, 0.026) !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  border-radius: 14px;
  padding: 10px 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.026);
}

.ops-pane-list-stream-horizontal .ops-queue-ticket-card:hover {
  transform: translateY(-2px) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(255, 255, 255, 0.11) !important;
}

.ops-pane-list-stream-horizontal .ops-queue-ticket-card.active {
  border-color: rgba(234, 179, 8, 0.42) !important;
  background: linear-gradient(180deg, rgba(234, 179, 8, 0.08), rgba(255, 255, 255, 0.025)) !important;
  box-shadow: 0 12px 28px rgba(234, 179, 8, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

/* Legacy elements mapping for safety */
.ops-dashboard-queue-pane,
.ops-pane-list-stream {
  display: none !important;
}

/* Custom Scrollbars */
.ops-pane-list-stream::-webkit-scrollbar,
.ops-workspace-scroller::-webkit-scrollbar,
.ops-timeline-stream-container::-webkit-scrollbar {
  width: 6px;
}

.ops-pane-list-stream::-webkit-scrollbar-track,
.ops-workspace-scroller::-webkit-scrollbar-track,
.ops-timeline-stream-container::-webkit-scrollbar-track {
  background: transparent;
}

.ops-pane-list-stream::-webkit-scrollbar-thumb,
.ops-workspace-scroller::-webkit-scrollbar-thumb,
.ops-timeline-stream-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 100px;
}

.ops-pane-list-stream::-webkit-scrollbar-thumb:hover,
.ops-workspace-scroller::-webkit-scrollbar-thumb:hover,
.ops-timeline-stream-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* 4. Queue Ticket Card Layout (Compact, Sleek, Space-Saving) */
.ops-queue-ticket-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 94px !important;
  /* Low profile vertical sizing */
  padding: 10px 12px !important;
  background: rgba(255, 255, 255, 0.026) !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  margin-bottom: 2px;
  box-sizing: border-box;
}

.ops-queue-ticket-grid .ops-queue-ticket-card,
.ops-pane-list-stream-horizontal .ops-queue-ticket-card {
  height: 94px !important;
  min-height: 94px !important;
  max-height: 94px !important;
  align-self: start !important;
  padding: 10px 12px !important;
  overflow: hidden !important;
}

.ops-ticket-category-mark {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
}

.ops-queue-ticket-card:hover {
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(255, 255, 255, 0.11) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.ops-queue-ticket-card.active {
  background: linear-gradient(180deg, rgba(234, 179, 8, 0.08), rgba(255, 255, 255, 0.025)) !important;
  border-color: rgba(234, 179, 8, 0.42) !important;
  box-shadow: 0 12px 28px rgba(234, 179, 8, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

.ops-queue-ticket-card.active .ops-ticket-card-title {
  color: var(--accent);
}

.ops-queue-ticket-card.overdue {
  border-color: rgba(255, 30, 30, 0.65) !important;
  background:
    linear-gradient(90deg, rgba(255, 30, 30, 0.18), transparent 45%),
    rgba(255, 255, 255, 0.026) !important;
  box-shadow: 0 12px 32px rgba(255, 0, 0, 0.15), inset 4px 0 0 #ff1a1a !important;
  animation: opsOverdueTicketFocus 1.6s ease-in-out infinite;
}

.ops-queue-ticket-card.overdue.active {
  border-color: rgba(255, 0, 0, 0.85) !important;
  box-shadow: 0 16px 40px rgba(255, 0, 0, 0.25), inset 5px 0 0 #ff0000 !important;
}

.ops-queue-ticket-card.overdue:hover {
  border-color: #ff1a1a !important;
  background:
    linear-gradient(90deg, rgba(255, 30, 30, 0.28), transparent 50%),
    rgba(150, 20, 20, 0.22) !important;
  box-shadow:
    0 0 0 1px rgba(255, 30, 30, 0.5),
    0 20px 45px rgba(255, 0, 0, 0.3),
    inset 6px 0 0 #ff0000 !important;
}

.ops-queue-ticket-card.overdue:hover .ops-overdue-alert-dot {
  background: #ff1a1a;
  box-shadow: 0 0 0 6px rgba(255, 30, 30, 0.25), 0 0 28px #ff0000;
}

.ops-queue-ticket-card.new-alert {
  border-color: rgba(59, 130, 246, 0.65) !important;
  background:
    linear-gradient(90deg, rgba(59, 130, 246, 0.18), transparent 45%),
    rgba(255, 255, 255, 0.026) !important;
  box-shadow: 0 12px 32px rgba(59, 130, 246, 0.15), inset 4px 0 0 #3b82f6 !important;
  animation: opsNewTicketFocus 1.6s ease-in-out infinite;
}

.ops-queue-ticket-card.new-alert.active {
  border-color: rgba(59, 130, 246, 0.85) !important;
  box-shadow: 0 16px 40px rgba(59, 130, 246, 0.25), inset 5px 0 0 #3b82f6 !important;
}

.ops-queue-ticket-card.new-alert:hover {
  border-color: #3b82f6 !important;
  background:
    linear-gradient(90deg, rgba(59, 130, 246, 0.28), transparent 50%),
    rgba(30, 64, 175, 0.22) !important;
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.5),
    0 20px 45px rgba(59, 130, 246, 0.3),
    inset 6px 0 0 #3b82f6 !important;
}

.ops-queue-ticket-card.new-alert:hover .ops-new-alert-dot {
  background: #60a5fa;
  box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.25), 0 0 28px #3b82f6;
}

.ops-overdue-alert-dot,
.ops-new-alert-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  border: 2px solid #0f1217;
}

.ops-overdue-alert-dot {
  background: #ff1a1a;
  box-shadow: 0 0 12px #ff1a1a, 0 0 24px #ff0000;
  animation: opsOverdueDotPulse 0.8s ease-out infinite;
  animation-delay: var(--anim-delay, 0s);
}

.ops-new-alert-dot {
  background: #3b82f6;
  box-shadow: 0 0 12px #3b82f6, 0 0 24px #2563eb;
  animation: opsNewDotPulse 0.8s ease-out infinite;
  animation-delay: var(--anim-delay, 0s);
}

.ops-overdue-alert-dot::after,
.ops-new-alert-dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
}

.ops-overdue-alert-dot::after {
  border: 1px solid rgba(255, 30, 30, 0.6);
  animation: opsOverdueDotRing 0.8s ease-out infinite;
  animation-delay: var(--anim-delay, 0s);
}

.ops-new-alert-dot::after {
  border: 1px solid rgba(59, 130, 246, 0.6);
  animation: opsNewDotRing 0.8s ease-out infinite;
  animation-delay: var(--anim-delay, 0s);
}

@keyframes opsOverdueTicketFocus {

  0%,
  100% {
    border-color: rgba(255, 30, 30, 0.4) !important;
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4), 0 10px 26px rgba(255, 0, 0, 0.15), inset 4px 0 0 #ff1a1a !important;
  }

  50% {
    border-color: rgba(255, 30, 30, 1) !important;
    box-shadow: 0 0 0 6px rgba(255, 0, 0, 0.25), 0 18px 40px rgba(255, 0, 0, 0.45), inset 6px 0 0 #ff0000 !important;
  }
}

@keyframes opsNewTicketFocus {

  0%,
  100% {
    border-color: rgba(59, 130, 246, 0.4) !important;
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4), 0 10px 26px rgba(59, 130, 246, 0.15), inset 4px 0 0 #3b82f6 !important;
  }

  50% {
    border-color: rgba(59, 130, 246, 1) !important;
    box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.25), 0 18px 40px rgba(59, 130, 246, 0.45), inset 6px 0 0 #2563eb !important;
  }
}

@keyframes opsOverdueDotPulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 12px #ff1a1a, 0 0 24px #ff0000;
  }

  50% {
    transform: scale(1.25);
    box-shadow: 0 0 0 10px rgba(255, 0, 0, 0.2), 0 0 35px #ff0000;
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 12px #ff1a1a, 0 0 24px #ff0000;
  }
}

@keyframes opsNewDotPulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 12px #3b82f6, 0 0 24px #2563eb;
  }

  50% {
    transform: scale(1.25);
    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0.2), 0 0 35px #2563eb;
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 12px #3b82f6, 0 0 24px #2563eb;
  }
}

@keyframes opsOverdueDotRing {
  from {
    opacity: 1;
    transform: scale(0.8);
  }

  to {
    opacity: 0;
    transform: scale(1.8);
  }
}

@keyframes opsNewDotRing {
  from {
    opacity: 1;
    transform: scale(0.8);
  }

  to {
    opacity: 0;
    transform: scale(1.8);
  }
}

@media (prefers-reduced-motion: reduce) {

  .ops-queue-ticket-card.overdue,
  .ops-queue-ticket-card.new-alert,
  .ops-overdue-alert-dot,
  .ops-overdue-alert-dot::after,
  .ops-new-alert-dot,
  .ops-new-alert-dot::after {
    animation: none !important;
  }
}

.ops-queue-ticket-grid .ops-queue-ticket-card {
  width: 100% !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  height: auto !important;
  min-height: 90px !important;
  max-height: none !important;
  padding: 10px 12px !important;
  gap: 4px !important;
  background: rgba(15, 17, 21, 0.75) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  overflow: visible !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
}

.ops-queue-ticket-grid .ops-queue-ticket-card.active {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.14), rgba(15, 17, 21, 0.92)) !important;
  border: 1px solid var(--accent) !important;
  box-shadow: 0 8px 28px rgba(234, 179, 8, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.ops-queue-ticket-grid .ops-queue-ticket-card.overdue {
  border-color: rgba(255, 30, 30, 0.65) !important;
  background: linear-gradient(135deg, rgba(255, 30, 30, 0.18), rgba(15, 17, 21, 0.85)) !important;
  animation: opsOverdueTicketFocus 1.6s ease-in-out infinite !important;
}

.ops-queue-ticket-grid .ops-queue-ticket-card.new-alert {
  border-color: rgba(59, 130, 246, 0.65) !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(15, 17, 21, 0.85)) !important;
  animation: opsNewTicketFocus 1.6s ease-in-out infinite !important;
}

.ops-queue-ticket-grid .ops-queue-ticket-card:hover,
.ops-queue-ticket-grid .ops-queue-ticket-card.active:hover {
  transform: translateY(-2px) scale(1.01) !important;
  background: rgba(30, 35, 45, 0.95) !important;
  border-color: rgba(234, 179, 8, 0.5) !important;
  box-shadow: 0 12px 30px rgba(234, 179, 8, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.ops-queue-ticket-grid .ops-queue-ticket-card.overdue:hover {
  transform: translateY(-2px) scale(1.01) !important;
  background: linear-gradient(135deg, rgba(255, 30, 30, 0.28), rgba(150, 20, 20, 0.22)) !important;
  border-color: #ff1a1a !important;
  box-shadow: 0 0 0 1px rgba(255, 30, 30, 0.5), 0 20px 45px rgba(255, 0, 0, 0.3), inset 6px 0 0 #ff0000 !important;
}

.ops-queue-ticket-grid .ops-queue-ticket-card.new-alert:hover {
  transform: translateY(-2px) scale(1.01) !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.28), rgba(30, 64, 175, 0.22)) !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5), 0 20px 45px rgba(59, 130, 246, 0.3), inset 6px 0 0 #3b82f6 !important;
}

.ops-ticket-card-header,
.ops-ticket-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 2px;
  width: 100%;
}

.ops-ticket-card-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.2px !important;
  line-height: 1.25 !important;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ops-ticket-card-date {
  font-size: 0.65rem;
  color: var(--text2);
}

.ops-ticket-card-date-stack {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  max-width: 90px;
  min-width: 64px;
}

.ops-ticket-card-date-stack time {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  line-height: 1;
  white-space: nowrap;
}

.ops-ticket-card-restaurant {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 750 !important;
  color: var(--accent) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  line-height: 1.2 !important;
  margin-bottom: 2px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ops-ticket-card-detail {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 4px 0 !important;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.72rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  white-space: normal;
}

.ops-ticket-card-detail.compact {
  -webkit-line-clamp: 1;
}

.ops-ticket-card-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  min-height: 24px;
  overflow: hidden;
  width: 100%;
}

.ops-ticket-risk-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 18px;
  overflow: hidden;
}

.ops-ticket-sla-zone {
  display: flex;
  align-items: center;
  min-height: 18px;
  overflow: hidden;
}

.ops-ticket-risk-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 102px;
  min-height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.58rem;
  font-weight: 850;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ops-ticket-risk-badge i,
.ops-ticket-meta-pill i {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
  flex: 0 0 auto;
}

.ops-ticket-risk-badge b,
.ops-ticket-meta-pill b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: inherit;
}

.ops-ticket-risk-badge.danger {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.22);
  color: #fca5a5;
}

.ops-ticket-risk-badge.warning {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.22);
  color: #fcd34d;
}

.ops-ticket-risk-badge.info {
  background: rgba(192, 132, 252, 0.14);
  border-color: rgba(192, 132, 252, 0.22);
  color: #d8b4fe;
}

.ops-ticket-risk-badge.subscriber {
  background: rgba(56, 189, 248, 0.13);
  border-color: rgba(56, 189, 248, 0.24);
  color: #7dd3fc;
}

.ops-ticket-risk-badge.brand {
  background: rgba(236, 72, 153, 0.13);
  border-color: rgba(236, 72, 153, 0.22);
  color: #f9a8d4;
}

.ops-ticket-risk-badge.muted {
  color: rgba(255, 255, 255, 0.44);
}

.ops-ticket-risk-badge.brand-date {
  max-width: 76px;
  min-height: 16px;
  padding: 0 5px;
  font-size: 0.54rem;
}

.ops-ticket-risk-badge.sla-signal {
  max-width: 116px;
  min-width: 0;
}

.ops-ticket-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.6rem;
  font-weight: 850;
  line-height: 1;
}

.ops-ticket-meta-pill.status {
  max-width: 96px;
  background: var(--tag-bg);
  border-color: var(--tag-border);
  color: var(--tag-color);
}

.ops-ticket-meta-pill.platform {
  max-width: 84px;
  color: var(--tag-color, rgba(255, 255, 255, 0.62));
  background: color-mix(in srgb, var(--tag-color, #94a3b8) 13%, transparent);
  border-color: color-mix(in srgb, var(--tag-color, #94a3b8) 25%, transparent);
}

.ops-ticket-meta-pill.sla {
  max-width: none !important;
  margin-left: 0 !important;
}

.ops-ticket-meta-pill.sla b {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.ops-ticket-meta-pill.sla.overdue {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.28);
  color: #fca5a5;
}

.ops-ai-checklist-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px;
  align-items: flex-start;
  gap: 16px;
  padding: 10px 10px 10px 12px;
  border: 1px solid rgba(168, 85, 247, 0.12);
  border-radius: 12px;
  background: rgba(168, 85, 247, 0.035);
}

.ops-ai-checklist-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

@property --progress {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.ops-ai-checklist-progress-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background:
    conic-gradient(from -90deg, #a855f7 var(--progress, 0%), rgba(255, 255, 255, 0.08) 0);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(168, 85, 247, 0.16);
  transition: --progress 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.28s ease, box-shadow 0.28s ease;
}

.ops-ai-checklist-progress-ring::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: inherit;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.ops-ai-checklist-progress-ring span {
  position: relative;
  z-index: 1;
  color: #f8fafc;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0;
}

.ops-ai-checklist-progress-ring.is-animating {
  animation: opsChecklistRingPulse 0.78s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes opsChecklistRingPulse {
  0% {
    transform: scale(0.96);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 18px rgba(168, 85, 247, 0.12);
  }

  45% {
    transform: scale(1.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 16px 34px rgba(168, 85, 247, 0.28);
  }

  100% {
    transform: scale(1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 28px rgba(168, 85, 247, 0.16);
  }
}

.ops-workload-panel {
  margin-top: 8px;
  padding: 6px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
}

.ops-workload-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.ops-workload-head span {
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.ops-workload-head strong {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.66rem;
  font-weight: 900;
}

.ops-workload-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ops-workload-card {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  min-height: 24px;
  padding: 3px 6px;
  border: 0;
  border-radius: 7px;
  background: transparent;
}

.ops-workload-card.warning {
  color: #fcd34d;
}

.ops-workload-card.danger {
  color: #fca5a5;
}

.ops-workload-card.muted {
  border-style: dashed;
  opacity: 0.72;
}

.ops-workload-card b,
.ops-workload-card span,
.ops-workload-card small {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-workload-card b {
  max-width: 92px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.66rem;
  font-weight: 800;
}

.ops-workload-card span,
.ops-workload-card small {
  min-height: 18px;
  padding: 0 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.58rem;
  font-weight: 760;
}

.ops-workload-card small.danger {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}

.ops-workload-card small.warning {
  background: rgba(245, 158, 11, 0.12);
  color: #fcd34d;
}

.ops-workload-card small.info {
  background: rgba(192, 132, 252, 0.12);
  color: #d8b4fe;
}

.ops-dashboard-clock-wrapper .ops-workload-panel {
  margin-top: 0;
  padding: 0 0 0 8px;
  border-top: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.ops-dashboard-clock-wrapper .ops-workload-head {
  display: none;
}

.ops-dashboard-clock-wrapper .ops-workload-grid {
  max-width: min(520px, 38vw);
  overflow: hidden;
}

.ops-operational-warning-strip span.subscriber-response {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.28);
  color: #7dd3fc;
}

.modern-timeline-item.subscriber-response {
  box-shadow: inset 3px 0 0 rgba(56, 189, 248, 0.82);
}

.ops-timeline-source-pill.subscriber {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 0 7px;
  border: 1px solid rgba(56, 189, 248, 0.24);
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.1);
  color: #7dd3fc;
  font-size: 0.68rem;
  font-weight: 850;
}

.ops-info-waiting-panel {
  margin: 0 0 10px;
  padding: 9px 11px;
  border: 1px solid rgba(192, 132, 252, 0.2);
  border-radius: 9px;
  background: rgba(192, 132, 252, 0.075);
}

.ops-info-waiting-panel strong,
.ops-info-waiting-panel span {
  display: block;
}

.ops-info-waiting-panel strong {
  color: #d8b4fe;
  font-size: 0.76rem;
  font-weight: 900;
  margin-bottom: 3px;
}

.ops-info-waiting-panel span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.35;
}

.customer-info-response-box {
  display: grid;
  gap: 11px;
  margin: 0 20px 16px;
  padding: 14px;
  border: 1px solid rgba(15, 17, 21, 0.08);
  border-left: 3px solid #eb5e28;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 17, 21, 0.045);
}

.customer-task-modal-split .customer-task-split-right .customer-info-response-box,
.customer-task-split-right .customer-info-response-box {
  margin: 0 0 10px;
  gap: 8px;
  padding: 10px;
  border-color: rgba(192, 132, 252, 0.24);
  border-left: 3px solid rgba(168, 85, 247, 0.82);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(251, 251, 255, 0.98), #ffffff);
  box-shadow: 0 6px 16px rgba(126, 34, 206, 0.07);
}

.customer-task-split-right .customer-info-response-box .customer-info-warning {
  padding: 8px 9px;
  gap: 8px;
  border-radius: 8px;
}

.customer-task-split-right .customer-info-response-box .customer-info-warning strong {
  font-size: 0.72rem;
  line-height: 1.25;
}

.customer-task-split-right .customer-info-response-box .customer-info-warning p {
  margin-top: 2px;
  font-size: 0.74rem;
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.customer-task-split-right .customer-info-response-box textarea {
  min-height: 64px;
  font-size: 0.8rem;
  line-height: 1.4;
  padding: 8px 10px;
}

.customer-task-split-right .customer-info-response-actions {
  gap: 8px;
}

.customer-task-split-right .customer-info-file-control {
  min-height: 32px;
  font-size: 0.72rem;
  padding: 0 8px;
  gap: 6px;
}

.customer-task-split-right .customer-info-response-actions button {
  min-height: 32px;
  padding: 0 12px;
  font-size: 0.72rem;
  white-space: nowrap;
}

.customer-task-modal-split {
  min-height: 0;
}

.customer-task-modal-split .customer-task-split-left,
.customer-task-modal-split .customer-task-split-right {
  min-height: 0;
  max-height: 100%;
}

.customer-task-modal-split .customer-task-split-right {
  overflow-x: visible;
  overflow-y: hidden;
}

.customer-task-events-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: visible;
}

.customer-task-events-scroll > .customer-task-events {
  overflow: visible !important;
}

/* Task detail left panel v23: expand fully, no inner scroll */
body.subscriber-logged-in .customer-task-modal:not(.customer-request-modal-container) .customer-task-modal-dialog {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

body.subscriber-logged-in .customer-task-modal:not(.customer-request-modal-container) .customer-task-modal-content,
body.subscriber-logged-in .customer-task-modal:not(.customer-request-modal-container) .customer-task-body {
  overflow: visible !important;
  flex: none !important;
  min-height: auto !important;
  max-height: none !important;
}

body.subscriber-logged-in .customer-task-modal:not(.customer-request-modal-container) .customer-task-modal-split {
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.22fr) !important;
  gap: 8px !important;
  overflow: visible !important;
}

body.subscriber-logged-in .customer-task-modal:not(.customer-request-modal-container) .customer-task-split-right {
  width: 100% !important;
  max-width: none !important;
  padding-left: 11px !important;
  padding-right: 2px !important;
  margin-left: -12px !important;
  overflow: visible !important;
}

body.subscriber-logged-in .customer-task-modal:not(.customer-request-modal-container) .customer-task-events-scroll {
  overflow-x: visible !important;
  padding-left: 0 !important;
}

body.subscriber-logged-in .customer-task-modal:not(.customer-request-modal-container) .customer-task-modal-split {
  height: auto !important;
  min-height: auto !important;
  align-items: start !important;
}

body.subscriber-logged-in .customer-task-modal:not(.customer-request-modal-container) .customer-task-split-left,
body.subscriber-logged-in .customer-task-modal:not(.customer-request-modal-container) .premium-creation-details,
body.subscriber-logged-in .customer-task-modal:not(.customer-request-modal-container) .customer-task-subtasks,
body.subscriber-logged-in .customer-task-modal:not(.customer-request-modal-container) .customer-task-attachments-section {
  overflow: visible !important;
  max-height: none !important;
  min-height: auto !important;
  height: auto !important;
}

body.subscriber-logged-in .customer-task-modal:not(.customer-request-modal-container) .customer-task-split-left {
  flex: none !important;
}

body.subscriber-logged-in .customer-task-modal:not(.customer-request-modal-container) .customer-detail-metrics {
  flex-wrap: nowrap !important;
  overflow: visible !important;
  gap: 4px !important;
  padding: 1px 1px 2px 1px !important;
  box-sizing: border-box !important;
}

body.subscriber-logged-in .customer-task-modal:not(.customer-request-modal-container) .customer-detail-metrics > div,
body.subscriber-logged-in .customer-task-modal:not(.customer-request-modal-container) .customer-detail-metrics .customer-completion-time-tile {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

body.subscriber-logged-in .customer-task-modal:not(.customer-request-modal-container) .customer-task-subtasks li span {
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

.customer-info-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid rgba(192, 132, 252, 0.28);
  border-radius: 9px;
  background:
    linear-gradient(90deg, rgba(192, 132, 252, 0.12), transparent 54%),
    #fbfbff;
}

.customer-task-card.info-waiting-alert {
  position: relative;
  border-color: rgba(192, 132, 252, 0.34) !important;
  box-shadow: 0 12px 30px rgba(126, 34, 206, 0.08), inset 3px 0 0 rgba(192, 132, 252, 0.78) !important;
}

.customer-info-alert-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #a855f7;
  box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.72), 0 0 18px rgba(168, 85, 247, 0.55);
  animation: customerInfoDotPulse 0.9s ease-out infinite;
}

.customer-info-alert-dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(168, 85, 247, 0.45);
  border-radius: inherit;
  animation: customerInfoDotRing 0.9s ease-out infinite;
}

.customer-info-alert-dot.inline {
  position: relative;
  top: auto;
  right: auto;
  flex: 0 0 auto;
  margin-top: 5px;
}

.customer-info-warning strong,
.customer-info-warning p {
  display: block;
  margin: 0;
}

.customer-info-warning strong {
  color: #581c87;
  font-size: 0.78rem;
  font-weight: 950;
}

.customer-info-warning p {
  margin-top: 3px;
  color: #4b5563;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
}

@keyframes customerInfoDotPulse {
  0% {
    transform: scale(0.92);
    box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.72), 0 0 18px rgba(168, 85, 247, 0.55);
  }

  70% {
    transform: scale(1.12);
    box-shadow: 0 0 0 9px rgba(168, 85, 247, 0), 0 0 22px rgba(168, 85, 247, 0.72);
  }

  100% {
    transform: scale(0.92);
    box-shadow: 0 0 0 0 rgba(168, 85, 247, 0), 0 0 18px rgba(168, 85, 247, 0.55);
  }
}

@keyframes customerInfoDotRing {
  from {
    opacity: 0.9;
    transform: scale(0.72);
  }

  to {
    opacity: 0;
    transform: scale(1.55);
  }
}

.customer-info-response-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.customer-info-response-head span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(235, 94, 40, 0.18);
  border-radius: 999px;
  background: rgba(235, 94, 40, 0.08);
  color: #b43f18;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
}

.customer-info-response-head strong {
  color: #111827;
  font-size: 0.84rem;
  font-weight: 900;
}

.customer-info-response-box textarea {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  border: 1px solid rgba(15, 17, 21, 0.1);
  border-radius: 10px;
  background: #fbfbfa;
  color: #111827;
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.45;
  padding: 10px 11px;
  outline: none;
}

.customer-info-response-box textarea:focus {
  background: #ffffff;
  border-color: rgba(235, 94, 40, 0.52);
  box-shadow: 0 0 0 3px rgba(235, 94, 40, 0.11);
}

.customer-info-response-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.customer-info-file-control {
  min-width: 0;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px dashed rgba(15, 17, 21, 0.16);
  border-radius: 10px;
  background: #f8fafc;
  color: #475569;
  font-size: 0.79rem;
  font-weight: 800;
  padding: 0 11px;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.customer-info-file-control:hover {
  border-color: rgba(235, 94, 40, 0.42);
  background: rgba(235, 94, 40, 0.06);
  color: #b43f18;
}

.customer-info-file-control input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.customer-info-file-control span:first-of-type {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #ffffff;
  color: #eb5e28;
  box-shadow: inset 0 0 0 1px rgba(15, 17, 21, 0.08);
  flex: 0 0 auto;
}

.customer-info-file-control svg {
  width: 15px;
  height: 15px;
}

.customer-info-response-actions button {
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  background: #0f1115;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 900;
  padding: 0 14px;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease;
}

.customer-info-response-actions button:hover {
  background: #eb5e28;
  transform: translateY(-1px);
}

@media (max-width: 700px) {
  .customer-info-response-box {
    margin-left: 14px;
    margin-right: 14px;
  }

  .customer-info-response-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .customer-info-response-actions {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

.ops-operational-warning-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  margin: 8px 0 10px;
}

.ops-operational-warning-strip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: min(560px, 100%);
  padding: 6px 8px;
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.075);
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.2;
}

.ops-operational-warning-strip span i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
  flex: 0 0 auto;
}

.ops-operational-warning-strip span b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: inherit;
}

.ops-meta-pill {
  font-size: 0.58rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ops-meta-pill.platform {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.ops-meta-pill.status-yeni {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
}

.ops-meta-pill.status-incelemede {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

.ops-meta-pill.status-calisiliyor {
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
}

.ops-meta-pill.status-tamamlandi {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.ops-meta-pill.sla {
  background: rgba(56, 189, 248, 0.08);
  color: #38bdf8;
  margin-left: auto;
}

.ops-meta-pill.sla.critical {
  background: rgba(249, 115, 22, 0.12);
  color: #f97316;
}

.ops-meta-pill.sla.overdue {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  animation: ops-pulse-red 2s infinite;
}

@keyframes ops-pulse-red {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }

  100% {
    opacity: 1;
  }
}

.ops-queue-empty-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 24px;
  text-align: center;
  height: 100%;
}

.ops-queue-empty-state .empty-icon {
  font-size: 2.2rem;
  margin-bottom: 12px;
  opacity: 0.3;
}

.ops-queue-empty-state strong {
  font-size: 0.85rem;
  color: #ffffff;
}

.ops-queue-empty-state p {
  font-size: 0.75rem;
  color: var(--text2);
  margin: 4px 0 0 0;
  line-height: 1.4;
}

/* 5. Detail Workspace Pane Layout (Bottom Workspace) */
.ops-dashboard-workspace-pane-bottom,
.ops-dashboard-workspace-pane {
  flex: 1;
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg, #171a21 0%, #11141a 46%, #0b0d12 100%),
    #101217 !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45) !important;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 450px;
}

.ops-dashboard-workspace-pane-bottom::before,
.ops-dashboard-workspace-pane::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.035) 1px, transparent 0),
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 34%, rgba(0, 0, 0, 0.18));
  background-size: 18px 18px, 100% 100%;
  opacity: 0.42;
}

.ops-workspace-scroller {
  flex: 1;
  overflow: visible !important;
  /* Let the main document window handle the scrolling instead of inner containers! */
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  z-index: 1;
}

/* Workspace Header Card */
.ops-workspace-title-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.014)),
    rgba(10, 12, 16, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.ops-workspace-title-block[data-request-category="yeni_icerik"],
.ops-workspace-title-block[data-request-category="hata_bildirim"],
.ops-workspace-title-block[data-request-category="tasarim_degisiklik"],
.ops-workspace-title-block[data-request-category="teknik_guncelleme"] {
  border-color: rgba(125, 139, 164, 0.14);
  background:
    linear-gradient(180deg, rgba(125, 139, 164, 0.075), rgba(255, 255, 255, 0.014)),
    #0b0d11;
}

.ops-title-text-and-actions {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

/* Horizontal Google Drive Links Row Styles (Refined, Mature, Sleek Corporate Design) */
.ops-drive-horizontal-row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-sizing: border-box;
  margin-top: 10px;
}

.ops-drive-row-title {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text2);
  white-space: nowrap;
}

.ops-drive-row-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.ops-drive-pill-wrapper {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.015) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: 6px !important;
  /* Sophisticated rectangular capsule with small radius */
  padding: 4px 10px !important;
  gap: 8px;
  position: relative;
  transition: all 0.2s ease-in-out;
}

/* Faint elegant tints depending on folder type to look like a high-end SaaS instead of a children's toy */
.ops-drive-pill-wrapper.folder-main:hover {
  background: rgba(56, 189, 248, 0.03) !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.05);
}

.ops-drive-pill-wrapper.folder-reports:hover {
  background: rgba(16, 185, 129, 0.03) !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.05);
}

.ops-drive-pill-wrapper.folder-menu:hover {
  background: rgba(245, 158, 11, 0.03) !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.05);
}

.ops-drive-pill-wrapper.folder-creatives:hover {
  background: rgba(236, 72, 153, 0.03) !important;
  border-color: rgba(236, 72, 153, 0.25) !important;
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.05);
}

.ops-drive-pill-wrapper.folder-web:hover {
  background: rgba(99, 102, 241, 0.03) !important;
  border-color: rgba(99, 102, 241, 0.25) !important;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.05);
}

.ops-drive-pill-link {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none !important;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
}

.ops-drive-pill-link:hover {
  color: #ffffff !important;
}

.ops-pill-svg {
  transition: transform 0.2s ease;
}

.ops-drive-pill-link:hover .ops-pill-svg {
  transform: scale(1.05);
}

/* Tiny sophisticated Edit drawer summary */
.ops-drive-pill-edit-drawer {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-left: 2px;
}

.ops-drive-pill-edit-drawer summary {
  list-style: none;
  outline: none;
  user-select: none;
  display: flex;
  align-items: center;
}

.ops-drive-pill-edit-drawer summary::-webkit-details-marker {
  display: none;
}

.ops-pill-edit-svg {
  color: var(--text2);
  transition: all 0.2s ease;
}

.ops-drive-pill-edit-drawer summary:hover .ops-pill-edit-svg {
  color: #ffffff;
  opacity: 1 !important;
}

.ops-drive-pill-edit-popover {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: 250px;
  background: #0d0d0d !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
  backdrop-filter: blur(10px);
}

.ops-popover-header {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text2);
  letter-spacing: 0.5px;
}

.ops-drive-row-edit-save-btn {
  background: var(--accent) !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease !important;
  width: 100% !important;
}

.ops-drive-row-edit-save-btn:hover {
  opacity: 0.9 !important;
}

.ops-workspace-title-block h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.42rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.94);
  margin: 0 0 8px 0;
  line-height: 1.25;
}

.ops-workspace-title-block .ops-kicker {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--accent);
  letter-spacing: 1.5px;
}

.ops-workspace-title-block .ops-desc {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  margin: 0;
  max-width: 720px;
}

.ops-title-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px;
  border: 1px solid rgba(250, 204, 21, 0.12);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(250, 204, 21, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 10px 26px rgba(0, 0, 0, 0.18);
}

.ops-action-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  height: 34px;
  padding: 0 10px 0 7px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.ops-action-chip:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.065);
  border-color: rgba(250, 204, 21, 0.34);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.ops-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 7px;
  background: rgba(250, 204, 21, 0.12);
  color: #facc15;
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.14);
}

.ops-action-icon svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ops-action-text {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.ops-action-chip.brand .ops-action-icon {
  background: rgba(236, 72, 153, 0.12);
  color: #f9a8d4;
  box-shadow: inset 0 0 0 1px rgba(236, 72, 153, 0.16);
}

.ops-action-chip.drive .ops-action-icon {
  background: rgba(56, 189, 248, 0.12);
  color: #7dd3fc;
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.16);
}

/* Beautiful color-tinted styles for dark-theme action chips */
.ops-action-chip.identity {
  border-color: rgba(250, 204, 21, 0.18) !important;
  background: rgba(250, 204, 21, 0.03) !important;
}

.ops-action-chip.identity:hover {
  background: rgba(250, 204, 21, 0.08) !important;
  border-color: rgba(250, 204, 21, 0.45) !important;
  box-shadow: 0 8px 24px rgba(250, 204, 21, 0.12) !important;
}

.ops-action-chip.brand {
  border-color: rgba(236, 72, 153, 0.18) !important;
  background: rgba(236, 72, 153, 0.03) !important;
}

.ops-action-chip.brand:hover {
  background: rgba(236, 72, 153, 0.08) !important;
  border-color: rgba(236, 72, 153, 0.45) !important;
  box-shadow: 0 8px 24px rgba(236, 72, 153, 0.12) !important;
}

.ops-action-chip.drive {
  border-color: rgba(56, 189, 248, 0.18) !important;
  background: rgba(56, 189, 248, 0.03) !important;
}

.ops-action-chip.drive:hover {
  background: rgba(56, 189, 248, 0.08) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
  box-shadow: 0 8px 24px rgba(56, 189, 248, 0.12) !important;
}

.ops-workspace-title-block .premium-parsed-request-summary>div:first-child {
  background: rgba(255, 255, 255, 0.026) !important;
  border-color: rgba(148, 163, 184, 0.09) !important;
  box-shadow: none !important;
}

.ops-workspace-title-block .minimalist-request-description {
  border-left-color: rgba(250, 204, 21, 0.58) !important;
}

.ops-request-brief-box {
  position: relative;
  margin-top: 10px !important;
  padding: 14px 16px 14px 18px !important;
  border: 1px solid rgba(250, 204, 21, 0.2) !important;
  border-left: 4px solid rgba(250, 204, 21, 0.82) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(250, 204, 21, 0.085), rgba(250, 204, 21, 0.028)),
    rgba(0, 0, 0, 0.18) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18) !important;
  line-height: 1.5 !important;
}

.ops-request-brief-box::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 14px;
  width: 4px;
  height: 28px;
  border-radius: 0 999px 999px 0;
  background: #facc15;
  box-shadow: 0 0 18px rgba(250, 204, 21, 0.45);
}

.ops-request-brief-box span {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px !important;
  color: #facc15 !important;
  font-size: 0.68rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.75px !important;
  text-transform: uppercase !important;
}

.ops-request-brief-box span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #facc15;
}

.ops-request-brief-box p {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.94) !important;
  font-size: 0.94rem !important;
  font-weight: 720 !important;
  line-height: 1.58 !important;
  white-space: pre-wrap !important;
}

.ops-workspace-title-block .ops-title-actions .btn-primary,
.ops-workspace-title-block .ops-title-actions .btn-ghost {
  background: rgba(255, 255, 255, 0.035) !important;
  border-color: rgba(148, 163, 184, 0.12) !important;
  box-shadow: none !important;
}

.ops-workspace-title-block .ops-title-actions .btn-primary:hover,
.ops-workspace-title-block .ops-title-actions .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.075) !important;
  border-color: rgba(250, 204, 21, 0.2) !important;
}

/* Facts Row Panel */
.ops-workspace-facts-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01)),
    rgba(7, 9, 12, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 12px;
  padding: 12px 18px;
}

.ops-fact-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ops-fact-item span {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text2);
}

.ops-fact-item strong {
  font-size: 0.8rem;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ops-fact-item strong.overdue {
  color: #ef4444;
}

/* Grid Layout for details column contents (Narrowed Credentials Column for Mail fit, Expanded Update Form) */
.ops-workspace-content-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  /* Right column is exactly 340px, left column dynamically takes up 100% remaining space */
  gap: 20px;
  align-items: start;
}

.ops-work-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ops-work-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ops-card {
  background: rgba(255, 255, 255, 0.015) !important;
  /* Clean deep dark slate glass backdrop */
  border: none !important;
  box-shadow: none !important;
  border-radius: 16px;
  padding: 20px;
}

/* Specialized RestoUp Golden-Amber Brand Glass Theme ONLY for the Update Status Card! */
.ops-form-card {
  background: rgba(24, 20, 10, 0.75) !important;
  /* Deep warm amber-charcoal RestoUp brand glass */
  border: 1px solid rgba(234, 179, 8, 0.22) !important;
  /* Glowing gold-amber borders */
  box-shadow: 0 8px 32px rgba(234, 179, 8, 0.04) !important;
}

.ops-card-header-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ops-card-sub-p {
  font-size: 0.72rem;
  color: var(--text2);
  margin: -10px 0 14px 0;
  line-height: 1.4;
}

/* Update Form Styles */
.ops-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.ops-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ops-form-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text2);
}

.ops-form-label.public {
  color: var(--accent);
}

.ops-form-label.internal {
  color: #818cf8;
}

.ops-field-input {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  padding: 10px 14px !important;
  font-size: 0.8rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

.ops-field-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 12px rgba(234, 179, 8, 0.15) !important;
}

.ops-field-input.textarea {
  min-height: 90px;
  max-height: 150px;
  resize: vertical;
  line-height: 1.5;
}

.ops-field-input.textarea.public:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 12px rgba(234, 179, 8, 0.2) !important;
}

.ops-field-input.textarea.internal:focus {
  border-color: #818cf8 !important;
  box-shadow: 0 0 12px rgba(129, 140, 248, 0.2) !important;
}

.ops-field-input.compact {
  padding: 6px 10px !important;
  font-size: 0.75rem !important;
}

.ops-textareas-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

.ops-help-text {
  font-size: 0.65rem;
  color: var(--text2);
  margin-top: 4px;
}

/* File Deliverables picker inside ticket */
.ops-file-and-links-card {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
}

.ops-sub-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 10px;
}

.ops-attachments-input-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 16px;
  margin-bottom: 14px;
}

.ops-custom-file-picker {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.2);
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 16px 12px;
  cursor: pointer;
  text-align: center;
  transition: all 0.25s ease;
}

.ops-custom-file-picker:hover {
  border-color: var(--accent);
  background: rgba(234, 179, 8, 0.02);
}

.ops-custom-file-picker span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
}

.ops-custom-file-picker input {
  display: none !important;
}

.ops-selected-files-indicator {
  font-size: 0.68rem;
  color: var(--text2);
  text-align: center;
  margin-top: 6px;
}

.ops-visibility-selector-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding-top: 10px;
}

.ops-visibility-selector-row .ops-form-label {
  margin: 0;
}

.ops-visibility-selector-row .ops-field-input.select.compact {
  width: auto !important;
  min-width: 200px !important;
}

/* Big Glowing Submit Button style */
.ops-save-container {
  display: flex;
  width: 100%;
}

.ops-save-button-primary {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: var(--accent) !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.ops-save-button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(234, 179, 8, 0.3);
}

/* 6. Integration Credentials Blocks */
.ops-credentials-grid-flow {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ops-credential-block-card {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 12px;
  transition: all 0.25s ease;
}

.ops-credential-block-card:hover {
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(255, 255, 255, 0.1);
}

.ops-cred-block-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.ops-platform-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.ops-cred-block-header strong {
  font-size: 0.78rem;
  color: #ffffff;
  flex: 1;
}

.ops-platform-status-badge {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
}

.ops-platform-status-badge.active {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.ops-platform-status-badge.empty {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.ops-cred-block-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ops-cred-row-data {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  padding: 6px 10px;
}

.ops-cred-row-data .cred-label {
  font-size: 0.65rem;
  color: var(--text2);
  width: 60px;
}

.ops-cred-row-data .cred-value {
  font-size: 0.72rem;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  color: #ffffff;
  flex: 1;
}

.ops-cred-row-data .cred-value.hidden-pass,
.ops-cred-row-data .cred-value {
  -webkit-text-security: none !important;
}

.cred-action-buttons {
  display: flex;
  gap: 4px;
}

.ops-cred-copy-button,
.ops-cred-mask-toggle-button {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--text) !important;
  font-size: 0.6rem !important;
  font-weight: 600 !important;
  padding: 3px 6px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.ops-cred-copy-button:hover,
.ops-cred-mask-toggle-button:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #000000 !important;
}

.ops-cred-edit-drawer-card {
  margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding-top: 8px;
}

.ops-cred-edit-drawer-card summary {
  font-size: 0.62rem;
  color: var(--text2);
  cursor: pointer;
  user-select: none;
  font-weight: 600;
}

.ops-cred-edit-drawer-card summary:hover {
  color: #ffffff;
}

.ops-cred-drawer-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.ops-cred-drawer-save-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
}

.ops-cred-drawer-save-btn:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #000000 !important;
}

/* 7. Google Drive Resource Managers Rows */
.ops-drive-manager-rows-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ops-drive-link-manager-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
}

.ops-drive-link-row-details {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.ops-drive-icon-emoji {
  font-size: 1.1rem;
}

.ops-drive-text-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ops-drive-clickable-anchor {
  text-decoration: none !important;
  color: #ffffff !important;
  transition: color 0.2s ease !important;
}

.ops-drive-clickable-anchor:hover {
  color: var(--accent) !important;
}

.ops-drive-clickable-anchor strong {
  font-size: 0.75rem;
}

.ops-drive-text-content small {
  font-size: 0.65rem;
  color: var(--text2);
}

.ops-drive-link-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ops-drive-row-open-button {
  background: rgba(234, 179, 8, 0.08) !important;
  border: 1px solid rgba(234, 179, 8, 0.2) !important;
  color: var(--accent) !important;
  text-decoration: none !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

.ops-drive-row-open-button:hover {
  background: var(--accent) !important;
  color: #000000 !important;
}

.ops-drive-row-edit-details summary {
  font-size: 0.65rem;
  color: var(--text2);
  cursor: pointer;
  user-select: none;
}

.ops-drive-row-edit-details summary:hover {
  color: #ffffff;
}

.ops-drive-row-edit-form {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  position: absolute;
  right: 24px;
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 8px;
  border-radius: 8px;
  z-index: 10;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.ops-drive-row-edit-save-btn {
  background: var(--accent) !important;
  color: #000000 !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
  cursor: pointer !important;
}

/* 8. Operations Activity Logs Timeline (Expanded, Full Width, Styled Trace) */
.ops-timeline-card.full-width {
  grid-column: 1 / -1;
  margin-top: 16px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.012) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
  border-radius: 16px;
}

.ops-timeline-header-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.ops-timeline-header-block .ops-card-header-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ops-timeline-filters-bar {
  display: flex;
  gap: 10px;
  align-items: center;
}

.ops-timeline-filter-btn {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--border) !important;
  color: var(--text2) !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.ops-timeline-filter-btn:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

.ops-timeline-filter-btn.active {
  background: rgba(234, 179, 8, 0.1) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.15) !important;
}

.ops-timeline-stream-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  padding-left: 24px;
  max-height: none !important;
  /* Let timeline expand naturally without inner scroll! */
  overflow-y: visible !important;
}

/* Vertical Dotted Trace Line */
.ops-timeline-stream-container::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 2px;
  bottom: 10px;
  width: 2px;
  background: repeating-linear-gradient(to bottom,
      rgba(255, 255, 255, 0.07) 0px,
      rgba(255, 255, 255, 0.07) 4px,
      transparent 4px,
      transparent 8px);
}

.ops-timeline-card-row {
  position: relative;
  background: #08080a !important;
  /* Solid dark charcoal slate background for high-contrast professional text */
  border: 1px solid rgba(255, 255, 255, 0.03) !important;
  border-radius: 12px;
  padding: 16px 20px;
  transition: all 0.25s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
  margin-left: 0;
}

.ops-timeline-card-row:hover {
  transform: translateX(4px);
  background: #0d0d11 !important;
  /* Slightly lighter on hover */
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55) !important;
}

/* Interactive Marker Dot */
.ops-timeline-card-dot {
  position: absolute;
  left: -21px;
  top: 22px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #000000;
  z-index: 2;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

.ops-timeline-card-row.public {
  border-left: 4px solid var(--accent) !important;
}

.ops-timeline-card-row.public .ops-timeline-card-dot {
  background: var(--accent);
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.5);
}

.ops-timeline-card-row.internal {
  border-left: 4px solid #6366f1 !important;
  background: rgba(99, 102, 241, 0.015);
}

.ops-timeline-card-row.internal .ops-timeline-card-dot {
  background: #6366f1;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

.ops-timeline-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 0.75rem;
}

.ops-timeline-card-meta strong {
  color: #ffffff;
  font-size: 0.8rem;
}

.ops-timeline-card-meta span {
  color: var(--text2);
}

.ops-timeline-visibility-pill {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.ops-timeline-visibility-pill.public {
  background: rgba(234, 179, 8, 0.12);
  color: var(--accent);
}

.ops-timeline-visibility-pill.internal {
  background: rgba(99, 102, 241, 0.12);
  color: #a5b4fc;
}

.ops-timeline-card-text {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
  margin: 0;
}

.ops-timeline-card-attachments {
  margin-top: 10px;
}

.ops-timeline-empty-message {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px 12px;
  text-align: center;
}

.ops-timeline-empty-message strong {
  font-size: 0.75rem;
  color: #ffffff;
  margin-bottom: 2px;
}

.ops-timeline-empty-message p {
  font-size: 0.68rem;
  color: var(--text2);
  margin: 0;
}

/* 9. Live Space-Age Clock inside Panel Header and Global Top Row hiding */
body:has(#panel-requests.active) .top-status-row,
body:has(#panel-requests.active) .topbar {
  display: none !important;
  /* Hide generic headers to pull operations panel flush with browser chrome! */
}

body:has(#panel-requests.active) .main-content {
  padding-top: 0px !important;
  /* Fully pull top edge of main content to the top screen */
}

/* Minimalist Telemetry Brand Header */
.ops-brand-info.minimalist {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 30px !important;
  padding: 6px 14px !important;
  box-sizing: border-box;
}

.ops-minimalist-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

.ops-live-pulse-dot {
  width: 6px;
  height: 6px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 8px #10b981, 0 0 16px rgba(16, 185, 129, 0.4);
  display: inline-block;
  animation: opsBeaconPulse 2s infinite ease-in-out;
}

@keyframes opsBeaconPulse {

  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.95);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

.ops-dashboard-clock {
  display: flex;
  flex-direction: row !important;
  /* Inline layout */
  align-items: center !important;
  justify-content: center;
  background: rgba(26, 21, 11, 0.5) !important;
  /* Amber tinted clock glass */
  border: 1px solid rgba(234, 179, 8, 0.15) !important;
  border-radius: 30px !important;
  /* Full rounded pill */
  padding: 9px 18px !important;
  min-width: auto !important;
  /* Autogrow with padding */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
  box-sizing: border-box;
}

.ops-clock-divider {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.25);
  margin: 0 4px;
}

.ops-clock-date {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 0 !important;
  /* Clear old margin */
}

.ops-clock-time {
  font-family: 'Outfit', monospace !important;
  font-size: 1.08rem !important;
  font-weight: 800 !important;
  color: var(--accent) !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 0 10px rgba(234, 179, 8, 0.25) !important;
}

/* 10. Google Drive Specialized Color Themes */
.ops-drive-pill-wrapper.folder-main {
  border-color: rgba(56, 189, 248, 0.22) !important;
  background: rgba(56, 189, 248, 0.03);
}

.ops-drive-pill-wrapper.folder-main:hover {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}

.ops-drive-pill-wrapper.folder-main .ops-drive-pill-link {
  color: #38bdf8 !important;
}

.ops-drive-pill-wrapper.folder-reports {
  border-color: rgba(16, 185, 129, 0.22) !important;
  background: rgba(16, 185, 129, 0.03);
}

.ops-drive-pill-wrapper.folder-reports:hover {
  border-color: #10b981 !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

.ops-drive-pill-wrapper.folder-reports .ops-drive-pill-link {
  color: #10b981 !important;
}

.ops-drive-pill-wrapper.folder-menu {
  border-color: rgba(245, 158, 11, 0.22) !important;
  background: rgba(245, 158, 11, 0.03);
}

.ops-drive-pill-wrapper.folder-menu:hover {
  border-color: #f59e0b !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
}

.ops-drive-pill-wrapper.folder-menu .ops-drive-pill-link {
  color: #f59e0b !important;
}

.ops-drive-pill-wrapper.folder-creatives {
  border-color: rgba(236, 72, 153, 0.22) !important;
  background: rgba(236, 72, 153, 0.03);
}

.ops-drive-pill-wrapper.folder-creatives:hover {
  border-color: #ec4899 !important;
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.2);
}

.ops-drive-pill-wrapper.folder-creatives .ops-drive-pill-link {
  color: #ec4899 !important;
}

.ops-drive-pill-wrapper.folder-web {
  border-color: rgba(99, 102, 241, 0.22) !important;
  background: rgba(99, 102, 241, 0.03);
}

.ops-drive-pill-wrapper.folder-web:hover {
  border-color: #6366f1 !important;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.2);
}

.ops-drive-pill-wrapper.folder-web .ops-drive-pill-link {
  color: #6366f1 !important;
}

.ops-pill-emoji {
  font-size: 0.82rem;
}

.ops-pill-label {
  font-size: 0.72rem;
  font-weight: 700;
  margin-left: 2px;
}

.ops-popover-header {
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

/* 9. Dashboard Empty State illustration card */
.ops-dashboard-workspace-empty-view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 40px;
  text-align: center;
}

.ops-empty-dashboard-illustration {
  font-size: 3.5rem;
  margin-bottom: 12px;
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0px);
  }
}

.ops-dashboard-workspace-empty-view h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px 0;
}

.ops-dashboard-workspace-empty-view p {
  font-size: 0.85rem;
  color: var(--text2);
  margin: 0 0 24px 0;
  max-width: 500px;
  line-height: 1.5;
}

.ops-empty-view-features-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 480px;
}

.ops-feature-tip-item {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--border);
  padding: 10px 14px;
  border-radius: 10px;
}

.ops-feature-tip-item strong {
  font-size: 0.75rem;
  color: var(--accent);
  margin-bottom: 3px;
}

.ops-feature-tip-item span {
  font-size: 0.7rem;
  color: var(--text2);
  line-height: 1.4;
}

/* 10. Attachment Tables styling within the timeline or workspaces */
.request-attachment-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  margin-top: 6px;
}

.request-attachment-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.request-attachment-table th {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text2);
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  letter-spacing: 0.5px;
}

.request-attachment-table td {
  font-size: 0.68rem;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.8);
}

.request-attachment-name {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 600;
}

.request-attachment-name:hover {
  color: var(--accent) !important;
}

.request-attachment-name img {
  width: 18px;
  height: 18px;
  object-fit: cover;
  border-radius: 4px;
}

.attachment-text-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--accent);
  color: #000000;
  font-weight: 800;
  font-size: 0.55rem;
}

.request-attachment-open {
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff !important;
  padding: 2px 6px;
  border-radius: 4px;
  text-decoration: none !important;
  font-size: 0.6rem;
  font-weight: 700;
}

.request-attachment-open:hover {
  background: var(--accent);
  color: #000000 !important;
}

/* 11. Lightweight Timeline File Attachment Chips */
.ops-timeline-chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.ops-timeline-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  text-decoration: none !important;
  color: #ffffff !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.ops-timeline-attachment-chip:hover {
  transform: translateY(-2px) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

.ops-timeline-attachment-chip.pdf {
  border-color: rgba(239, 68, 68, 0.2) !important;
  background: rgba(239, 68, 68, 0.03) !important;
}

.ops-timeline-attachment-chip.pdf:hover {
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}

.ops-timeline-attachment-chip.excel {
  border-color: rgba(16, 185, 129, 0.2) !important;
  background: rgba(16, 185, 129, 0.03) !important;
}

.ops-timeline-attachment-chip.excel:hover {
  border-color: #10b981 !important;
  color: #10b981 !important;
}

.ops-timeline-attachment-chip.image {
  border-color: rgba(236, 72, 153, 0.2) !important;
  background: rgba(236, 72, 153, 0.03) !important;
}

.ops-timeline-attachment-chip.image:hover {
  border-color: #ec4899 !important;
  color: #ec4899 !important;
}

.ops-timeline-attachment-chip.link {
  border-color: rgba(56, 189, 248, 0.2) !important;
  background: rgba(56, 189, 248, 0.03) !important;
}

.ops-timeline-attachment-chip.link:hover {
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
}

.ops-chip-icon {
  font-size: 0.82rem;
}

.ops-chip-name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-chip-size {
  font-size: 0.6rem;
  color: var(--text2);
  background: rgba(255, 255, 255, 0.04);
  padding: 2px 6px;
  border-radius: 4px;
}

.ops-chip-arrow {
  font-size: 0.65rem;
  color: var(--text2);
  margin-left: 2px;
}



/* -------------------------------------------------------------------------- */
/* SUBSCRIBER COCKPIT: NEW PREMIUM HEADER BUTTON & NOTIFICATION HISTORY PANEL */
/* -------------------------------------------------------------------------- */

/* Header New Request Button next to Welcome Greeting */
.customer-welcome-create-btn {
  background: linear-gradient(135deg, #eab308 0%, #facc15 100%) !important;
  color: #111827 !important;
  font-weight: 800 !important;
  font-size: 0.8rem !important;
  padding: 8px 16px !important;
  border: none !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.15) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-left: 16px !important;
  flex-shrink: 0 !important;
  text-transform: none !important;
  line-height: 1.2 !important;
}

.customer-welcome-create-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(234, 179, 8, 0.25) !important;
  filter: brightness(1.05) !important;
}

.customer-welcome-create-btn:active {
  transform: translateY(0) !important;
}

.customer-notifications-panel {
  background: var(--cc-panel) !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04) !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: 100% !important;
}

.customer-notifications-panel .customer-panel-head {
  padding: 22px 24px !important;
  background: linear-gradient(180deg, #fafbfc, #f1f5f9) !important;
  border-bottom: 1px solid var(--cc-line) !important;
  min-height: auto !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
}

.customer-notifications-panel .customer-panel-head h2 {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  margin: 0 !important;
}

.customer-notifications-minimalist-list {
  flex: 1 1 auto !important;
  height: 0 !important;
  min-height: 250px !important;
  overflow-y: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  scroll-behavior: smooth;
}

/* Custom premium scrollbar for notifications timeline */
.customer-notifications-minimalist-list::-webkit-scrollbar {
  width: 6px !important;
}

.customer-notifications-minimalist-list::-webkit-scrollbar-track {
  background: transparent !important;
}

.customer-notifications-minimalist-list::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.28) !important;
  border-radius: 99px !important;
}

.customer-notifications-minimalist-list::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.48) !important;
}

.customer-notification-minimalist-row {
  display: flex !important;
  gap: 16px !important;
  padding: 4px 0 16px 0 !important;
  position: relative !important;
  transition: all 0.2s ease !important;
}

.customer-notification-minimalist-row.has-click {
  cursor: pointer !important;
}

.customer-notification-minimalist-row:hover .notification-minimalist-dot {
  transform: scale(1.25) !important;
  box-shadow: 0 0 8px currentColor !important;
}

.customer-notification-minimalist-row:hover .notification-minimalist-note {
  color: var(--cc-text) !important;
}

.notification-minimalist-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  position: relative !important;
  flex-shrink: 0 !important;
  width: 12px !important;
}

.notification-minimalist-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  margin-top: 5px !important;
  z-index: 2 !important;
  transition: all 0.2s ease !important;
}

.notification-minimalist-track {
  width: 2px !important;
  background: var(--cc-line) !important;
  position: absolute !important;
  top: 13px !important;
  bottom: -15px !important;
  left: 5px !important;
  z-index: 1 !important;
}

.notification-minimalist-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.notification-minimalist-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 8px !important;
}

.notification-minimalist-label {
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  color: var(--cc-text) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex: 1 !important;
  min-width: 0 !important;
  max-width: none !important;
}

.notification-minimalist-time {
  font-size: 0.72rem !important;
  color: var(--cc-muted) !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.notification-minimalist-note {
  margin: 0 !important;
  font-size: 0.78rem !important;
  color: var(--cc-muted) !important;
  line-height: 1.45 !important;
  transition: all 0.2s ease !important;
}

.notification-minimalist-author {
  font-size: 0.68rem !important;
  color: var(--cc-muted) !important;
  margin-top: 2px !important;
}

.notification-minimalist-author b {
  color: var(--cc-text) !important;
  font-weight: 700 !important;
}

.customer-empty-notifications {
  padding: 24px 0 !important;
  text-align: left !important;
  font-size: 0.8rem !important;
  color: var(--cc-muted) !important;
}

/* === Activity Timeline v2 — clean card-based, no dot === */
.activity-timeline-row {
  display: flex !important;
  padding: 0 0 2px 0 !important;
  position: relative !important;
  overflow-x: hidden !important;
}

.activity-timeline-row.has-click {
  cursor: pointer !important;
}

.activity-timeline-row.has-click:hover .activity-timeline-card {
  opacity: 0.85 !important;
}

.activity-timeline-card {
  flex: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 8px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  transition: none !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
}

.activity-timeline-card-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.activity-timeline-label {
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  color: #94a3b8 !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.activity-timeline-time {
  font-size: 0.66rem !important;
  color: var(--cc-muted) !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 1px !important;
}

.activity-timeline-note {
  margin: 0 !important;
  font-size: 0.73rem !important;
  color: rgba(255, 255, 255, 0.55) !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.activity-timeline-author {
  font-size: 0.65rem !important;
  color: var(--cc-muted) !important;
  font-weight: 600 !important;
  margin-top: 1px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.activity-timeline-author::before {
  content: "—" !important;
  opacity: 0.4 !important;
}

/* Modal Pop-up 2-Column Dialog Form Styles - PREMIUM DARK THEME */
.customer-request-modal-container {
  --cc-bg: #050505 !important;
  --cc-panel: #0F1115 !important;
  --cc-line: rgba(255, 255, 255, 0.08) !important;
  --cc-soft: #161920 !important;
  --cc-text: #FFFFFF !important;
  --cc-muted: #8A8F98 !important;
  --cc-accent: #EAB308 !important;
  --cc-accent-soft: rgba(234, 179, 8, 0.12) !important;
}

.customer-request-modal-container .customer-task-modal-dialog {
  position: relative !important;
  z-index: 100 !important;
  width: min(780px, 100%) !important;
  max-height: min(780px, calc(100vh - 40px)) !important;
  border-radius: 28px !important;
  padding: 30px !important;
  background: var(--cc-panel) !important;
  border: 1px solid var(--cc-line) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45) !important;
  overflow: visible !important;
}

.customer-request-modal-container .customer-task-modal-head {
  background: linear-gradient(135deg, #050505 0%, #0F1115 100%) !important;
  padding: 24px 30px !important;
  margin: -30px -30px 24px -30px !important;
  border-top-left-radius: 28px !important;
  border-top-right-radius: 28px !important;
  border-bottom: 1px solid var(--cc-line) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.customer-request-modal-container .customer-task-modal-head h3 {
  color: #ffffff !important;
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  margin: 4px 0 0 0 !important;
}

.customer-request-modal-container .customer-task-modal-head span {
  color: #EAB308 !important;
  /* Premium Amber gold sublabel */
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  font-weight: 800 !important;
}

/* Modal close button custom placement and styling on the dark header */
.customer-request-modal-container .customer-task-modal-close {
  position: absolute !important;
  z-index: 999999 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  top: 20px !important;
  right: 20px !important;
  transition: all 0.2s ease !important;
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  font-size: 1.2rem !important;
  line-height: 1 !important;
}

.customer-request-modal-container .customer-task-modal-close:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.15) !important;
  transform: rotate(90deg) !important;
}

.modal-grid-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: 24px !important;
  row-gap: 22px !important;
  align-items: start !important;
  padding: 0 0 28px !important;
  box-sizing: border-box !important;
}

.modal-form-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  min-width: 0 !important;
}

.modal-form-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  min-width: 0 !important;
}

.form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}

.form-group span {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  color: var(--cc-muted) !important;
  /* using muted grey for label */
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.customer-request-modal-container #customer-request-brand-picker {
  margin: 0 !important;
  box-sizing: border-box !important;
}

.customer-request-modal-container .customer-request-brand-card {
  width: 100% !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  min-width: 0 !important;
}

.customer-request-modal-container .customer-request-brand-card:hover {
  border-color: rgba(234, 179, 8, 0.34) !important;
  background: rgba(234, 179, 8, 0.035) !important;
}

.customer-request-modal-container .customer-request-brand-card.is-selected:hover {
  border-color: rgba(234, 179, 8, 0.64) !important;
  background: rgba(234, 179, 8, 0.06) !important;
}

.customer-request-modal-container .customer-request-brand-card strong,
.customer-request-modal-container .customer-request-brand-card small {
  min-width: 0 !important;
}

.customer-request-modal-container #customer-request-brand-quota {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Beautiful Inputs */
.customer-request-modal-container .request-field-input {
  width: 100% !important;
  min-height: 48px !important;
  padding: 12px 16px !important;
  background: rgba(5, 5, 5, 0.6) !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: 14px !important;
  color: var(--cc-text) !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  outline: none !important;
  transition: all 0.2s ease !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.customer-request-modal-container .request-field-input::placeholder {
  color: rgba(255, 255, 255, 0.25) !important;
}

.customer-request-modal-container select.request-field-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8F98' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 16px !important;
  padding-right: 40px !important;
  cursor: pointer !important;
}

.customer-request-modal-container select.request-field-input option {
  background: #0F1115 !important;
  color: #FFFFFF !important;
}

.customer-request-modal-container .request-field-input:focus {
  border-color: var(--cc-accent) !important;
  box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.customer-request-modal-container textarea.request-field-input {
  min-height: 110px !important;
  border-radius: 14px !important;
  resize: none !important;
  line-height: 1.5 !important;
}

/* Custom File Picker Styling */
.request-file-picker {
  cursor: pointer !important;
}

.file-picker-custom-btn {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1.5px dashed var(--cc-line) !important;
  border-radius: 12px !important;
  height: 52px !important;
  min-height: 52px !important;
  transition: all 0.2s ease !important;
}

.customer-request-modal-container .request-file-picker:hover .file-picker-custom-btn {
  background: rgba(234, 179, 8, 0.04) !important;
  border-color: var(--cc-accent) !important;
}

.upload-icon {
  font-size: 1.15rem !important;
}

.upload-text-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  text-align: left !important;
}

.upload-text-wrapper strong {
  font-size: 0.82rem !important;
  font-weight: 750 !important;
  color: var(--cc-text) !important;
  transition: color 0.2s ease !important;
}

.customer-request-modal-container .request-file-picker:hover .upload-text-wrapper strong {
  color: var(--cc-accent) !important;
}

.upload-text-wrapper small {
  font-size: 0.65rem !important;
  color: var(--cc-muted) !important;
}

.btn-ghost-link {
  font-size: 0.82rem !important;
  border: 1.5px dashed var(--cc-line) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-radius: 12px !important;
  color: #FFFFFF !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-weight: 750 !important;
}

.btn-ghost-link:hover {
  background: rgba(234, 179, 8, 0.04) !important;
  border-color: var(--cc-accent) !important;
  color: var(--cc-accent) !important;
}

/* Selected File Items List Styling */
.sub-request-file-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin-top: 4px !important;
  max-height: 180px !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}

.selected-file-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 0.8rem !important;
  color: #FFFFFF !important;
  animation: fileItemFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes fileItemFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Modal Bottom Actions Row */
.modal-form-actions {
  grid-column: 1 / -1 !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  border-top: 1px solid var(--cc-line) !important;
  padding-top: 18px !important;
  padding-bottom: 2px !important;
  margin-top: 2px !important;
}

.customer-modal-cancel-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--cc-muted) !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  padding: 12px 24px !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.customer-modal-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.customer-submit-btn {
  background: linear-gradient(135deg, #eab308 0%, #facc15 100%) !important;
  color: #111827 !important;
  font-weight: 850 !important;
  font-size: 0.88rem !important;
  padding: 12px 28px !important;
  border: none !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.15) !important;
  transition: all 0.2s ease !important;
}

/* Colorful Customer File Links for RestoUp Style */
body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(1).customer-file-link {
  background: rgba(14, 165, 233, 0.08) !important;
  border-color: rgba(14, 165, 233, 0.25) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(1).customer-file-link:hover {
  background: rgba(14, 165, 233, 0.15) !important;
  border-color: rgba(14, 165, 233, 0.4) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(14, 165, 233, 0.12) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(1).customer-file-link .customer-file-icon {
  color: #0284c7 !important;
  background: rgba(14, 165, 233, 0.15) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(2).customer-file-link {
  background: rgba(245, 158, 11, 0.08) !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(2).customer-file-link:hover {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(245, 158, 11, 0.12) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(2).customer-file-link .customer-file-icon {
  color: #d97706 !important;
  background: rgba(245, 158, 11, 0.15) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(3).customer-file-link {
  background: rgba(16, 185, 129, 0.08) !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(3).customer-file-link:hover {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(16, 185, 129, 0.12) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(3).customer-file-link .customer-file-icon {
  color: #059669 !important;
  background: rgba(16, 185, 129, 0.15) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(4).customer-file-link {
  background: rgba(139, 92, 246, 0.08) !important;
  border-color: rgba(139, 92, 246, 0.25) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(4).customer-file-link:hover {
  background: rgba(139, 92, 246, 0.15) !important;
  border-color: rgba(139, 92, 246, 0.4) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(139, 92, 246, 0.12) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(4).customer-file-link .customer-file-icon {
  color: #7c3aed !important;
  background: rgba(139, 92, 246, 0.15) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files .customer-file-link {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.customer-submit-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(234, 179, 8, 0.25) !important;
  filter: brightness(1.05) !important;
}

.customer-submit-btn:active {
  transform: translateY(0) !important;
}

@media (max-width: 760px) {
  .customer-request-modal-container .customer-task-modal-dialog {
    max-width: calc(100vw - 24px) !important;
  }

  .modal-grid-form {
    grid-template-columns: 1fr !important;
    row-gap: 18px !important;
    padding: 0 0 24px !important;
  }

  .modal-form-left,
  .modal-form-right,
  .modal-form-actions,
  .customer-request-modal-container #customer-request-brand-picker,
  .customer-request-modal-container #customer-request-brand-quota {
    grid-column: 1 / -1 !important;
  }

  .modal-form-left,
  .modal-form-right {
    gap: 14px !important;
  }

  .modal-form-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    justify-content: stretch !important;
    padding-top: 16px !important;
  }

  .customer-modal-cancel-btn,
  .customer-submit-btn {
    width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
  }
}

@media (max-width: 460px) {
  .modal-form-actions {
    grid-template-columns: 1fr !important;
  }
}

/* Attachment Toggle Emoji Button Micro-animations */
#btn-attachment-toggle {
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

#btn-attachment-toggle:hover {
  background: rgba(234, 179, 8, 0.08) !important;
  border-color: var(--cc-accent) !important;
  color: var(--cc-accent) !important;
  transform: scale(1.1) rotate(15deg) !important;
}

#btn-attachment-toggle:active {
  transform: scale(0.9) !important;
}

/* Larger Textarea for Description */
.customer-request-modal-container textarea.textarea-lg {
  min-height: 174px !important;
  max-height: 240px !important;
  line-height: 1.6 !important;
  font-size: 0.88rem !important;
  resize: vertical !important;
}

.customer-request-modal-container textarea.textarea-lg::placeholder {
  font-size: 0.82rem !important;
  font-style: italic !important;
  color: rgba(255, 255, 255, 0.2) !important;
  line-height: 1.55 !important;
}

/* Required Field Star */
.form-required-star {
  font-style: normal !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  color: #ef4444 !important;
  margin-left: 6px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  opacity: 0.85 !important;
}

/* Category Hint Text */
.category-hint-text {
  display: block !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  color: rgba(234, 179, 8, 0.55) !important;
  margin-top: 4px !important;
  min-height: 16px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: color 0.2s ease !important;
}

/* Description form group should take more space */
.form-group-description {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

.form-group-description textarea {
  flex: 1 !important;
}

/* Compact Attachments Wrapper */
.compact-attachments {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-top: 0 !important;
  align-items: flex-start !important;
}

/* Client hub textarea-lg styling */
.client-hub-form textarea.textarea-lg {
  min-height: 140px !important;
  max-height: 200px !important;
  resize: vertical !important;
}

.client-hub-form textarea.textarea-lg::placeholder {
  font-size: 0.82rem !important;
  font-style: italic !important;
  color: rgba(255, 255, 255, 0.2) !important;
  line-height: 1.55 !important;
}

.client-hub-form .category-hint-text {
  display: block !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  color: rgba(234, 179, 8, 0.55) !important;
  margin-top: 4px !important;
  min-height: 14px !important;
  line-height: 1.35 !important;
}

.client-hub-form .form-required-star {
  font-style: normal !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  color: #ef4444 !important;
  margin-left: 4px !important;
}

/* ==========================================
   PREMIUM CUSTOM SELECT OVERLAYS
   ========================================== */
.custom-select-wrapper {
  position: relative !important;
  width: 100% !important;
}

.custom-select-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 50px !important;
  padding: 12px 18px !important;
  background: rgba(5, 5, 5, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.custom-select-trigger:hover {
  background: rgba(15, 17, 21, 0.8) !important;
  border-color: rgba(234, 179, 8, 0.45) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(234, 179, 8, 0.08) !important;
}

.custom-select-wrapper.open .custom-select-trigger {
  border-color: #eab308 !important;
  background: rgba(15, 17, 21, 0.95) !important;
  box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.custom-select-trigger-arrow {
  color: #8a8f98 !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.custom-select-wrapper.open .custom-select-trigger-arrow {
  transform: rotate(180deg) !important;
  color: #eab308 !important;
}

/* Premium Glassmorphic Dropdown Menu */
.custom-select-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  width: 100% !important;
  max-height: 500px !important;
  overflow-y: visible !important;
  background: rgba(15, 17, 21, 0.98) !important;
  backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75) !important;
  z-index: 9999999 !important;
  padding: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-8px) scale(0.97) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.custom-select-wrapper.open .custom-select-dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
}

/* Custom Options */
.custom-select-option {
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  user-select: none !important;
}

.custom-select-option:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  padding-left: 18px !important;
}

.custom-select-option.selected {
  background: rgba(234, 179, 8, 0.15) !important;
  color: #eab308 !important;
  font-weight: 700 !important;
}

.custom-select-option.selected::after {
  content: "✓" !important;
  margin-left: auto !important;
  font-weight: 800 !important;
}

.custom-select-option.disabled {
  cursor: not-allowed !important;
  pointer-events: auto !important;
}

.custom-select-option.disabled>span:not(.option-lock-icon) {
  opacity: 0.35 !important;
}

/* Premium Custom Panel Tooltips for Locked Options */
.option-lock-icon {
  position: relative !important;
  display: inline-block !important;
  opacity: 0.75 !important;
  transition: opacity 0.2s ease !important;
}

.option-lock-icon:hover {
  opacity: 1 !important;
}

.option-lock-icon::after {
  content: attr(data-tooltip) !important;
  position: absolute !important;
  bottom: 140% !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(4px) !important;
  background: #eab308 !important;
  /* Solid vibrant brand yellow/gold (şeffaflık 0) */
  color: #000000 !important;
  /* Pure solid black text for maximum contrast and eye-catching effect */
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  /* Extra bold */
  text-transform: uppercase !important;
  /* Highly visible uppercase text */
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.75) !important;
  /* Strong shadow to pop out */
  pointer-events: none !important;
  z-index: 99999999 !important;
  line-height: 1.2 !important;
  border: none !important;
}

.option-lock-icon::before {
  content: "" !important;
  position: absolute !important;
  bottom: calc(140% - 5px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(4px) !important;
  border-width: 5px 5px 0 !important;
  border-style: solid !important;
  border-color: #eab308 transparent transparent !important;
  /* Solid yellow matching arrow (şeffaflık 0) */
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none !important;
  z-index: 99999999 !important;
}

.option-lock-icon:hover::after,
.option-lock-icon:hover::before {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
}


.request-plan-access-note {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(234, 179, 8, 0.18);
  border-radius: 12px;
  background: rgba(234, 179, 8, 0.07);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.74rem;
  line-height: 1.35;
}

.request-plan-access-note strong {
  color: #facc15;
  font-size: 0.78rem;
  white-space: nowrap;
}

.request-plan-access-note span {
  text-align: right;
}

.subscriber-workspace-choice.is-locked,
.subcp-choice.is-locked,
.subos-choice.is-locked,
.portal-choice.is-locked {
  opacity: 1 !important;
  /* Fully opaque so tooltip is 100% solid opacity with zero transparency */
  cursor: not-allowed !important;
  filter: grayscale(0.25);
  position: relative !important;
  pointer-events: auto !important;
}

/* Move the dimming opacity to the content elements inside the locked button */
.subscriber-workspace-choice.is-locked>span,
.subscriber-workspace-choice.is-locked>div,
.subcp-choice.is-locked>span,
.subcp-choice.is-locked>div,
.subos-choice.is-locked>span,
.subos-choice.is-locked>div,
.portal-choice.is-locked>span,
.portal-choice.is-locked>div {
  opacity: 0.48 !important;
}

.subscriber-workspace-choice.is-locked:hover,
.subcp-choice.is-locked:hover,
.subos-choice.is-locked:hover,
.portal-choice.is-locked:hover {
  transform: none !important;
}

/* Custom Premium Panel Tooltips for Locked Wizard Buttons */
.subcp-choice.is-locked::after,
.subos-choice.is-locked::after,
.portal-choice.is-locked::after {
  content: attr(data-tooltip) !important;
  position: absolute !important;
  bottom: 115% !important;
  /* Positioned perfectly above the button */
  left: 50% !important;
  transform: translateX(-50%) translateY(4px) !important;
  background: #eab308 !important;
  /* Solid vibrant brand yellow/gold (şeffaflık 0) */
  color: #000000 !important;
  /* Pure solid black text for maximum contrast and eye-catching effect */
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  /* Extra bold */
  text-transform: uppercase !important;
  /* Highly visible uppercase text */
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.75) !important;
  /* Strong shadow to pop out */
  pointer-events: none !important;
  z-index: 99999999 !important;
  line-height: 1.2 !important;
  border: none !important;
}

.subcp-choice.is-locked::before,
.subos-choice.is-locked::before,
.portal-choice.is-locked::before {
  content: "" !important;
  position: absolute !important;
  bottom: calc(115% - 5px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(4px) !important;
  border-width: 5px 5px 0 !important;
  border-style: solid !important;
  border-color: #eab308 transparent transparent !important;
  /* Solid yellow matching arrow (şeffaflık 0) */
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none !important;
  z-index: 99999999 !important;
}

.subcp-choice.is-locked:hover::after,
.subcp-choice.is-locked:hover::before,
.subos-choice.is-locked:hover::after,
.subos-choice.is-locked:hover::before,
.portal-choice.is-locked:hover::after,
.portal-choice.is-locked:hover::before {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* Modal Overflow Fixes to prevent custom dropdowns from being clipped/squeezed */
.customer-request-modal-container .customer-task-modal-dialog,
.customer-request-modal-container,
.customer-request-modal-form-content,
.modal-grid-form {
  overflow: visible !important;
}

.customer-task-modal:not(.customer-request-modal-container) .customer-task-modal-dialog {
  overflow: hidden !important;
  border-radius: 28px !important;
}

/* Task detail popup: always centered on viewport */
.customer-task-modal,
.customer-request-modal-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(16px, 3vh, 32px) !important;
  overflow-y: auto !important;
}

/* Disabled custom dropdown select wrapper styling */
.custom-select-wrapper.disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Backdrop is visual only; wheel/click pass through to modal for native scroll */
.customer-task-modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(8px) !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

/* Ensure all modal dialogs sit above the backdrop and are fully readable and clickable */
.customer-task-modal-dialog {
  position: relative !important;
  z-index: 100 !important;
}

/* Ensure all close buttons are positioned absolutely on top of headers */
.customer-task-modal-close {
  position: absolute !important;
  z-index: 999999 !important;
}

.ops-status-dropdown {
  position: relative;
  width: 100%;
}

.ops-status-dropdown summary {
  list-style: none;
}

.ops-status-dropdown summary::-webkit-details-marker {
  display: none;
}

.ops-status-trigger {
  min-height: 46px;
  display: grid;
  grid-template-columns: 30px 1fr 18px;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 800;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.ops-status-trigger:hover,
.ops-status-dropdown[open] .ops-status-trigger {
  border-color: rgba(250, 204, 21, 0.26);
  background: rgba(255, 255, 255, 0.04);
}

.ops-status-trigger::after {
  content: "▾";
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.72rem;
  justify-self: end;
  transition: transform 0.18s ease;
}

.ops-status-dropdown[open] .ops-status-trigger::after {
  transform: rotate(180deg);
}

.ops-status-trigger-icon,
.ops-status-option span {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(250, 204, 21, 0.16);
  border-radius: 8px;
  background: rgba(250, 204, 21, 0.06);
  color: #facc15;
  font-size: 0.82rem;
  font-weight: 950;
}

.ops-status-dropdown[data-status="Yeni"] .ops-status-trigger-icon,
.ops-status-option[data-status="Yeni"] span {
  border-color: rgba(96, 165, 250, 0.24);
  background: rgba(96, 165, 250, 0.12);
  color: #60a5fa;
}

.ops-status-dropdown[data-status="Incelemede"] .ops-status-trigger-icon,
.ops-status-option[data-status="Incelemede"] span {
  border-color: rgba(245, 158, 11, 0.24);
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

.ops-status-dropdown[data-status="BilgiBekleniyor"] .ops-status-trigger-icon,
.ops-status-option[data-status="BilgiBekleniyor"] span {
  border-color: rgba(192, 132, 252, 0.24);
  background: rgba(192, 132, 252, 0.12);
  color: #c084fc;
}

.ops-status-dropdown[data-status="Calisiliyor"] .ops-status-trigger-icon,
.ops-status-option[data-status="Calisiliyor"] span {
  border-color: rgba(34, 197, 94, 0.24);
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}

.ops-status-dropdown[data-status="Tamamlandi"] .ops-status-trigger-icon,
.ops-status-option[data-status="Tamamlandi"] span {
  border-color: rgba(20, 184, 166, 0.24);
  background: rgba(20, 184, 166, 0.12);
  color: #14b8a6;
}

.ops-status-menu {
  position: absolute;
  z-index: 70;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(9, 11, 15, 0.98);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.48);
}

.ops-status-option {
  width: 100%;
  min-height: 40px;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: rgba(255, 255, 255, 0.74);
  cursor: pointer;
  text-align: left;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

/* Beautiful color-tinted default states for dark-theme status options */
.ops-status-option[data-status="Yeni"] {
  background: rgba(96, 165, 250, 0.03) !important;
  border-color: rgba(96, 165, 250, 0.12) !important;
  color: #93c5fd !important;
}

.ops-status-option[data-status="Incelemede"] {
  background: rgba(245, 158, 11, 0.03) !important;
  border-color: rgba(245, 158, 11, 0.12) !important;
  color: #fdba74 !important;
}

.ops-status-option[data-status="BilgiBekleniyor"] {
  background: rgba(192, 132, 252, 0.03) !important;
  border-color: rgba(192, 132, 252, 0.12) !important;
  color: #e9d5ff !important;
}

.ops-status-option[data-status="Calisiliyor"] {
  background: rgba(34, 197, 94, 0.03) !important;
  border-color: rgba(34, 197, 94, 0.12) !important;
  color: #86efac !important;
}

.ops-status-option[data-status="Tamamlandi"] {
  background: rgba(20, 184, 166, 0.03) !important;
  border-color: rgba(20, 184, 166, 0.12) !important;
  color: #99f6e4 !important;
}

.ops-status-option:hover,
.ops-status-option.active {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.055);
  color: #ffffff;
}

/* Beautiful color-tinted hover & active states for status options */
.ops-status-option[data-status="Yeni"]:hover,
.ops-status-option[data-status="Yeni"].active {
  border-color: rgba(96, 165, 250, 0.35) !important;
  background: rgba(96, 165, 250, 0.08) !important;
  color: #60a5fa !important;
}

.ops-status-option[data-status="Incelemede"]:hover,
.ops-status-option[data-status="Incelemede"].active {
  border-color: rgba(245, 158, 11, 0.35) !important;
  background: rgba(245, 158, 11, 0.08) !important;
  color: #f59e0b !important;
}

.ops-status-option[data-status="BilgiBekleniyor"]:hover,
.ops-status-option[data-status="BilgiBekleniyor"].active {
  border-color: rgba(192, 132, 252, 0.35) !important;
  background: rgba(192, 132, 252, 0.08) !important;
  color: #c084fc !important;
}

.ops-status-option[data-status="Calisiliyor"]:hover,
.ops-status-option[data-status="Calisiliyor"].active {
  border-color: rgba(34, 197, 94, 0.35) !important;
  background: rgba(34, 197, 94, 0.08) !important;
  color: #22c55e !important;
}

.ops-status-option[data-status="Tamamlandi"]:hover,
.ops-status-option[data-status="Tamamlandi"].active {
  border-color: rgba(20, 184, 166, 0.35) !important;
  background: rgba(20, 184, 166, 0.08) !important;
  color: #14b8a6 !important;
}

/* Beautiful dynamic styling for the dropdown triggers */
.ops-status-dropdown[data-status="Yeni"] .ops-status-trigger {
  border-color: rgba(96, 165, 250, 0.22) !important;
  background: rgba(96, 165, 250, 0.04) !important;
}

.ops-status-dropdown[data-status="Yeni"] .ops-status-trigger:hover {
  border-color: rgba(96, 165, 250, 0.38) !important;
  background: rgba(96, 165, 250, 0.08) !important;
}

.ops-status-dropdown[data-status="Incelemede"] .ops-status-trigger {
  border-color: rgba(245, 158, 11, 0.22) !important;
  background: rgba(245, 158, 11, 0.04) !important;
}

.ops-status-dropdown[data-status="Incelemede"] .ops-status-trigger:hover {
  border-color: rgba(245, 158, 11, 0.38) !important;
  background: rgba(245, 158, 11, 0.08) !important;
}

.ops-status-dropdown[data-status="BilgiBekleniyor"] .ops-status-trigger {
  border-color: rgba(192, 132, 252, 0.22) !important;
  background: rgba(192, 132, 252, 0.04) !important;
}

.ops-status-dropdown[data-status="BilgiBekleniyor"] .ops-status-trigger:hover {
  border-color: rgba(192, 132, 252, 0.38) !important;
  background: rgba(192, 132, 252, 0.08) !important;
}

.ops-status-dropdown[data-status="Calisiliyor"] .ops-status-trigger {
  border-color: rgba(34, 197, 94, 0.22) !important;
  background: rgba(34, 197, 94, 0.04) !important;
}

.ops-status-dropdown[data-status="Calisiliyor"] .ops-status-trigger:hover {
  border-color: rgba(34, 197, 94, 0.38) !important;
  background: rgba(34, 197, 94, 0.08) !important;
}

.ops-status-dropdown[data-status="Tamamlandi"] .ops-status-trigger {
  border-color: rgba(20, 184, 166, 0.22) !important;
  background: rgba(20, 184, 166, 0.04) !important;
}

.ops-status-dropdown[data-status="Tamamlandi"] .ops-status-trigger:hover {
  border-color: rgba(20, 184, 166, 0.38) !important;
  background: rgba(20, 184, 166, 0.08) !important;
}

.ops-status-option strong {
  font-size: 0.84rem;
  font-weight: 850;
}

.ops-canned-replies-wrapper {
  margin-bottom: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  position: relative;
}

.ops-canned-replies-toggle {
  width: 100%;
  min-height: 38px;
  display: grid;
  grid-template-columns: 1fr auto 20px;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  text-align: left;
  box-shadow: none;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.ops-canned-replies-toggle:hover {
  border-color: rgba(255, 255, 255, 0.14);
  background: transparent;
  box-shadow: none;
  color: #ffffff;
  transform: none;
}

.ops-canned-replies-toggle span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.1px;
}

.ops-canned-replies-toggle span::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.38);
  box-shadow: none;
}

.ops-canned-replies-toggle strong {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.66rem;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

.ops-canned-replies-toggle::after {
  content: "▾";
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: none;
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.72rem;
  transition: transform 0.18s ease;
}

.ops-canned-replies-wrapper[data-open="true"] .ops-canned-replies-toggle::after {
  transform: rotate(180deg);
}

.ops-canned-replies-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 10020;
  max-height: min(620px, calc(100vh - 128px));
  margin: 0;
  padding: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(214, 222, 234, 0.95);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.22);
  color: #151922;
  transform-origin: bottom center;
}

.ops-canned-replies-panel[hidden] {
  display: none !important;
}

.ops-canned-replies-wrapper[data-open="true"] {
  z-index: 10021;
}

.ops-canned-replies-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.ops-canned-replies-title strong {
  color: #facc15;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: none;
}

.ops-canned-reply-groups {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ops-canned-reply-group {
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}

.ops-canned-reply-group[data-group="category"] {
  border-color: rgba(250, 204, 21, 0.22);
  background: rgba(250, 204, 21, 0.045);
}

.ops-canned-reply-group-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.ops-canned-reply-group-head div {
  min-width: 0;
}

.ops-canned-reply-group-head span {
  display: block;
  margin-bottom: 2px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.ops-canned-reply-group-head strong {
  display: block;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-canned-reply-group-head b {
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.56rem;
  font-weight: 900;
}

.ops-canned-reply-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.ops-canned-reply-card {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 7px;
  align-items: flex-start;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  color: rgba(255, 255, 255, 0.84);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.ops-canned-reply-card:hover {
  border-color: rgba(250, 204, 21, 0.34);
  background: rgba(250, 204, 21, 0.075);
  transform: translateY(-1px);
}

.ops-canned-reply-card span {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: rgba(250, 204, 21, 0.12);
  color: #facc15;
  font-size: 0.6rem;
  font-weight: 950;
}

.ops-canned-reply-card em {
  display: block;
  overflow: visible;
  color: inherit;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 650;
  line-height: 1.22;
  -webkit-box-orient: initial;
  -webkit-line-clamp: initial;
}

@media (max-width: 860px) {
  .ops-canned-replies-toggle {
    grid-template-columns: 1fr 20px;
  }

  .ops-canned-replies-toggle strong {
    display: none;
  }

  .ops-canned-reply-grid {
    grid-template-columns: 1fr;
  }

  .ops-canned-reply-card {
    min-height: auto;
  }
}

@keyframes opsModalBackdropFade {
  from {
    background: rgba(5, 8, 13, 0);
    backdrop-filter: blur(0px);
  }

  to {
    background: rgba(5, 8, 13, 0.85);
    backdrop-filter: blur(12px);
  }
}

@keyframes opsModalBackdropFadeOut {
  from {
    background: rgba(5, 8, 13, 0.85);
    backdrop-filter: blur(12px);
  }

  to {
    background: rgba(5, 8, 13, 0);
    backdrop-filter: blur(0px);
  }
}

@keyframes opsModalContentPop {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(24px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes opsModalContentPopOut {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  to {
    opacity: 0;
    transform: scale(0.92) translateY(24px);
  }
}

.ops-popup-modal-backdrop {
  animation: opsModalBackdropFade 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ops-popup-modal-content {
  animation: opsModalContentPop 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ops-request-popup-content {
  color: #f8fafc !important;
  background:
    linear-gradient(180deg, #2d3139 0%, #1e2126 100%) !important;
  background-size: 100% 100% !important;
  background-attachment: scroll !important;
  border: 2px solid #374151 !important;
  /* Premium graphite gray frame */
  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.ops-request-popup-content::before {
  display: none;
}

.ops-request-popup-content::after {
  display: none;
}

.ops-request-popup-content>.ops-workspace-scroller {
  position: relative;
  z-index: 1;
}

.ops-request-popup-content .ops-workspace-title-block,
.ops-request-popup-content .ops-card,
.ops-request-popup-content .ops-drive-table-card {
  background:
    linear-gradient(180deg, #171b23, #11151c) !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 14px 34px rgba(0, 0, 0, 0.22) !important;
}

.ops-request-popup-content .ops-form-card {
  border-color: rgba(250, 204, 21, 0.18) !important;
  background:
    linear-gradient(180deg, #181910, #11151c) !important;
}

.ops-request-popup-content .ops-title-actions {
  background: #11151c !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

.ops-request-popup-content .ops-action-chip {
  background: #171b23 !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
  box-shadow: none !important;
}

.ops-request-popup-content .ops-ai-checklist-wrapper {
  background: #11151c !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

.ops-request-popup-content .ops-form-card>div,
.ops-request-popup-content .ops-drive-table-wrap,
.ops-request-popup-content .ops-card table,
.ops-request-popup-content textarea,
.ops-request-popup-content .request-field-input {
  background-color: #10141b !important;
}

.ops-request-popup-content .ops-card tr,
.ops-request-popup-content .ops-card td,
.ops-request-popup-content .ops-card th {
  background-color: transparent !important;
}

.ops-request-popup-content>button[onclick*="closeRequestPopupModal"] {
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
  color: rgba(226, 232, 240, 0.86) !important;
  box-shadow: none !important;
}

.ops-request-popup-content>button[onclick*="closeRequestPopupModal"]:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(226, 232, 240, 0.22) !important;
  color: #ffffff !important;
}

.ops-request-popup-content .ops-ai-checklist-progress-ring {
  background:
    conic-gradient(from -90deg, #d6a900 var(--progress, 0%), rgba(255, 255, 255, 0.085) 0) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.075) !important;
}

.ops-request-popup-content .ops-ai-checklist-progress-ring::before {
  background: #141922 !important;
}

.ops-request-popup-content .ops-ai-checklist-wrapper input[type="checkbox"] {
  border-color: rgba(214, 169, 0, 0.58) !important;
  background: transparent !important;
}

.ops-request-popup-content .ops-ai-checklist-wrapper input[type="checkbox"]:checked {
  background: rgba(214, 169, 0, 0.16) !important;
  border-color: #d6a900 !important;
}

.ops-request-popup-content .ops-ai-checklist-wrapper input[type="checkbox"]+svg {
  stroke: #d6a900 !important;
}

.ops-request-popup-content .ops-ai-checklist-progress-ring.is-animating {
  animation: opsChecklistRingSubtlePulse 0.78s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes opsChecklistRingSubtlePulse {
  0% {
    transform: scale(0.98);
  }

  45% {
    transform: scale(1.045);
  }

  100% {
    transform: scale(1);
  }
}

/* Clearer operation update card */
.ops-request-popup-content .ops-form-card {
  position: relative;
  overflow: hidden;
  padding: 18px !important;
  border: 1px solid rgba(214, 169, 0, 0.28) !important;
  background:
    linear-gradient(180deg, #1a1912, #11151c 62%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 18px 42px rgba(0, 0, 0, 0.26) !important;
}

.ops-request-popup-content .ops-form-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #d6a900;
}

.ops-update-card-title {
  min-height: 42px;
  align-items: center !important;
  justify-content: flex-start;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

.ops-update-title-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid rgba(214, 169, 0, 0.24);
  border-radius: 10px;
  background: rgba(214, 169, 0, 0.1);
  color: #facc15;
  font-size: 0.96rem;
}

.ops-update-card-title>span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.ops-update-card-title strong {
  color: #f8fafc;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.15;
}

.ops-update-card-title small {
  color: rgba(226, 232, 240, 0.52);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.35;
}

.ops-request-popup-content .ops-form-card>.ops-update-form-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px !important;
  border: 1px solid #dce2ec !important;
  border-radius: 16px !important;
  background: #f3f5f9 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: none !important;
}

.ops-update-control-grid {
  gap: 12px !important;
  margin-bottom: 0 !important;
}

.ops-update-control-panel {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 14px;
  background: #151a22;
}

.ops-update-control-panel>label {
  margin-bottom: 8px !important;
  color: rgba(226, 232, 240, 0.56) !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
}

.ops-update-control-panel .ops-status-trigger,
.ops-update-control-panel .ops-multi-assign-drawer>summary,
.ops-update-control-panel>div[style*="cursor: not-allowed"] {
  min-height: 48px !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  border-radius: 12px !important;
  background: #f5f7fb !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

.ops-update-control-panel .ops-status-trigger:hover,
.ops-update-control-panel .ops-status-dropdown[open] .ops-status-trigger,
.ops-update-control-panel .ops-multi-assign-drawer>summary:hover {
  border-color: rgba(214, 169, 0, 0.38) !important;
  background: #ffffff !important;
}

.ops-request-popup-content .ops-canned-replies-wrapper {
  margin: 0 !important;
  padding: 0 0 2px !important;
  position: relative !important;
}

.ops-request-popup-content .ops-canned-replies-toggle {
  min-height: 36px !important;
  border-bottom-color: rgba(148, 163, 184, 0.12) !important;
  color: rgba(226, 232, 240, 0.68) !important;
}

.ops-request-popup-content .ops-canned-replies-panel {
  position: fixed !important;
  top: var(--ops-canned-replies-top, 86px) !important;
  left: var(--ops-canned-replies-left, 24px) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 100022 !important;
  width: min(var(--ops-canned-replies-width, 640px), calc(100vw - 32px)) !important;
  max-height: min(620px, calc(100vh - 128px)) !important;
  margin: 0 !important;
  padding: 12px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  border: 1px solid #d9e2ef !important;
  border-radius: 16px !important;
  background: #f8fafc !important;
  color: #151922 !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.20), 0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
  transform: none !important;
}

.ops-update-note-box {
  border-color: rgba(148, 163, 184, 0.18) !important;
  border-radius: 14px !important;
  background: #0d1118 !important;
}

.ops-update-note-box textarea {
  min-height: 92px !important;
  background: #0d1118 !important;
  padding: 16px !important;
  font-size: 0.88rem !important;
}

.ops-update-note-box>div {
  min-height: 46px;
  background: #11151d !important;
  border-top-color: rgba(148, 163, 184, 0.14) !important;
}

.ops-update-note-box button {
  background: #1a202a !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
  color: rgba(248, 250, 252, 0.88) !important;
}

.ops-update-note-box button:hover {
  background: #222936 !important;
}

.ops-request-popup-content .ops-save-button-primary {
  min-width: 250px !important;
  min-height: 38px !important;
  margin-top: 6px !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
  background: #f5bd05 !important;
  box-shadow: none !important;
  color: #101217 !important;
  letter-spacing: 0.3px !important;
}

.ops-request-popup-content .ops-save-button-primary:hover {
  background: #ffd33a !important;
  box-shadow: none !important;
}

@media (max-width: 900px) {
  .ops-update-control-grid {
    grid-template-columns: 1fr !important;
  }

  .ops-request-popup-content .ops-save-button-primary {
    width: 100% !important;
    min-width: 0 !important;
  }
}

.ops-request-popup-content .ops-update-card-title {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr);
  padding: 0 0 14px !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  background: transparent !important;
}

.ops-request-popup-content .ops-save-button-header {
  display: none !important;
}

.ops-request-popup-content .ops-save-button-header:hover {
  background: #ffd33a !important;
  transform: translateY(-1px);
}

.ops-request-popup-content .ops-update-form-shell>.ops-save-button-primary:not(.ops-save-button-header) {
  display: flex !important;
  margin-top: 16px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  width: auto !important;
  min-width: 250px !important;
}

.ops-request-popup-content .ops-update-form-shell>#ops-file-picker-selected:empty {
  display: none !important;
}

.ops-request-popup-content .ops-form-card>.ops-update-card-title {
  background-color: transparent !important;
}

.ops-request-popup-content .ops-form-card>.ops-update-form-shell {
  padding-bottom: 16px !important;
}

@media (max-width: 760px) {
  .ops-request-popup-content .ops-update-card-title {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .ops-request-popup-content .ops-save-button-header {
    grid-column: 1 / -1;
    width: 100% !important;
    margin-top: 10px !important;
  }
}

/* Light foreground theme for request detail modal */
.ops-request-popup-content {
  --text: #151922;
  --text2: #667085;
  --bg: #ffffff;
  --bg2: #f6f7fb;
  --bg3: #eef1f6;
  --border: rgba(15, 23, 42, 0.12);
  --detail-card: #ffffff;
  --detail-card-soft: #f7f8fb;
  --detail-line: #dce2ec;
  color: var(--text) !important;
}

.ops-request-popup-content .ops-workspace-title-block,
.ops-request-popup-content .ops-card,
.ops-request-popup-content .ops-drive-table-card,
.ops-request-popup-content .ops-credentials-card,
.ops-request-popup-content .ops-timeline-card {
  background:
    linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%) !important;
  border: 1px solid var(--detail-line) !important;
  color: var(--text) !important;
  box-shadow:
    0 18px 36px rgba(3, 7, 18, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.ops-request-popup-content .ops-workspace-title-block {
  background:
    linear-gradient(180deg, #ffffff 0%, #f9fafc 100%) !important;
}

.ops-request-popup-content .ops-form-card {
  background:
    linear-gradient(180deg, #fffdf5 0%, #ffffff 44%, #f7f8fb 100%) !important;
  border: 1px solid rgba(214, 169, 0, 0.26) !important;
  box-shadow:
    0 20px 40px rgba(92, 65, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.ops-request-popup-content .ops-form-card::before {
  background: #d6a900 !important;
}

.ops-request-popup-content .ops-update-form-shell,
.ops-request-popup-content .ops-update-control-panel,
.ops-request-popup-content .ops-update-note-box,
.ops-request-popup-content .ops-drive-table-wrap,
.ops-request-popup-content .ops-card table,
.ops-request-popup-content .ops-status-trigger,
.ops-request-popup-content .ops-multi-assign-drawer>summary,
.ops-request-popup-content .ops-update-control-panel>div[style*="cursor: not-allowed"] {
  background: #f6f8fb !important;
  border-color: var(--detail-line) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.ops-request-popup-content .ops-update-control-panel,
.ops-request-popup-content .ops-update-note-box {
  background: #ffffff !important;
}

.ops-request-popup-content .ops-update-note-box textarea,
.ops-request-popup-content textarea,
.ops-request-popup-content .request-field-input,
.ops-request-popup-content input:not([type="checkbox"]):not([type="range"]),
.ops-request-popup-content select {
  background: #ffffff !important;
  border-color: var(--detail-line) !important;
  color: #111827 !important;
}

.ops-request-popup-content textarea::placeholder,
.ops-request-popup-content input::placeholder {
  color: #8a94a6 !important;
}

.ops-request-popup-content .ops-update-note-box>div {
  background: #f3f5f9 !important;
  border-top-color: var(--detail-line) !important;
}

.ops-request-popup-content :is(h1, h2, h3, h4, strong, b, label),
.ops-request-popup-content .ops-card-header-title,
.ops-request-popup-content .ops-workspace-title-block h3,
.ops-request-popup-content .ops-update-card-title strong,
.ops-request-popup-content .ops-status-trigger,
.ops-request-popup-content .ops-action-text {
  color: #151922 !important;
}

.ops-request-popup-content :is(p, small, span, td, th, em),
.ops-request-popup-content .ops-card-sub-p,
.ops-request-popup-content .ops-update-card-title small,
.ops-request-popup-content .ops-update-control-panel>label {
  color: #667085 !important;
}

.ops-request-popup-content .ops-kicker,
.ops-request-popup-content .ops-workspace-title-block .ops-kicker,
.ops-request-popup-content .ops-request-brief-box span,
.ops-request-popup-content .ops-card-header-title svg,
.ops-request-popup-content .ops-card-header-title>span:first-child {
  color: #9a6a00 !important;
}

.ops-request-popup-content .ops-title-actions,
.ops-request-popup-content .ops-action-chip {
  background: #ffffff !important;
  border-color: var(--detail-line) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
}

.ops-request-popup-content .ops-action-chip:hover {
  background: #f5f7fb !important;
}

/* Ensure category title blocks have readable bold black, amber and slate text */
.ops-request-popup-content .ops-workspace-title-block h3 {
  color: #0f172a !important;
}

.ops-request-popup-content .ops-workspace-title-block .ops-kicker {
  color: #b45309 !important;
}

.ops-request-popup-content .ops-workspace-title-block .ops-desc {
  color: #475569 !important;
}

.ops-request-popup-content .ops-action-icon {
  background: #f1f4f9 !important;
  box-shadow: none !important;
}

.ops-request-popup-content .ops-request-brief-box {
  background: #fff8dc !important;
  border-color: rgba(214, 169, 0, 0.28) !important;
  border-left-color: #d6a900 !important;
  box-shadow: none !important;
}

.ops-request-popup-content .ops-request-brief-box::before {
  box-shadow: none !important;
}

.ops-request-popup-content .ops-request-brief-box p {
  color: #1f2937 !important;
}

.ops-request-popup-content .ops-workspace-title-block .premium-parsed-request-summary>div:first-child {
  background: #f4f6fa !important;
  border-color: var(--detail-line) !important;
}

.ops-request-popup-content .ops-ai-checklist-wrapper {
  background: #f7f8fb !important;
  border-color: var(--detail-line) !important;
}

.ops-request-popup-content .ops-ai-checklist-wrapper label span:last-child {
  color: #334155 !important;
}

.ops-request-popup-content .ops-ai-checklist-progress-ring {
  background:
    conic-gradient(from -90deg, #d6a900 var(--progress, 0%), #d9dee8 0) !important;
  box-shadow: none !important;
}

.ops-request-popup-content .ops-ai-checklist-progress-ring::before {
  background: #ffffff !important;
  border-color: var(--detail-line) !important;
}

.ops-request-popup-content .ops-ai-checklist-progress-ring span {
  color: #151922 !important;
}

.ops-request-popup-content .ops-status-menu,
.ops-request-popup-content .ops-multi-assign-drawer>div {
  background: #ffffff !important;
  border-color: var(--detail-line) !important;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16) !important;
}

/* Custom highly distinct solid color states for light-theme status options */
.ops-request-popup-content .ops-status-option {
  border: 2px solid transparent !important;
  font-weight: 900 !important;
  transition: all 0.16s ease !important;
}

.ops-request-popup-content .ops-status-option span {
  background: rgba(255, 255, 255, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  color: #ffffff !important;
}

.ops-request-popup-content .ops-status-option strong {
  color: #ffffff !important;
  font-weight: 900 !important;
}

/* YENİ (Royal Blue) */
.ops-request-popup-content .ops-status-option[data-status="Yeni"] {
  background: #2563eb !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
}

.ops-request-popup-content .ops-status-option[data-status="Yeni"]:hover,
.ops-request-popup-content .ops-status-option[data-status="Yeni"].active {
  background: #1d4ed8 !important;
  border-color: #1e40af !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.32) !important;
}

/* İNCELEMEDE (Rich Amber) */
.ops-request-popup-content .ops-status-option[data-status="Incelemede"] {
  background: #d97706 !important;
  border-color: #b45309 !important;
  color: #ffffff !important;
}

.ops-request-popup-content .ops-status-option[data-status="Incelemede"]:hover,
.ops-request-popup-content .ops-status-option[data-status="Incelemede"].active {
  background: #b45309 !important;
  border-color: #92400e !important;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.32) !important;
}

/* BİLGİ BEKLENİYOR (Royal Purple) */
.ops-request-popup-content .ops-status-option[data-status="BilgiBekleniyor"] {
  background: #7c3aed !important;
  border-color: #6d28d9 !important;
  color: #ffffff !important;
}

.ops-request-popup-content .ops-status-option[data-status="BilgiBekleniyor"]:hover,
.ops-request-popup-content .ops-status-option[data-status="BilgiBekleniyor"].active {
  background: #6d28d9 !important;
  border-color: #5b21b6 !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.32) !important;
}

/* ÇALIŞILIYOR (Vibrant Green) */
.ops-request-popup-content .ops-status-option[data-status="Calisiliyor"] {
  background: #16a34a !important;
  border-color: #15803d !important;
  color: #ffffff !important;
}

.ops-request-popup-content .ops-status-option[data-status="Calisiliyor"]:hover,
.ops-request-popup-content .ops-status-option[data-status="Calisiliyor"].active {
  background: #15803d !important;
  border-color: #166534 !important;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.32) !important;
}

/* TAMAMLANDI (Solid Teal) */
.ops-request-popup-content .ops-status-option[data-status="Tamamlandi"] {
  background: #0d9488 !important;
  border-color: #0f766e !important;
  color: #ffffff !important;
}

.ops-request-popup-content .ops-status-option[data-status="Tamamlandi"]:hover,
.ops-request-popup-content .ops-status-option[data-status="Tamamlandi"].active {
  background: #0f766e !important;
  border-color: #115e59 !important;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.32) !important;
}

/* Solid, highly visible selected status trigger styling inside light-theme modal */
.ops-request-popup-content .ops-status-dropdown[data-status="Yeni"] .ops-status-trigger {
  background: #2563eb !important;
  border: 2px solid #1d4ed8 !important;
  color: #ffffff !important;
}

.ops-request-popup-content .ops-status-dropdown[data-status="Yeni"] .ops-status-trigger .ops-status-trigger-icon {
  background: rgba(255, 255, 255, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  color: #ffffff !important;
}

.ops-request-popup-content .ops-status-dropdown[data-status="Yeni"] .ops-status-trigger:hover {
  background: #1d4ed8 !important;
  border-color: #1e40af !important;
}

.ops-request-popup-content .ops-status-dropdown[data-status="Incelemede"] .ops-status-trigger {
  background: #d97706 !important;
  border: 2px solid #b45309 !important;
  color: #ffffff !important;
}

.ops-request-popup-content .ops-status-dropdown[data-status="Incelemede"] .ops-status-trigger .ops-status-trigger-icon {
  background: rgba(255, 255, 255, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  color: #ffffff !important;
}

.ops-request-popup-content .ops-status-dropdown[data-status="Incelemede"] .ops-status-trigger:hover {
  background: #b45309 !important;
  border-color: #92400e !important;
}

.ops-request-popup-content .ops-status-dropdown[data-status="BilgiBekleniyor"] .ops-status-trigger {
  background: #7c3aed !important;
  border: 2px solid #6d28d9 !important;
  color: #ffffff !important;
}

.ops-request-popup-content .ops-status-dropdown[data-status="BilgiBekleniyor"] .ops-status-trigger .ops-status-trigger-icon {
  background: rgba(255, 255, 255, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  color: #ffffff !important;
}

.ops-request-popup-content .ops-status-dropdown[data-status="BilgiBekleniyor"] .ops-status-trigger:hover {
  background: #6d28d9 !important;
  border-color: #5b21b6 !important;
}

.ops-request-popup-content .ops-status-dropdown[data-status="Calisiliyor"] .ops-status-trigger {
  background: #16a34a !important;
  border: 2px solid #15803d !important;
  color: #ffffff !important;
}

.ops-request-popup-content .ops-status-dropdown[data-status="Calisiliyor"] .ops-status-trigger .ops-status-trigger-icon {
  background: rgba(255, 255, 255, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  color: #ffffff !important;
}

.ops-request-popup-content .ops-status-dropdown[data-status="Calisiliyor"] .ops-status-trigger:hover {
  background: #15803d !important;
  border-color: #166534 !important;
}

.ops-request-popup-content .ops-status-dropdown[data-status="Tamamlandi"] .ops-status-trigger {
  background: #0d9488 !important;
  border: 2px solid #0f766e !important;
  color: #ffffff !important;
}

.ops-request-popup-content .ops-status-dropdown[data-status="Tamamlandi"] .ops-status-trigger .ops-status-trigger-icon {
  background: rgba(255, 255, 255, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  color: #ffffff !important;
}

.ops-request-popup-content .ops-status-dropdown[data-status="Tamamlandi"] .ops-status-trigger:hover {
  background: #0f766e !important;
  border-color: #115e59 !important;
}

.ops-request-popup-content .ops-status-trigger::after {
  color: #ffffff !important;
}

/* Force clean white text on all solid-colored status triggers and option labels */
.ops-request-popup-content .ops-status-trigger,
.ops-request-popup-content .ops-status-trigger span,
.ops-request-popup-content .ops-status-trigger strong,
.ops-request-popup-content .ops-status-option,
.ops-request-popup-content .ops-status-option span,
.ops-request-popup-content .ops-status-option strong {
  color: #ffffff !important;
}

.ops-request-popup-content .ops-update-note-box button {
  background: #ffffff !important;
  border-color: var(--detail-line) !important;
  color: #151922 !important;
}

.ops-request-popup-content .ops-update-note-box button:hover {
  background: #f4f6fa !important;
}

.ops-request-popup-content .ops-save-button-header {
  background: #f5bd05 !important;
  color: #151922 !important;
  border-color: #e0ac00 !important;
}

.ops-request-popup-content .ops-save-button-header:hover {
  background: #ffd23c !important;
}

.ops-request-popup-content table tr {
  border-color: var(--detail-line) !important;
}

.ops-request-popup-content .ops-drive-open-btn,
.ops-request-popup-content .ops-drive-edit-btn {
  background: #eef7ff !important;
  border-color: #b9def8 !important;
  color: #0369a1 !important;
}

.ops-request-popup-content .ops-timeline-stream-container,
.ops-request-popup-content .request-update-attachments,
.ops-request-popup-content .ops-canned-reply-group,
.ops-request-popup-content .ops-canned-reply-card {
  background: #ffffff !important;
  border-color: var(--detail-line) !important;
  color: var(--text) !important;
}

.ops-request-popup-content .ops-canned-replies-toggle {
  color: #475467 !important;
  border-bottom-color: var(--detail-line) !important;
}

.ops-request-popup-content .ops-canned-replies-toggle span::before {
  background: #98a2b3 !important;
}

.ops-request-popup-content .ops-timeline-header-block>div:last-child {
  gap: 2px !important;
  padding: 3px !important;
  border: 1px solid #d9e1ec !important;
  border-radius: 10px !important;
  background: #eef2f7 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

.ops-request-popup-content .ops-timeline-filter-btn {
  min-height: 30px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #667085 !important;
  box-shadow: none !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
}

.ops-request-popup-content .ops-timeline-filter-btn {
  background: rgba(255, 255, 255, 0.03) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.ops-request-popup-content .ops-timeline-filter-btn:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

.ops-request-popup-content .ops-timeline-filter-btn.active {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}

/* Premium Light Theme: remove glare and optimize contrast inside the update form */
.ops-request-popup-content .ops-form-card>.ops-update-form-shell {
  background: #f3f5f9 !important;
  border-color: #dce2ec !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
  color: #151922 !important;
}

.ops-request-popup-content .ops-form-card>.ops-update-form-shell *,
.ops-request-popup-content .ops-update-control-panel *,
.ops-request-popup-content .ops-update-note-box * {
  color: #151922 !important;
}

.ops-request-popup-content .ops-update-control-panel {
  background: #ffffff !important;
  border-color: #dce2ec !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
}

.ops-request-popup-content .ops-update-card-title span small {
  color: #667085 !important;
  font-weight: 600 !important;
}

.ops-request-popup-content .ops-update-card-title span strong {
  color: #151922 !important;
  font-weight: 850 !important;
}

.ops-request-popup-content .ops-update-control-panel>label {
  color: #475569 !important;
  font-weight: 800 !important;
}

.ops-request-popup-content .ops-canned-replies-toggle,
.ops-request-popup-content .ops-canned-replies-toggle strong {
  color: #0284c7 !important;
  /* Premium sapphire blue canned toggle links */
  font-weight: 700 !important;
}

.ops-request-popup-content .ops-update-control-panel .ops-status-trigger,
.ops-request-popup-content .ops-update-control-panel .ops-multi-assign-drawer>summary,
.ops-request-popup-content .ops-update-control-panel>div[style*="cursor: not-allowed"] {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #1f2937 !important;
}

.ops-request-popup-content .ops-update-control-panel .ops-status-trigger:hover,
.ops-request-popup-content .ops-update-control-panel .ops-status-dropdown[open] .ops-status-trigger,
.ops-request-popup-content .ops-update-control-panel .ops-multi-assign-drawer>summary:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

.ops-request-popup-content .ops-update-note-box {
  background: #ffffff !important;
  border-color: #dce2ec !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
}

.ops-request-popup-content .ops-update-note-box textarea {
  background: transparent !important;
  color: #151922 !important;
  font-weight: 600 !important;
}

.ops-request-popup-content .ops-update-note-box textarea::placeholder {
  color: #8a94a6 !important;
  opacity: 0.85 !important;
}

.ops-request-popup-content .ops-update-note-box>div {
  background: #f6f8fb !important;
  border-top-color: #dce2ec !important;
}

.ops-request-popup-content .ops-update-note-box label {
  color: #475569 !important;
  font-weight: 700 !important;
}

.ops-request-popup-content .ops-update-note-box label span {
  color: #667085 !important;
  font-weight: 600 !important;
}

.ops-request-popup-content .ops-update-note-box button {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #1f2937 !important;
}

.ops-request-popup-content .ops-canned-replies-toggle {
  border-bottom-color: #cbd5e1 !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-replies-title {
  min-height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: -2px -2px 10px !important;
  padding: 0 2px 9px !important;
  border-bottom: 1px solid #e5ebf3 !important;
  color: #151922 !important;
  letter-spacing: 0.06em !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-replies-title strong {
  max-width: 220px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #b77900 !important;
  font-size: 0.58rem !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-replies-title span {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-replies-title span::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #f5bd05 !important;
  box-shadow: 0 0 0 4px rgba(245, 189, 5, 0.16) !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-groups {
  gap: 9px !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-group {
  padding: 9px !important;
  border-color: #dfe7f1 !important;
  border-radius: 13px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035) !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-group[data-group="category"] {
  border-color: #f0d789 !important;
  background: #fffdf4 !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-group-head {
  align-items: center !important;
  margin-bottom: 7px !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-group-head span {
  color: #667085 !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-group-head strong,
.ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-card em {
  color: #151922 !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-group-head b {
  background: #f5f7fb !important;
  border-color: #d6deea !important;
  color: #667085 !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-grid {
  gap: 7px !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-card {
  min-height: 62px !important;
  align-items: flex-start !important;
  padding: 8px !important;
  border-color: #dfe7f1 !important;
  border-radius: 11px !important;
  background: #fbfdff !important;
  box-shadow: none !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-card:hover {
  border-color: #f2c94c !important;
  background: #fff9df !important;
  transform: translateY(-1px) !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-card span {
  background: #fff3c4 !important;
  color: #8a6100 !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-card em {
  display: block !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  -webkit-line-clamp: initial !important;
  -webkit-box-orient: initial !important;
}

.ops-request-popup-content .ops-canned-replies-icon-wrapper {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

.ops-request-popup-content .ops-canned-replies-icon-button {
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 1px solid #d7dfeb !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #364152 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.ops-request-popup-content .ops-canned-replies-icon-button:hover,
.ops-request-popup-content .ops-canned-replies-icon-wrapper[data-open="true"] .ops-canned-replies-icon-button {
  border-color: #d6a900 !important;
  background: #fff9db !important;
  color: #7a5a00 !important;
  transform: none !important;
}

.ops-request-popup-content .ops-canned-replies-icon-button::after,
.ops-request-popup-content .ops-canned-replies-icon-button span::before {
  content: none !important;
  display: none !important;
}

.ops-request-popup-content .ops-canned-replies-icon-button svg {
  width: 17px !important;
  height: 17px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.ops-canned-replies-toggle-label {
  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;
}

.ops-request-popup-content .ops-canned-replies-count {
  position: absolute !important;
  top: -7px !important;
  right: -7px !important;
  min-width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 5px !important;
  border: 2px solid #ffffff !important;
  border-radius: 999px !important;
  background: #d6a900 !important;
  color: #111827 !important;
  font-size: 0.58rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.ops-request-popup-content .ops-canned-replies-icon-wrapper .ops-canned-replies-panel {
  width: min(var(--ops-canned-replies-width, 920px), calc(100vw - 32px)) !important;
  max-height: min(700px, calc(100vh - 48px)) !important;
  padding: 14px !important;
  border-radius: 18px !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-replies-title {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto 30px !important;
  align-items: center !important;
}

.ops-request-popup-content .ops-canned-replies-close {
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #d7dfeb !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  color: #475467 !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.ops-request-popup-content .ops-canned-replies-close:hover {
  border-color: #d6a900 !important;
  background: #fff9db !important;
  color: #7a5a00 !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-card {
  min-height: auto !important;
  grid-template-columns: 26px minmax(0, 1fr) !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-card em {
  font-size: 0.68rem !important;
  line-height: 1.24 !important;
}

@media (max-width: 980px) {
  .ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-grid {
    grid-template-columns: 1fr !important;
  }
}

.ops-request-popup-content .ops-canned-replies-icon-wrapper .ops-canned-replies-panel {
  width: min(var(--ops-canned-replies-width, 820px), calc(100vw - 24px)) !important;
  max-height: min(620px, calc(100vh - 42px)) !important;
  padding: 12px !important;
  border: 1px solid #d8e0ec !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.2) !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-replies-title {
  min-height: 28px !important;
  grid-template-columns: minmax(0, 1fr) auto 28px !important;
  margin: 0 0 10px !important;
  padding: 0 0 9px !important;
  border-bottom: 1px solid #e6edf5 !important;
  color: #111827 !important;
  letter-spacing: 0.04em !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-replies-title span::before {
  width: 7px !important;
  height: 7px !important;
  background: #eab308 !important;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.14) !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-replies-title strong {
  color: #9a6700 !important;
  font-size: 0.62rem !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-groups {
  gap: 10px !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-group {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-group-head {
  margin: 0 0 6px !important;
  padding: 0 2px !important;
  align-items: center !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-group-head span {
  margin: 0 0 1px !important;
  color: #7b8797 !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.08em !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-group-head strong {
  color: #111827 !important;
  font-size: 0.76rem !important;
  line-height: 1.1 !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-group-head b {
  padding: 2px 7px !important;
  border: 1px solid #dbe3ef !important;
  background: #f7f9fc !important;
  color: #64748b !important;
  font-size: 0.58rem !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-card {
  min-height: 44px !important;
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 9px !important;
  border: 1px solid #dfe7f1 !important;
  border-radius: 9px !important;
  background: #fbfdff !important;
  box-shadow: none !important;
  color: #111827 !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-card:hover {
  border-color: #e1b300 !important;
  background: #fffbea !important;
  transform: none !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-card span {
  width: 20px !important;
  height: 20px !important;
  border-radius: 6px !important;
  background: #fff2bf !important;
  color: #8a6100 !important;
  font-size: 0.55rem !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-card em {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: #1f2937 !important;
  font-size: 0.72rem !important;
  font-weight: 750 !important;
  line-height: 1.28 !important;
  white-space: normal !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-card small {
  color: #a16207 !important;
  font-size: 0.58rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  opacity: 0 !important;
  transition: opacity 0.16s ease !important;
}

.ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-card:hover small {
  opacity: 1 !important;
}

@media (max-width: 760px) {
  .ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-grid {
    grid-template-columns: 1fr !important;
  }

  .ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-card {
    grid-template-columns: 22px minmax(0, 1fr) !important;
  }

  .ops-request-popup-content .ops-canned-replies-panel .ops-canned-reply-card small {
    display: none !important;
  }
}

/* Customer task cards: keep the workflow progress ring outside the content area */
.customer-task-section,
.customer-task-list,
.customer-task-list.completed {
  overflow: visible !important;
}

.customer-task-list:not(.completed) {
  padding-right: 20px !important;
}

.customer-task-card.is-collapsible {
  position: relative !important;
  overflow: visible !important;
}

.customer-task-card.is-collapsible .customer-task-toggle {
  position: relative !important;
  overflow: visible !important;
  padding-right: 32px !important;
}

.customer-task-card.is-collapsible .customer-task-stage-progress-ring {
  top: -16px !important;
  right: -16px !important;
  z-index: 5 !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14) !important;
  pointer-events: none !important;
}

@media (max-width: 700px) {
  .customer-task-list:not(.completed) {
    padding-right: 14px !important;
  }

  .customer-task-card.is-collapsible .customer-task-stage-progress-ring {
    top: -14px !important;
    right: -10px !important;
  }
}

/* Customer task cards: replace percentage ring with compact milestone progress */
.customer-task-card.is-collapsible .customer-task-toggle {
  padding-right: 12px !important;
}

.customer-task-card .customer-stage-preview {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-top: 4px !important;
  padding: 7px 2px 3px !important;
}

.customer-task-card .customer-stage-preview span {
  position: relative !important;
  display: flex !important;
  flex: 1 1 0 !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
}

.customer-task-card .customer-stage-preview span:not(:first-child)::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: calc(50% + 7px) !important;
  width: calc(100% - 14px) !important;
  height: 2px !important;
  transform: translateY(-50%) !important;
  background: #d8e2ef !important;
}

.customer-task-card .customer-stage-preview .done:not(:first-child)::before,
.customer-task-card .customer-stage-preview .active:not(:first-child)::before {
  background: #16a34a !important;
}

.customer-task-card .customer-stage-preview i {
  position: relative !important;
  z-index: 1 !important;
  width: 13px !important;
  height: 13px !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
  animation: none !important;
}

.customer-task-card .customer-stage-preview .done i {
  border-color: #16a34a !important;
  background: #16a34a !important;
}

.customer-task-card .customer-stage-preview .active i {
  border-color: #d49a00 !important;
  background: #f7c948 !important;
  box-shadow: 0 0 0 3px rgba(247, 201, 72, 0.2) !important;
}

.customer-task-card .customer-stage-preview b {
  display: none !important;
}

/* Live chat: day separators and delayed automatic-reply typing state */
.live-chat-day-separator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 4px;
  color: rgba(226, 232, 240, 0.58);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0;
}

.live-chat-day-separator::before,
.live-chat-day-separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(148, 163, 184, 0.16);
}

.live-chat-day-separator span {
  padding: 3px 9px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.74);
  color: rgba(226, 232, 240, 0.72);
  white-space: nowrap;
}

.live-chat-typing-message .live-chat-typing-bubble {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-width: 108px;
  padding: 10px 12px;
}

.live-chat-typing-bubble small {
  color: #9ca3af;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}

.live-chat-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.live-chat-typing-dots i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #f7c400;
  opacity: 0.45;
  animation: liveChatTypingDot 0.9s ease-in-out infinite;
}

.live-chat-typing-dots i:nth-child(2) {
  animation-delay: 0.14s;
}

.live-chat-typing-dots i:nth-child(3) {
  animation-delay: 0.28s;
}

@keyframes liveChatTypingDot {

  0%,
  100% {
    transform: translateY(0);
    opacity: 0.42;
  }

  50% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

/* Request detail update form: stronger outer border */
.ops-request-popup-content .ops-form-card {
  border-width: 3px !important;
  border-color: #e4b400 !important;
}

/* Request detail modal: fit the main workflow on screen with less vertical travel */
.ops-request-popup-content {
  margin-top: 4px !important;
  max-height: calc(100vh - 8px) !important;
}

.ops-request-popup-content>.ops-workspace-scroller {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}

.ops-request-popup-content .ops-detail-workspace,
.ops-request-popup-content .ops-workspace-layout,
.ops-request-popup-content .ops-workspace-main,
.ops-request-popup-content .ops-workspace-side {
  gap: 8px !important;
}

.ops-request-popup-content .ops-workspace-title-block {
  padding: 10px 14px !important;
  margin-bottom: 4px !important;
  border-radius: 12px !important;
}

.ops-request-popup-content .premium-parsed-request-summary {
  margin-top: 4px !important;
}

.ops-request-popup-content .ops-ai-checklist-wrapper {
  margin-top: 4px !important;
  padding: 6px 10px !important;
}

.ops-request-popup-content .ops-form-card {
  padding: 10px 12px !important;
}

.ops-request-popup-content .ops-update-card-title {
  min-height: 28px !important;
  margin-bottom: 6px !important;
}

.ops-request-popup-content .ops-form-card>.ops-update-form-shell {
  gap: 6px !important;
  padding: 8px 10px !important;
}

.ops-request-popup-content .ops-update-control-grid {
  gap: 6px !important;
}

.ops-request-popup-content .ops-update-control-panel {
  padding: 6px 8px !important;
}

.ops-request-popup-content .ops-update-note-box textarea {
  min-height: 48px !important;
  padding: 6px 10px !important;
}

.ops-request-popup-content .ops-drive-table-card,
.ops-request-popup-content .ops-credentials-card {
  padding: 8px !important;
}

/* Request detail: make subscriber request text stand out */
.ops-request-popup-content .minimalist-request-description {
  margin-top: 6px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(214, 169, 0, 0.3) !important;
  border-left: 4px solid #e4b400 !important;
  border-radius: 10px !important;
  background:
    linear-gradient(135deg, #fff7d6 0%, #fffdf5 100%) !important;
  box-shadow: 0 4px 12px rgba(92, 65, 0, 0.05) !important;
}

.ops-request-popup-content .minimalist-request-description div {
  color: #9a6a00 !important;
}

.ops-request-popup-content .minimalist-request-description p {
  padding-left: 0 !important;
  color: #1f2937 !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
}

/* Request detail title hierarchy */
.ops-request-popup-content .ops-workspace-title-block {
  position: relative !important;
}

.ops-request-popup-content .ops-request-detail-id-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  max-width: 110px;
  padding: 5px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #f1f5f9;
  color: #2563eb;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.ops-request-popup-content .ops-request-title-row {
  padding-right: 0 !important;
}

.ops-request-popup-content .ops-request-heading-stack {
  min-width: 0;
  max-width: min(720px, 100%);
}

.ops-request-popup-content .ops-request-customer-name {
  color: #b98500 !important;
  font-size: 0.86rem !important;
  letter-spacing: 0.4px !important;
}

.ops-request-popup-content .ops-request-customer-name svg {
  width: 13px !important;
  height: 13px !important;
}

.ops-request-popup-content .ops-request-brand-title {
  color: #111827 !important;
  font-size: 1.46rem !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 820px) {
  .ops-request-popup-content .ops-workspace-title-block {
    padding-right: 20px !important;
  }
}

.ops-request-popup-content>button[onclick*="closeRequestPopupModal"] {
  position: absolute !important;
  top: -24px !important;
  right: -24px !important;
  width: 52px !important;
  height: 52px !important;
  background: #ef4444 !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  font-size: 1.8rem !important;
  font-weight: bold !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 999999 !important;
}

.ops-request-popup-content>button[onclick*="closeRequestPopupModal"]:hover {
  background: #dc2626 !important;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5) !important;
  transform: scale(1.08) !important;
}

/* Request detail: align right-side utilities as one vertical modal column */
.ops-request-popup-content .ops-title-text-and-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 340px !important;
  align-items: start !important;
  gap: 18px !important;
}

.ops-request-popup-content .ops-title-actions {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  width: 100% !important;
  align-self: start !important;
  justify-content: stretch !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  padding: 12px !important;
  border-radius: 14px !important;
}

.ops-request-popup-content .ops-title-actions .ops-request-detail-id-badge,
.ops-request-popup-content .ops-title-actions .ops-action-chip {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  justify-content: flex-start !important;
}

.ops-request-popup-content .ops-workspace-content-grid {
  grid-template-columns: minmax(0, 1fr) 340px !important;
  align-items: start !important;
  gap: 18px !important;
}

.ops-request-popup-content .ops-work-right {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.ops-request-popup-content .ops-drive-table-card,
.ops-request-popup-content .ops-credentials-card {
  width: 100% !important;
  margin: 0 !important;
}

@media (max-width: 1100px) {

  .ops-request-popup-content .ops-title-text-and-actions,
  .ops-request-popup-content .ops-workspace-content-grid {
    grid-template-columns: 1fr !important;
  }

  .ops-request-popup-content .ops-title-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Request detail: folders and credentials live inside the upper modal column */
.ops-request-popup-content .ops-title-side-stack {
  grid-column: 1 / -1;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 4px !important;
}

.ops-request-popup-content .ops-title-side-stack .ops-drive-table-card,
.ops-request-popup-content .ops-title-side-stack .ops-credentials-card {
  width: 100% !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.ops-request-popup-content .ops-workspace-content-grid {
  grid-template-columns: 1fr !important;
}

.ops-request-popup-content .ops-workspace-content-grid>.ops-work-right {
  display: none !important;
}

@media (max-width: 1100px) {
  .ops-request-popup-content .ops-title-actions {
    grid-template-columns: 1fr !important;
  }
}

/* Request detail: keep main layout, merge right info cards into one vertical card */
.ops-request-popup-content .ops-title-text-and-actions {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

.ops-request-popup-content .ops-title-actions {
  width: auto !important;
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 8px !important;
}

.ops-request-popup-content .ops-title-actions .ops-request-detail-id-badge,
.ops-request-popup-content .ops-title-actions .ops-action-chip {
  width: auto !important;
  min-width: 0 !important;
  justify-content: center !important;
}

.ops-request-popup-content .ops-title-side-stack {
  display: none !important;
}

.ops-request-popup-content .ops-workspace-content-grid {
  grid-template-columns: minmax(0, 1fr) 340px !important;
  align-items: start !important;
  gap: 18px !important;
}

.ops-request-popup-content .ops-workspace-content-grid>.ops-work-right {
  display: flex !important;
}

.ops-request-popup-content .ops-side-info-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  padding: 16px !important;
}

.ops-request-popup-content .ops-side-info-section+.ops-side-info-section {
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--detail-line, #dce2ec) !important;
}

.ops-request-popup-content .ops-side-info-card .ops-drive-table-card {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ops-request-popup-content .ops-side-info-card .ops-drive-table-wrap {
  background: #f6f8fb !important;
}

@media (max-width: 1100px) {
  .ops-request-popup-content .ops-title-text-and-actions {
    flex-direction: column !important;
  }

  .ops-request-popup-content .ops-title-actions {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  .ops-request-popup-content .ops-workspace-content-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Request detail: keep subscriber, brand, drive actions inside the upper resource panel */
.ops-request-popup-content .ops-workspace-title-block {
  padding-right: 64px !important;
}

.ops-request-popup-content .ops-title-resource-panel {
  flex: 0 0 370px !important;
  max-width: 390px !important;
  align-self: flex-start !important;
  padding: 14px !important;
  border: 1px solid var(--detail-line, #dce2ec) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%) !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.ops-request-popup-content .ops-resource-action-strip {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px !important;
}

.ops-request-popup-content .ops-resource-action-strip .ops-request-detail-id-badge {
  grid-column: 1 / -1;
  width: 100% !important;
  max-width: none !important;
  justify-content: flex-start !important;
}

.ops-request-popup-content .ops-resource-action-strip .ops-action-chip {
  width: 100% !important;
  height: 36px !important;
  justify-content: flex-start !important;
  background: #ffffff !important;
  border-color: #d6deea !important;
  color: #1d2735 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
}

.ops-request-popup-content .ops-resource-action-strip .ops-action-chip:hover {
  background: #f8fafc !important;
  border-color: #c3ccd9 !important;
}

/* Beautiful color-tinted action buttons inside light-theme modal strip */
.ops-request-popup-content .ops-resource-action-strip .ops-action-chip.identity {
  background: rgba(245, 158, 11, 0.05) !important;
  border-color: rgba(245, 158, 11, 0.22) !important;
  color: #b45309 !important;
}

.ops-request-popup-content .ops-resource-action-strip .ops-action-chip.identity .ops-action-icon {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #d97706 !important;
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.18) !important;
}

.ops-request-popup-content .ops-resource-action-strip .ops-action-chip.identity:hover {
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.12) !important;
}

.ops-request-popup-content .ops-resource-action-strip .ops-action-chip.identity .ops-action-text {
  color: #b45309 !important;
}

.ops-request-popup-content .ops-resource-action-strip .ops-action-chip.brand {
  background: rgba(236, 72, 153, 0.05) !important;
  border-color: rgba(236, 72, 153, 0.22) !important;
  color: #be185d !important;
}

.ops-request-popup-content .ops-resource-action-strip .ops-action-chip.brand .ops-action-icon {
  background: rgba(236, 72, 153, 0.12) !important;
  color: #db2777 !important;
  box-shadow: inset 0 0 0 1px rgba(236, 72, 153, 0.18) !important;
}

.ops-request-popup-content .ops-resource-action-strip .ops-action-chip.brand:hover {
  background: rgba(236, 72, 153, 0.1) !important;
  border-color: rgba(236, 72, 153, 0.45) !important;
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.12) !important;
}

.ops-request-popup-content .ops-resource-action-strip .ops-action-chip.brand .ops-action-text {
  color: #be185d !important;
}

.ops-request-popup-content .ops-resource-action-strip .ops-action-chip.drive {
  background: rgba(14, 165, 233, 0.05) !important;
  border-color: rgba(14, 165, 233, 0.22) !important;
  color: #0369a1 !important;
}

.ops-request-popup-content .ops-resource-action-strip .ops-action-chip.drive .ops-action-icon {
  background: rgba(14, 165, 233, 0.12) !important;
  color: #0ea5e9 !important;
  box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.18) !important;
}

.ops-request-popup-content .ops-resource-action-strip .ops-action-chip.drive:hover {
  background: rgba(14, 165, 233, 0.1) !important;
  border-color: rgba(14, 165, 233, 0.45) !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.12) !important;
}

.ops-request-popup-content .ops-resource-action-strip .ops-action-chip.drive .ops-action-text {
  color: #0369a1 !important;
}

.ops-request-popup-content .ops-resource-action-strip .ops-action-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #1d2735 !important;
}

.ops-request-popup-content .ops-title-resource-panel .ops-side-info-section+.ops-side-info-section {
  margin-top: 14px !important;
  padding-top: 14px !important;
}

.ops-request-popup-content .ops-title-resource-panel .ops-drive-table-card {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ops-request-popup-content .ops-title-resource-panel .ops-card-sub-p {
  font-size: 0.76rem !important;
  line-height: 1.45 !important;
}

.ops-request-popup-content .ops-workspace-content-grid-single {
  grid-template-columns: 1fr !important;
}

.ops-request-popup-content .ops-title-text>.ops-inline-update-card {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  margin-top: 16px !important;
}

.ops-request-popup-content .ops-title-text>.ops-inline-update-card .ops-update-card-title {
  margin-bottom: 12px !important;
}

.ops-request-popup-content .ops-workspace-content-grid-single .ops-timeline-card {
  margin-top: 0 !important;
}

.ops-request-popup-content .minimalist-request-description .ops-ai-checklist-inside-description {
  padding-top: 12px !important;
  border-top: 1px solid rgba(214, 169, 0, 0.16) !important;
}

.ops-request-popup-content .minimalist-request-description .ops-ai-checklist-wrapper {
  margin-top: 0 !important;
}

.ops-request-popup-content .ops-ai-plan-metric-chips span {
  color: #8a6a00 !important;
}

.ops-request-popup-content .ops-title-resource-panel,
.ops-request-popup-content .ops-title-resource-panel .ops-drive-table-card,
.ops-request-popup-content .ops-title-resource-panel .ops-drive-table-wrap,
.ops-request-popup-content .ops-title-resource-panel table,
.ops-request-popup-content .ops-title-resource-panel tbody,
.ops-request-popup-content .ops-title-resource-panel tr,
.ops-request-popup-content .ops-title-resource-panel td {
  overflow: visible !important;
}

.ops-request-popup-content .ops-title-resource-panel .ops-drive-table-wrap {
  position: relative !important;
  z-index: 1 !important;
}

.ops-request-popup-content .ops-title-resource-panel .ops-drive-pill-edit-drawer {
  position: relative !important;
  z-index: 2 !important;
}

.ops-request-popup-content .ops-title-resource-panel .ops-drive-pill-edit-drawer[open] {
  z-index: 1000000 !important;
}

.ops-request-popup-content .ops-title-resource-panel .ops-drive-pill-edit-drawer[open] summary {
  position: relative !important;
  z-index: 1000001 !important;
}

.ops-request-popup-content .ops-title-resource-panel .ops-drive-pill-edit-popover {
  z-index: 1000000 !important;
}

@media (max-width: 1100px) {
  .ops-request-popup-content .ops-workspace-title-block {
    padding-right: 20px !important;
  }

  .ops-request-popup-content .ops-title-resource-panel {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
  }

  .ops-request-popup-content .ops-resource-action-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .ops-request-popup-content .ops-resource-action-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Request detail performance pass: keep scroll/input work on the modal only. */
@keyframes opsModalBackdropFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes opsModalBackdropFadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes opsModalContentPop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes opsModalContentPopOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(8px) scale(0.99);
  }
}

body.ops-request-detail-open {
  overflow: hidden !important;
}

body.ops-request-detail-open #requests-panel-root {
  visibility: hidden !important;
  content-visibility: hidden !important;
  contain-intrinsic-size: 1px 1px !important;
}

body.ops-request-detail-open .sidebar,
body.ops-request-detail-open .right-activity-sidebar,
body.ops-request-detail-open .topbar,
body.ops-request-detail-open .top-status-row,
body.ops-request-detail-open #live-chat-root,
body.ops-request-detail-open .alarm-bar {
  visibility: hidden !important;
  content-visibility: hidden !important;
  pointer-events: none !important;
}

body.ops-request-detail-open #ops-request-popup-modal {
  visibility: visible !important;
  content-visibility: visible !important;
}

.ops-popup-modal-backdrop {
  overflow: hidden !important;
  overscroll-behavior: contain !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: opsModalBackdropFade 0.16s ease forwards !important;
}

.ops-popup-modal-content {
  animation: opsModalContentPop 0.16s ease forwards !important;
}

.ops-request-popup-content {
  margin: 0 !important;
  max-height: calc(100vh - 40px) !important;
  position: relative !important;
  background: #22252a !important;
  background-image: linear-gradient(180deg, #2d3139 0%, #1e2126 100%) !important;
  background-attachment: scroll !important;
  background-size: 100% 100% !important;
  border: 2px solid #374151 !important;
  /* Premium graphite gray frame */
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  scrollbar-gutter: stable !important;
  overscroll-behavior: contain !important;
  transform: translateZ(0) !important;
  will-change: scroll-position !important;
}

.ops-request-popup-content,
.ops-request-popup-content * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.ops-request-popup-content svg {
  filter: none !important;
}

.ops-request-popup-content .ops-workspace-title-block,
.ops-request-popup-content .ops-card,
.ops-request-popup-content .ops-drive-table-card,
.ops-request-popup-content .ops-credentials-card,
.ops-request-popup-content .ops-timeline-card,
.ops-request-popup-content .ops-title-resource-panel {
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
}

.ops-request-popup-content .ops-update-control-panel,
.ops-request-popup-content .ops-update-note-box,
.ops-request-popup-content .minimalist-request-description,
.ops-request-popup-content .ops-resource-action-strip .ops-action-chip {
  box-shadow: none !important;
}

.ops-request-popup-content .ops-timeline-card-row {
  content-visibility: auto;
  contain-intrinsic-size: 92px;
}

.ops-request-popup-content .modern-timeline-item {
  content-visibility: auto;
  contain-intrinsic-size: 96px;
}

.ops-request-popup-content .ops-timeline-show-more {
  margin: 12px 0 0 !important;
  min-height: 38px !important;
  border: 1px solid #d6deea !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #1d2735 !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
  cursor: pointer !important;
}

.ops-request-popup-content .ops-timeline-show-more:hover {
  background: #f5f7fb !important;
  border-color: #c3ccd9 !important;
}

.ops-request-popup-content .ops-timeline-attachment-more {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  background: #f1f5f9 !important;
  border: 1px solid #d6deea !important;
  color: #475467 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
}

.ops-request-popup-content .ops-sla-control-card {
  border-color: #d9b321 !important;
  background: #fffdf5 !important;
  box-shadow: none !important;
}

/* ── SLA OVERDUE: FULL RED ALARM CARD ── */
.ops-request-popup-content .ops-sla-control-card[data-sla-state="overdue"] {
  border-color: #ef4444 !important;
  background: #fef2f2 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15), 0 4px 16px rgba(239, 68, 68, 0.12) !important;
  animation: opsSlaCardAlarm 2s infinite !important;
}

@keyframes opsSlaCardAlarm {

  0%,
  100% {
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15), 0 4px 16px rgba(239, 68, 68, 0.12);
  }

  50% {
    box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.25), 0 4px 24px rgba(239, 68, 68, 0.2);
  }
}

.ops-request-popup-content .ops-sla-control-card[data-sla-state="overdue"] .ops-sla-toggle {
  background: #fef2f2 !important;
}

.ops-request-popup-content .ops-sla-control-card[data-sla-state="overdue"] .ops-sla-toggle:hover {
  background: #fee2e2 !important;
}

.ops-request-popup-content .ops-sla-control-card[data-sla-state="overdue"] .ops-sla-toggle-icon {
  background: #fee2e2 !important;
  border-color: #ef4444 !important;
  color: #dc2626 !important;
}

.ops-request-popup-content .ops-sla-control-card[data-sla-state="overdue"] .ops-sla-toggle-icon svg {
  stroke: #dc2626 !important;
}

.ops-request-popup-content .ops-sla-control-card[data-sla-state="overdue"] .ops-sla-toggle-copy strong {
  color: #b91c1c !important;
}

.ops-request-popup-content .ops-sla-control-card[data-sla-state="overdue"] .ops-sla-toggle-copy small {
  color: #dc2626 !important;
  font-weight: 700 !important;
}

.ops-request-popup-content .ops-sla-control-card[data-sla-state="overdue"] .ops-sla-toggle>b {
  color: #dc2626 !important;
  background: #fee2e2 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  border: 1px solid #fca5a5 !important;
}

/* ── SLA INLINE CARD OVERDUE ALARM (description area) ── */
.ops-sla-overdue-alarm {
  animation: opsSlaInlineAlarm 2s infinite !important;
}

@keyframes opsSlaInlineAlarm {

  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15), 0 4px 16px rgba(239, 68, 68, 0.12);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.25), 0 4px 24px rgba(239, 68, 68, 0.2);
  }
}

.ops-request-popup-content .ops-sla-collapsible {
  overflow: visible !important;
}

.ops-request-popup-content .ops-sla-toggle {
  min-height: 44px !important;
  background: #f5f7fb !important;
  border-radius: 12px 12px 0 0 !important;
}

.ops-request-popup-content .ops-sla-toggle:hover {
  background: #eef2f7 !important;
}

.ops-request-popup-content .ops-sla-toggle-icon {
  background: #fff1b8 !important;
  border-color: #e5c33d !important;
  color: #9a6a00 !important;
}

.ops-request-popup-content .ops-sla-toggle-copy strong,
.ops-request-popup-content .ops-sla-toggle>b {
  color: #151922 !important;
}

.ops-request-popup-content .ops-sla-toggle-copy small {
  color: #667085 !important;
}

.ops-request-popup-content .ops-sla-progress-box {
  position: relative !important;
  padding: 12px 14px 4px !important;
  background: #ffffff !important;
  overflow: visible !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  transition: all 0.3s ease !important;
}

@keyframes opsSlaAlarmPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

.ops-request-popup-content .ops-sla-progress-box[data-state="overdue"] {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  animation: opsSlaAlarmPulse 2s infinite !important;
}

.ops-request-popup-content .ops-sla-progress-box[data-state="overdue"] .ops-sla-progress-head strong,
.ops-request-popup-content .ops-sla-progress-box[data-state="overdue"] .ops-sla-progress-head b,
.ops-request-popup-content .ops-sla-progress-box[data-state="overdue"] .ops-sla-progress-head span {
  color: #b91c1c !important;
}

.ops-request-popup-content .ops-sla-progress-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto 34px !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
}

.ops-request-popup-content .ops-sla-progress-head span {
  color: #667085 !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.ops-request-popup-content .ops-sla-progress-head strong {
  color: #151922 !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.ops-request-popup-content .ops-sla-progress-head b {
  min-width: 42px !important;
  color: #151922 !important;
  font-size: 0.72rem !important;
  font-weight: 950 !important;
  text-align: right !important;
}

.ops-request-popup-content .ops-sla-progress-track {
  width: 100% !important;
  height: 9px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #e5eaf2 !important;
}

.ops-request-popup-content .ops-sla-progress-track i {
  display: block !important;
  height: 100% !important;
  min-width: 3px !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #ef4444 0%, #f59e0b 42%, #22c55e 100%) !important;
  transition: width 0.18s ease !important;
}

.ops-request-popup-content .ops-sla-progress-track i[data-state="danger"] {
  background: #ef4444 !important;
}

.ops-request-popup-content .ops-sla-progress-track i[data-state="warning"] {
  background: #f59e0b !important;
}

.ops-request-popup-content .ops-sla-progress-track i[data-state="overdue"] {
  width: 100% !important;
  background: repeating-linear-gradient(45deg, #ef4444 0 8px, #dc2626 8px 16px) !important;
}

.ops-request-popup-content .ops-sla-progress-track i[data-state="preview"] {
  background: #22c55e !important;
}

.ops-request-popup-content .ops-sla-edit-drawer {
  position: relative !important;
  display: inline-flex !important;
  justify-content: flex-end !important;
  min-width: 30px !important;
}

.ops-request-popup-content .ops-sla-edit-drawer summary {
  list-style: none !important;
}

.ops-request-popup-content .ops-sla-edit-drawer summary::-webkit-details-marker {
  display: none !important;
}

.ops-request-popup-content .ops-sla-edit-trigger {
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #d6deea !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  color: #9a6a00 !important;
  cursor: pointer !important;
}

.ops-request-popup-content .ops-sla-edit-trigger:hover,
.ops-request-popup-content .ops-sla-edit-drawer[open] .ops-sla-edit-trigger {
  background: #fff7d6 !important;
  border-color: #d9b321 !important;
}

.ops-request-popup-content .ops-sla-edit-trigger svg {
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.ops-request-popup-content .ops-sla-control-panel {
  display: none !important;
  background: #ffffff !important;
  padding-top: 12px !important;
}

.ops-request-popup-content .ops-sla-edit-drawer[open] .ops-sla-control-panel {
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 8px) !important;
  z-index: 100002 !important;
  display: block !important;
  width: min(360px, calc(100vw - 72px)) !important;
  padding: 14px !important;
  border: 1px solid #d6deea !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18) !important;
}

.ops-request-popup-content .ops-ai-checklist-progress-ring.is-animating,
.ops-request-popup-content .ops-live-pulse-dot,
.ops-request-popup-content .ops-overdue-alert-dot,
.ops-request-popup-content .ops-new-alert-dot {
  animation: none !important;
}

@media (max-width: 760px) {
  .ops-popup-modal-backdrop {
    padding: 10px !important;
  }

  .ops-request-popup-content {
    max-height: calc(100vh - 20px) !important;
    padding: 18px !important;
  }
}

/* Request detail SLA: top-center overlay bar, outside the form flow. */
.ops-request-popup-content>.ops-sla-modal-topbar {
  position: absolute !important;
  top: 8px !important;
  /* Elegant floating offset */
  left: 50% !important;
  z-index: 30 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: auto !important;
  /* Prevent stretching, shrink to fit contents perfectly! */
  min-width: 0 !important;
  transform: translateX(-50%) !important;
  pointer-events: auto !important;
}

.ops-request-popup-content .ops-update-form-shell>.ops-sla-control-card {
  display: none !important;
}

.ops-sla-modal-track {
  position: relative !important;
  flex: 1 1 auto !important;
  height: 8px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(203, 213, 225, 0.82) !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.12) !important;
}

.ops-sla-modal-track i {
  display: block !important;
  height: 100% !important;
  min-width: 4px !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #ef4444 0%, #f59e0b 42%, #22c55e 100%) !important;
  transition: width 0.18s ease !important;
}

.ops-sla-modal-track i[data-state="danger"] {
  background: #ef4444 !important;
}

.ops-sla-modal-track i[data-state="warning"] {
  background: #f59e0b !important;
}

.ops-sla-modal-track i[data-state="overdue"] {
  width: 100% !important;
  background: repeating-linear-gradient(45deg, #ef4444 0 8px, #dc2626 8px 16px) !important;
}

.ops-sla-modal-track i[data-state="preview"] {
  background: #22c55e !important;
}

.ops-sla-range.is-saving {
  cursor: progress !important;
  opacity: 0.62 !important;
}

.ops-sla-modal-time,
.ops-sla-modal-percent {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  color: #151922 !important;
  font-size: 0.72rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.ops-sla-modal-percent {
  display: none !important;
  color: #667085 !important;
  font-size: 0.68rem !important;
}

.ops-sla-modal-hours,
.ops-sla-modal-due {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

.ops-sla-modal-edit {
  flex: 0 0 auto !important;
  margin-left: 8px !important;
}

.ops-sla-modal-edit .ops-sla-edit-trigger {
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.12) !important;
}

.ops-sla-modal-edit[open] .ops-sla-control-panel {
  right: 0 !important;
  top: calc(100% + 10px) !important;
}

@media (max-width: 760px) {
  .ops-request-popup-content>.ops-sla-modal-topbar {
    top: 10px !important;
    width: calc(100% - 76px) !important;
    min-width: 0 !important;
  }
}

.ops-sla-approval-popover {
  position: fixed !important;
  top: var(--ops-sla-approval-top, 72px) !important;
  left: var(--ops-sla-approval-left, 50%) !important;
  z-index: 100005 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  width: min(var(--ops-sla-approval-width, 720px), calc(100vw - 32px)) !important;
  margin: 0 !important;
  padding: 14px 24px !important;
  transform: translateX(-50%) !important;
  border: 1px solid #d6deea !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: #151922 !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

.ops-sla-approval-popover:focus {
  outline: none !important;
}

.ops-sla-approval-popover .ops-sla-approval-warning-icon {
  width: 36px !important;
  height: 36px !important;
  border: 1px solid #e5c33d !important;
  border-radius: 12px !important;
  background: #fff7d6 !important;
  color: #9a6a00 !important;
  box-shadow: none !important;
}

.ops-sla-approval-popover .ops-sla-approval-warning-copy strong {
  color: #151922 !important;
}

.ops-sla-approval-popover .ops-sla-approval-warning-copy p {
  color: #667085 !important;
}

.ops-sla-approval-popover .ops-sla-approval-warning-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.ops-sla-approval-popover .ops-sla-approval-warning-actions button {
  min-height: 36px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.ops-sla-approval-popover .ops-sla-approval-cancel {
  border-color: #d6deea !important;
  background: #f5f7fb !important;
  color: #344054 !important;
}

.ops-sla-approval-popover .ops-sla-approval-send {
  border-color: #e0ac00 !important;
  background: #f5bd05 !important;
  color: #151922 !important;
}

.ops-sla-approval-popover .ops-sla-approval-cancel:hover {
  background: #eef2f7 !important;
}

.ops-sla-approval-popover .ops-sla-approval-send:hover {
  background: #ffd33a !important;
}

@media (max-width: 760px) {
  .ops-sla-approval-popover {
    grid-template-columns: auto minmax(0, 1fr) !important;
    width: calc(100vw - 28px) !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  .ops-sla-approval-popover .ops-sla-approval-warning-actions {
    grid-column: 1 / -1 !important;
    justify-content: stretch !important;
  }

  .ops-sla-approval-popover .ops-sla-approval-warning-actions button {
    flex: 1 1 0 !important;
  }
}

/* Striking Noticeable Brand-Blue Hover Highlight with Micro-animations */
.customer-task-card.is-collapsible {
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.customer-task-card.is-collapsible:hover {
  transform: translateY(-4px) !important;
  border-color: #0284c7 !important;
  box-shadow: 0 16px 36px rgba(2, 132, 199, 0.18), 0 0 0 1px rgba(2, 132, 199, 0.15) !important;
  background: linear-gradient(180deg, #ffffff, #f0f8ff) !important;
}

.customer-task-card.is-collapsible:hover .customer-task-toggle {
  background: transparent !important;
  border-color: transparent !important;
}

.customer-task-card.is-collapsible:hover h3 {
  color: #0284c7 !important;
  transition: color 0.2s ease !important;
}

.customer-task-card.is-collapsible:hover .customer-stage-preview span i {
  transform: scale(1.22) !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12) !important;
}

/* Premium Left Sidebar Badge Pulsing Animations */
@keyframes pulseSideBadgePink {
  0% {
    background-color: rgba(225, 29, 107, 0.2);
    border-color: rgba(225, 29, 107, 0.4);
    box-shadow: 0 0 0 0 rgba(225, 29, 107, 0);
  }

  50% {
    background-color: rgba(225, 29, 107, 0.8);
    border-color: rgba(225, 29, 107, 0.95);
    box-shadow: 0 0 5px 1px rgba(225, 29, 107, 0.3);
  }

  100% {
    background-color: rgba(225, 29, 107, 0.2);
    border-color: rgba(225, 29, 107, 0.4);
    box-shadow: 0 0 0 0 rgba(225, 29, 107, 0);
  }
}

.pulse-badge-pink {
  animation: pulseSideBadgePink 1.8s infinite ease-in-out !important;
  color: #ffffff !important;
}

@keyframes pulseSideBadgeBlue {
  0% {
    background-color: rgba(96, 165, 250, 0.2);
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 0 rgba(96, 165, 250, 0);
  }

  50% {
    background-color: rgba(96, 165, 250, 0.8);
    border-color: rgba(96, 165, 250, 0.95);
    box-shadow: 0 0 5px 1px rgba(96, 165, 250, 0.3);
  }

  100% {
    background-color: rgba(96, 165, 250, 0.2);
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 0 rgba(96, 165, 250, 0);
  }
}

.pulse-badge-blue {
  animation: pulseSideBadgeBlue 1.8s infinite ease-in-out !important;
  color: #ffffff !important;
}

@keyframes pulseSideBadgePurple {
  0% {
    background-color: rgba(192, 132, 252, 0.18);
    border-color: rgba(192, 132, 252, 0.38);
    box-shadow: 0 0 0 0 rgba(192, 132, 252, 0);
  }

  50% {
    background-color: rgba(192, 132, 252, 0.78);
    border-color: rgba(192, 132, 252, 0.96);
    box-shadow: 0 0 6px 1px rgba(192, 132, 252, 0.34);
  }

  100% {
    background-color: rgba(192, 132, 252, 0.18);
    border-color: rgba(192, 132, 252, 0.38);
    box-shadow: 0 0 0 0 rgba(192, 132, 252, 0);
  }
}

.pulse-badge-purple {
  animation: pulseSideBadgePurple 1.8s infinite ease-in-out !important;
  color: #ffffff !important;
}

/* Premium Compact Layout for Operations Detail Modal */
.ops-request-popup-content {
  padding: 16px 20px 20px !important;
  max-height: 94vh !important;
}

.ops-request-popup-content .ops-workspace-title-block {
  padding: 12px 16px !important;
  margin-bottom: 8px !important;
}

.ops-request-popup-content .ops-request-brand-title {
  font-size: 1.05rem !important;
}

.ops-request-popup-content .premium-parsed-request-summary {
  margin-top: 6px !important;
  gap: 8px !important;
}

.ops-request-popup-content .premium-parsed-request-summary>div:first-child {
  padding: 6px 12px !important;
  gap: 8px !important;
}

.ops-request-popup-content .minimalist-request-description {
  margin-top: 8px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
}

.ops-request-popup-content .minimalist-request-description p {
  font-size: 0.8rem !important;
  line-height: 1.4 !important;
}

.ops-request-popup-content .ops-ai-checklist-inside-description {
  margin-top: 8px !important;
}

.ops-request-popup-content .ops-ai-checklist-wrapper {
  margin-top: 6px !important;
  padding: 8px 10px !important;
}

.ops-request-popup-content .ops-ai-checklist-items label {
  padding: 2px 0 !important;
}

.ops-request-popup-content .ops-ai-checklist-items label span {
  font-size: 0.8rem !important;
}

.ops-request-popup-content .ops-form-card {
  padding: 10px 14px !important;
  margin-top: 8px !important;
}

.ops-request-popup-content .ops-form-card>.ops-update-form-shell {
  padding: 10px 12px !important;
  border-radius: 12px !important;
  gap: 8px !important;
}

.ops-request-popup-content .ops-update-control-grid {
  gap: 10px !important;
  margin-bottom: 8px !important;
}

.ops-request-popup-content .ops-update-control-panel {
  padding: 8px 12px !important;
}

.ops-request-popup-content .ops-update-control-panel>label {
  font-size: 0.65rem !important;
  margin-bottom: 4px !important;
}

.ops-request-popup-content .ops-update-control-panel .ops-status-trigger,
.ops-request-popup-content .ops-update-control-panel .ops-multi-assign-drawer>summary,
.ops-request-popup-content .ops-update-control-panel>div[style*="cursor: not-allowed"] {
  padding: 6px 10px !important;
  font-size: 0.8rem !important;
}

.ops-request-popup-content .ops-update-note-box textarea {
  min-height: 52px !important;
  padding: 8px 10px !important;
  font-size: 0.85rem !important;
}

.ops-request-popup-content .ops-update-note-box>div {
  padding: 8px 10px !important;
}

.ops-request-popup-content .ops-save-button-primary:not(.ops-save-button-header) {
  margin-top: 10px !important;
  min-height: 38px !important;
  padding: 8px 16px !important;
  font-size: 0.78rem !important;
}

.ops-request-popup-content .ops-timeline-card {
  margin-top: 10px !important;
  padding: 12px 16px !important;
}

.ops-request-popup-content .ops-title-actions {
  padding: 8px !important;
  border-radius: 10px !important;
}

.ops-request-popup-content .ops-drive-table-card {
  padding: 10px 12px !important;
  margin-bottom: 10px !important;
}

.ops-request-popup-content .ops-credentials-card {
  padding: 10px 12px !important;
  margin-bottom: 10px !important;
}

/* High-Contrast Bold Slate Typography Overrides for Light Theme */
.ops-request-popup-content .premium-parsed-request-summary>div:first-child>div>div {
  color: #475569 !important;
  /* Slate gray for "TALEP ALANI" labels */
  font-weight: 750 !important;
}

.ops-request-popup-content .premium-parsed-request-summary>div:first-child>div>span {
  color: #0f172a !important;
  /* Bold black/charcoal for values */
  font-weight: 750 !important;
}

.ops-request-popup-content .minimalist-request-description>div:first-child {
  color: #b45309 !important;
  /* Deep rich amber for "TALEP AÇIKLAMASI" label */
  font-weight: 850 !important;
}

.ops-request-popup-content .minimalist-request-description p {
  color: #1e293b !important;
  /* Dark charcoal description text */
  font-weight: 650 !important;
}

.ops-request-popup-content .ops-ai-checklist>div:first-child {
  color: #475569 !important;
  /* Slate checklist label */
  font-weight: 800 !important;
}

.ops-request-popup-content .ops-ai-checklist-items label span {
  color: #1e293b !important;
  /* Dark charcoal AI checklist items */
  font-weight: 650 !important;
}

.ops-request-popup-content .ops-drive-table-card .ops-card-sec-title {
  color: #0f172a !important;
  font-weight: 800 !important;
}

.ops-request-popup-content .ops-drive-table-card table th {
  color: #475569 !important;
  font-weight: 750 !important;
}

.ops-request-popup-content .ops-drive-table-card table td {
  color: #1e293b !important;
  font-weight: 650 !important;
}

.ops-request-popup-content .ops-credentials-card .ops-card-sec-title {
  color: #0f172a !important;
  font-weight: 800 !important;
}

.ops-request-popup-content .ops-credentials-card p[style*="color: rgba(255,255,255,0.4)"] {
  color: #475569 !important;
  font-weight: 650 !important;
}

.ops-request-popup-content .ops-credentials-card ul li {
  color: #1e293b !important;
  font-weight: 700 !important;
}

.ops-request-popup-content .ops-credentials-card ul li span[style*="color: #facc15"] {
  color: #b45309 !important;
  /* Rich amber/brown for keys */
  font-weight: 750 !important;
}

.ops-request-popup-content .ops-timeline-card .ops-card-sec-title {
  color: #0f172a !important;
  font-weight: 800 !important;
}

.ops-request-popup-content .ops-timeline-card .ops-timeline-card-text,
.ops-request-popup-content .modern-timeline-item p {
  color: #1e293b !important;
  /* Bold, highly visible deep charcoal black */
  font-weight: 600 !important;
  font-size: 0.86rem !important;
}

.ops-request-popup-content .ops-timeline-card .ops-timeline-card-meta strong,
.ops-request-popup-content .modern-timeline-item-meta strong {
  color: #0f172a !important;
  /* Premium bold dark charcoal */
  font-weight: 850 !important;
}

.ops-request-popup-content .ops-timeline-card .ops-timeline-card-meta span,
.ops-request-popup-content .modern-timeline-item-meta span {
  color: #475569 !important;
  /* Elegant slate grey for date/time */
  font-weight: 650 !important;
}

/* Ensure rich legible colors for special timeline events in light theme */
.ops-request-popup-content .modern-timeline-item-meta strong[style*="#10b981"] {
  color: #059669 !important;
  /* Rich legible emerald green */
}

.ops-request-popup-content .modern-timeline-item-meta strong[style*="#38bdf8"] {
  color: #0284c7 !important;
  /* Rich legible deep sky blue */
}

.ops-request-popup-content .modern-timeline-item-meta strong[style*="#f59e0b"] {
  color: #d97706 !important;
  /* Rich legible amber orange */
}

/* Make Simge Seç button circular showing only the emoji */
.ops-request-popup-content .ops-emoji-picker-drawer summary {
  list-style: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.2s !important;
}

/* Hide the "Simge Seç" span text */
.ops-request-popup-content .ops-emoji-picker-drawer summary span:last-child {
  display: none !important;
}

/* Make custom icon display span fill the button perfectly */
.ops-request-popup-content .ops-emoji-picker-drawer summary #header-custom-icon-display {
  font-size: 1.1rem !important;
  line-height: 1 !important;
  margin: 0 !important;
  display: inline-block !important;
}

/* Also style the popover to be light-themed in CSS */
.ops-request-popup-content .ops-emoji-picker-popover {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15) !important;
}

.ops-request-popup-content .ops-emoji-picker-popover div {
  color: #475569 !important;
}

.ops-request-popup-content .ops-emoji-picker-popover .emoji-grid-btn {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

.ops-request-popup-content .ops-emoji-picker-popover button[onclick*="Kaldır"] {
  background: rgba(239, 68, 68, 0.05) !important;
  border-color: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
}

/* High-Contrast Timeline Filter Buttons for Light Theme */
.ops-request-popup-content .ops-timeline-filter-btn {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  font-weight: 700 !important;
  transition: all 0.2s ease-in-out !important;
}

.ops-request-popup-content .ops-timeline-filter-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

.ops-request-popup-content .ops-timeline-filter-btn.active {
  background: #fef08a !important;
  border-color: #eab308 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 6px rgba(234, 179, 8, 0.15) !important;
}

/* Sleek, Micro-Minimalist Centered SLA Badge */
.ops-request-popup-content>.ops-sla-modal-topbar {
  background: #ffffff !important;
  backdrop-filter: blur(12px) !important;
  border: 1.5px solid #cbd5e1 !important;
  /* Premium delicate border */
  border-radius: 999px !important;
  padding: 4px 14px !important;
  /* Perfect balanced padding */
  height: 30px !important;
  /* Elegant compact height */
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
  /* Elegant drop shadow */
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.ops-request-popup-content .ops-sla-modal-track {
  width: 120px !important;
  /* Beautiful fixed width */
  flex: 0 0 auto !important;
  height: 6px !important;
  /* Sleek, rounded progress track line */
  border: none !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  background: #e2e8f0 !important;
  overflow: hidden !important;
  border-radius: 999px !important;
}

.ops-request-popup-content .ops-sla-modal-time {
  font-size: 0.74rem !important;
  /* High legibility bold micro-text */
  font-weight: 700 !important;
  color: #1e293b !important;
  /* High-contrast slate-800 */
}

.ops-request-popup-content .ops-sla-modal-edit {
  margin-left: 4px !important;
  display: flex !important;
  align-items: center !important;
}

.ops-request-popup-content .ops-sla-modal-edit .ops-sla-edit-trigger {
  width: 20px !important;
  /* Clean trigger size */
  height: 20px !important;
  opacity: 0.75 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity 0.2s !important;
}

.ops-request-popup-content .ops-sla-modal-edit .ops-sla-edit-trigger:hover {
  opacity: 1 !important;
}

.ops-request-popup-content .ops-sla-modal-edit .ops-sla-edit-trigger svg {
  width: 14px !important;
  /* Mini clock icon */
  height: 14px !important;
}

/* Sleek custom scrollbars for the request popup modal content in Restoup brand theme */
.ops-request-popup-content::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}

.ops-request-popup-content::-webkit-scrollbar-track {
  background: #f8fafc !important;
  border-radius: 999px !important;
  border: 1px solid #e2e8f0 !important;
  margin: 16px 0 !important;
  /* Elegant inset offset to prevent track from touching card corners */
}

.ops-request-popup-content::-webkit-scrollbar-thumb {
  background: #FF6B00 !important;
  /* Restoup Accent Orange */
  border-radius: 999px !important;
  border: 2.5px solid #f8fafc !important;
  /* Premium floating gap effect */
  transition: all 0.2s ease !important;
}

.ops-request-popup-content::-webkit-scrollbar-thumb:hover {
  background: #FF8C38 !important;
  /* Restoup Accent2 Light Orange */
  cursor: pointer !important;
}

/* Also style any internal scroll containers (like timeline streams) to match */
.ops-request-popup-content .ops-timeline-stream-container::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

.ops-request-popup-content .ops-timeline-stream-container::-webkit-scrollbar-track {
  background: #f8fafc !important;
  border-radius: 999px !important;
}

.ops-request-popup-content .ops-timeline-stream-container::-webkit-scrollbar-thumb {
  background: #FF6B00 !important;
  /* Restoup Accent Orange */
  border-radius: 999px !important;
  border: 1px solid #f8fafc !important;
}

.ops-request-popup-content .ops-timeline-stream-container::-webkit-scrollbar-thumb:hover {
  background: #FF8C38 !important;
}

/* Performance guards for subscriber/customer task flows */
body.customer-task-modal-open #subscriber-cockpit-root>.customer-cockpit {
  content-visibility: hidden !important;
  contain-intrinsic-size: 1px 1px !important;
}

/* Operations update card: roomier without overflowing into the side column. */
.ops-request-popup-content .ops-form-card {
  overflow: visible !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 14px 16px !important;
}

.ops-request-popup-content .ops-form-card>.ops-update-form-shell {
  overflow: visible !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  gap: 14px !important;
  padding: 16px !important;
  border-radius: 14px !important;
}

.ops-request-popup-content .ops-update-control-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 14px !important;
  margin-bottom: 10px !important;
}

.ops-request-popup-content .ops-update-control-panel {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 14px !important;
  overflow: visible !important;
}

.ops-request-popup-content .ops-update-control-panel .ops-status-trigger,
.ops-request-popup-content .ops-update-control-panel .ops-multi-assign-drawer>summary {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.ops-request-popup-content .ops-status-dropdown,
.ops-request-popup-content .ops-multi-assign-drawer {
  z-index: 90 !important;
}

.ops-request-popup-content .ops-status-dropdown[open] {
  z-index: 140 !important;
}

.ops-request-popup-content .ops-status-menu {
  z-index: 160 !important;
  max-height: min(340px, calc(100vh - 240px)) !important;
  overflow-y: auto !important;
}

.ops-request-popup-content .ops-update-note-box textarea {
  min-height: 78px !important;
}

.ops-request-popup-content .ops-save-button-primary:not(.ops-save-button-header) {
  min-height: 42px !important;
  min-width: 230px !important;
  margin-top: 12px !important;
}

@media (max-width: 980px) {
  .ops-request-popup-content .ops-update-control-grid {
    grid-template-columns: 1fr !important;
  }
}

.customer-task-list>.customer-task-card,
.customer-notification-minimalist-row,
.customer-task-event {
  content-visibility: auto;
}

.customer-task-list>.customer-task-card {
  contain-intrinsic-size: 180px;
}

.customer-notification-minimalist-row {
  contain-intrinsic-size: 72px;
}

.customer-task-event {
  contain-intrinsic-size: 120px;
}

.customer-task-list-more,
.customer-task-event-more,
.request-attachment-more,
.customer-task-attachment-more {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px dashed rgba(100, 116, 139, 0.28);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.74);
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 800;
  text-align: center;
}

/* Subscriber request ratings */
.customer-rating-widget {
  margin: 6px 20px 16px;
  padding: 16px;
  border: 2px solid rgba(245, 158, 11, 0.65);
  border-radius: 16px;
  background: linear-gradient(180deg, #fffaf0, #ffffff);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.045);
}

.customer-rating-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.customer-rating-head span {
  display: block;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.customer-rating-head strong {
  display: block;
  margin-top: 2px;
  color: #0f172a;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0;
}

.customer-rating-head b {
  min-width: 58px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #111827;
  color: #fbbf24;
  font-size: 0.78rem;
  font-weight: 950;
  text-align: center;
}

.customer-rating-stars {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.customer-rating-stars button {
  width: 34px;
  height: 34px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  color: #cbd5e1;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}

.customer-rating-stars button:hover,
.customer-rating-stars button.active,
.customer-rating-stars button.is-hovered {
  transform: translateY(-1px);
  border-color: rgba(217, 119, 6, 0.42);
  background: #fffbeb;
  color: #d97706;
}

.customer-rating-widget textarea {
  width: 100%;
  min-height: 74px;
  resize: vertical;
  padding: 11px 12px;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px;
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 0.84rem;
  line-height: 1.45;
  outline: none;
}

body.dark-mode .customer-rating-widget textarea {
  background: #1e293b !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

.customer-rating-widget textarea:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.13);
}

.customer-rating-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.customer-rating-actions span {
  min-width: 0;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
}

.customer-rating-actions span[data-tone="error"] {
  color: #dc2626;
}

.customer-rating-actions button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 10px;
  background: #111827;
  color: #ffffff;
  padding: 9px 14px;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.customer-rating-actions button:disabled {
  opacity: 0.58;
  cursor: wait;
}

.customer-rating-widget.readonly textarea,
.customer-rating-widget.readonly button {
  display: none;
}

.customer-rating-readonly-stars {
  display: inline-flex;
  gap: 4px;
  color: #cbd5e1;
  font-size: 1.05rem;
  line-height: 1;
}

.customer-rating-readonly-stars span.active {
  color: #d97706;
}

.customer-rating-comment {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  color: #334155;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.45;
  white-space: pre-wrap;
}

.customer-task-rating-preview {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-width: 0;
  padding: 5px 8px;
  border-radius: 10px;
  border: 1px solid rgba(217, 119, 6, 0.25);
  background: #fff7ed;
  color: #b45309;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  white-space: normal;
}

.customer-task-rating-preview>span {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 0.68rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-task-rating-preview b {
  flex: 0 0 auto;
  color: #92400e;
  font-size: 0.72rem;
  font-weight: 950;
}

.customer-task-rating-preview i {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 1px;
  color: #cbd5e1;
  font-size: 0.74rem;
  font-style: normal;
  letter-spacing: 0;
}

.customer-task-rating-preview i span.active {
  color: #d97706;
}

.customer-task-rating-preview.pending {
  position: relative;
  flex-wrap: wrap;
  border-color: rgba(217, 119, 6, 0.34);
  background: #fff7ed;
  color: #9a3412;
}

.customer-task-rating-preview.pending>span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #9a3412;
}

.customer-task-rating-preview.pending>span u {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #f97316;
  box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.34);
  text-decoration: none;
  animation: customerRatingNotifyDot 1.7s ease-out infinite;
}

.customer-preview-rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.customer-preview-rating-stars button {
  width: 24px;
  height: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #ffffff;
  color: #cbd5e1;
  font-size: 0.88rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.customer-preview-rating-stars button:hover,
.customer-preview-rating-stars button.is-hovered {
  transform: translateY(-1px);
  border-color: rgba(217, 119, 6, 0.42);
  background: #fffbeb;
  color: #d97706;
}

/* Dynamic Rating Colors (Hover) */
.customer-preview-rating-stars[data-hover-score="1"] button.is-hovered {
  border-color: rgba(239, 68, 68, 0.42);
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
}

.customer-preview-rating-stars[data-hover-score="2"] button.is-hovered {
  border-color: rgba(249, 115, 22, 0.42);
  background: rgba(249, 115, 22, 0.08);
  color: #f97316;
}

.customer-preview-rating-stars[data-hover-score="3"] button.is-hovered {
  border-color: rgba(234, 179, 8, 0.42);
  background: rgba(234, 179, 8, 0.08);
  color: #eab308;
}

.customer-preview-rating-stars[data-hover-score="4"] button.is-hovered {
  border-color: rgba(132, 204, 22, 0.42);
  background: rgba(132, 204, 22, 0.08);
  color: #84cc16;
}

.customer-preview-rating-stars[data-hover-score="5"] button.is-hovered {
  border-color: rgba(34, 197, 94, 0.42);
  background: rgba(34, 197, 94, 0.08);
  color: #22c55e;
}

/* Dynamic Rating Colors (Readonly / Saved) */
.customer-rating-readonly-stars span[data-score="1"].active,
.customer-task-rating-preview.rated i span[data-score="1"].active {
  color: #ef4444;
}

.customer-rating-readonly-stars span[data-score="2"].active,
.customer-task-rating-preview.rated i span[data-score="2"].active {
  color: #f97316;
}

.customer-rating-readonly-stars span[data-score="3"].active,
.customer-task-rating-preview.rated i span[data-score="3"].active {
  color: #eab308;
}

.customer-rating-readonly-stars span[data-score="4"].active,
.customer-task-rating-preview.rated i span[data-score="4"].active {
  color: #84cc16;
}

.customer-rating-readonly-stars span[data-score="5"].active,
.customer-task-rating-preview.rated i span[data-score="5"].active {
  color: #22c55e;
}


.customer-preview-rating-stars button:disabled {
  opacity: 0.58;
  cursor: wait;
}

.customer-task-rating-preview small {
  flex-basis: 100%;
  color: #dc2626;
  font-size: 0.64rem;
  font-weight: 850;
  line-height: 1.25;
}

.customer-task-card.needs-rating-reminder .customer-task-rating-preview.attention {
  border-color: rgba(249, 115, 22, 0.74);
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  box-shadow:
    0 0 0 2px rgba(249, 115, 22, 0.12),
    0 10px 24px rgba(249, 115, 22, 0.16);
  animation: customerRatingReminderGlow 1.65s ease-in-out infinite;
  will-change: transform, border-color, box-shadow;
}

.customer-task-card.needs-rating-reminder .customer-task-rating-preview.attention::after {
  content: "Puanla";
  position: absolute;
  top: -13px;
  right: -8px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #f97316;
  color: #ffffff;
  font-size: 0.58rem;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.2px;
  box-shadow: 0 6px 14px rgba(249, 115, 22, 0.32);
  animation: customerRatingBadgePop 1.65s ease-in-out infinite;
  pointer-events: none;
}

.customer-task-card.needs-rating-reminder .customer-task-rating-preview.attention::before {
  content: "";
  position: absolute;
  inset: -5px;
  border: 2px solid rgba(249, 115, 22, 0.28);
  border-radius: 14px;
  animation: customerRatingPulseRing 1.65s ease-out infinite;
  pointer-events: none;
}

.customer-task-card.needs-rating-reminder .customer-preview-rating-stars button {
  border-color: rgba(249, 115, 22, 0.24);
  background: #ffffff;
  animation: customerRatingStarNudge 2.2s ease-in-out infinite;
}

.customer-task-card.needs-rating-reminder .customer-preview-rating-stars button:nth-child(2) {
  animation-delay: 0.08s;
}

.customer-task-card.needs-rating-reminder .customer-preview-rating-stars button:nth-child(3) {
  animation-delay: 0.16s;
}

.customer-task-card.needs-rating-reminder .customer-preview-rating-stars button:nth-child(4) {
  animation-delay: 0.24s;
}

.customer-task-card.needs-rating-reminder .customer-preview-rating-stars button:nth-child(5) {
  animation-delay: 0.32s;
}

@keyframes customerRatingReminderGlow {

  0%,
  100% {
    transform: translateZ(0);
    border-color: rgba(249, 115, 22, 0.54);
    box-shadow:
      0 0 0 2px rgba(249, 115, 22, 0.1),
      0 8px 20px rgba(249, 115, 22, 0.12);
  }

  50% {
    transform: translateY(-2px);
    border-color: rgba(249, 115, 22, 0.92);
    box-shadow:
      0 0 0 4px rgba(249, 115, 22, 0.16),
      0 14px 30px rgba(249, 115, 22, 0.24);
  }
}

@keyframes customerRatingPulseRing {
  0% {
    opacity: 0.85;
    transform: scale(0.98);
  }

  70% {
    opacity: 0;
    transform: scale(1.08);
  }

  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

@keyframes customerRatingBadgePop {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-1px) scale(1.08);
  }
}

@keyframes customerRatingNotifyDot {
  0% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.34);
  }

  70% {
    opacity: 0.66;
    transform: scale(1.08);
    box-shadow: 0 0 0 7px rgba(249, 115, 22, 0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
  }
}

@keyframes customerRatingStarNudge {

  0%,
  70%,
  100% {
    transform: translateY(0);
    color: #cbd5e1;
  }

  78% {
    transform: translateY(-2px) scale(1.08);
    color: #f97316;
    border-color: rgba(249, 115, 22, 0.55);
    background: #fff7ed;
  }
}

@media (prefers-reduced-motion: reduce) {

  .customer-task-card.needs-rating-reminder .customer-task-rating-preview.attention,
  .customer-task-card.needs-rating-reminder .customer-task-rating-preview.attention::before,
  .customer-task-card.needs-rating-reminder .customer-task-rating-preview.attention::after,
  .customer-task-card.needs-rating-reminder .customer-preview-rating-stars button,
  .customer-task-rating-preview.pending>span u {
    animation: none !important;
  }
}

/* Live chat: professional support-center redesign */
.live-chat-widget {
  width: min(420px, calc(100vw - 32px)) !important;
}

.live-chat-pro-panel {
  width: min(420px, calc(100vw - 32px)) !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  border: 1px solid rgba(226, 232, 240, 0.14) !important;
  border-top: 0 !important;
  background:
    linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(3, 7, 18, 0.98)) !important;
  box-shadow:
    0 28px 80px rgba(2, 6, 23, 0.62),
    0 0 0 1px rgba(255, 255, 255, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.live-chat-pro-panel.team-mode {
  width: min(760px, calc(100vw - 32px)) !important;
}

.live-chat-pro-panel::after {
  display: none !important;
}

.live-chat-launcher {
  min-width: min(320px, 100%) !important;
  border: 1px solid rgba(226, 232, 240, 0.14) !important;
  border-left: 0 !important;
  border-radius: 16px !important;
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.98), rgba(3, 7, 18, 0.98)) !important;
  box-shadow: 0 18px 50px rgba(2, 6, 23, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.live-chat-launcher-icon {
  border-radius: 12px !important;
  background: linear-gradient(135deg, #facc15, #f97316) !important;
}

.live-chat-launcher-copy b {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: #f8fafc !important;
  font-size: 0.9rem !important;
}

.live-chat-launcher-copy b i,
.live-chat-header-avatar i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12), 0 0 14px rgba(34, 197, 94, 0.42);
}

.live-chat-launcher-copy b i.offline,
.live-chat-header-avatar i.offline {
  background: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.12), 0 0 14px rgba(245, 158, 11, 0.38);
}

.live-chat-launcher-copy small {
  color: #94a3b8 !important;
  font-size: 0.72rem !important;
}

.live-chat-header {
  min-height: 74px !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.1) !important;
  background:
    radial-gradient(circle at top left, rgba(250, 204, 21, 0.18), transparent 34%),
    linear-gradient(135deg, #111827, #020617) !important;
}

.live-chat-header-avatar {
  position: relative !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #facc15, #f97316) !important;
  color: #111827 !important;
}

.live-chat-header-avatar i {
  position: absolute;
  right: -2px;
  bottom: -2px;
  border: 2px solid #111827;
}

.live-chat-header-copy strong {
  font-size: 1rem !important;
  color: #ffffff !important;
}

.live-chat-header-copy span {
  color: #94a3b8 !important;
  font-size: 0.76rem !important;
}

.live-chat-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(34, 197, 94, 0.2);
  background: rgba(34, 197, 94, 0.1);
  color: #86efac;
  font-size: 0.66rem;
  font-weight: 900;
  white-space: nowrap;
}

.live-chat-status-pill.offline {
  border-color: rgba(245, 158, 11, 0.22);
  background: rgba(245, 158, 11, 0.1);
  color: #fcd34d;
}

.live-chat-close {
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
}

.live-chat-body {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 0;
}

.live-chat-pro-panel.team-mode .live-chat-body {
  grid-template-columns: 260px minmax(0, 1fr);
}

.live-chat-conversation {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #050914;
}

.live-chat-thread-list {
  max-height: none !important;
  height: 464px !important;
  padding: 10px !important;
  border-right: 1px solid rgba(226, 232, 240, 0.09) !important;
  border-bottom: 0 !important;
  background: rgba(15, 23, 42, 0.72) !important;
}

.live-chat-thread-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 4px 10px;
}

.live-chat-thread-list-head strong {
  color: #f8fafc;
  font-size: 0.78rem;
  font-weight: 950;
}

.live-chat-thread-list-head span,
.live-chat-thread-more {
  color: #94a3b8;
  font-size: 0.66rem;
  font-weight: 850;
}

.live-chat-thread-item {
  border-color: rgba(226, 232, 240, 0.08) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

.live-chat-thread-item:hover,
.live-chat-thread-item.active {
  background: rgba(250, 204, 21, 0.1) !important;
  border-color: rgba(250, 204, 21, 0.26) !important;
}

.live-chat-thread-item.is-unread {
  box-shadow: inset 3px 0 0 #facc15;
}

.live-chat-thread-copy em {
  color: #64748b;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 800;
}

.live-chat-thread-more {
  padding: 8px 4px 2px;
  text-align: center;
}

.live-chat-messages {
  height: 342px !important;
  padding: 16px !important;
  background:
    radial-gradient(circle at top left, rgba(14, 165, 233, 0.08), transparent 32%),
    linear-gradient(180deg, #07101f, #050914) !important;
  contain: layout paint;
}

.live-chat-pro-panel.team-mode .live-chat-messages {
  height: 330px !important;
}

.live-chat-message {
  content-visibility: auto;
  contain-intrinsic-size: 58px;
}

.live-chat-message-bubble {
  max-width: min(82%, 330px) !important;
  border-radius: 16px 16px 16px 5px !important;
  padding: 10px 12px !important;
  background: rgba(15, 23, 42, 0.92) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.22) !important;
}

.live-chat-message.mine .live-chat-message-bubble {
  border-radius: 16px 16px 5px 16px !important;
  background: linear-gradient(135deg, #facc15, #f59e0b) !important;
  border-color: rgba(250, 204, 21, 0.42) !important;
  color: #111827 !important;
}

.live-chat-message.system .live-chat-message-bubble {
  background: rgba(30, 41, 59, 0.82) !important;
  border-style: dashed !important;
}

.live-chat-message-bubble p {
  font-size: 0.85rem !important;
  line-height: 1.48 !important;
}

.live-chat-message-bubble span {
  color: #94a3b8 !important;
  font-size: 0.64rem !important;
}

.live-chat-message.mine .live-chat-message-bubble span {
  color: rgba(17, 24, 39, 0.62) !important;
}

.live-chat-message-more {
  align-self: center;
  margin: 2px auto 6px;
  padding: 5px 9px;
  border: 1px dashed rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  color: #94a3b8;
  font-size: 0.66rem;
  font-weight: 850;
}

.live-chat-quick-replies {
  display: flex;
  gap: 7px;
  padding: 9px 10px 0;
  overflow-x: auto;
  background: #050914;
}

.live-chat-quick-replies button {
  flex: 0 0 auto;
  border: 1px solid rgba(250, 204, 21, 0.18);
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.075);
  color: #fde68a;
  padding: 7px 10px;
  font-size: 0.7rem;
  font-weight: 850;
  cursor: pointer;
}

.live-chat-quick-replies button:hover {
  background: rgba(250, 204, 21, 0.13);
  border-color: rgba(250, 204, 21, 0.32);
}

.live-chat-composer {
  padding: 10px !important;
  background: #050914 !important;
  border-top: 0 !important;
}

.live-chat-composer textarea {
  min-height: 42px !important;
  resize: none !important;
  border-radius: 14px !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  background: rgba(15, 23, 42, 0.88) !important;
  color: #f8fafc !important;
}

.live-chat-composer button {
  border-radius: 14px !important;
  background: linear-gradient(135deg, #facc15, #f97316) !important;
  color: #111827 !important;
}

@media (max-width: 780px) {

  .live-chat-pro-panel.team-mode,
  .live-chat-pro-panel {
    width: calc(100vw - 24px) !important;
  }

  .live-chat-pro-panel.team-mode .live-chat-body {
    grid-template-columns: 1fr;
  }

  .live-chat-thread-list {
    height: auto !important;
    max-height: 148px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.09) !important;
  }
}

/* Live chat: minimalist refinement */
.live-chat-pro-panel {
  width: min(400px, calc(100vw - 32px)) !important;
  border: 1px solid rgba(218, 224, 232, 0.12) !important;
  border-top: 1px solid rgba(218, 224, 232, 0.12) !important;
  border-radius: 14px !important;
  background: #101216 !important;
  color: #eef2f6 !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38) !important;
}

.live-chat-pro-panel.team-mode {
  width: min(720px, calc(100vw - 32px)) !important;
}

.live-chat-launcher {
  min-width: min(292px, 100%) !important;
  border: 1px solid rgba(218, 224, 232, 0.12) !important;
  border-left: 1px solid rgba(218, 224, 232, 0.12) !important;
  border-radius: 14px !important;
  background: #111318 !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32) !important;
}

.live-chat-launcher:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(218, 224, 232, 0.18) !important;
}

.live-chat-launcher-icon,
.live-chat-header-avatar,
.live-chat-composer button {
  background: #d9b861 !important;
  color: #15130c !important;
  box-shadow: none !important;
}

.live-chat-launcher-copy b,
.live-chat-header-copy strong,
.live-chat-thread-list-head strong {
  color: #f4f7fb !important;
}

.live-chat-launcher-copy small,
.live-chat-header-copy span,
.live-chat-thread-list-head span,
.live-chat-thread-more,
.live-chat-message-bubble span,
.live-chat-thread-copy em {
  color: #9aa4b2 !important;
}

.live-chat-launcher-copy b i,
.live-chat-header-avatar i {
  background: #31c37b !important;
  box-shadow: 0 0 0 3px rgba(49, 195, 123, 0.14) !important;
}

.live-chat-launcher-copy b i.offline,
.live-chat-header-avatar i.offline {
  background: #d9b861 !important;
  box-shadow: 0 0 0 3px rgba(217, 184, 97, 0.14) !important;
}

.live-chat-header {
  min-height: 66px !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid rgba(218, 224, 232, 0.1) !important;
  background: #111318 !important;
}

.live-chat-header-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
}

.live-chat-status-pill {
  border-color: rgba(218, 224, 232, 0.12) !important;
  background: #171a20 !important;
  color: #aee7c8 !important;
}

.live-chat-status-pill.offline {
  border-color: rgba(217, 184, 97, 0.22) !important;
  background: rgba(217, 184, 97, 0.08) !important;
  color: #e5cd8c !important;
}

.live-chat-close {
  border-color: rgba(218, 224, 232, 0.12) !important;
  background: #171a20 !important;
  color: #cbd3df !important;
}

.live-chat-hours-card {
  margin: 0 !important;
  border-color: rgba(218, 224, 232, 0.1) !important;
  border-radius: 0 !important;
  background: #14171d !important;
}

.live-chat-hours-card strong,
.live-chat-hours-card em {
  color: #e5cd8c !important;
}

.live-chat-request-actions button {
  border-color: rgba(217, 184, 97, 0.28) !important;
  background: rgba(217, 184, 97, 0.08) !important;
  color: #e5cd8c !important;
}

.live-chat-request-actions button:hover:not(:disabled) {
  background: rgba(217, 184, 97, 0.14) !important;
  border-color: rgba(217, 184, 97, 0.42) !important;
}

.live-chat-conversation,
.live-chat-messages,
.live-chat-quick-replies,
.live-chat-composer {
  background: #0c0f14 !important;
}

.live-chat-thread-list {
  height: 444px !important;
  padding: 9px !important;
  border-right-color: rgba(218, 224, 232, 0.1) !important;
  background: #0f1217 !important;
}

.live-chat-thread-item {
  border-color: transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.live-chat-thread-item:hover,
.live-chat-thread-item.active {
  border-color: rgba(218, 224, 232, 0.1) !important;
  background: #171a20 !important;
}

.live-chat-thread-item.is-unread {
  box-shadow: inset 2px 0 0 #d9b861 !important;
}

.live-chat-thread-avatar {
  background: #1c2028 !important;
  color: #e9edf4 !important;
}

.live-chat-thread-copy b {
  color: #f1f5f9 !important;
}

.live-chat-thread-copy small {
  color: #9aa4b2 !important;
}

.live-chat-messages {
  height: 336px !important;
  padding: 14px !important;
  background: #0c0f14 !important;
  scrollbar-color: rgba(154, 164, 178, 0.45) transparent;
}

.live-chat-pro-panel.team-mode .live-chat-messages {
  height: 324px !important;
}

.live-chat-message-bubble {
  border-color: rgba(218, 224, 232, 0.1) !important;
  border-radius: 14px 14px 14px 5px !important;
  background: #171b23 !important;
  box-shadow: none !important;
}

.live-chat-message.mine .live-chat-message-bubble {
  border-color: rgba(217, 184, 97, 0.28) !important;
  border-radius: 14px 14px 5px 14px !important;
  background: #e3cf91 !important;
  color: #17130b !important;
}

.live-chat-message.system .live-chat-message-bubble {
  background: #141820 !important;
  border-color: rgba(218, 224, 232, 0.12) !important;
}

.live-chat-message-bubble p {
  font-size: 0.84rem !important;
  line-height: 1.45 !important;
}

.live-chat-message.mine .live-chat-message-bubble span {
  color: rgba(23, 19, 11, 0.58) !important;
}

.live-chat-pro-panel.team-mode .live-chat-message.from-subscriber .live-chat-message-bubble {
  border-color: rgba(218, 224, 232, 0.1) !important;
  background: #171b23 !important;
  color: #eef2f6 !important;
}

.live-chat-pro-panel.team-mode .live-chat-message.from-subscriber .live-chat-message-bubble span {
  color: #9aa4b2 !important;
}

.live-chat-pro-panel.team-mode .live-chat-message.from-representative .live-chat-message-bubble,
.live-chat-pro-panel.team-mode .live-chat-message.from-system .live-chat-message-bubble {
  border-color: rgba(217, 184, 97, 0.32) !important;
  background: #e3cf91 !important;
  color: #17130b !important;
  border-style: solid !important;
}

.live-chat-pro-panel.team-mode .live-chat-message.from-representative .live-chat-message-bubble span,
.live-chat-pro-panel.team-mode .live-chat-message.from-system .live-chat-message-bubble span {
  color: rgba(23, 19, 11, 0.58) !important;
}

.live-chat-message-more {
  border-color: rgba(218, 224, 232, 0.12) !important;
  color: #9aa4b2 !important;
  background: #11151b !important;
}

.live-chat-quick-replies {
  gap: 6px !important;
  padding: 8px 10px 0 !important;
  border-top: 1px solid rgba(218, 224, 232, 0.08) !important;
}

.live-chat-quick-replies button {
  border-color: rgba(218, 224, 232, 0.12) !important;
  background: #131720 !important;
  color: #cbd3df !important;
  box-shadow: none !important;
}

.live-chat-quick-replies button:hover {
  border-color: rgba(217, 184, 97, 0.3) !important;
  background: rgba(217, 184, 97, 0.09) !important;
  color: #f1dfac !important;
}

.live-chat-composer {
  padding: 10px !important;
}

.live-chat-composer textarea {
  min-height: 42px !important;
  border-color: rgba(218, 224, 232, 0.13) !important;
  border-radius: 12px !important;
  background: #12161e !important;
  color: #eef2f6 !important;
  box-shadow: none !important;
}

.live-chat-composer textarea:focus {
  border-color: rgba(217, 184, 97, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(217, 184, 97, 0.1) !important;
}

.live-chat-composer button {
  border-radius: 12px !important;
}

.live-chat-template-drawer {
  position: relative;
  flex: 0 0 auto;
}

.live-chat-template-trigger {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid rgba(218, 224, 232, 0.13);
  border-radius: 12px;
  background: #12161e;
  color: #cbd3df;
  cursor: pointer;
  list-style: none;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.live-chat-template-trigger::-webkit-details-marker {
  display: none;
}

.live-chat-template-trigger:hover,
.live-chat-template-drawer[open] .live-chat-template-trigger {
  border-color: rgba(217, 184, 97, 0.42);
  background: rgba(217, 184, 97, 0.1);
  color: #f1dfac;
}

.live-chat-template-trigger svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.live-chat-template-trigger span {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid #0c0f14;
  border-radius: 999px;
  background: #d9b861;
  color: #15130c;
  font-size: 0.58rem;
  font-weight: 950;
  line-height: 1;
}

.live-chat-template-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  z-index: 20;
  width: min(360px, calc(100vw - 72px));
  max-height: min(360px, calc(100vh - 180px));
  padding: 10px;
  overflow-y: auto;
  border: 1px solid rgba(218, 224, 232, 0.13);
  border-radius: 14px;
  background: #101216;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
  color: #eef2f6;
}

.live-chat-template-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 2px 9px;
  border-bottom: 1px solid rgba(218, 224, 232, 0.1);
}

.live-chat-template-head strong {
  color: #f4f7fb;
  font-size: 0.74rem;
  font-weight: 900;
}

.live-chat-template-head span {
  color: #9aa4b2;
  font-size: 0.64rem;
  font-weight: 800;
  white-space: nowrap;
}

.live-chat-template-list {
  display: grid;
  gap: 7px;
  padding-top: 9px;
}

.live-chat-template-list button {
  width: 100%;
  height: auto !important;
  min-height: 44px;
  display: block;
  padding: 9px 10px;
  border: 1px solid rgba(218, 224, 232, 0.12);
  border-radius: 10px;
  background: #131720;
  color: #d8dee8;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  box-shadow: none;
}

.live-chat-template-list button:hover {
  border-color: rgba(217, 184, 97, 0.34);
  background: rgba(217, 184, 97, 0.09);
  color: #f1dfac;
}

.live-chat-widget {
  contain: layout style;
}

.live-chat-pro-panel {
  will-change: transform, opacity;
}

.live-chat-messages,
.live-chat-thread-list,
.live-chat-template-menu {
  overscroll-behavior: contain;
}

.live-chat-template-menu {
  transform-origin: bottom left;
  animation: liveChatTemplateMenuIn 0.14s ease-out;
}

@keyframes liveChatTemplateMenuIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {

  .live-chat-template-menu,
  .live-chat-typing-dots i {
    animation: none !important;
  }

  .live-chat-template-trigger,
  .live-chat-template-list button,
  .live-chat-composer textarea,
  .live-chat-composer button {
    transition: none !important;
  }
}

@media (max-width: 780px) {

  .live-chat-pro-panel.team-mode,
  .live-chat-pro-panel {
    width: calc(100vw - 24px) !important;
  }

  .live-chat-thread-list {
    max-height: 132px !important;
    border-bottom-color: rgba(218, 224, 232, 0.1) !important;
  }
}

/* Detailed overview analytics */
.overview-analytics-shell {
  margin: 0 0 24px;
  min-width: 0;
}

body.role-user #panel-overview:has(.overview-personal-fullscreen) {
  min-height: 100vh;
}

body.role-user:has(#panel-overview.active .overview-personal-fullscreen) .top-status-row,
body.role-user:has(#panel-overview.active .overview-personal-fullscreen) .topbar {
  display: none !important;
}

body.role-user:has(#panel-overview.active .overview-personal-fullscreen) .main-content {
  padding: 0 !important;
  overflow: hidden;
}

body.role-user:has(#panel-overview.active .overview-personal-fullscreen) .panels-wrapper {
  padding: 0 !important;
  overflow: hidden;
}

body.role-user .overview-personal-fullscreen {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  overflow: auto;
}

body.role-user .overview-personal-fullscreen .overview-analytics {
  min-height: 100vh;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  padding: 24px;
  box-shadow: none;
}

.overview-analytics,
.overview-analytics *,
.overview-analytics *::before,
.overview-analytics *::after {
  box-sizing: border-box;
}

.overview-analytics {
  display: grid;
  gap: 18px;
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.82), rgba(17, 24, 39, 0.58)),
    rgba(255, 255, 255, 0.015);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
  contain: layout style;
}

.overview-analytics-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
}

.overview-analytics-head>div:first-child {
  min-width: 0;
}

.overview-analytics-head span,
.overview-card-title span,
.overview-reps-title span,
.overview-kpi-card span,
.overview-health-grid span,
.overview-rep-metrics span,
.overview-rep-foot span,
.overview-progress-line span,
.overview-rating-row span {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.overview-analytics-head h3 {
  margin: 3px 0 5px;
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.12rem, 1.8vw, 1.45rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: 0;
}

.overview-analytics-head p {
  max-width: 720px;
  margin: 0;
  color: rgba(226, 232, 240, 0.68);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.overview-scope-badge {
  flex: 0 0 auto;
  min-width: 108px;
  padding: 10px 13px;
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 12px;
  background: rgba(96, 165, 250, 0.08);
  text-align: right;
}

.overview-scope-badge strong {
  display: block;
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 950;
  line-height: 1;
}

.overview-scope-badge span {
  display: block;
  margin-top: 3px;
  color: rgba(191, 219, 254, 0.82);
  font-size: 0.64rem;
  font-weight: 850;
  text-transform: uppercase;
}

.overview-analytics-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.overview-kpi-card[data-tone="cyan"] {
  --tone-color: #06b6d4;
}

.overview-subscriber-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  margin-top: 4px;
}

.overview-sub-bar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  min-width: 0;
}

.overview-sub-bar-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.overview-sub-bar-icon.green {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}

.overview-sub-bar-icon.amber {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

.overview-sub-bar-icon.red {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.overview-sub-bar-icon.slate {
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
}

.overview-sub-bar-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.overview-sub-bar-info strong {
  font-size: 1.15rem;
  font-weight: 900;
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  line-height: 1;
}

.overview-sub-bar-info span {
  font-size: 0.68rem;
  color: var(--text2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overview-sub-bar-mrr {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 4px 10px;
  background: rgba(34, 197, 94, 0.07);
  border: 1px solid rgba(34, 197, 94, 0.15);
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #22c55e;
  white-space: nowrap;
  flex-shrink: 0;
}

.overview-section-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 2px;
}

.overview-section-divider::before,
.overview-section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
}

.overview-section-divider span {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
}

.overview-kpi-card,
.overview-analytics-card,
.overview-rep-card {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.055);
  background: rgba(255, 255, 255, 0.025);
}

.overview-kpi-card {
  --tone-color: #60a5fa;
  display: grid;
  gap: 5px;
  min-height: 92px;
  padding: 13px 14px;
  border-left: 3px solid var(--tone-color);
  border-radius: 12px;
}

.overview-kpi-card[data-tone="green"] {
  --tone-color: #22c55e;
}

.overview-kpi-card[data-tone="danger"] {
  --tone-color: #ef4444;
}

.overview-kpi-card[data-tone="warning"] {
  --tone-color: #f59e0b;
}

.overview-kpi-card[data-tone="amber"] {
  --tone-color: #fbbf24;
}

.overview-kpi-card[data-tone="teal"] {
  --tone-color: #14b8a6;
}

.overview-kpi-card[data-tone="violet"] {
  --tone-color: #c084fc;
}

.overview-kpi-card strong {
  min-width: 0;
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-size: 1.32rem;
  font-weight: 950;
  line-height: 1;
  overflow-wrap: anywhere;
}

.overview-kpi-card small {
  min-width: 0;
  color: rgba(226, 232, 240, 0.62);
  font-size: 0.68rem;
  font-weight: 750;
  line-height: 1.32;
  overflow-wrap: anywhere;
}

.overview-analytics-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 12px;
  min-width: 0;
}

.overview-analytics-card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 15px;
  border-radius: 14px;
}

.overview-card-title,
.overview-reps-title,
.overview-progress-line>div,
.overview-rating-row,
.overview-rep-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.overview-card-title b,
.overview-reps-title b {
  flex: 0 0 auto;
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 900;
  white-space: nowrap;
}

.overview-status-stack {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.overview-status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  min-width: 0;
}

.overview-status-row div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.overview-status-row div i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
}

.overview-status-row div span {
  min-width: 0;
  overflow: hidden;
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-status-row b {
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 900;
  white-space: nowrap;
}

.overview-status-row b small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.66rem;
}

.overview-status-row em,
.overview-progress-line i,
.overview-rating-row i {
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
}

.overview-status-row em {
  grid-column: 1 / -1;
  height: 6px;
}

.overview-status-row em u,
.overview-progress-line i u,
.overview-rating-row i u {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.overview-health-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.overview-health-grid div {
  --health-color: #60a5fa;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}

.overview-health-grid div[data-tone="danger"] {
  --health-color: #ef4444;
}

.overview-health-grid div[data-tone="warning"] {
  --health-color: #f59e0b;
}

.overview-health-grid div[data-tone="violet"] {
  --health-color: #c084fc;
}

.overview-health-grid div[data-tone="green"] {
  --health-color: #22c55e;
}

.overview-health-grid strong {
  min-width: 0;
  color: var(--health-color);
  font-family: 'Outfit', sans-serif;
  font-size: 1.02rem;
  font-weight: 950;
  line-height: 1;
  overflow-wrap: anywhere;
}

.overview-progress-line {
  --progress-color: #22c55e;
  display: grid;
  gap: 7px;
  min-width: 0;
}

.overview-progress-line[data-tone="danger"] {
  --progress-color: #ef4444;
}

.overview-progress-line[data-tone="warning"] {
  --progress-color: #f59e0b;
}

.overview-progress-line[data-tone="amber"] {
  --progress-color: #fbbf24;
}

.overview-progress-line[data-tone="blue"] {
  --progress-color: #60a5fa;
}

.overview-progress-line[data-tone="violet"] {
  --progress-color: #c084fc;
}

.overview-progress-line b {
  flex: 0 0 auto;
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 900;
  white-space: nowrap;
}

.overview-progress-line i {
  height: 6px;
}

.overview-progress-line i u {
  background: linear-gradient(90deg, var(--progress-color), rgba(255, 255, 255, 0.8));
}

.overview-rating-summary {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.overview-rating-summary strong {
  color: #fbbf24;
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 950;
  line-height: 1;
}

.overview-rating-summary small {
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.78rem;
}

.overview-rating-summary span {
  color: rgba(226, 232, 240, 0.62);
  font-size: 0.7rem;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.overview-rating-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 24px;
  margin-top: 7px;
}

.overview-rating-row span {
  text-transform: none;
}

.overview-rating-row i {
  height: 6px;
}

.overview-rating-row i u {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.overview-rating-row b {
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
  text-align: right;
}

.overview-reps-section {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.overview-rep-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.overview-rep-grid.single {
  grid-template-columns: minmax(0, 1fr);
}

.overview-rep-card {
  display: grid;
  gap: 13px;
  min-width: 0;
  padding: 15px;
  border-color: var(--rep-border);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--rep-soft), rgba(255, 255, 255, 0.018));
}

.overview-rep-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.overview-rep-avatar {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--rep-color);
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 950;
}

.overview-rep-head div:not(.overview-rep-avatar) {
  min-width: 0;
}

.overview-rep-head strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-rep-head span {
  display: block;
  min-width: 0;
  margin-top: 2px;
  overflow: hidden;
  color: rgba(226, 232, 240, 0.62);
  font-size: 0.68rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-rep-head b {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: #86efac;
  font-size: 0.64rem;
  font-weight: 900;
  white-space: nowrap;
}

.overview-rep-head b[data-tone="warning"] {
  background: rgba(245, 158, 11, 0.14);
  color: #fcd34d;
}

.overview-rep-head b[data-tone="danger"] {
  background: rgba(239, 68, 68, 0.14);
  color: #fca5a5;
}

.overview-rep-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
}

.overview-rep-metrics div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.12);
}

.overview-rep-metrics span {
  min-width: 0;
  overflow: hidden;
  font-size: 0.58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-rep-metrics b {
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 950;
  line-height: 1;
}

.overview-rep-segments {
  display: flex;
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.065);
}

.overview-rep-segments i {
  display: block;
  height: 100%;
}

.overview-rep-detail-grid {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.overview-rep-foot {
  align-items: flex-start;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.overview-rep-foot span {
  min-width: 0;
  color: rgba(226, 232, 240, 0.62);
  font-size: 0.66rem;
  line-height: 1.35;
  text-transform: none;
  overflow-wrap: anywhere;
}

.overview-empty-state {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.018);
}

.overview-empty-state.wide {
  grid-column: 1 / -1;
}

.overview-empty-state strong {
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 900;
}

.overview-empty-state span {
  color: rgba(226, 232, 240, 0.62);
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.35;
}

@media (max-width: 1240px) {

  .overview-analytics-kpis,
  .overview-subscriber-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

@media (max-width: 820px) {
  .overview-analytics {
    padding: 14px;
  }

  .overview-analytics-head {
    flex-direction: column;
  }

  .overview-scope-badge {
    width: 100%;
    text-align: left;
  }

  .overview-analytics-kpis,
  .overview-subscriber-bar,
  .overview-analytics-grid,
  .overview-rep-grid,
  .overview-rep-grid.single {
    grid-template-columns: 1fr;
  }

  .overview-health-grid,
  .overview-rep-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-rep-head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .overview-rep-head b {
    grid-column: 1 / -1;
    width: max-content;
    max-width: 100%;
  }
}

/* Admin overview: full workspace between left menu and activity stream */
body.role-admin:has(#panel-overview.active .overview-admin-fullscreen) {
  --accent: #ff6b00;
  --accent-glow: rgba(255, 107, 0, 0.2);
  --restoup-orange: #ff6b00;
  --restoup-orange-2: #ff8c38;
  --restoup-magenta: #e11d6b;
  --restoup-green: #16a34a;
  --restoup-panel: #11100e;
  --restoup-panel-2: #17130f;
}

body.role-admin:has(#panel-overview.active .overview-admin-fullscreen) .main-content {
  padding: 0 !important;
  background: #080706;
}

body.role-admin:has(#panel-overview.active .overview-admin-fullscreen) .topbar,
body.role-admin:has(#panel-overview.active .overview-admin-fullscreen) .top-status-row {
  display: none !important;
}

body.role-admin:has(#panel-overview.active .overview-admin-fullscreen) .panels-wrapper {
  padding: 0 !important;
  overflow-y: auto;
  background: #080706;
}

body.role-admin:has(#panel-overview.active .overview-admin-fullscreen) #panel-overview,
body.role-admin:has(#panel-overview.active .overview-admin-fullscreen) .overview-admin-fullscreen {
  min-height: 100vh;
}

body.role-admin:has(#panel-overview.active .overview-admin-fullscreen) .sidebar {
  background:
    linear-gradient(180deg, rgba(255, 107, 0, 0.07), rgba(8, 7, 6, 0) 34%),
    #0b0907;
  border-right-color: rgba(255, 107, 0, 0.14);
}

body.role-admin:has(#panel-overview.active .overview-admin-fullscreen) .sidebar-header .logo span,
body.role-admin:has(#panel-overview.active .overview-admin-fullscreen) .sidebar-nav a.active,
body.role-admin:has(#panel-overview.active .overview-admin-fullscreen) .sidebar-nav a.active svg {
  color: var(--restoup-orange);
}

body.role-admin:has(#panel-overview.active .overview-admin-fullscreen) .sidebar-nav a.active {
  background: rgba(255, 107, 0, 0.12);
  box-shadow: inset 3px 0 0 var(--restoup-orange);
}

body.role-admin:has(#panel-overview.active .overview-admin-fullscreen) .right-activity-sidebar {
  height: 100vh !important;
  background:
    linear-gradient(180deg, rgba(225, 29, 107, 0.07), rgba(8, 7, 6, 0) 38%),
    #0d0b09 !important;
  border-left-color: rgba(255, 107, 0, 0.14) !important;
  box-shadow: -18px 0 36px rgba(0, 0, 0, 0.24);
}

body.role-admin:has(#panel-overview.active .overview-admin-fullscreen) .right-activity-sidebar h2 {
  color: #fff7ed !important;
}

body.role-admin:has(#panel-overview.active .overview-admin-fullscreen) .notifications-feed {
  background: rgba(17, 16, 14, 0.78);
  border-color: rgba(255, 107, 0, 0.1);
  border-radius: 8px;
}

.overview-admin-fullscreen {
  width: 100%;
  margin: 0;
}

.overview-admin-fullscreen .overview-admin-dashboard {
  min-height: 100vh;
  padding: 24px;
  gap: 16px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(135deg, rgba(255, 107, 0, 0.1), rgba(255, 107, 0, 0) 34%),
    linear-gradient(225deg, rgba(225, 29, 107, 0.08), rgba(225, 29, 107, 0) 36%),
    linear-gradient(180deg, #0c0a08 0%, #080706 100%);
  box-shadow: none;
}

.overview-admin-dashboard .overview-analytics-head {
  position: sticky;
  top: 0;
  z-index: 8;
  padding: 18px 20px;
  border: 1px solid rgba(255, 107, 0, 0.12);
  border-radius: 8px;
  background: rgba(17, 16, 14, 0.92);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.18);
}

.overview-admin-dashboard .overview-analytics-head>div:first-child span {
  color: rgba(255, 140, 56, 0.86);
}

.overview-admin-dashboard .overview-analytics-head h3 {
  color: #fff7ed !important;
  font-size: 1.34rem !important;
}

.overview-admin-dashboard .overview-analytics-head p {
  color: rgba(255, 247, 237, 0.68) !important;
}

.overview-head-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.overview-live-clock {
  min-width: 196px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 107, 0, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 107, 0, 0.15), rgba(225, 29, 107, 0.08)),
    rgba(8, 7, 6, 0.78);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.overview-live-clock-date {
  display: block;
  color: rgba(255, 247, 237, 0.62);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.25;
  text-transform: capitalize;
}

.overview-live-clock-time {
  display: block;
  margin-top: 2px;
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-size: 1.24rem;
  font-weight: 900;
  line-height: 1;
}

.overview-admin-dashboard .overview-filter-container {
  padding: 8px 10px;
  border: 1px solid rgba(255, 107, 0, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.overview-admin-dashboard .overview-filter-container select {
  background: rgba(8, 7, 6, 0.88) !important;
  border-color: rgba(255, 107, 0, 0.22) !important;
  border-radius: 8px !important;
}

.overview-admin-dashboard .overview-scope-badge {
  border-color: rgba(225, 29, 107, 0.22);
  border-radius: 8px;
  background: rgba(225, 29, 107, 0.1);
}

.overview-admin-dashboard .overview-scope-badge span {
  color: rgba(255, 210, 226, 0.78);
}

.overview-admin-dashboard .overview-analytics-kpis {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}

.overview-admin-dashboard .overview-subscriber-bar {
  gap: 12px;
}

.overview-admin-dashboard .overview-kpi-card,
.overview-admin-dashboard .overview-analytics-card,
.overview-admin-dashboard .overview-rep-card {
  border-color: rgba(255, 107, 0, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    rgba(17, 16, 14, 0.88);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

.overview-admin-dashboard .overview-kpi-card {
  min-height: 96px;
  border-left-width: 4px;
}

.overview-admin-dashboard .overview-kpi-card[data-tone="blue"],
.overview-admin-dashboard .overview-kpi-card[data-tone="cyan"] {
  --tone-color: var(--restoup-orange);
}

.overview-admin-dashboard .overview-kpi-card[data-tone="violet"] {
  --tone-color: var(--restoup-magenta);
}

.overview-admin-dashboard .overview-kpi-card[data-tone="teal"],
.overview-admin-dashboard .overview-kpi-card[data-tone="green"] {
  --tone-color: var(--restoup-green);
}

.overview-admin-dashboard .overview-kpi-card strong,
.overview-admin-dashboard .overview-sub-bar-info strong,
.overview-admin-dashboard .overview-card-title b,
.overview-admin-dashboard .overview-reps-title b,
.overview-admin-dashboard .overview-rep-head strong,
.overview-admin-dashboard .overview-rep-metrics b {
  color: #fff7ed;
}

.overview-admin-dashboard .overview-kpi-card span,
.overview-admin-dashboard .overview-card-title span,
.overview-admin-dashboard .overview-reps-title span,
.overview-admin-dashboard .overview-section-divider span {
  color: rgba(255, 247, 237, 0.58);
}

.overview-admin-dashboard .overview-section-divider::before,
.overview-admin-dashboard .overview-section-divider::after {
  background: linear-gradient(90deg, transparent, rgba(255, 107, 0, 0.18), transparent);
}

.overview-admin-dashboard .overview-section-divider span {
  color: rgba(255, 140, 56, 0.84);
}

.overview-admin-dashboard .overview-sub-bar-item {
  border-color: rgba(255, 107, 0, 0.09);
  border-radius: 8px;
  background: rgba(17, 16, 14, 0.76);
}

.overview-admin-dashboard .overview-sub-bar-icon.amber {
  background: rgba(255, 107, 0, 0.12);
  color: var(--restoup-orange-2);
}

.overview-admin-dashboard .overview-sub-bar-icon.slate {
  background: rgba(225, 29, 107, 0.1);
  color: #ff77a8;
}

.overview-admin-dashboard .btn-ghost {
  border-color: rgba(255, 107, 0, 0.2);
  color: #ffb36f;
  border-radius: 8px;
}

.overview-admin-dashboard .btn-ghost:hover {
  background: rgba(255, 107, 0, 0.1);
  color: #ffffff;
}

.overview-admin-dashboard .overview-two-col-layout {
  gap: 16px !important;
}

.overview-admin-dashboard .overview-rep-avatar,
.overview-admin-dashboard .funnel-bar-fill,
.overview-admin-dashboard .overview-rank-progress-fill {
  box-shadow: 0 0 16px rgba(255, 107, 0, 0.16);
}

.overview-admin-dashboard .overview-progress-line i u,
.overview-admin-dashboard .overview-rating-row i u,
.overview-admin-dashboard .ops-rating-coverage u,
.overview-admin-dashboard .rep-rating-inline u {
  background: linear-gradient(90deg, var(--restoup-orange), var(--restoup-magenta));
}

@media (max-width: 1280px) {

  .overview-admin-dashboard .overview-analytics-kpis,
  .overview-admin-dashboard .overview-subscriber-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {

  body.role-admin:has(#panel-overview.active .overview-admin-fullscreen) .topbar,
  body.role-admin:has(#panel-overview.active .overview-admin-fullscreen) .top-status-row {
    display: flex !important;
  }

  body.role-admin:has(#panel-overview.active .overview-admin-fullscreen) .panels-wrapper {
    padding: 14px !important;
  }

  .overview-admin-fullscreen .overview-admin-dashboard {
    min-height: auto;
    padding: 14px;
    border-radius: 8px;
  }

  .overview-admin-dashboard .overview-analytics-head {
    position: static;
    padding: 14px;
  }

  .overview-head-actions,
  .overview-live-clock,
  .overview-admin-dashboard .overview-filter-container {
    width: 100%;
  }

  .overview-live-clock {
    text-align: left;
  }
}

/* --- AŞAMA 13: GENEL BAKIŞ PERFORMANS KOKPİTİ --- */

.overview-rank-progress-wrapper {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.overview-rank-progress-text {
  display: flex;
  justify-content: space-between;
  font-size: 0.62rem;
  color: var(--text2);
  font-weight: 750;
}

.overview-rank-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.overview-rank-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #ff8c00);
  border-radius: 99px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Podium section removed — replaced by flat Representative Activity List */

/* CSAT Reviews Feed */
.overview-csat-feedback-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.overview-csat-feedback-item {
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.2s ease;
}

.overview-csat-feedback-item:hover {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.05);
}

.overview-csat-feedback-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.overview-csat-feedback-author {
  font-size: 0.72rem;
  font-weight: 800;
  color: #ffffff;
}

.overview-csat-feedback-stars {
  color: #fbbf24;
  font-size: 0.65rem;
  display: flex;
  gap: 2px;
}

.overview-csat-feedback-body {
  font-size: 0.7rem;
  color: var(--text2);
  line-height: 1.35;
  font-style: italic;
}

.overview-csat-feedback-meta {
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
}

/* Multi-Segment SLA Speed Breakdown Bar */
.overview-sla-speed-wrapper {
  margin-top: 10px;
}

.overview-sla-speed-bar {
  display: flex;
  width: 100%;
  height: 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, 0.02);
}

.overview-sla-speed-segment {
  height: 100%;
  transition: width 0.5s ease;
}

.overview-sla-speed-labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.overview-sla-speed-label-item {
  display: flex;
  flex-direction: column;
  font-size: 0.58rem;
  color: var(--text2);
  font-weight: 750;
  text-align: center;
}

.overview-sla-speed-label-item strong {
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 900;
  margin-top: 1px;
}

.overview-sla-speed-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-right: 3px;
}

/* Ekip İş Yükü Dengeleyici */
.overview-workload-balancer-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.overview-workload-item {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 12px;
}

.overview-workload-name {
  font-size: 0.72rem;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overview-workload-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.02);
  width: 100%;
}

.overview-workload-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.15);
}

.overview-workload-count {
  font-size: 0.7rem;
  font-weight: 900;
  color: #ffffff;
  text-align: right;
}

/* Star performer glow & CSAT dial removed — replaced by clean sentiment bars */

/* Overview and representative rating analytics */
.ops-rating-overview-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(251, 191, 36, 0.16);
  border-radius: 12px;
  background: rgba(251, 191, 36, 0.055);
  box-sizing: border-box;
  overflow: hidden;
}

.ops-rating-overview-card *,
.ops-rating-overview-card *::before,
.ops-rating-overview-card *::after {
  box-sizing: border-box;
}

.ops-rating-overview-main,
.ops-rating-overview-side,
.ops-rating-coverage,
.ops-rating-top-list {
  min-width: 0;
  max-width: 100%;
}

.ops-rating-overview-main span,
.ops-rating-coverage span {
  display: block;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.66rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.ops-rating-overview-main strong {
  display: block;
  color: #fbbf24;
  font-size: 1.65rem;
  font-weight: 950;
  line-height: 1;
  margin-top: 5px;
}

.ops-rating-overview-main strong small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.78rem;
  margin-left: 2px;
}

.ops-rating-overview-main em {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.ops-rating-overview-side {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.ops-rating-coverage div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  margin-bottom: 6px;
}

.ops-rating-coverage span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-rating-coverage b {
  flex: 0 0 auto;
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 900;
  white-space: nowrap;
}

.ops-rating-coverage i,
.rep-rating-inline i,
.user-rating-detail i,
.user-rating-breakdown i {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.ops-rating-coverage u,
.rep-rating-inline u,
.user-rating-detail u,
.user-rating-breakdown u {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f59e0b, #22c55e);
}

.ops-rating-top-list {
  display: grid;
  gap: 6px;
}

.ops-rating-top-list div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 26px;
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.ops-rating-top-list div.empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.ops-rating-top-list span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.ops-rating-top-list b {
  min-width: 0;
  overflow: hidden;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-rating-top-list strong {
  min-width: 0;
  color: #fbbf24;
  font-size: 0.7rem;
  font-weight: 900;
  white-space: nowrap;
}

.ops-rating-top-list div.empty strong {
  white-space: normal;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.rep-rating-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.rep-rating-inline span {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.66rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rep-rating-inline i {
  height: 4px;
}

.user-rating-section {
  grid-column: 1 / -1;
}

.user-rating-summary-row {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.user-rating-score {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.user-rating-score strong {
  color: #fbbf24;
  font-size: 1.2rem;
  font-weight: 950;
  line-height: 1;
}

.user-rating-score span,
.user-rating-mini span {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.66rem;
  font-weight: 850;
}

.user-rating-detail {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.user-rating-stars {
  position: relative;
  width: max-content;
  max-width: 100%;
  color: rgba(255, 255, 255, 0.15);
  font-size: 0.9rem;
  letter-spacing: 0;
  line-height: 1;
}

.user-rating-stars::before {
  content: "★★★★★";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--rating-width, 0%);
  overflow: hidden;
  color: #fbbf24;
}

.user-rating-detail i {
  height: 5px;
}

.user-rating-mini {
  display: grid;
  gap: 1px;
  text-align: right;
}

.user-rating-mini b {
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 950;
}

.user-rating-breakdown {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: 9px;
}

.user-rating-breakdown div {
  display: grid;
  gap: 4px;
}

.user-rating-breakdown span {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.62rem;
  font-weight: 850;
}

.user-rating-breakdown i {
  height: 4px;
}

@media (max-width: 900px) {
  .ops-rating-overview-card {
    grid-template-columns: 1fr;
  }

  .customer-rating-actions,
  .customer-rating-head {
    align-items: stretch;
    flex-direction: column;
  }

  .customer-rating-actions button {
    width: 100%;
  }
}

/* PREMIUM LOGIN LOADER & TRANSITION */
.spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 15px 0 5px 0;
}

.spinner-circle {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(234, 179, 8, 0.1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
  filter: drop-shadow(0 0 8px rgba(234, 179, 8, 0.3));
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.pulse-text {
  margin: 0 !important;
  color: var(--accent) !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.5px;
  animation: pulseText 1.5s ease-in-out infinite;
}

@keyframes pulseText {

  0%,
  100% {
    opacity: 0.7;
    transform: scale(0.97);
  }

  50% {
    opacity: 1;
    transform: scale(1.03);
  }
}

/* AUTHENTICATION TRANSITION - FLASH PREVENTION */
body.auth-pre-checked #login-screen {
  display: none !important;
}

body.auth-pre-checked #dashboard-wrapper {
  display: flex !important;
}

/* STRICT SUBSCRIBER SCREEN ISOLATION */
body.subscriber-logged-in #panel-overview {
  display: none !important;
}

body.subscriber-logged-in #panel-subscriber-dashboard {
  display: block !important;
}





/* ==========================================================================
   PHASE 12: GENEL BAKIŞ PREMIUM DASHBOARD STYLES
   ========================================================================== */
.overview-dashboard-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: fadeInDashboard 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInDashboard {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.overview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--border);
  padding: 18px 24px;
  border-radius: 16px;
  backdrop-filter: blur(10px);
}

.overview-header-info h3 {
  font-size: 1.6rem;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  color: #ffffff;
  margin: 0 0 4px 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.overview-header-info p {
  font-size: 0.85rem;
  color: var(--text2);
  margin: 0;
}

.overview-filter-select {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition: all 0.25s ease;
  min-width: 220px;
}

.overview-filter-select:hover,
.overview-filter-select:focus {
  border-color: var(--accent);
  background: rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 12px rgba(234, 179, 8, 0.15);
}

.overview-locked-badge {
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.2);
  color: var(--accent);
  padding: 8px 16px;
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.overview-locked-badge span {
  font-size: 1rem;
}

/* KPI GRID */
.overview-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.overview-kpi-glass {
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(5px);
}

.overview-kpi-glass:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

.overview-kpi-glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--kpi-color, #3b82f6);
  border-radius: 4px 0 0 4px;
}

.overview-kpi-glass .kpi-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.overview-kpi-glass .kpi-value-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.overview-kpi-glass .kpi-value {
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.5px;
}

.overview-kpi-glass .kpi-unit {
  font-size: 0.8rem;
  color: var(--text2);
  font-weight: 600;
}

.overview-kpi-glass .kpi-subtext {
  font-size: 0.74rem;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  opacity: 0.85;
}

/* 2-COLUMN GRID */
.overview-sections-grid {
  display: grid;
  grid-template-columns: 1.4fr 1.6fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 1024px) {
  .overview-sections-grid {
    grid-template-columns: 1fr;
  }
}

.overview-section-card {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.overview-section-card h4 {
  font-size: 0.9rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border-left: 3px solid var(--accent);
  padding-left: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* GOAL CARD */
.overview-goal-card {
  display: flex;
  align-items: center;
  gap: 24px;
  background: rgba(255, 255, 255, 0.008);
  border: 1px solid rgba(255, 255, 255, 0.03);
  padding: 20px;
  border-radius: 14px;
  flex-wrap: wrap;
}

.goal-ring-container {
  position: relative;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}

.goal-ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.goal-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.goal-ring-text strong {
  font-size: 1.45rem;
  font-weight: 800;
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  line-height: 1;
}

.goal-ring-text span {
  font-size: 0.55rem;
  color: var(--text2);
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.goal-info {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.goal-info h4 {
  font-size: 0.8rem;
  font-weight: 800;
  color: #ffffff;
  border: none;
  padding: 0;
  text-transform: none;
}

.goal-info p {
  font-size: 0.78rem;
  color: var(--text2);
  margin: 0;
  line-height: 1.5;
  font-style: italic;
}

.goal-stats {
  display: flex;
  gap: 16px;
  margin-top: 6px;
}

.goal-stats div {
  font-size: 0.72rem;
  color: var(--text2);
}

.goal-stats strong {
  color: #ffffff;
  font-weight: 700;
}

/* ACTION HUB */
.action-hub-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.action-hub-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.03);
  transition: all 0.2s ease;
}

.action-hub-item:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.action-hub-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.action-badge {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.action-badge.danger {
  background-color: #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
  animation: alarmPulse 1.2s infinite alternate;
}

.action-badge.warning {
  background-color: #f59e0b;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
}

.action-badge.info {
  background-color: #3b82f6;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.6);
}

@keyframes alarmPulse {
  0% {
    transform: scale(0.8);
    opacity: 0.6;
  }

  100% {
    transform: scale(1.3);
    opacity: 1;
  }
}

.action-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.action-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.action-desc {
  font-size: 0.72rem;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.action-buttons {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.action-btn {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

.action-btn.primary {
  background: rgba(234, 179, 8, 0.15);
  border-color: rgba(234, 179, 8, 0.3);
  color: var(--accent);
}

.action-btn.primary:hover {
  background: rgba(234, 179, 8, 0.25);
  border-color: rgba(234, 179, 8, 0.45);
}

.action-btn.secondary {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.25);
  color: #22c55e;
}

.action-btn.secondary:hover {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.4);
}

.action-empty-state {
  text-align: center;
  padding: 24px;
  border: 1px dashed rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  color: var(--text2);
  font-size: 0.76rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.action-empty-state span {
  font-size: 1.5rem;
}

/* DÖNÜŞÜM HUNİSİ (ACQUISITION FUNNEL) */
.funnel-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.funnel-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.funnel-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.74rem;
  color: var(--text2);
}

.funnel-bar-label span {
  font-weight: 700;
  color: #ffffff;
}

.funnel-bar-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.funnel-bar {
  flex: 1;
  height: 28px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.funnel-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--funnel-color-start, #3b82f6) 0%, var(--funnel-color-end, #60a5fa) 100%);
  border-radius: 6px;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.funnel-conversion-rate {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--accent);
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.2);
  padding: 4px 8px;
  border-radius: 6px;
  min-width: 48px;
  text-align: center;
  font-family: 'Outfit', sans-serif;
}

.funnel-connector-arrow {
  text-align: center;
  color: rgba(255, 255, 255, 0.15);
  font-size: 0.75rem;
  margin: -10px 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.funnel-connector-arrow::before,
.funnel-connector-arrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.05);
}

.funnel-connector-arrow span {
  background: rgba(255, 255, 255, 0.02);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.6rem;
  color: var(--text2);
  font-weight: 700;
}

/* GENERAL STATUS ROW OVERWRITE */
.overview-status-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.overview-status-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.overview-status-row div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.74rem;
  color: var(--text2);
}

.overview-status-row div span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: #ffffff;
}

.overview-status-row div span i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.overview-status-row b {
  font-size: 0.74rem;
  color: #ffffff;
  font-weight: 700;
  align-self: flex-end;
}

.overview-status-row em {
  height: 5px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  overflow: hidden;
  display: block;
}

.overview-status-row em u {
  height: 100%;
  display: block;
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* HEALTH GRID */
.overview-health-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.overview-health-grid div {
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.overview-health-grid div span {
  font-size: 0.68rem;
  color: var(--text2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.overview-health-grid div strong {
  font-size: 1.3rem;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  color: #ffffff;
}

.overview-health-grid div[data-tone="danger"] {
  border-left: 2px solid #ef4444;
}

.overview-health-grid div[data-tone="warning"] {
  border-left: 2px solid #f59e0b;
}

.overview-health-grid div[data-tone="violet"] {
  border-left: 2px solid #c084fc;
}

.overview-health-grid div[data-tone="green"] {
  border-left: 2px solid #22c55e;
}

/* RATING ROW */
.overview-rating-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.overview-rating-summary strong {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--accent);
  font-family: 'Outfit', sans-serif;
  line-height: 1;
}

.overview-rating-summary strong small {
  font-size: 1rem;
  color: var(--text2);
  font-weight: 600;
}

.overview-rating-summary span {
  font-size: 0.72rem;
  color: var(--text2);
  line-height: 1.4;
}

.overview-rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  color: var(--text2);
}

.overview-rating-row span {
  width: 52px;
  text-align: right;
  font-weight: 700;
}

.overview-rating-row i {
  flex: 1;
  height: 5px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  overflow: hidden;
}

.overview-rating-row i u {
  height: 100%;
  background: var(--accent);
  display: block;
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.overview-rating-row b {
  width: 24px;
  text-align: left;
  color: #ffffff;
  font-weight: 700;
}

/* PROGRESS LINE */
.overview-progress-line {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
}

.overview-progress-line div {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text2);
}

.overview-progress-line div span {
  font-weight: 700;
  color: #ffffff;
}

.overview-progress-line i {
  height: 5px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  overflow: hidden;
}

.overview-progress-line i u {
  height: 100%;
  display: block;
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  background: var(--progress-color, #22c55e);
}

.overview-progress-line[data-tone="green"] i u {
  --progress-color: #22c55e;
}

.overview-progress-line[data-tone="amber"] i u {
  --progress-color: var(--accent);
}

.overview-progress-line[data-tone="blue"] i u {
  --progress-color: #3b82f6;
}

.overview-progress-line[data-tone="warning"] i u {
  --progress-color: #f59e0b;
}

.overview-progress-line[data-tone="danger"] i u {
  --progress-color: #ef4444;
}

/* ==========================================================================
   NEW OVERVIEW PERFORMANCE COCKPIT & GAMIFICATION STYLES
   ========================================================================== */

/* Pulse-shake animation removed — workload uses clean status badges */

/* Team Performance Matrix Table Styles */
.overview-matrix-table {
  width: 100%;
  border-collapse: collapse;
}

.overview-matrix-table th,
.overview-matrix-table td {
  padding: 12px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.overview-matrix-row {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
}

.overview-matrix-row:hover {
  background: rgba(255, 255, 255, 0.025) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* Sentiment cloud 3D tags & daily quests panel removed — replaced by flat sentiment bar & operational objectives */

/* Goal ring — clean, no glow pulse animation */
.goal-ring-svg circle:last-of-type {
  transition: stroke-dashoffset 0.8s ease-in-out;
}

/* Average Handle Time Comparative Slider */
.overview-aht-widget {
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
}

.overview-aht-slider-track {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Personal performance modal: align colors with the main admin panel, no neon glow. */
.overview-personal-fullscreen .overview-analytics {
  background:
    linear-gradient(135deg, rgba(15, 17, 21, 0.96), rgba(12, 13, 16, 0.98)),
    var(--bg2) !important;
  border-color: var(--border) !important;
  color: var(--text);
}

.overview-personal-fullscreen .overview-kpi-card,
.overview-personal-fullscreen .overview-analytics-card,
.overview-personal-fullscreen .overview-rep-card,
.overview-personal-fullscreen .overview-health-grid div,
.overview-personal-fullscreen .overview-csat-feedback-item,
.overview-personal-fullscreen .ops-rating-overview-card {
  background: rgba(255, 255, 255, 0.018) !important;
  border-color: rgba(255, 255, 255, 0.055) !important;
  box-shadow: none !important;
}

.overview-personal-fullscreen .overview-kpi-card {
  --tone-color: rgba(234, 179, 8, 0.62) !important;
  border-left-color: rgba(234, 179, 8, 0.62) !important;
}

.overview-personal-fullscreen .overview-kpi-card[data-tone="green"],
.overview-personal-fullscreen .overview-kpi-card[data-tone="teal"] {
  --tone-color: #6f7d62 !important;
}

.overview-personal-fullscreen .overview-kpi-card[data-tone="danger"] {
  --tone-color: #8a4f4f !important;
}

.overview-personal-fullscreen .overview-kpi-card[data-tone="warning"],
.overview-personal-fullscreen .overview-kpi-card[data-tone="amber"] {
  --tone-color: rgba(234, 179, 8, 0.68) !important;
}

.overview-personal-fullscreen .overview-kpi-card[data-tone="blue"],
.overview-personal-fullscreen .overview-kpi-card[data-tone="violet"] {
  --tone-color: #6d6f78 !important;
}

.overview-personal-fullscreen .overview-scope-badge,
.overview-personal-fullscreen .overview-locked-badge,
.overview-personal-fullscreen .funnel-conversion-rate {
  background: rgba(234, 179, 8, 0.075) !important;
  border-color: rgba(234, 179, 8, 0.16) !important;
  color: rgba(234, 179, 8, 0.86) !important;
}

.overview-personal-fullscreen .overview-scope-badge span {
  color: rgba(234, 179, 8, 0.72) !important;
}

.overview-personal-fullscreen .overview-health-grid div[data-tone],
.overview-personal-fullscreen .overview-rep-head b,
.overview-personal-fullscreen .overview-rep-head b[data-tone],
.overview-personal-fullscreen .overview-rep-head b[data-tone="warning"],
.overview-personal-fullscreen .overview-rep-head b[data-tone="danger"] {
  background: rgba(255, 255, 255, 0.025) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.74) !important;
}

.overview-personal-fullscreen .overview-health-grid div[data-tone="danger"] {
  border-left-color: #8a4f4f !important;
}

.overview-personal-fullscreen .overview-health-grid div[data-tone="warning"],
.overview-personal-fullscreen .overview-health-grid div[data-tone="green"],
.overview-personal-fullscreen .overview-health-grid div[data-tone="violet"] {
  border-left-color: rgba(234, 179, 8, 0.54) !important;
}

.overview-personal-fullscreen .overview-health-grid strong,
.overview-personal-fullscreen .overview-rating-summary strong,
.overview-personal-fullscreen .ops-rating-overview-main strong,
.overview-personal-fullscreen .ops-rating-top-list strong,
.overview-personal-fullscreen .overview-csat-feedback-stars {
  color: rgba(234, 179, 8, 0.86) !important;
}

.overview-personal-fullscreen .overview-status-row div i,
.overview-personal-fullscreen .overview-status-row div span i,
.overview-personal-fullscreen .overview-status-row em u,
.overview-personal-fullscreen .overview-rep-segments i,
.overview-personal-fullscreen .overview-sla-speed-segment,
.overview-personal-fullscreen .overview-workload-bar-fill {
  background: rgba(234, 179, 8, 0.58) !important;
  box-shadow: none !important;
}

.overview-personal-fullscreen .overview-progress-line i u,
.overview-personal-fullscreen .overview-rating-row i u,
.overview-personal-fullscreen .ops-rating-coverage u,
.overview-personal-fullscreen .rep-rating-inline u {
  background: rgba(234, 179, 8, 0.62) !important;
  box-shadow: none !important;
}

.overview-personal-fullscreen .funnel-bar,
.overview-personal-fullscreen .overview-status-row em,
.overview-personal-fullscreen .overview-progress-line i,
.overview-personal-fullscreen .overview-rating-row i,
.overview-personal-fullscreen .overview-rep-segments,
.overview-personal-fullscreen .overview-sla-speed-bar,
.overview-personal-fullscreen .overview-workload-bar {
  background: rgba(0, 0, 0, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.045) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28) !important;
}

.overview-personal-fullscreen .funnel-bar-fill {
  background: linear-gradient(90deg, rgba(234, 179, 8, 0.28), rgba(234, 179, 8, 0.58)) !important;
  box-shadow: none !important;
}

.overview-personal-fullscreen .overview-rep-avatar {
  background: #24272e !important;
  border: 1px solid rgba(234, 179, 8, 0.22);
  color: rgba(234, 179, 8, 0.92) !important;
  box-shadow: none !important;
}

.overview-personal-fullscreen .overview-rep-card {
  background: rgba(255, 255, 255, 0.018) !important;
}

/* RestoUp global theme */
body {
  background:
    linear-gradient(135deg, rgba(255, 107, 0, 0.07), transparent 34%),
    linear-gradient(225deg, rgba(225, 29, 107, 0.055), transparent 36%),
    var(--bg) !important;
  color: var(--text);
}

.dashboard-wrapper,
.main-content,
.topbar,
.top-status-row,
.panels-wrapper {
  background: transparent !important;
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(255, 107, 0, 0.07), transparent 34%),
    #0b0907 !important;
  border-right-color: rgba(255, 107, 0, 0.14) !important;
}

.sidebar-header .logo span,
.sidebar-nav a.active,
.sidebar-nav a.active svg,
.date-display .clock-time,
.status-summary-item:hover,
.section-header h2 {
  color: var(--accent) !important;
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
  background: rgba(255, 107, 0, 0.1) !important;
}

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

.right-activity-sidebar {
  background:
    linear-gradient(180deg, rgba(225, 29, 107, 0.07), transparent 38%),
    #0d0b09 !important;
  border-left-color: rgba(255, 107, 0, 0.14) !important;
}

.notifications-feed,
.glass-card,
.table-container,
.subscriber-hero-card,
.subscriber-panel-card,
.subscriber-platform-shell,
.subscriber-metric-card,
.request-summary-card,
.requests-list-shell,
.request-detail-section,
.request-update-card,
.request-detail-hero,
.overview-analytics,
.overview-analytics-card,
.overview-kpi-card,
.overview-rep-card,
.modal-content,
.modal,
.login-box {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    rgba(17, 16, 14, 0.9) !important;
  border-color: rgba(255, 107, 0, 0.12) !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.2) !important;
}

.btn-primary,
.header-cta,
button.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px var(--accent-glow) !important;
}

.btn-ghost,
.logout-btn,
.settings-tab-btn,
.request-filter-chip,
.subscriber-tab-btn,
.notif-filter-btn {
  border-color: rgba(255, 107, 0, 0.18) !important;
  color: rgba(255, 247, 237, 0.72) !important;
}

.btn-ghost:hover,
.logout-btn:hover,
.settings-tab-btn:hover,
.settings-tab-btn.active,
.request-filter-chip.active,
.subscriber-tab-btn.active,
.notif-filter-btn.active {
  background: rgba(255, 107, 0, 0.1) !important;
  border-color: rgba(255, 107, 0, 0.28) !important;
  color: #fff7ed !important;
}

input,
select,
textarea,
.form-control,
.settings-field input,
.settings-field textarea,
.settings-field select,
.request-field-input,
.request-search-input {
  background: rgba(8, 7, 6, 0.78) !important;
  border-color: rgba(255, 107, 0, 0.16) !important;
  color: var(--text) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.settings-field input:focus,
.settings-field textarea:focus,
.settings-field select:focus,
.request-field-input:focus {
  border-color: rgba(255, 107, 0, 0.48) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1) !important;
}

.leads-table th,
.leads-table td {
  border-color: rgba(255, 107, 0, 0.09) !important;
}

.leads-table tr:hover td,
.request-list-card:hover,
.request-list-card.active,
.subscriber-request-card:hover,
.subscriber-platform-card:hover {
  background: rgba(255, 107, 0, 0.055) !important;
}

.overview-personal-fullscreen .overview-analytics {
  background:
    linear-gradient(135deg, rgba(255, 107, 0, 0.09), transparent 34%),
    linear-gradient(225deg, rgba(225, 29, 107, 0.07), transparent 36%),
    #080706 !important;
}

.overview-personal-fullscreen .overview-analytics-head,
.overview-personal-fullscreen .overview-kpi-card,
.overview-personal-fullscreen .overview-analytics-card,
.overview-personal-fullscreen .overview-rep-card,
.overview-personal-fullscreen .overview-health-grid div,
.overview-personal-fullscreen .overview-csat-feedback-item,
.overview-personal-fullscreen .ops-rating-overview-card {
  background: rgba(17, 16, 14, 0.88) !important;
  border-color: rgba(255, 107, 0, 0.12) !important;
}

.overview-personal-fullscreen .overview-analytics-head>div:first-child span,
.overview-personal-fullscreen .overview-scope-badge span,
.overview-personal-fullscreen .overview-health-grid strong,
.overview-personal-fullscreen .overview-rating-summary strong,
.overview-personal-fullscreen .ops-rating-overview-main strong,
.overview-personal-fullscreen .ops-rating-top-list strong,
.overview-personal-fullscreen .overview-csat-feedback-stars,
.overview-personal-fullscreen .overview-rep-avatar {
  color: var(--accent) !important;
}

.overview-personal-fullscreen .overview-health-grid div[data-tone="warning"],
.overview-personal-fullscreen .overview-health-grid div[data-tone="green"],
.overview-personal-fullscreen .overview-health-grid div[data-tone="violet"] {
  border-left-color: rgba(255, 107, 0, 0.54) !important;
}

.overview-personal-fullscreen .overview-status-row div i,
.overview-personal-fullscreen .overview-status-row div span i,
.overview-personal-fullscreen .overview-status-row em u,
.overview-personal-fullscreen .overview-rep-segments i,
.overview-personal-fullscreen .overview-sla-speed-segment,
.overview-personal-fullscreen .overview-workload-bar-fill,
.overview-personal-fullscreen .overview-progress-line i u,
.overview-personal-fullscreen .overview-rating-row i u,
.overview-personal-fullscreen .ops-rating-coverage u,
.overview-personal-fullscreen .rep-rating-inline u,
.overview-personal-fullscreen .funnel-bar-fill {
  background: linear-gradient(90deg, var(--accent), var(--accent-magenta)) !important;
}

/* Subscriber CRM workspace */
.subscriber-crm-filterbar {
  display: inline-flex;
  gap: 6px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 107, 0, 0.16);
  padding: 4px;
  border-radius: 10px;
  margin-bottom: 8px;
}

.subscriber-crm-filterbar button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text2);
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
}

.subscriber-crm-filterbar button.active {
  background: rgba(255, 107, 0, 0.13);
  color: #fff7ed;
}

.subscriber-crm-row {
  cursor: pointer;
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.subscriber-crm-row:hover td {
  background: rgba(255, 107, 0, 0.05) !important;
}

.subscriber-crm-date,
.subscriber-crm-contact strong,
.subscriber-crm-customer strong {
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 850;
}

.subscriber-crm-contact {
  display: grid;
  gap: 3px;
}

.subscriber-crm-contact span,
.subscriber-crm-empty {
  color: var(--text2);
  font-size: 0.73rem;
}

.subscriber-crm-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.subscriber-crm-badge {
  display: inline-flex;
  align-items: center;
  max-width: 150px;
  padding: 2px 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.64rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subscriber-crm-badge.primary {
  border-color: rgba(255, 107, 0, 0.34);
  color: #fed7aa;
  background: rgba(255, 107, 0, 0.08);
}

.subscriber-crm-badge.muted {
  color: var(--text2);
}

.subscriber-crm-request-summary,
.subscriber-crm-risk,
.subscriber-crm-expiry {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.subscriber-crm-request-summary strong {
  color: #fff7ed;
  font-size: 1rem;
  line-height: 1;
}

.subscriber-crm-request-summary span,
.subscriber-crm-risk span {
  color: var(--text2);
  font-size: 0.68rem;
  font-weight: 800;
}

.subscriber-crm-risk strong {
  font-size: 0.74rem;
  font-weight: 900;
}

.subscriber-crm-risk.success strong {
  color: #22c55e;
}

.subscriber-crm-risk.warning strong {
  color: #f59e0b;
}

.subscriber-crm-risk.danger strong {
  color: #ef4444;
}

.subscriber-crm-expiry {
  width: 86px;
  margin: 4px auto 0;
}

.subscriber-crm-expiry>div {
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
}

.subscriber-crm-consultant {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.subscriber-crm-consultant div {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
}

.subscriber-crm-consultant span {
  font-size: 0.85rem;
  font-weight: 700;
}

.subscriber-crm-actions,
.subscriber-detail-toolbar-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}

.subscriber-crm-action,
.subscriber-detail-small-action,
.subscriber-detail-back,
.subscriber-detail-tab {
  border: 1px solid rgba(255, 107, 0, 0.2);
  background: rgba(255, 255, 255, 0.025);
  color: #fff7ed;
  border-radius: 9px;
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 850;
}

.subscriber-crm-action {
  min-width: 0;
  height: 32px;
  padding: 6px 10px;
}

.subscriber-crm-action:hover,
.subscriber-detail-small-action:hover,
.subscriber-detail-back:hover,
.subscriber-detail-tab:hover {
  border-color: rgba(255, 107, 0, 0.42);
  background: rgba(255, 107, 0, 0.1);
}

.subscriber-crm-action[data-danger="true"],
.subscriber-detail-toolbar-actions [data-danger="true"] {
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.24);
}

.subscriber-detail-page {
  min-height: calc(100vh - 120px);
}

.subscriber-detail-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.subscriber-detail-toolbar,
.subscriber-detail-card-head,
.subscriber-detail-brand-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.subscriber-detail-back {
  padding: 9px 14px;
}

.subscriber-detail-hero,
.subscriber-detail-card,
.subscriber-detail-metrics>div,
.subscriber-detail-brand-card {
  border: 1px solid rgba(255, 107, 0, 0.14);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(17, 16, 14, 0.94), rgba(11, 9, 7, 0.98));
}

.subscriber-detail-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  padding: 24px;
}

.subscriber-detail-hero span,
.subscriber-detail-card-head span,
.subscriber-detail-brand-card span,
.subscriber-detail-info-grid span {
  color: var(--text2);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.subscriber-detail-hero h2 {
  margin: 6px 0 8px;
  color: #fff7ed;
  font-size: 1.75rem;
}

.subscriber-detail-hero p {
  color: var(--text2);
  font-size: 0.9rem;
}

.subscriber-detail-hero-status {
  min-width: 160px;
  padding: 8px 12px;
  border-radius: 10px;
  text-align: right;
  background: rgba(255, 255, 255, 0.03);
}

.subscriber-detail-hero-status strong {
  display: block;
  margin-top: 4px;
  font-size: 0.86rem;
}

.subscriber-detail-hero-status.success strong {
  color: #22c55e;
}

.subscriber-detail-hero-status.warning strong {
  color: #f59e0b;
}

.subscriber-detail-hero-status.danger strong {
  color: #ef4444;
}

.subscriber-detail-metrics,
.subscriber-detail-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.subscriber-detail-metrics>div {
  padding: 16px;
}

.subscriber-detail-metrics strong {
  display: block;
  margin-top: 5px;
  color: #fff7ed;
  font-size: 1.28rem;
}

.subscriber-detail-metrics small {
  display: block;
  margin-top: 5px;
  color: var(--text2);
  font-size: 0.72rem;
}

.subscriber-detail-tabs {
  display: flex;
  gap: 8px;
  padding: 6px;
  overflow-x: auto;
  border: 1px solid rgba(255, 107, 0, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.subscriber-detail-tab {
  flex: 0 0 auto;
  padding: 9px 13px;
  color: var(--text2);
}

.subscriber-detail-tab.active {
  background: rgba(255, 107, 0, 0.12);
  color: #fff7ed;
}

.subscriber-detail-grid,
.subscriber-detail-brand-grid,
.subscriber-detail-request-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.subscriber-detail-grid.wide-right {
  grid-template-columns: 0.95fr 1.05fr;
}

.subscriber-detail-card,
.subscriber-detail-brand-card {
  padding: 18px;
}

.subscriber-detail-card h3,
.subscriber-detail-brand-card h4 {
  margin: 4px 0 0;
  color: #fff7ed;
}

.subscriber-detail-info-grid {
  margin-top: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.subscriber-detail-info-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.subscriber-detail-info-grid>div {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}

.subscriber-detail-info-grid strong {
  display: block;
  margin-top: 5px;
  overflow-wrap: anywhere;
}

.subscriber-detail-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.subscriber-detail-list-item,
.subscriber-detail-request-card,
.subscriber-detail-note {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text);
  text-align: left;
}

.subscriber-detail-list-item,
.subscriber-detail-request-card {
  cursor: pointer;
}

.subscriber-detail-list-item:hover,
.subscriber-detail-request-card:hover {
  border-color: rgba(255, 107, 0, 0.28);
  background: rgba(255, 107, 0, 0.07);
}

.subscriber-detail-list-item small,
.subscriber-detail-request-card span,
.subscriber-detail-note span {
  display: block;
  margin-top: 4px;
  color: var(--text2);
  font-size: 0.74rem;
}

.subscriber-detail-list-item em,
.subscriber-detail-request-card em {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.subscriber-detail-list-item em.success,
.subscriber-detail-request-card em.success {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
}

.subscriber-detail-list-item em.warning,
.subscriber-detail-request-card em.warning {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}

.subscriber-detail-list-item em.info,
.subscriber-detail-request-card em.info {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
}

.subscriber-detail-list-item em.muted,
.subscriber-detail-request-card em.muted {
  color: var(--text2);
  background: rgba(255, 255, 255, 0.06);
}

.subscriber-detail-brand-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.subscriber-detail-brand-pill {
  display: grid;
  gap: 3px;
  min-width: 150px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}

.subscriber-detail-brand-pill.active {
  border-color: rgba(34, 197, 94, 0.24);
}

.subscriber-detail-brand-pill span,
.subscriber-detail-brand-pill small {
  color: var(--text2);
  font-size: 0.72rem;
}

.subscriber-detail-brand-card.active {
  border-color: rgba(34, 197, 94, 0.2);
}

.subscriber-detail-brand-card.passive {
  opacity: 0.78;
}

.subscriber-detail-brand-card em {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 107, 0, 0.1);
  color: #fed7aa;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
}

.subscriber-detail-small-action.primary {
  background: linear-gradient(135deg, #ff6b00, #ff8c38);
  color: #fff;
}

.subscriber-detail-empty {
  padding: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--text2);
  font-size: 0.84rem;
}

@media (max-width: 1100px) {

  .subscriber-detail-grid,
  .subscriber-detail-grid.wide-right,
  .subscriber-detail-brand-grid,
  .subscriber-detail-request-grid,
  .subscriber-detail-metrics {
    grid-template-columns: 1fr;
  }

  .subscriber-detail-hero,
  .subscriber-detail-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .subscriber-detail-hero-status {
    text-align: left;
  }
}

@media (max-width: 760px) {

  .subscriber-crm-filterbar,
  .subscriber-crm-actions,
  .subscriber-detail-toolbar-actions {
    width: 100%;
  }

  .subscriber-crm-action,
  .subscriber-detail-toolbar-actions .subscriber-crm-action {
    flex: 1 1 calc(50% - 8px);
  }

  .subscriber-detail-info-grid,
  .subscriber-detail-info-grid.compact {
    grid-template-columns: 1fr;
  }
}

/* Subscriber CRM premium cockpit refinement */
#panel-subscribers .table-container {
  border-color: rgba(255, 107, 0, 0.12);
  background: rgba(11, 9, 7, 0.92);
}

#panel-subscribers .leads-table th {
  padding: 13px 16px !important;
  background: rgba(8, 7, 6, 0.92) !important;
  color: rgba(255, 247, 237, 0.58) !important;
  font-size: 0.72rem !important;
}

#panel-subscribers .leads-table td {
  padding: 18px 16px !important;
}

.subscriber-crm-row:hover td {
  background: rgba(255, 107, 0, 0.035) !important;
}

.subscriber-crm-date {
  white-space: nowrap;
}

.subscriber-crm-next {
  display: inline-grid;
  min-width: 124px;
  gap: 3px;
  justify-items: start;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.025);
  text-align: left;
}

.subscriber-crm-next strong {
  font-size: 0.76rem;
  font-weight: 900;
}

.subscriber-crm-next span {
  color: var(--text2);
  font-size: 0.68rem;
  font-weight: 800;
}

.subscriber-crm-next.success {
  border-color: rgba(34, 197, 94, 0.18);
}

.subscriber-crm-next.success strong {
  color: #22c55e;
}

.subscriber-crm-next.warning {
  border-color: rgba(245, 158, 11, 0.24);
}

.subscriber-crm-next.warning strong {
  color: #f59e0b;
}

.subscriber-crm-next.danger {
  border-color: rgba(239, 68, 68, 0.24);
}

.subscriber-crm-next.danger strong {
  color: #f87171;
}

.subscriber-crm-actions {
  align-items: center;
  flex-wrap: nowrap;
  overflow: visible;
}

.subscriber-crm-action[data-primary="true"] {
  background: rgba(255, 107, 0, 0.1);
  border-color: rgba(255, 107, 0, 0.32);
  color: #fff7ed;
}

.subscriber-crm-menu-wrap {
  position: relative;
  flex: 0 0 auto;
}

.subscriber-crm-menu-trigger {
  width: 34px;
  height: 32px;
  border: 1px solid rgba(255, 107, 0, 0.18);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.025);
  color: rgba(255, 247, 237, 0.78);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 1px;
}

.subscriber-crm-menu-trigger:hover,
.subscriber-crm-menu-wrap.open .subscriber-crm-menu-trigger {
  border-color: rgba(255, 107, 0, 0.42);
  background: rgba(255, 107, 0, 0.1);
  color: #fff7ed;
}

.subscriber-crm-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  display: none;
  min-width: 172px;
  padding: 8px;
  border: 1px solid rgba(255, 107, 0, 0.18);
  border-radius: 10px;
  background: rgba(13, 11, 9, 0.98);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.42);
}

.subscriber-crm-menu-wrap.open .subscriber-crm-menu {
  display: grid;
  gap: 4px;
}

.subscriber-crm-menu button {
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 247, 237, 0.82);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 850;
  text-align: left;
}

.subscriber-crm-menu button:hover {
  background: rgba(255, 107, 0, 0.1);
  color: #fff7ed;
}

.subscriber-crm-menu button[data-danger="true"] {
  color: #fca5a5;
}

.subscriber-detail-hero {
  align-items: stretch;
  padding: 20px;
}

.subscriber-detail-next-action {
  display: grid;
  align-content: center;
  gap: 6px;
  min-width: 230px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.subscriber-detail-next-action span {
  color: var(--text2);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.subscriber-detail-next-action strong {
  color: #fff7ed;
  font-size: 0.95rem;
}

.subscriber-detail-next-action small {
  color: var(--text2);
  font-size: 0.78rem;
}

.subscriber-detail-next-action button,
.subscriber-renewal-action-card button,
.subscriber-renewal-brand-footer button {
  width: fit-content;
  padding: 8px 12px;
  border: 1px solid rgba(255, 107, 0, 0.24);
  border-radius: 8px;
  background: rgba(255, 107, 0, 0.1);
  color: #fff7ed;
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 900;
}

.subscriber-detail-next-action.success {
  border-color: rgba(34, 197, 94, 0.2);
}

.subscriber-detail-next-action.warning {
  border-color: rgba(245, 158, 11, 0.26);
}

.subscriber-detail-next-action.danger {
  border-color: rgba(239, 68, 68, 0.28);
}

.subscriber-renewal-desk {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.72fr);
  gap: 14px;
  align-items: start;
}

.subscriber-renewal-main,
.subscriber-renewal-side,
.subscriber-renewal-requests,
.subscriber-renewal-notes {
  border: 1px solid rgba(255, 107, 0, 0.12);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(17, 16, 14, 0.9), rgba(10, 8, 7, 0.97));
  padding: 18px;
}

.subscriber-renewal-side {
  display: grid;
  gap: 12px;
}

.subscriber-renewal-brand-grid,
.subscriber-detail-brand-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.subscriber-renewal-brand-card {
  display: grid;
  gap: 13px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.024);
}

.subscriber-renewal-brand-card.success {
  border-color: rgba(34, 197, 94, 0.17);
}

.subscriber-renewal-brand-card.warning {
  border-color: rgba(245, 158, 11, 0.22);
}

.subscriber-renewal-brand-card.danger {
  border-color: rgba(239, 68, 68, 0.24);
}

.subscriber-renewal-brand-card.muted {
  opacity: 0.75;
}

.subscriber-renewal-brand-top,
.subscriber-renewal-brand-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.subscriber-renewal-brand-top span,
.subscriber-renewal-brand-meta span {
  color: var(--text2);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.subscriber-renewal-brand-top h4 {
  margin: 3px 0 0;
  color: #fff7ed;
  font-size: 0.85rem;
}

.subscriber-renewal-brand-top em {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 247, 237, 0.8);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 900;
}

.subscriber-renewal-brand-card.success .subscriber-renewal-brand-top em {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
}

.subscriber-renewal-brand-card.warning .subscriber-renewal-brand-top em {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}

.subscriber-renewal-brand-card.danger .subscriber-renewal-brand-top em {
  color: #f87171;
  background: rgba(239, 68, 68, 0.1);
}

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

.subscriber-renewal-brand-meta>div {
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.13);
}

.subscriber-renewal-brand-meta strong {
  display: block;
  margin-top: 4px;
  color: #fff7ed;
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.subscriber-renewal-brand-footer small {
  color: var(--text2);
  font-size: 0.74rem;
}

.subscriber-renewal-action-card {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.025);
}

.subscriber-renewal-action-card.success {
  border-color: rgba(34, 197, 94, 0.2);
}

.subscriber-renewal-action-card.warning {
  border-color: rgba(245, 158, 11, 0.25);
}

.subscriber-renewal-action-card.danger {
  border-color: rgba(239, 68, 68, 0.28);
}

.subscriber-renewal-action-card span {
  color: var(--text2);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.subscriber-renewal-action-card strong {
  color: #fff7ed;
  font-size: 1.2rem;
}

.subscriber-renewal-action-card p {
  color: var(--text2);
  font-size: 0.8rem;
}

.subscriber-renewal-action-card>div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

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

.subscriber-renewal-mini-grid div {
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.022);
}

.subscriber-renewal-mini-grid span {
  color: var(--text2);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.subscriber-renewal-mini-grid strong {
  display: block;
  margin-top: 4px;
  color: #fff7ed;
  font-size: 1.18rem;
}

@media (max-width: 1180px) {

  .subscriber-renewal-desk,
  .subscriber-renewal-brand-grid,
  .subscriber-detail-brand-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  #panel-subscribers .leads-table td {
    padding: 14px 12px !important;
  }

  .subscriber-crm-actions {
    justify-content: flex-start;
  }

  .subscriber-crm-menu {
    left: 0;
    right: auto;
  }

  .subscriber-detail-next-action {
    min-width: 0;
  }
}

/* Subscriber portfolio v2 - Stripe-like CRM density */
#panel-subscribers .table-container {
  overflow: visible;
  border-color: rgba(255, 255, 255, 0.07);
  background: rgba(8, 7, 6, 0.96);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}

#panel-subscribers .leads-table.full {
  table-layout: fixed;
  min-width: 1260px;
}

#panel-subscribers .leads-table th {
  padding: 11px 12px !important;
  border-bottom-color: rgba(255, 255, 255, 0.07) !important;
  background: rgba(9, 8, 7, 0.98) !important;
  color: rgba(255, 247, 237, 0.52) !important;
  font-size: 0.67rem !important;
  letter-spacing: 0.07em !important;
}

#panel-subscribers .leads-table td {
  padding: 13px 12px !important;
  border-bottom-color: rgba(255, 255, 255, 0.055) !important;
  vertical-align: middle;
}

#panel-subscribers .leads-table th:nth-child(1) {
  width: 40px;
}

#panel-subscribers .leads-table th:nth-child(2) {
  width: 92px;
}

#panel-subscribers .leads-table th:nth-child(3) {
  width: 180px;
}

#panel-subscribers .leads-table th:nth-child(4) {
  width: 190px;
}

#panel-subscribers .leads-table th:nth-child(5) {
  width: 92px;
}

#panel-subscribers .leads-table th:nth-child(6) {
  width: 178px;
}

#panel-subscribers .leads-table th:nth-child(7) {
  width: 132px;
}

#panel-subscribers .leads-table th:nth-child(8) {
  width: 142px;
}

#panel-subscribers .leads-table th:nth-child(9) {
  width: 122px;
}

#panel-subscribers .leads-table th:nth-child(10) {
  width: 172px;
}

.subscriber-crm-row {
  background: rgba(255, 255, 255, 0.008);
}

.subscriber-crm-row:hover td {
  background: rgba(255, 255, 255, 0.028) !important;
}

.subscriber-crm-row:focus-within td {
  background: rgba(255, 107, 0, 0.035) !important;
}

.subscriber-crm-date,
.subscriber-crm-contact strong,
.subscriber-crm-customer strong,
.subscriber-crm-consultant span {
  font-size: 0.8rem;
  letter-spacing: 0;
}

.subscriber-crm-contact span,
.subscriber-crm-empty {
  font-size: 0.69rem;
}

.subscriber-crm-badges {
  gap: 4px;
  margin-top: 5px;
}

.subscriber-crm-badge {
  max-width: 138px;
  padding: 2px 6px;
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 247, 237, 0.68);
  font-size: 0.62rem;
}

.subscriber-crm-badge.primary {
  border-color: rgba(255, 107, 0, 0.18);
  background: rgba(255, 107, 0, 0.055);
  color: rgba(255, 214, 170, 0.88);
}

.subscriber-crm-request-summary {
  justify-items: start;
  text-align: left;
}

.subscriber-crm-request-summary strong {
  font-size: 0.96rem;
}

.subscriber-crm-brand-summary {
  display: grid;
  gap: 5px;
  min-width: 0;
  text-align: left;
}

.subscriber-crm-brand-summary.detailed {
  gap: 7px;
}

.subscriber-crm-brand-duration-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.018);
}

.subscriber-crm-brand-duration-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.subscriber-crm-brand-duration-copy strong {
  overflow: hidden;
  color: #fff7ed;
  font-size: 0.68rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subscriber-crm-brand-duration-copy span {
  overflow: hidden;
  color: rgba(255, 247, 237, 0.52);
  font-size: 0.61rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subscriber-crm-brand-duration-bar {
  position: relative;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.subscriber-crm-brand-duration-bar i,
.subscriber-crm-brand-duration-bar b {
  position: absolute;
  top: 0;
  bottom: 0;
}

.subscriber-crm-brand-duration-bar i {
  left: 0;
  border-radius: inherit;
  background: #22c55e;
}

.subscriber-crm-brand-duration-bar b {
  display: none;
}

.subscriber-crm-brand-duration-bar.warning i {
  background: #f59e0b;
}

.subscriber-crm-brand-duration-bar.danger i {
  background: #ef4444;
}

.subscriber-crm-brand-duration-bar.muted i {
  background: #64748b;
}

.subscriber-crm-brand-overflow {
  position: relative;
}

.subscriber-crm-brand-overflow summary {
  width: fit-content;
  list-style: none;
  cursor: pointer;
  color: rgba(255, 247, 237, 0.58);
  font-size: 0.62rem;
  font-weight: 850;
}

.subscriber-crm-brand-overflow summary::-webkit-details-marker {
  display: none;
}

.subscriber-crm-brand-overflow>div {
  display: grid;
  gap: 7px;
  margin-top: 7px;
}

.subscriber-crm-brand-summary strong {
  color: #fff7ed;
  font-size: 0.76rem;
  font-weight: 900;
}

.subscriber-crm-brand-summary span {
  overflow: hidden;
  color: var(--text2);
  font-size: 0.66rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subscriber-crm-brand-bar {
  position: relative;
  width: 118px;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.subscriber-crm-brand-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.72), rgba(34, 197, 94, 0.92));
}

.subscriber-crm-brand-bar b {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border: 2px solid rgba(8, 7, 6, 0.98);
  border-radius: 999px;
  background: #fff7ed;
  transform: translate(-50%, -50%);
}

.subscriber-crm-brand-bar.warning i {
  background: linear-gradient(90deg, #38bdf8, #f59e0b);
}

.subscriber-crm-brand-bar.danger i {
  background: linear-gradient(90deg, #f59e0b, #ef4444);
}

.subscriber-crm-brand-bar.muted i {
  background: rgba(148, 163, 184, 0.6);
}

.subscriber-crm-next {
  min-width: 0;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.018);
}

.subscriber-crm-actions {
  justify-content: flex-end;
}

.subscriber-crm-action,
.subscriber-crm-menu-trigger {
  height: 30px;
  border-radius: 8px;
}

.subscriber-detail-toolbar {
  margin-bottom: 16px;
}

.subscriber-detail-back,
.subscriber-crm-action,
.subscriber-detail-small-action,
.subscriber-detail-tab {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.subscriber-detail-hero-compact {
  align-items: center;
  padding: 18px 20px;
  border-color: rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    radial-gradient(circle at 85% 20%, rgba(255, 107, 0, 0.08), transparent 30%);
}

.subscriber-detail-identity {
  min-width: 0;
}

.subscriber-detail-hero-compact h2 {
  margin: 4px 0 4px;
  font-size: 1.55rem;
}

.subscriber-detail-hero-compact p {
  margin: 0;
  font-size: 0.82rem;
}

.subscriber-detail-next-action {
  min-width: 210px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.14);
}

.subscriber-detail-next-action strong {
  font-size: 1rem;
}

.subscriber-detail-next-action button {
  padding: 7px 10px;
}

.subscriber-detail-metrics-compact {
  gap: 10px;
  margin: 12px 0;
}

.subscriber-detail-metrics-compact>div {
  padding: 13px 14px;
  border-color: rgba(255, 255, 255, 0.065);
  background: rgba(255, 255, 255, 0.018);
}

.subscriber-detail-metrics-compact span {
  font-size: 0.66rem;
}

.subscriber-detail-metrics-compact strong {
  font-size: 1.18rem;
}

.subscriber-detail-tabs {
  margin-bottom: 14px;
  border-color: rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.018);
}

.subscriber-detail-tab.active {
  border-color: rgba(255, 107, 0, 0.28);
  background: rgba(255, 107, 0, 0.09);
}

.subscriber-portfolio-desk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 14px;
  align-items: start;
}

.subscriber-dossier-layout {
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr) 292px;
  gap: 14px;
  align-items: start;
}

.subscriber-dossier-brand-rail,
.subscriber-dossier-workspace,
.subscriber-dossier-side section {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(17, 16, 14, 0.92), rgba(8, 7, 6, 0.96));
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
}

.subscriber-dossier-brand-rail,
.subscriber-dossier-workspace {
  padding: 14px;
}

.subscriber-dossier-rail-head,
.subscriber-dossier-workspace-head,
.subscriber-dossier-media-head,
.subscriber-dossier-file-actions,
.subscriber-dossier-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.subscriber-dossier-rail-head {
  margin-bottom: 10px;
}

.subscriber-dossier-rail-head span,
.subscriber-dossier-workspace-head span,
.subscriber-dossier-media-head span,
.subscriber-dossier-field span,
.subscriber-dossier-drive-row strong,
.subscriber-dossier-side-title {
  color: rgba(255, 247, 237, 0.54);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.subscriber-dossier-rail-head strong {
  color: #fff7ed;
  font-size: 0.8rem;
  font-weight: 900;
}

.subscriber-dossier-brand-option {
  display: grid;
  gap: 5px;
  width: 100%;
  margin-bottom: 8px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.018);
  color: #fff7ed;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.subscriber-dossier-brand-option:hover,
.subscriber-dossier-brand-option.active {
  border-color: rgba(255, 106, 0, 0.34);
  background: rgba(255, 106, 0, 0.055);
}

.subscriber-dossier-brand-kind,
.subscriber-dossier-brand-option small,
.subscriber-dossier-brand-option em {
  overflow: hidden;
  color: rgba(255, 247, 237, 0.5);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subscriber-dossier-brand-option strong {
  overflow: hidden;
  font-size: 0.84rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subscriber-dossier-brand-mini {
  position: relative;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.subscriber-dossier-brand-mini i,
.subscriber-dossier-brand-mini b {
  position: absolute;
  top: 0;
  bottom: 0;
}

.subscriber-dossier-brand-mini i {
  left: 0;
  border-radius: inherit;
  background: #22c55e;
}

.subscriber-dossier-brand-mini b {
  width: 7px;
  height: 7px;
  margin-top: -1px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #fff7ed;
}

.subscriber-dossier-add-brand,
.subscriber-dossier-primary-action,
.subscriber-dossier-media-head button,
.subscriber-dossier-action-card button {
  border: 1px solid rgba(255, 106, 0, 0.26);
  border-radius: 9px;
  background: rgba(255, 106, 0, 0.11);
  color: #fff7ed;
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 900;
  padding: 8px 10px;
}

.subscriber-dossier-add-brand {
  width: 100%;
  margin-top: 4px;
}

.subscriber-dossier-workspace-head {
  align-items: flex-start;
  margin-bottom: 14px;
}

.subscriber-dossier-workspace-head h3 {
  margin: 3px 0 3px;
  color: #fff7ed;
  font-size: 1.05rem;
  font-weight: 900;
}

.subscriber-dossier-workspace-head p,
.subscriber-dossier-media-head small,
.subscriber-dossier-drive-row small {
  margin: 0;
  color: rgba(255, 247, 237, 0.5);
  font-size: 0.72rem;
  font-weight: 700;
}

.subscriber-dossier-workspace-head nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.subscriber-dossier-workspace-head nav button {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  color: rgba(255, 247, 237, 0.66);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 850;
  padding: 7px 10px;
}

.subscriber-dossier-workspace-head nav button.active {
  border-color: rgba(255, 106, 0, 0.32);
  background: rgba(255, 106, 0, 0.12);
  color: #fff7ed;
}

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

.subscriber-dossier-field {
  display: grid;
  gap: 6px;
}

.subscriber-dossier-field.wide {
  grid-column: span 2;
}

.subscriber-dossier-field input,
.subscriber-dossier-field textarea,
.subscriber-dossier-drive-row input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.18);
  color: #fff7ed;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  outline: none;
  padding: 10px 11px;
}

.subscriber-dossier-field textarea {
  resize: vertical;
}

.subscriber-dossier-actions-row {
  justify-content: flex-end;
  margin-top: 12px;
}

.subscriber-dossier-media {
  display: grid;
  gap: 12px;
}

.subscriber-dossier-media-group {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.016);
}

.subscriber-dossier-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  gap: 10px;
}

.subscriber-dossier-file-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.16);
}

.subscriber-dossier-file-preview {
  display: grid;
  height: 104px;
  place-items: center;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}

.subscriber-dossier-file-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.subscriber-dossier-file-icon {
  color: rgba(255, 247, 237, 0.56);
  font-size: 0.74rem;
  font-weight: 900;
}

.subscriber-dossier-file-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px;
}

.subscriber-dossier-file-copy strong,
.subscriber-dossier-file-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subscriber-dossier-file-copy strong {
  color: #fff7ed;
  font-size: 0.75rem;
  font-weight: 900;
}

.subscriber-dossier-file-copy span {
  color: rgba(255, 247, 237, 0.48);
  font-size: 0.64rem;
  font-weight: 750;
}

.subscriber-dossier-file-actions {
  padding: 0 8px 8px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.subscriber-dossier-file-actions a,
.subscriber-dossier-file-actions button {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
  color: rgba(255, 247, 237, 0.76);
  cursor: pointer;
  font-size: 0.63rem;
  font-weight: 850;
  padding: 5px 7px;
  text-decoration: none;
}

.subscriber-dossier-file-actions button {
  color: #f87171;
}

.subscriber-dossier-file-empty,
.subscriber-dossier-empty {
  border: 1px dashed rgba(255, 255, 255, 0.07);
  border-radius: 9px;
  color: rgba(255, 247, 237, 0.46);
  font-size: 0.72rem;
  font-weight: 750;
  padding: 16px;
}

.subscriber-dossier-drive-list {
  display: grid;
  gap: 9px;
}

.subscriber-dossier-drive-row {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.016);
}

.subscriber-dossier-drive-row>span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.subscriber-dossier-drive-row a,
.subscriber-dossier-drive-row em {
  color: #38bdf8;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 850;
  text-decoration: none;
}

.subscriber-dossier-drive-row em {
  color: rgba(255, 247, 237, 0.4);
}

.subscriber-dossier-side {
  display: grid;
  gap: 12px;
}

.subscriber-dossier-side section {
  padding: 13px;
}

.subscriber-dossier-action-card {
  display: grid;
  gap: 7px;
}

.subscriber-dossier-action-card span {
  color: rgba(255, 247, 237, 0.5);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.subscriber-dossier-action-card strong {
  color: #fff7ed;
  font-size: 1rem;
  font-weight: 900;
}

.subscriber-dossier-action-card small {
  color: rgba(255, 247, 237, 0.56);
  font-size: 0.73rem;
  font-weight: 750;
}

.subscriber-dossier-side-section {
  display: grid;
  gap: 8px;
}

.subscriber-dossier-request-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.016);
  color: #fff7ed;
  cursor: pointer;
  padding: 9px;
  text-align: left;
}

.subscriber-dossier-request-line strong {
  overflow: hidden;
  font-size: 0.73rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subscriber-dossier-request-line span {
  align-self: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 247, 237, 0.58);
  font-size: 0.6rem;
  font-weight: 900;
  padding: 3px 7px;
}

.subscriber-dossier-note-line {
  display: grid;
  gap: 3px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.subscriber-dossier-note-line:last-child {
  border-bottom: 0;
}

.subscriber-dossier-note-line strong {
  color: #fff7ed;
  font-size: 0.74rem;
  font-weight: 850;
  line-height: 1.35;
}

.subscriber-dossier-note-line span {
  color: rgba(255, 247, 237, 0.44);
  font-size: 0.62rem;
  font-weight: 750;
}

.subscriber-portfolio-main,
.subscriber-portfolio-side,
.subscriber-portfolio-requests,
.subscriber-portfolio-notes {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(17, 16, 14, 0.92), rgba(8, 7, 6, 0.96));
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}

.subscriber-portfolio-main,
.subscriber-portfolio-side {
  padding: 16px;
}

.subscriber-portfolio-side {
  display: grid;
  gap: 10px;
}

.subscriber-portfolio-requests,
.subscriber-portfolio-notes {
  padding: 16px;
}

.subscriber-portfolio-requests {
  grid-column: 1 / 2;
}

.subscriber-portfolio-notes {
  grid-column: 2 / 3;
}

.subscriber-renewal-brand-grid,
.subscriber-detail-brand-grid {
  gap: 10px;
  margin-top: 12px;
}

.subscriber-renewal-brand-card {
  gap: 11px;
  padding: 13px;
  border-color: rgba(255, 255, 255, 0.075);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.018);
}

.subscriber-renewal-brand-card:hover {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.027);
}

.subscriber-renewal-brand-card.success {
  border-color: rgba(34, 197, 94, 0.2);
}

.subscriber-renewal-brand-card.warning {
  border-color: rgba(245, 158, 11, 0.25);
}

.subscriber-renewal-brand-card.danger {
  border-color: rgba(239, 68, 68, 0.25);
}

.subscriber-renewal-brand-top h4 {
  font-size: 0.95rem;
}

.subscriber-renewal-brand-top em {
  padding: 3px 7px;
  font-size: 0.62rem;
}

.subscriber-renewal-timeline {
  display: grid;
  gap: 6px;
  padding: 2px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.subscriber-renewal-timeline-head,
.subscriber-renewal-timeline-scale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.subscriber-renewal-timeline-head span {
  color: rgba(255, 247, 237, 0.42);
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.subscriber-renewal-timeline-head strong {
  color: #e2e8f0;
  font-size: 0.72rem;
}

.subscriber-renewal-timeline-track {
  position: relative;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
}

.subscriber-renewal-timeline-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: #22c55e;
}

.subscriber-renewal-timeline-marker {
  display: none;
}

.subscriber-renewal-timeline.warning .subscriber-renewal-timeline-fill {
  background: #f59e0b;
}

.subscriber-renewal-timeline.danger .subscriber-renewal-timeline-fill {
  background: #ef4444;
}

.subscriber-renewal-timeline.muted .subscriber-renewal-timeline-fill {
  background: rgba(148, 163, 184, 0.62);
}

.subscriber-renewal-timeline.danger .subscriber-renewal-timeline-head strong,
.subscriber-renewal-timeline.danger .subscriber-renewal-timeline-scale span:last-child {
  color: #ef4444;
}

.subscriber-renewal-timeline-scale span {
  color: rgba(255, 247, 237, 0.38);
  font-size: 0.6rem;
  font-weight: 750;
}

.subscriber-renewal-brand-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.subscriber-renewal-brand-meta>div {
  padding: 8px;
  background: rgba(255, 255, 255, 0.018);
}

.subscriber-renewal-brand-meta>div.wide {
  grid-column: span 2;
}

.subscriber-renewal-brand-meta strong {
  font-size: 0.76rem;
}

.subscriber-renewal-brand-footer {
  align-items: center;
}

.subscriber-renewal-brand-footer button,
.subscriber-renewal-action-card button {
  padding: 7px 10px;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
}

.subscriber-renewal-mini-grid {
  gap: 7px;
}

.subscriber-renewal-mini-grid div {
  padding: 10px;
  background: rgba(255, 255, 255, 0.018);
}

.subscriber-detail-list-item,
.subscriber-detail-note,
.subscriber-detail-request-card {
  background: rgba(255, 255, 255, 0.018);
}

@media (max-width: 1240px) {
  #panel-subscribers .table-container {
    overflow-x: auto;
    overflow-y: visible;
  }

  .subscriber-portfolio-desk {
    grid-template-columns: 1fr;
  }

  .subscriber-dossier-layout {
    grid-template-columns: 1fr;
  }

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

  .subscriber-portfolio-requests,
  .subscriber-portfolio-notes {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .subscriber-detail-hero-compact {
    align-items: stretch;
  }

  .subscriber-detail-metrics-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .subscriber-renewal-brand-meta>div.wide {
    grid-column: auto;
  }

  .subscriber-crm-brand-duration-item,
  .subscriber-dossier-drive-row,
  .subscriber-dossier-workspace-head {
    grid-template-columns: 1fr;
  }

  .subscriber-dossier-workspace-head {
    align-items: stretch;
    flex-direction: column;
  }

  .subscriber-dossier-form-grid,
  .subscriber-dossier-media-grid,
  .subscriber-dossier-side {
    grid-template-columns: 1fr;
  }

  .subscriber-dossier-field.wide,
  .subscriber-dossier-actions-row {
    grid-column: auto;
  }
}

/* Focused polish: subscriber management and PayTR operations */
#panel-subscribers .table-container {
  overflow-x: auto;
  overflow-y: visible;
  border-color: rgba(148, 163, 184, 0.12);
  background: rgba(9, 10, 12, 0.96);
}

#panel-subscribers .leads-table.full {
  min-width: 1320px;
  table-layout: fixed;
}

#panel-subscribers .leads-table th,
#panel-subscribers .leads-table td {
  vertical-align: middle;
}

#panel-subscribers .leads-table th:nth-child(1) {
  width: 38px;
}

#panel-subscribers .leads-table th:nth-child(2) {
  width: 96px;
}

#panel-subscribers .leads-table th:nth-child(3) {
  width: 190px;
  text-align: left !important;
}

#panel-subscribers .leads-table th:nth-child(4) {
  width: 185px;
  text-align: left !important;
}

#panel-subscribers .leads-table th:nth-child(5) {
  width: 86px;
}

#panel-subscribers .leads-table th:nth-child(6) {
  width: 238px;
  text-align: left !important;
}

#panel-subscribers .leads-table th:nth-child(7) {
  width: 126px;
}

#panel-subscribers .leads-table th:nth-child(8) {
  width: 132px;
}

#panel-subscribers .leads-table th:nth-child(9) {
  width: 118px;
}

#panel-subscribers .leads-table th:nth-child(10) {
  width: 112px;
}

#panel-subscribers .leads-table td:nth-child(3),
#panel-subscribers .leads-table td:nth-child(4),
#panel-subscribers .leads-table td:nth-child(6) {
  text-align: left !important;
}

#panel-subscribers .leads-table td:nth-child(5),
#panel-subscribers .leads-table td:nth-child(7),
#panel-subscribers .leads-table td:nth-child(8),
#panel-subscribers .leads-table td:nth-child(9),
#panel-subscribers .leads-table td:nth-child(10) {
  text-align: left !important;
}

.subscriber-crm-customer,
.subscriber-crm-contact,
.subscriber-crm-plan-card,
.subscriber-crm-next,
.subscriber-crm-consultant {
  min-width: 0;
}

.subscriber-crm-customer,
.subscriber-crm-contact {
  display: grid;
  gap: 4px;
}

/* Central system settings and payment method controls */
.settings-subtitle { margin-top: 7px; color: var(--text2); font-size: .78rem; }
.settings-subtitle.is-dirty { color: var(--accent); font-weight: 800; }
.settings-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.settings-summary-grid > div { min-width: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.025); }
.settings-summary-grid span, .settings-summary-grid small { display: block; color: var(--text2); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.settings-summary-grid strong { display: block; margin-top: 6px; color: var(--text); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-summary-grid small { margin-top: 4px; color: var(--accent); text-transform: none; letter-spacing: 0; }
.settings-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-overview-card { min-height: 210px; justify-content: space-between; }
.settings-overview-card h3 { border: 0 !important; padding: 0 !important; font-size: 1.2rem !important; }
.settings-overview-card p { margin: 0; color: var(--text2); line-height: 1.65; font-size: .86rem; }
.settings-kicker { color: var(--accent); font-size: .66rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.settings-overview-list { display: grid; gap: 8px; color: var(--text2); font-size: .76rem; }
.settings-overview-list strong { color: var(--text); margin-left: 5px; }
.settings-overview-action { align-self: flex-start; }
.settings-payment-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; padding: 20px 22px; border: 1px solid rgba(255,170,0,.22); border-radius: 14px; background: linear-gradient(135deg, rgba(255,155,0,.1), rgba(255,255,255,.025)); }
.settings-payment-intro h3 { margin: 6px 0; font-size: 1.15rem; }
.settings-payment-intro p { margin: 0; color: var(--text2); line-height: 1.55; font-size: .82rem; }
.payment-policy-badge { flex: 0 0 auto; padding: 7px 10px; border: 1px solid rgba(34,197,94,.28); border-radius: 999px; color: #86efac; background: rgba(34,197,94,.1); font-size: .68rem; font-weight: 900; white-space: nowrap; }
.payment-method-settings-root { display: grid; gap: 14px; }
.payment-method-card { display: flex; flex-direction: column; gap: 18px; padding: 22px; border: 1px solid var(--border); border-radius: 16px; background: rgba(255,255,255,.025); }
.payment-method-card.is-prepared { opacity: .78; }
.payment-method-card-head, .payment-method-identity, .payment-method-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.payment-method-identity { justify-content: flex-start; min-width: 0; }
.payment-method-identity h3 { margin: 4px 0; font-size: 1.15rem; }
.payment-method-identity p { margin: 0; color: var(--text2); font-size: .78rem; line-height: 1.45; }
.payment-method-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; border: 1px solid rgba(255,167,0,.28); border-radius: 12px; color: var(--accent); background: rgba(255,167,0,.1); font-weight: 900; }
.payment-method-status { padding: 6px 10px; border-radius: 999px; font-size: .68rem; font-weight: 900; white-space: nowrap; }
.payment-method-status.ready { color: #86efac; background: rgba(34,197,94,.12); }
.payment-method-status.paused, .payment-method-status.prepared { color: #fde68a; background: rgba(234,179,8,.12); }
.payment-method-status.error { color: #fca5a5; background: rgba(239,68,68,.12); }
.payment-method-controls { display: flex; flex-wrap: wrap; gap: 10px; }
.settings-switch { display: inline-flex; align-items: center; gap: 9px; min-height: 38px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 9px; color: var(--text2); font-size: .76rem; cursor: pointer; }
.settings-switch input { position: absolute; opacity: 0; pointer-events: none; }
.settings-switch-track, .settings-radio-dot { position: relative; display: inline-block; width: 30px; height: 17px; border-radius: 999px; background: rgba(255,255,255,.15); transition: background .18s ease; }
.settings-switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 11px; height: 11px; border-radius: 50%; background: var(--text2); transition: transform .18s ease, background .18s ease; }
.settings-switch input:checked + .settings-switch-track { background: var(--accent); }
.settings-switch input:checked + .settings-switch-track::after { transform: translateX(13px); background: #fff; }
.settings-radio-dot { width: 16px; height: 16px; background: transparent; border: 1px solid var(--text2); }
.settings-switch input:checked + .settings-radio-dot { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--bg2); background: var(--accent); }
.settings-switch input:disabled + .settings-switch-track, .settings-switch input:disabled + .settings-radio-dot { opacity: .45; }
.payment-method-form-grid { padding-top: 2px; }
.payment-installments { display: grid; gap: 9px; }
.payment-installment-list { display: flex; flex-wrap: wrap; gap: 8px; }
.payment-installment-list label { cursor: pointer; }
.payment-installment-list input { position: absolute; opacity: 0; }
.payment-installment-list span { display: inline-flex; min-height: 32px; align-items: center; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--text2); font-size: .72rem; font-weight: 800; }
.payment-installment-list input:checked + span { border-color: rgba(255,167,0,.45); color: var(--accent); background: rgba(255,167,0,.1); }
.payment-method-footer { padding-top: 12px; border-top: 1px solid var(--border); color: var(--text2); font-size: .68rem; }
.settings-loading-state { padding: 26px; border: 1px dashed var(--border); border-radius: 14px; color: var(--text2); text-align: center; }
.payment-preview-card { margin-top: 14px; }
.payment-preview-card h3 { border: 0 !important; padding: 0 !important; }
.payment-preview-card p { margin: 0; color: var(--text2); font-size: .78rem; }
.payment-preview-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.payment-preview-button { display: inline-flex; align-items: center; min-height: 42px; padding: 0 15px; border-radius: 9px; color: #fff; background: var(--accent); font-size: .78rem; font-weight: 900; }
.payment-preview-button-muted { color: var(--text2); background: rgba(255,255,255,.08); }
.payment-preview-empty { display: inline-flex; align-items: center; min-height: 42px; padding: 10px 14px; border: 1px dashed var(--border); border-radius: 9px; color: var(--text2); font-size: .78rem; }
@media (max-width: 900px) { .settings-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .settings-overview-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .settings-summary-grid { grid-template-columns: 1fr; } .settings-payment-intro, .payment-method-card-head, .payment-method-footer { align-items: flex-start; flex-direction: column; } .payment-policy-badge { align-self: flex-start; } .payment-method-controls { display: grid; } .settings-switch { width: 100%; } }

.subscriber-crm-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.subscriber-crm-title-row strong {
  min-width: 0;
  flex: 1 1 auto;
}

.subscriber-crm-report-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 4px;
  min-width: 60px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(249, 115, 22, 0.45);
  border-radius: 7px;
  background: rgba(249, 115, 22, 0.12);
  color: #fdba74;
  cursor: pointer;
  font: inherit;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.subscriber-crm-report-button:hover {
  border-color: rgba(249, 115, 22, 0.72);
  background: rgba(249, 115, 22, 0.22);
  transform: translateY(-1px);
}

.subscriber-crm-report-button:focus-visible {
  outline: 2px solid #fdba74;
  outline-offset: 2px;
}

.subscriber-crm-customer strong,
.subscriber-crm-customer span,
.subscriber-crm-contact strong,
.subscriber-crm-contact span,
.subscriber-crm-consultant span {
  display: block;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subscriber-crm-customer span,
.subscriber-crm-contact span {
  color: rgba(226, 232, 240, 0.62);
  font-size: 0.7rem;
  font-weight: 700;
}

.subscriber-crm-status-pill {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  margin-top: 3px;
  padding: 3px 8px;
  overflow: hidden;
  border: 1px solid var(--status-border, rgba(148, 163, 184, 0.18));
  border-radius: 999px;
  background: var(--status-bg, rgba(148, 163, 184, 0.08));
  color: var(--status-color, #cbd5e1);
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.subscriber-crm-request-summary {
  justify-items: center;
  text-align: center;
}

.subscriber-crm-plan-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 8px;
  background: rgba(15, 17, 20, 0.82);
}

.subscriber-crm-plan-card.success {
  border-color: rgba(34, 197, 94, 0.22);
}

.subscriber-crm-plan-card.warning {
  border-color: rgba(245, 158, 11, 0.28);
}

.subscriber-crm-plan-card.danger {
  border-color: rgba(239, 68, 68, 0.28);
}

.subscriber-crm-plan-head,
.subscriber-crm-plan-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.subscriber-crm-plan-head span {
  width: max-content;
  max-width: 100%;
  padding: 3px 7px;
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, 0.24);
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.1);
  color: #7dd3fc;
  font-size: 0.58rem;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.subscriber-crm-plan-head strong,
.subscriber-crm-plan-meta span,
.subscriber-crm-plan-meta em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subscriber-crm-plan-head strong {
  color: #f8fafc;
  font-size: 0.78rem;
  font-weight: 900;
  text-align: right;
}

.subscriber-crm-plan-meta span {
  color: rgba(226, 232, 240, 0.62);
  font-size: 0.66rem;
  font-weight: 800;
}

.subscriber-crm-plan-meta em {
  color: #fbbf24;
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 900;
  text-align: right;
}

.subscriber-crm-plan-card.success .subscriber-crm-plan-meta em {
  color: #86efac;
}

.subscriber-crm-plan-card.warning .subscriber-crm-plan-meta em {
  color: #fbbf24;
}

.subscriber-crm-plan-card.danger .subscriber-crm-plan-meta em {
  color: #fca5a5;
}

.subscriber-crm-brand-duration-bar {
  height: 3px;
  min-width: 0;
}

.subscriber-crm-brand-duration-bar b {
  display: none;
}

.subscriber-crm-next {
  width: 100%;
  min-width: 0;
  max-width: 128px;
  justify-items: center;
  margin: 0 auto;
  padding: 8px;
  text-align: center;
}

.subscriber-crm-next span {
  display: block;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subscriber-crm-actions {
  justify-content: center;
}

.subscriber-crm-action[data-primary="true"] {
  min-width: 0;
  padding-inline: 10px;
}

#panel-subscriber-detail .subscriber-detail-shell {
  max-width: 1320px;
  margin-inline: auto;
}

#panel-subscriber-detail .subscriber-detail-hero-compact {
  border-radius: 8px;
  border-color: rgba(148, 163, 184, 0.13);
  background: rgba(11, 13, 16, 0.94);
  box-shadow: none;
}

#panel-subscriber-detail .subscriber-detail-next-action {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(15, 17, 20, 0.9);
}

#panel-subscriber-detail .subscriber-detail-next-action.success {
  border-color: rgba(34, 197, 94, 0.24);
}

#panel-subscriber-detail .subscriber-detail-next-action.warning {
  border-color: rgba(245, 158, 11, 0.3);
}

#panel-subscriber-detail .subscriber-detail-next-action.danger {
  border-color: rgba(239, 68, 68, 0.3);
}

#panel-subscriber-detail .subscriber-detail-metrics-compact>div,
#panel-subscriber-detail .subscriber-detail-card,
#panel-subscriber-detail .subscriber-dossier-brand-rail,
#panel-subscriber-detail .subscriber-dossier-workspace,
#panel-subscriber-detail .subscriber-dossier-side section {
  border-radius: 8px;
  border-color: rgba(148, 163, 184, 0.12);
  background: rgba(12, 14, 17, 0.94);
  box-shadow: none;
}

#panel-subscriber-detail .subscriber-dossier-layout {
  grid-template-columns: minmax(210px, 244px) minmax(0, 1fr);
  gap: 14px;
}

#panel-subscriber-detail .subscriber-dossier-side {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#panel-subscriber-detail .subscriber-detail-tabs,
#panel-subscriber-detail .subscriber-detail-tab {
  border-radius: 8px;
}

#panel-subscriber-detail .subscriber-detail-tab.active {
  border-color: rgba(56, 189, 248, 0.3);
  background: rgba(56, 189, 248, 0.1);
}

#panel-paytr .paytr-tab-btn,
#panel-paytr button,
#panel-paytr a {
  border-radius: 8px !important;
}

#paytr-console-logs>div {
  border-color: rgba(148, 163, 184, 0.16) !important;
}

@media (max-width: 1240px) {

  #panel-subscriber-detail .subscriber-dossier-layout,
  #panel-subscriber-detail .subscriber-dossier-side {
    grid-template-columns: 1fr;
  }
}

/* Legacy subscriber modal: brand identity reference */
.legacy-brand-reference {
  display: none;
  flex-direction: column;
  gap: 14px;
}

.legacy-brand-hero,
.legacy-brand-gallery-panel,
.legacy-brand-identity-panel,
.legacy-brand-gallery-group,
.legacy-brand-choice,
.legacy-brand-file-card {
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 8px;
  background: rgba(14, 16, 19, 0.9);
  box-shadow: none;
}

.legacy-brand-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
}

.legacy-brand-hero-main {
  min-width: 0;
}

.legacy-brand-kicker,
.legacy-brand-section-head span,
.legacy-brand-gallery-head span,
.legacy-brand-field span,
.legacy-brand-choice span {
  color: rgba(203, 213, 225, 0.68);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.legacy-brand-hero h3 {
  margin: 4px 0;
  overflow: hidden;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legacy-brand-hero p,
.legacy-brand-gallery-head small,
.legacy-brand-file-copy span,
.legacy-brand-choice small {
  margin: 0;
  color: rgba(203, 213, 225, 0.62);
  font-size: 0.72rem;
  font-weight: 700;
}

.legacy-brand-add-button,
.legacy-brand-gallery-head button {
  flex-shrink: 0;
  border: 1px solid rgba(249, 115, 22, 0.32);
  border-radius: 8px;
  background: #f97316;
  color: #fff;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 8px 12px;
  white-space: nowrap;
}

.legacy-brand-selector {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.legacy-brand-choice {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  color: #fff;
  cursor: pointer;
  text-align: left;
}

.legacy-brand-choice.active {
  border-color: rgba(56, 189, 248, 0.38);
  background: rgba(56, 189, 248, 0.1);
}

.legacy-brand-choice strong {
  overflow: hidden;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legacy-brand-reference-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.75fr);
  gap: 12px;
  align-items: start;
}

.legacy-brand-gallery-panel,
.legacy-brand-identity-panel {
  padding: 14px;
}

.legacy-brand-section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.legacy-brand-section-head strong {
  display: block;
  margin-top: 3px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 900;
}

.legacy-brand-gallery-groups,
.legacy-brand-form-grid {
  display: grid;
  gap: 12px;
}

.legacy-brand-gallery-group {
  padding: 12px;
}

.legacy-brand-gallery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.legacy-brand-gallery-head button {
  border-color: rgba(56, 189, 248, 0.34);
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  padding-block: 7px;
}

.legacy-brand-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
  gap: 10px;
}

.legacy-brand-file-card {
  overflow: hidden;
  min-width: 0;
}

.legacy-brand-file-preview {
  display: grid;
  height: 118px;
  place-items: center;
  overflow: hidden;
  background: rgba(2, 6, 23, 0.52);
}

.legacy-brand-file-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.legacy-brand-file-icon {
  color: rgba(203, 213, 225, 0.7);
  font-size: 0.78rem;
  font-weight: 900;
}

.legacy-brand-file-copy {
  display: grid;
  gap: 2px;
  padding: 8px;
}

.legacy-brand-file-copy strong,
.legacy-brand-file-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legacy-brand-file-copy strong {
  color: #fff;
  font-size: 0.76rem;
  font-weight: 900;
}

.legacy-brand-file-actions {
  display: flex;
  gap: 6px;
  padding: 0 8px 8px;
}

.legacy-brand-file-actions a,
.legacy-brand-file-actions button {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 7px;
  background: rgba(148, 163, 184, 0.08);
  color: rgba(226, 232, 240, 0.84);
  cursor: pointer;
  font-size: 0.64rem;
  font-weight: 850;
  padding: 5px 7px;
  text-decoration: none;
}

.legacy-brand-file-actions button {
  color: #fca5a5;
}

.legacy-brand-file-empty {
  grid-column: 1 / -1;
  border: 1px dashed rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  color: rgba(203, 213, 225, 0.58);
  font-size: 0.72rem;
  font-weight: 750;
  padding: 18px;
  text-align: center;
}

.legacy-brand-field {
  display: grid;
  gap: 6px;
}

.legacy-brand-field input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.45);
  color: #fff;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 750;
  outline: none;
  padding: 10px 11px;
}

.legacy-brand-field input:focus {
  border-color: rgba(56, 189, 248, 0.42);
}

@media (max-width: 980px) {
  .legacy-brand-reference-grid {
    grid-template-columns: 1fr;
  }

  .legacy-brand-hero,
  .legacy-brand-gallery-head {
    align-items: stretch;
    flex-direction: column;
  }

  .legacy-brand-add-button,
  .legacy-brand-gallery-head button {
    width: 100%;
  }
}

/* Subscriber detail: premium dashboard scope */
#panel-subscriber-detail {
  --subscriber-premium-bg: #0f1115;
  --subscriber-premium-card: #171a20;
  --subscriber-premium-card-soft: #1d2229;
  --subscriber-premium-input: #101318;
  --subscriber-premium-line: rgba(226, 232, 240, 0.11);
  --subscriber-premium-line-strong: rgba(226, 232, 240, 0.18);
  --subscriber-premium-text: #f8fafc;
  --subscriber-premium-muted: #a7b0bd;
  --subscriber-premium-orange: #f97316;
  --subscriber-premium-orange-soft: rgba(249, 115, 22, 0.14);
  --subscriber-premium-green: #34d399;
  --subscriber-premium-green-soft: rgba(52, 211, 153, 0.12);
  --subscriber-premium-yellow: #fbbf24;
  --subscriber-premium-yellow-soft: rgba(251, 191, 36, 0.13);
  --subscriber-premium-red: #fb7185;
  --subscriber-premium-red-soft: rgba(251, 113, 133, 0.12);
  --subscriber-premium-blue: #60a5fa;
  --subscriber-premium-blue-soft: rgba(96, 165, 250, 0.12);
  color: var(--subscriber-premium-text);
}

#panel-subscriber-detail .subscriber-detail-shell {
  display: grid;
  gap: 18px;
  max-width: 1360px;
  margin-inline: auto;
  color: var(--subscriber-premium-text);
}

#panel-subscriber-detail .subscriber-detail-toolbar {
  align-items: center;
  gap: 12px;
}

#panel-subscriber-detail .subscriber-detail-toolbar-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(88px, 1fr));
  gap: 8px;
}

#panel-subscriber-detail .subscriber-detail-toolbar-actions .subscriber-crm-action {
  width: 100%;
  height: 36px;
}

#panel-subscriber-detail .subscriber-detail-back,
#panel-subscriber-detail .subscriber-crm-action,
#panel-subscriber-detail .subscriber-detail-small-action,
#panel-subscriber-detail .subscriber-renewal-brand-footer button,
#panel-subscriber-detail .subscriber-renewal-action-card button,
#panel-subscriber-detail .subscriber-dossier-workspace-head nav button,
#panel-subscriber-detail .subscriber-dossier-file-actions a,
#panel-subscriber-detail .subscriber-dossier-file-actions button {
  border: 1px solid var(--subscriber-premium-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--subscriber-premium-text);
  box-shadow: none;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

#panel-subscriber-detail .subscriber-detail-back:hover,
#panel-subscriber-detail .subscriber-crm-action:hover,
#panel-subscriber-detail .subscriber-detail-small-action:hover,
#panel-subscriber-detail .subscriber-renewal-brand-footer button:hover,
#panel-subscriber-detail .subscriber-renewal-action-card button:hover,
#panel-subscriber-detail .subscriber-dossier-workspace-head nav button:hover,
#panel-subscriber-detail .subscriber-dossier-file-actions a:hover,
#panel-subscriber-detail .subscriber-dossier-file-actions button:hover {
  border-color: rgba(249, 115, 22, 0.34);
  background: rgba(249, 115, 22, 0.08);
}

#panel-subscriber-detail .subscriber-detail-small-action.primary,
#panel-subscriber-detail .subscriber-dossier-add-brand,
#panel-subscriber-detail .subscriber-dossier-primary-action,
#panel-subscriber-detail .subscriber-dossier-media-head button,
#panel-subscriber-detail .subscriber-dossier-action-card button,
#panel-subscriber-detail .subscriber-detail-next-action button {
  border: 1px solid rgba(249, 115, 22, 0.58);
  border-radius: 10px;
  background: var(--subscriber-premium-orange);
  color: #fff;
  box-shadow: 0 10px 24px rgba(249, 115, 22, 0.18);
}

#panel-subscriber-detail .subscriber-detail-small-action.primary:hover,
#panel-subscriber-detail .subscriber-dossier-add-brand:hover,
#panel-subscriber-detail .subscriber-dossier-primary-action:hover,
#panel-subscriber-detail .subscriber-dossier-media-head button:hover,
#panel-subscriber-detail .subscriber-dossier-action-card button:hover,
#panel-subscriber-detail .subscriber-detail-next-action button:hover {
  background: #fb8a2b;
  transform: translateY(-1px);
}

#panel-subscriber-detail .subscriber-detail-hero-compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.28fr);
  gap: 18px;
  align-items: stretch;
  padding: 20px;
  border: 1px solid var(--subscriber-premium-line);
  border-radius: 14px;
  background: var(--subscriber-premium-card);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
}

#panel-subscriber-detail .subscriber-detail-identity {
  min-width: 0;
}

#panel-subscriber-detail .subscriber-detail-identity>span,
#panel-subscriber-detail .subscriber-detail-card-head span,
#panel-subscriber-detail .subscriber-dossier-rail-head span,
#panel-subscriber-detail .subscriber-dossier-workspace-head span,
#panel-subscriber-detail .subscriber-dossier-media-head span,
#panel-subscriber-detail .subscriber-dossier-field span,
#panel-subscriber-detail .subscriber-renewal-brand-top span,
#panel-subscriber-detail .subscriber-renewal-brand-meta span,
#panel-subscriber-detail .subscriber-renewal-action-card span,
#panel-subscriber-detail .subscriber-renewal-mini-grid span,
#panel-subscriber-detail .subscriber-detail-info-grid span,
#panel-subscriber-detail .subscriber-detail-list-item small,
#panel-subscriber-detail .subscriber-detail-note span,
#panel-subscriber-detail .subscriber-dossier-side-title {
  color: var(--subscriber-premium-muted);
  font-size: 0.69rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: none;
}

#panel-subscriber-detail .subscriber-detail-hero-compact h2 {
  margin: 4px 0 5px;
  overflow-wrap: anywhere;
  color: var(--subscriber-premium-text);
  font-size: 1.55rem;
  line-height: 1.15;
  letter-spacing: 0;
}

#panel-subscriber-detail .subscriber-detail-hero-compact p,
#panel-subscriber-detail .subscriber-detail-card-head p,
#panel-subscriber-detail .subscriber-dossier-workspace-head p,
#panel-subscriber-detail .subscriber-dossier-media-head small,
#panel-subscriber-detail .subscriber-dossier-drive-row small,
#panel-subscriber-detail .subscriber-renewal-brand-footer small,
#panel-subscriber-detail .subscriber-renewal-action-card p {
  color: var(--subscriber-premium-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

#panel-subscriber-detail .subscriber-crm-badges {
  margin-top: 12px;
}

#panel-subscriber-detail .subscriber-crm-badge {
  border: 1px solid var(--subscriber-premium-line);
  background: rgba(255, 255, 255, 0.045);
  color: var(--subscriber-premium-text);
}

#panel-subscriber-detail .subscriber-crm-badge.primary {
  border-color: rgba(96, 165, 250, 0.3);
  background: var(--subscriber-premium-blue-soft);
  color: #bfdbfe;
}

#panel-subscriber-detail .subscriber-crm-empty {
  color: var(--subscriber-premium-muted);
}

#panel-subscriber-detail .subscriber-detail-next-action {
  display: grid;
  align-content: center;
  gap: 7px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--subscriber-premium-line);
  border-radius: 14px;
  background: var(--subscriber-premium-card-soft);
}

#panel-subscriber-detail .subscriber-detail-next-action.success {
  border-color: rgba(52, 211, 153, 0.28);
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.1), rgba(29, 34, 41, 0.96));
}

#panel-subscriber-detail .subscriber-detail-next-action.warning {
  border-color: rgba(251, 191, 36, 0.32);
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(29, 34, 41, 0.96));
}

#panel-subscriber-detail .subscriber-detail-next-action.danger {
  border-color: rgba(251, 113, 133, 0.34);
  background: linear-gradient(135deg, rgba(251, 113, 133, 0.1), rgba(29, 34, 41, 0.96));
}

#panel-subscriber-detail .subscriber-detail-next-action span {
  color: var(--subscriber-premium-muted);
  font-size: 0.72rem;
  font-weight: 850;
}

#panel-subscriber-detail .subscriber-detail-next-action strong {
  color: var(--subscriber-premium-text);
  font-size: 1rem;
  line-height: 1.2;
}

#panel-subscriber-detail .subscriber-detail-next-action small {
  color: var(--subscriber-premium-muted);
}

#panel-subscriber-detail .subscriber-detail-metrics-compact {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

#panel-subscriber-detail .subscriber-detail-metrics-compact>.subscriber-premium-kpi {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 15px 16px 15px 58px;
  border: 1px solid var(--subscriber-premium-line);
  border-radius: 14px;
  background: var(--subscriber-premium-card);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

#panel-subscriber-detail .subscriber-premium-kpi-icon {
  position: absolute;
  top: 16px;
  left: 16px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--subscriber-premium-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--subscriber-premium-muted);
  font-size: 0.76rem;
  font-weight: 950;
}

#panel-subscriber-detail .subscriber-premium-kpi>span:not(.subscriber-premium-kpi-icon) {
  color: var(--subscriber-premium-muted);
  font-size: 0.7rem;
  font-weight: 850;
}

#panel-subscriber-detail .subscriber-premium-kpi strong {
  overflow: hidden;
  color: var(--subscriber-premium-text);
  font-size: 1.48rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-subscriber-detail .subscriber-premium-kpi small {
  overflow: hidden;
  color: var(--subscriber-premium-muted);
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-subscriber-detail .subscriber-premium-kpi.success {
  border-color: rgba(52, 211, 153, 0.24);
}

#panel-subscriber-detail .subscriber-premium-kpi.success .subscriber-premium-kpi-icon {
  background: var(--subscriber-premium-green-soft);
  color: var(--subscriber-premium-green);
}

#panel-subscriber-detail .subscriber-premium-kpi.warning {
  border-color: rgba(249, 115, 22, 0.3);
}

#panel-subscriber-detail .subscriber-premium-kpi.warning .subscriber-premium-kpi-icon {
  background: var(--subscriber-premium-orange-soft);
  color: #fdba74;
}

#panel-subscriber-detail .subscriber-premium-kpi.danger {
  border-color: rgba(251, 113, 133, 0.3);
}

#panel-subscriber-detail .subscriber-premium-kpi.danger .subscriber-premium-kpi-icon {
  background: var(--subscriber-premium-red-soft);
  color: var(--subscriber-premium-red);
}

#panel-subscriber-detail .subscriber-premium-kpi.info {
  border-color: rgba(96, 165, 250, 0.26);
}

#panel-subscriber-detail .subscriber-premium-kpi.info .subscriber-premium-kpi-icon {
  background: var(--subscriber-premium-blue-soft);
  color: var(--subscriber-premium-blue);
}

#panel-subscriber-detail .subscriber-detail-tabs {
  display: flex;
  gap: 18px;
  padding: 0 2px;
  overflow-x: auto;
  border: 0;
  border-bottom: 1px solid var(--subscriber-premium-line);
  border-radius: 0;
  background: transparent;
}

#panel-subscriber-detail .subscriber-detail-tab {
  position: relative;
  flex: 0 0 auto;
  padding: 12px 0 13px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--subscriber-premium-muted);
  font-size: 0.82rem;
  font-weight: 850;
}

#panel-subscriber-detail .subscriber-detail-tab::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: transparent;
  content: "";
}

#panel-subscriber-detail .subscriber-detail-tab:hover,
#panel-subscriber-detail .subscriber-detail-tab.active {
  color: var(--subscriber-premium-text);
}

#panel-subscriber-detail .subscriber-detail-tab.active::after {
  background: var(--subscriber-premium-orange);
}

#panel-subscriber-detail .subscriber-detail-content {
  min-width: 0;
}

#panel-subscriber-detail .subscriber-detail-card,
#panel-subscriber-detail .subscriber-dossier-brand-rail,
#panel-subscriber-detail .subscriber-dossier-workspace,
#panel-subscriber-detail .subscriber-dossier-side section,
#panel-subscriber-detail .subscriber-renewal-main,
#panel-subscriber-detail .subscriber-renewal-side,
#panel-subscriber-detail .subscriber-renewal-requests,
#panel-subscriber-detail .subscriber-renewal-notes {
  border: 1px solid var(--subscriber-premium-line);
  border-radius: 14px;
  background: var(--subscriber-premium-card);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.14);
}

#panel-subscriber-detail .subscriber-detail-card {
  padding: 18px;
}

#panel-subscriber-detail .subscriber-detail-card-head {
  align-items: center;
  margin-bottom: 14px;
}

#panel-subscriber-detail .subscriber-detail-card h3,
#panel-subscriber-detail .subscriber-dossier-workspace-head h3,
#panel-subscriber-detail .subscriber-renewal-brand-top h4 {
  margin-top: 3px;
  color: var(--subscriber-premium-text);
  letter-spacing: 0;
}

#panel-subscriber-detail .subscriber-dossier-layout {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

#panel-subscriber-detail .subscriber-dossier-side {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

#panel-subscriber-detail .subscriber-dossier-brand-rail,
#panel-subscriber-detail .subscriber-dossier-workspace {
  padding: 16px;
}

#panel-subscriber-detail .subscriber-dossier-side section {
  padding: 16px;
}

#panel-subscriber-detail .subscriber-dossier-brand-option {
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--subscriber-premium-line);
  border-radius: 12px;
  background: var(--subscriber-premium-card-soft);
}

#panel-subscriber-detail .subscriber-dossier-brand-option:hover,
#panel-subscriber-detail .subscriber-dossier-brand-option.active {
  border-color: rgba(249, 115, 22, 0.42);
  background: rgba(249, 115, 22, 0.08);
}

#panel-subscriber-detail .subscriber-dossier-brand-option strong {
  color: var(--subscriber-premium-text);
  letter-spacing: 0;
}

#panel-subscriber-detail .subscriber-dossier-brand-kind,
#panel-subscriber-detail .subscriber-dossier-brand-option small,
#panel-subscriber-detail .subscriber-dossier-brand-option em {
  color: var(--subscriber-premium-muted);
}

#panel-subscriber-detail .subscriber-dossier-brand-progress {
  background: rgba(255, 255, 255, 0.08);
}

#panel-subscriber-detail .subscriber-dossier-brand-progress span {
  background: var(--subscriber-premium-orange);
}

#panel-subscriber-detail .subscriber-dossier-workspace-head {
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--subscriber-premium-line);
}

#panel-subscriber-detail .subscriber-dossier-workspace-head nav {
  gap: 6px;
}

#panel-subscriber-detail .subscriber-dossier-workspace-head nav button {
  padding: 8px 10px;
  color: var(--subscriber-premium-muted);
  font-size: 0.74rem;
}

#panel-subscriber-detail .subscriber-dossier-workspace-head nav button.active {
  border-color: rgba(249, 115, 22, 0.42);
  background: var(--subscriber-premium-orange-soft);
  color: #fed7aa;
}

#panel-subscriber-detail .subscriber-dossier-form-grid {
  gap: 12px;
}

#panel-subscriber-detail .subscriber-dossier-field {
  gap: 7px;
}

#panel-subscriber-detail .subscriber-dossier-field input,
#panel-subscriber-detail .subscriber-dossier-field textarea,
#panel-subscriber-detail .subscriber-dossier-drive-row input {
  border: 1px solid var(--subscriber-premium-line);
  border-radius: 11px;
  background: var(--subscriber-premium-input);
  color: var(--subscriber-premium-text);
  font-size: 0.84rem;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#panel-subscriber-detail .subscriber-dossier-field input:focus,
#panel-subscriber-detail .subscriber-dossier-field textarea:focus,
#panel-subscriber-detail .subscriber-dossier-drive-row input:focus {
  border-color: rgba(249, 115, 22, 0.52);
  outline: none;
}

#panel-subscriber-detail .subscriber-dossier-media-group,
#panel-subscriber-detail .subscriber-dossier-file-card,
#panel-subscriber-detail .subscriber-dossier-drive-row,
#panel-subscriber-detail .subscriber-dossier-action-card,
#panel-subscriber-detail .subscriber-detail-info-grid>div,
#panel-subscriber-detail .subscriber-detail-list-item,
#panel-subscriber-detail .subscriber-detail-request-card,
#panel-subscriber-detail .subscriber-detail-note,
#panel-subscriber-detail .subscriber-renewal-brand-card,
#panel-subscriber-detail .subscriber-renewal-action-card,
#panel-subscriber-detail .subscriber-renewal-mini-grid div {
  border: 1px solid var(--subscriber-premium-line);
  border-radius: 12px;
  background: var(--subscriber-premium-card-soft);
  box-shadow: none;
}

#panel-subscriber-detail .subscriber-dossier-media-group {
  padding: 13px;
}

#panel-subscriber-detail .subscriber-dossier-file-preview {
  height: 116px;
  background: #0d1015;
}

#panel-subscriber-detail .subscriber-dossier-file-copy strong,
#panel-subscriber-detail .subscriber-detail-list-item strong,
#panel-subscriber-detail .subscriber-detail-request-card strong,
#panel-subscriber-detail .subscriber-detail-note strong,
#panel-subscriber-detail .subscriber-renewal-mini-grid strong,
#panel-subscriber-detail .subscriber-renewal-brand-meta strong,
#panel-subscriber-detail .subscriber-detail-info-grid strong {
  color: var(--subscriber-premium-text);
}

#panel-subscriber-detail .subscriber-dossier-file-copy span,
#panel-subscriber-detail .subscriber-detail-request-card span,
#panel-subscriber-detail .subscriber-detail-list-item small {
  color: var(--subscriber-premium-muted);
}

#panel-subscriber-detail .subscriber-dossier-file-empty,
#panel-subscriber-detail .subscriber-dossier-empty,
#panel-subscriber-detail .subscriber-detail-empty {
  border: 1px dashed var(--subscriber-premium-line-strong);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--subscriber-premium-muted);
}

#panel-subscriber-detail .subscriber-detail-list-item:hover,
#panel-subscriber-detail .subscriber-detail-request-card:hover,
#panel-subscriber-detail .subscriber-renewal-brand-card:hover {
  border-color: rgba(249, 115, 22, 0.36);
  background: rgba(249, 115, 22, 0.07);
}

#panel-subscriber-detail .subscriber-renewal-brand-card.success,
#panel-subscriber-detail .subscriber-renewal-action-card.success {
  border-color: rgba(52, 211, 153, 0.26);
}

#panel-subscriber-detail .subscriber-renewal-brand-card.warning,
#panel-subscriber-detail .subscriber-renewal-action-card.warning {
  border-color: rgba(249, 115, 22, 0.34);
}

#panel-subscriber-detail .subscriber-renewal-brand-card.danger,
#panel-subscriber-detail .subscriber-renewal-action-card.danger {
  border-color: rgba(251, 113, 133, 0.32);
}

#panel-subscriber-detail .subscriber-detail-list-item em,
#panel-subscriber-detail .subscriber-detail-request-card em,
#panel-subscriber-detail .subscriber-renewal-brand-top em {
  border-radius: 999px;
  font-style: normal;
}

#panel-subscriber-detail .subscriber-detail-list-item em.success,
#panel-subscriber-detail .subscriber-detail-request-card em.success,
#panel-subscriber-detail .subscriber-renewal-brand-card.success .subscriber-renewal-brand-top em {
  background: var(--subscriber-premium-green-soft);
  color: var(--subscriber-premium-green);
}

#panel-subscriber-detail .subscriber-detail-list-item em.warning,
#panel-subscriber-detail .subscriber-detail-request-card em.warning,
#panel-subscriber-detail .subscriber-renewal-brand-card.warning .subscriber-renewal-brand-top em {
  background: var(--subscriber-premium-orange-soft);
  color: #fdba74;
}

#panel-subscriber-detail .subscriber-renewal-brand-card.danger .subscriber-renewal-brand-top em {
  background: var(--subscriber-premium-red-soft);
  color: var(--subscriber-premium-red);
}

#panel-subscriber-detail .subscriber-detail-list-item em.info,
#panel-subscriber-detail .subscriber-detail-request-card em.info {
  background: var(--subscriber-premium-blue-soft);
  color: var(--subscriber-premium-blue);
}

#panel-subscriber-detail .subscriber-detail-list-item em.muted,
#panel-subscriber-detail .subscriber-detail-request-card em.muted {
  background: rgba(148, 163, 184, 0.12);
  color: var(--subscriber-premium-muted);
}

#panel-subscriber-detail .subscriber-renewal-timeline {
  border: 0;
  border-radius: 0;
  background: transparent;
}

#panel-subscriber-detail .subscriber-renewal-timeline-track {
  height: 3px;
  background: rgba(255, 255, 255, 0.075);
}

#panel-subscriber-detail .subscriber-renewal-timeline-fill {
  background: #22c55e;
}

#panel-subscriber-detail .subscriber-renewal-timeline.warning .subscriber-renewal-timeline-fill {
  background: #f59e0b;
}

#panel-subscriber-detail .subscriber-renewal-timeline.danger .subscriber-renewal-timeline-fill {
  background: #ef4444;
}

#panel-subscriber-detail .subscriber-renewal-timeline-marker {
  display: none;
}

#panel-subscriber-detail .subscriber-detail-grid,
#panel-subscriber-detail .subscriber-detail-grid.wide-right,
#panel-subscriber-detail .subscriber-detail-brand-grid,
#panel-subscriber-detail .subscriber-detail-request-grid,
#panel-subscriber-detail .subscriber-renewal-desk,
#panel-subscriber-detail .subscriber-renewal-brand-grid {
  gap: 16px;
}

#panel-subscriber-detail .subscriber-detail-brand-strip {
  gap: 8px;
}

#panel-subscriber-detail .subscriber-detail-brand-strip span {
  border: 1px solid var(--subscriber-premium-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--subscriber-premium-muted);
}

@media (max-width: 1180px) {
  #panel-subscriber-detail .subscriber-detail-metrics-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #panel-subscriber-detail .subscriber-dossier-layout,
  #panel-subscriber-detail .subscriber-dossier-side,
  #panel-subscriber-detail .subscriber-renewal-desk {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  #panel-subscriber-detail .subscriber-detail-shell {
    gap: 14px;
  }

  #panel-subscriber-detail .subscriber-detail-toolbar,
  #panel-subscriber-detail .subscriber-detail-hero-compact,
  #panel-subscriber-detail .subscriber-detail-card-head,
  #panel-subscriber-detail .subscriber-dossier-workspace-head {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  #panel-subscriber-detail .subscriber-detail-toolbar-actions {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #panel-subscriber-detail .subscriber-detail-metrics-compact,
  #panel-subscriber-detail .subscriber-dossier-form-grid,
  #panel-subscriber-detail .subscriber-detail-grid,
  #panel-subscriber-detail .subscriber-detail-grid.wide-right,
  #panel-subscriber-detail .subscriber-detail-brand-grid,
  #panel-subscriber-detail .subscriber-detail-request-grid,
  #panel-subscriber-detail .subscriber-renewal-brand-grid,
  #panel-subscriber-detail .subscriber-renewal-mini-grid {
    grid-template-columns: 1fr;
  }

  #panel-subscriber-detail .subscriber-dossier-field.wide,
  #panel-subscriber-detail .subscriber-renewal-brand-meta>div.wide {
    grid-column: auto;
  }
}

/* Subscriber, request and PayTR sync refinements */
.paytr-sub-status-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
}

.paytr-sub-status-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 850;
  cursor: pointer;
}

.paytr-sub-status-tabs button.active {
  background: rgba(249, 115, 22, 0.16);
  color: #fed7aa;
}

.paytr-sub-status-tabs span {
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

#panel-subscriber-detail .subscriber-dossier-status-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 10px 0 12px;
  padding: 4px;
  border: 1px solid var(--subscriber-premium-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}

#panel-subscriber-detail .subscriber-dossier-status-tabs.compact {
  max-width: 280px;
}

#panel-subscriber-detail .subscriber-dossier-status-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--subscriber-premium-muted);
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

#panel-subscriber-detail .subscriber-dossier-status-tabs button.active {
  background: rgba(249, 115, 22, 0.13);
  color: #fed7aa;
}

#panel-subscriber-detail .subscriber-dossier-status-tabs span {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--subscriber-premium-text);
  font-size: 0.7rem;
}

#panel-subscriber-detail .subscriber-dossier-brand-option {
  align-items: stretch;
  text-align: left;
}

#panel-subscriber-detail .subscriber-dossier-brand-option.active-brand {
  border-color: rgba(52, 211, 153, 0.2);
}

#panel-subscriber-detail .subscriber-dossier-brand-option.passive-brand {
  opacity: 0.82;
}

#panel-subscriber-detail .subscriber-brand-detail-simple {
  display: grid;
  gap: 14px;
}

#panel-subscriber-detail .subscriber-brand-simple-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--subscriber-premium-line);
  border-radius: 16px;
  background: var(--subscriber-premium-card-soft);
}

#panel-subscriber-detail .subscriber-brand-simple-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

#panel-subscriber-detail .subscriber-brand-simple-head span {
  display: block;
  color: var(--subscriber-premium-muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

#panel-subscriber-detail .subscriber-brand-simple-head strong {
  display: block;
  margin-top: 3px;
  color: var(--subscriber-premium-text);
  font-size: 0.96rem;
}

#panel-subscriber-detail .subscriber-dossier-advanced {
  margin-top: 12px;
}

#panel-subscriber-detail .subscriber-dossier-advanced>summary {
  list-style: none;
  cursor: pointer;
  color: #fed7aa;
  font-size: 0.8rem;
  font-weight: 900;
}

#panel-subscriber-detail .subscriber-dossier-advanced>summary::-webkit-details-marker {
  display: none;
}

#panel-subscriber-detail .subscriber-dossier-advanced>summary::after {
  content: "Aç";
  float: right;
  color: var(--subscriber-premium-muted);
  font-size: 0.72rem;
}

#panel-subscriber-detail .subscriber-dossier-advanced[open]>summary::after {
  content: "Kapat";
}

#panel-subscriber-detail .subscriber-integration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#panel-subscriber-detail .subscriber-integration-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--subscriber-premium-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

#panel-subscriber-detail .subscriber-integration-card-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

#panel-subscriber-detail .subscriber-integration-card-head>span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--platform-color, var(--subscriber-premium-blue));
}

#panel-subscriber-detail .subscriber-integration-card-head strong {
  display: block;
  color: var(--subscriber-premium-text);
  font-size: 0.85rem;
}

#panel-subscriber-detail .subscriber-integration-card-head small {
  color: var(--subscriber-premium-muted);
  font-size: 0.72rem;
}

#panel-subscriber-detail .subscriber-integration-card label {
  display: grid;
  gap: 6px;
}

#panel-subscriber-detail .subscriber-integration-card label span {
  color: var(--subscriber-premium-muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

#panel-subscriber-detail .subscriber-integration-card input {
  min-width: 0;
  width: 100%;
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--subscriber-premium-line);
  border-radius: 11px;
  background: var(--subscriber-premium-input);
  color: var(--subscriber-premium-text);
  font-size: 0.82rem;
  font-weight: 750;
}

#panel-subscriber-detail .subscriber-integration-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

#panel-subscriber-detail .subscriber-integration-actions button,
#panel-subscriber-detail .subscriber-detail-note a {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--subscriber-premium-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--subscriber-premium-muted);
  font-size: 0.72rem;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
}

#panel-subscriber-detail .subscriber-integration-actions button.primary {
  border-color: rgba(249, 115, 22, 0.36);
  background: rgba(249, 115, 22, 0.16);
  color: #fed7aa;
}

#panel-subscriber-detail .subscriber-integration-actions button.danger {
  border-color: rgba(251, 113, 133, 0.28);
  color: var(--subscriber-premium-red);
}

#panel-subscriber-detail .subscriber-files-credentials-grid {
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
}

#panel-subscriber-detail .subscriber-credentials-brand-picker {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

#panel-subscriber-detail .subscriber-credentials-brand-list {
  display: grid;
  gap: 8px;
}

#panel-subscriber-detail .subscriber-credentials-brand-list button {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--subscriber-premium-line);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--subscriber-premium-text);
  text-align: left;
  cursor: pointer;
}

#panel-subscriber-detail .subscriber-credentials-brand-list button.active {
  border-color: rgba(249, 115, 22, 0.42);
  background: rgba(249, 115, 22, 0.1);
}

#panel-subscriber-detail .subscriber-credentials-brand-list span {
  color: var(--subscriber-premium-muted);
  font-size: 0.72rem;
}

.ops-request-context-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 8px 0 10px;
}

.ops-request-context-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.ops-request-context-card-head {
  display: grid;
  gap: 3px;
  margin-bottom: 10px;
}

.ops-request-context-card-head span {
  color: #64748B;
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ops-request-context-card-head strong {
  min-width: 0;
  overflow: hidden;
  color: #000000;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-request-context-card-head em {
  width: fit-content;
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 900;
}

.ops-request-context-card-head em.active {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.ops-request-context-card-head em.passive {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.ops-request-context-list {
  display: grid;
  gap: 7px;
}

.ops-request-context-list div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ops-request-context-list span {
  color: #64748B;
  font-size: 0.66rem;
  font-weight: 850;
}

.ops-request-context-list strong {
  overflow-wrap: anywhere;
  color: #1E293B;
  font-size: 0.76rem;
}

.ops-request-context-list p {
  margin: 0;
  color: #64748B;
  font-size: 0.76rem;
}

.ops-request-context-action {
  margin-top: 12px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 107, 0, 0.2);
  border-radius: 999px;
  background: rgba(255, 107, 0, 0.08);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ops-request-context-action:hover {
  background: var(--accent);
  color: #ffffff;
}

@media (max-width: 980px) {

  #panel-subscriber-detail .subscriber-integration-grid,
  #panel-subscriber-detail .subscriber-files-credentials-grid,
  .ops-request-context-cards {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   SLA Overdue Pulse & Premium Alarm Animations
   ========================================================================== */
@keyframes opsPulseRed {
  0% {
    box-shadow: 0 0 4px rgba(220, 38, 38, 0.4);
    background-color: #dc2626;
  }

  50% {
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.85);
    background-color: #ef4444;
  }

  100% {
    box-shadow: 0 0 4px rgba(220, 38, 38, 0.4);
    background-color: #dc2626;
  }
}

.ops-ticket-meta-pill.sla.overdue {
  animation: opsPulseRed 1.5s infinite !important;
  color: #ffffff !important;
  border-color: #b91c1c !important;
}

/* Simplified subscriber operation dossier */
#panel-subscriber-detail .subscriber-detail-shell {
  max-width: 1180px;
  gap: 14px;
}

#panel-subscriber-detail .subscriber-detail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#panel-subscriber-detail .subscriber-detail-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
}

#panel-subscriber-detail .subscriber-simple-status,
#panel-subscriber-detail .subscriber-simple-brand-picker,
#panel-subscriber-detail .subscriber-simple-selected-brand,
#panel-subscriber-detail .subscriber-simple-section,
#panel-subscriber-detail .subscriber-simple-action-line {
  border: 1px solid rgba(226, 232, 240, 0.1);
  border-radius: 10px;
  background: #171b22;
  box-shadow: none;
}

#panel-subscriber-detail .subscriber-simple-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(520px, 0.9fr);
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
}

#panel-subscriber-detail .subscriber-simple-status-main {
  min-width: 0;
}

#panel-subscriber-detail .subscriber-simple-status span,
#panel-subscriber-detail .subscriber-simple-brand-picker span,
#panel-subscriber-detail .subscriber-simple-section-head span,
#panel-subscriber-detail .subscriber-simple-selected-brand span,
#panel-subscriber-detail .subscriber-simple-action-line span {
  display: block;
  color: #9ca3af;
  font-size: 0.72rem;
  font-weight: 850;
}

#panel-subscriber-detail .subscriber-simple-status h2,
#panel-subscriber-detail .subscriber-simple-selected-brand h3,
#panel-subscriber-detail .subscriber-simple-section-head h3 {
  margin: 3px 0 0;
  color: #f8fafc;
  letter-spacing: 0;
  line-height: 1.16;
}

#panel-subscriber-detail .subscriber-simple-status h2 {
  font-size: 1.32rem;
}

#panel-subscriber-detail .subscriber-simple-status p,
#panel-subscriber-detail .subscriber-simple-selected-brand p,
#panel-subscriber-detail .subscriber-simple-section-head p {
  margin: 3px 0 0;
  color: #9ca3af;
  font-size: 0.82rem;
  line-height: 1.45;
}

#panel-subscriber-detail .subscriber-simple-status-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#panel-subscriber-detail .subscriber-simple-status-metrics div {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(226, 232, 240, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

#panel-subscriber-detail .subscriber-simple-status-metrics strong {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: #f8fafc;
  font-size: 0.96rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-subscriber-detail .subscriber-simple-status-metrics small {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: #9ca3af;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-subscriber-detail .subscriber-simple-status.warning,
#panel-subscriber-detail .subscriber-simple-action-line.warning {
  border-color: rgba(249, 115, 22, 0.26);
}

#panel-subscriber-detail .subscriber-simple-status.danger,
#panel-subscriber-detail .subscriber-simple-action-line.danger {
  border-color: rgba(251, 113, 133, 0.28);
}

#panel-subscriber-detail .subscriber-simple-status.success,
#panel-subscriber-detail .subscriber-simple-action-line.success {
  border-color: rgba(52, 211, 153, 0.24);
}

#panel-subscriber-detail .subscriber-simple-layout,
#panel-subscriber-detail .subscriber-simple-workspace,
#panel-subscriber-detail .subscriber-simple-followup {
  display: grid;
  gap: 12px;
}

#panel-subscriber-detail .subscriber-simple-brand-picker,
#panel-subscriber-detail .subscriber-simple-selected-brand,
#panel-subscriber-detail .subscriber-simple-section {
  padding: 16px;
}

#panel-subscriber-detail .subscriber-simple-brand-picker-head,
#panel-subscriber-detail .subscriber-simple-section-head,
#panel-subscriber-detail .subscriber-simple-action-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

#panel-subscriber-detail .subscriber-simple-brand-picker-head strong,
#panel-subscriber-detail .subscriber-simple-action-line strong {
  display: block;
  margin-top: 3px;
  color: #f8fafc;
  font-size: 1rem;
}

#panel-subscriber-detail .subscriber-simple-brand-picker-head small,
#panel-subscriber-detail .subscriber-simple-action-line small {
  display: block;
  margin-top: 4px;
  color: #9ca3af;
  font-size: 0.78rem;
}

#panel-subscriber-detail .subscriber-simple-brand-picker-head button,
#panel-subscriber-detail .subscriber-simple-section-actions button,
#panel-subscriber-detail .subscriber-simple-action-line button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(249, 115, 22, 0.28);
  border-radius: 8px;
  background: rgba(249, 115, 22, 0.12);
  color: #fed7aa;
  font-size: 0.78rem;
  font-weight: 850;
  cursor: pointer;
}

#panel-subscriber-detail .subscriber-simple-brand-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

#panel-subscriber-detail .subscriber-simple-brand-list button {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(226, 232, 240, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  color: #f8fafc;
  text-align: left;
  cursor: pointer;
}

#panel-subscriber-detail .subscriber-simple-brand-list button.active {
  border-color: rgba(249, 115, 22, 0.42);
  background: rgba(249, 115, 22, 0.1);
}

#panel-subscriber-detail .subscriber-simple-brand-list strong {
  overflow: hidden;
  color: #f8fafc;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-subscriber-detail .subscriber-simple-brand-list small {
  overflow: hidden;
  color: #9ca3af;
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-subscriber-detail .subscriber-simple-selected-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#panel-subscriber-detail .subscriber-simple-section-head {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.08);
}

#panel-subscriber-detail .subscriber-simple-section .subscriber-dossier-form-grid,
#panel-subscriber-detail .subscriber-dossier-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#panel-subscriber-detail .subscriber-simple-section .subscriber-dossier-field.wide {
  grid-column: 1 / -1;
}

#panel-subscriber-detail .subscriber-simple-section .subscriber-dossier-field input,
#panel-subscriber-detail .subscriber-simple-section .subscriber-dossier-field textarea,
#panel-subscriber-detail .subscriber-simple-section .subscriber-dossier-drive-row input,
#panel-subscriber-detail .subscriber-simple-section .subscriber-integration-card input {
  border-radius: 8px;
  background: #0f1217;
}

#panel-subscriber-detail .subscriber-dossier-media {
  gap: 10px;
}

#panel-subscriber-detail .subscriber-dossier-media-group,
#panel-subscriber-detail .subscriber-dossier-file-card,
#panel-subscriber-detail .subscriber-integration-card,
#panel-subscriber-detail .subscriber-dossier-drive-row,
#panel-subscriber-detail .subscriber-renewal-brand-card,
#panel-subscriber-detail .subscriber-simple-row {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

#panel-subscriber-detail .subscriber-dossier-media-head button,
#panel-subscriber-detail .subscriber-dossier-primary-action {
  border-radius: 8px;
  box-shadow: none;
}

#panel-subscriber-detail .subscriber-dossier-drive-row {
  grid-template-columns: minmax(170px, 0.44fr) minmax(0, 1fr) auto;
}

#panel-subscriber-detail .subscriber-simple-action-line {
  align-items: center;
  padding: 14px 16px;
}

#panel-subscriber-detail .subscriber-simple-list {
  display: grid;
  gap: 8px;
}

#panel-subscriber-detail .subscriber-simple-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(226, 232, 240, 0.09);
  color: inherit;
  text-align: left;
}

#panel-subscriber-detail button.subscriber-simple-row {
  cursor: pointer;
}

#panel-subscriber-detail .subscriber-simple-row strong {
  display: block;
  overflow-wrap: anywhere;
  color: #f8fafc;
  font-size: 0.88rem;
}

#panel-subscriber-detail .subscriber-simple-row span {
  display: block;
  margin-top: 4px;
  color: #9ca3af;
  font-size: 0.75rem;
}

#panel-subscriber-detail .subscriber-simple-row em {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 850;
}

#panel-subscriber-detail .subscriber-simple-row em.success {
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
}

#panel-subscriber-detail .subscriber-simple-row em.warning {
  background: rgba(249, 115, 22, 0.14);
  color: #fdba74;
}

#panel-subscriber-detail .subscriber-simple-row em.danger {
  background: rgba(251, 113, 133, 0.14);
  color: #fb7185;
}

#panel-subscriber-detail .subscriber-detail-tabs,
#panel-subscriber-detail .subscriber-detail-metrics-compact,
#panel-subscriber-detail .subscriber-detail-hero-compact {
  display: none;
}

@media (max-width: 980px) {

  #panel-subscriber-detail .subscriber-simple-status,
  #panel-subscriber-detail .subscriber-simple-status-metrics,
  #panel-subscriber-detail .subscriber-simple-section .subscriber-dossier-form-grid,
  #panel-subscriber-detail .subscriber-dossier-form-grid,
  #panel-subscriber-detail .subscriber-integration-grid,
  #panel-subscriber-detail .subscriber-dossier-drive-row {
    grid-template-columns: 1fr;
  }

  #panel-subscriber-detail .subscriber-simple-brand-picker-head,
  #panel-subscriber-detail .subscriber-simple-section-head,
  #panel-subscriber-detail .subscriber-simple-action-line,
  #panel-subscriber-detail .subscriber-simple-row,
  #panel-subscriber-detail .subscriber-detail-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 640px) {

  #panel-subscriber-detail .subscriber-detail-toolbar-actions,
  #panel-subscriber-detail .subscriber-simple-brand-list {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
}

/* Admin subscriber personal page */
#panel-subscriber-detail .subscriber-detail-shell {
  max-width: 1380px;
}

#panel-subscriber-detail .subscriber-personal-root {
  display: grid;
  gap: 12px;
}

#panel-subscriber-detail .subscriber-personal-hero,
#panel-subscriber-detail .subscriber-personal-toolbar,
#panel-subscriber-detail .subscriber-personal-brand-rail,
#panel-subscriber-detail .subscriber-personal-workspace .subscriber-detail-card,
#panel-subscriber-detail .subscriber-personal-workspace .subscriber-dossier-workspace,
#panel-subscriber-detail .subscriber-personal-account-card {
  border: 1px solid rgba(226, 232, 240, 0.1);
  border-radius: 8px;
  background: #131820;
  box-shadow: none;
}

#panel-subscriber-detail .subscriber-personal-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: 14px;
  align-items: stretch;
  padding: 16px;
}

#panel-subscriber-detail .subscriber-personal-hero.success {
  border-color: rgba(52, 211, 153, 0.22);
}

#panel-subscriber-detail .subscriber-personal-hero.warning {
  border-color: rgba(249, 115, 22, 0.28);
}

#panel-subscriber-detail .subscriber-personal-hero.danger {
  border-color: rgba(251, 113, 133, 0.3);
}

#panel-subscriber-detail .subscriber-personal-hero-main {
  display: grid;
  align-content: center;
  min-width: 0;
}

#panel-subscriber-detail .subscriber-personal-hero-main span,
#panel-subscriber-detail .subscriber-personal-hero-grid span,
#panel-subscriber-detail .subscriber-personal-chip-list span,
#panel-subscriber-detail .subscriber-personal-account-card .subscriber-detail-card-head span {
  color: #9ca3af;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: none;
}

#panel-subscriber-detail .subscriber-personal-hero-main h2 {
  margin: 4px 0;
  overflow-wrap: anywhere;
  color: #f8fafc;
  font-size: 1.35rem;
  line-height: 1.15;
  letter-spacing: 0;
}

#panel-subscriber-detail .subscriber-personal-hero-main p {
  margin: 0;
  color: #9ca3af;
  font-size: 0.82rem;
  line-height: 1.45;
}

#panel-subscriber-detail .subscriber-personal-hero-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

#panel-subscriber-detail .subscriber-personal-hero-grid>div {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(226, 232, 240, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

#panel-subscriber-detail .subscriber-personal-hero-grid strong,
#panel-subscriber-detail .subscriber-personal-hero-grid small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-subscriber-detail .subscriber-personal-hero-grid strong {
  margin-top: 3px;
  color: #f8fafc;
  font-size: 0.9rem;
  font-weight: 900;
}

#panel-subscriber-detail .subscriber-personal-hero-grid small {
  margin-top: 2px;
  color: #9ca3af;
  font-size: 0.68rem;
  font-weight: 700;
}

#panel-subscriber-detail .subscriber-personal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
}

#panel-subscriber-detail .subscriber-personal-tabs {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 1px;
}

#panel-subscriber-detail .subscriber-personal-tabs button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(226, 232, 240, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: #cbd5e1;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 850;
}

#panel-subscriber-detail .subscriber-personal-tabs button.active {
  border-color: rgba(249, 115, 22, 0.42);
  background: rgba(249, 115, 22, 0.13);
  color: #fff;
}

#panel-subscriber-detail .subscriber-personal-save-state {
  flex: 0 0 auto;
  min-width: 92px;
  color: #9ca3af;
  font-size: 0.72rem;
  font-weight: 850;
  text-align: right;
}

#panel-subscriber-detail .subscriber-personal-save-state[data-state="saving"] {
  color: #fdba74;
}

#panel-subscriber-detail .subscriber-personal-save-state[data-state="saved"] {
  color: #34d399;
}

#panel-subscriber-detail .subscriber-personal-save-state[data-state="error"] {
  color: #fb7185;
}

#panel-subscriber-detail .subscriber-personal-layout {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

#panel-subscriber-detail .subscriber-personal-brand-rail {
  position: sticky;
  top: 84px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

#panel-subscriber-detail .subscriber-personal-brand-list {
  display: grid;
  gap: 8px;
}

#panel-subscriber-detail .subscriber-personal-workspace {
  min-width: 0;
}

#panel-subscriber-detail .subscriber-personal-overview,
#panel-subscriber-detail .subscriber-personal-requests,
#panel-subscriber-detail .subscriber-personal-account-grid {
  display: grid;
  gap: 12px;
}

#panel-subscriber-detail .subscriber-personal-overview {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#panel-subscriber-detail .subscriber-personal-workspace .subscriber-detail-card,
#panel-subscriber-detail .subscriber-personal-workspace .subscriber-dossier-workspace,
#panel-subscriber-detail .subscriber-personal-account-card {
  padding: 14px;
}

#panel-subscriber-detail .subscriber-personal-account-grid {
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
}

#panel-subscriber-detail .subscriber-personal-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

#panel-subscriber-detail .subscriber-personal-chip-list span,
#panel-subscriber-detail .subscriber-personal-status {
  width: max-content;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid rgba(226, 232, 240, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: #cbd5e1;
}

#panel-subscriber-detail .subscriber-personal-chip-list span.success,
#panel-subscriber-detail .subscriber-personal-status.success {
  border-color: rgba(52, 211, 153, 0.24);
  background: rgba(52, 211, 153, 0.1);
  color: #34d399;
}

#panel-subscriber-detail .subscriber-personal-status.warning {
  border-color: rgba(249, 115, 22, 0.3);
  background: rgba(249, 115, 22, 0.12);
  color: #fdba74;
}

#panel-subscriber-detail .subscriber-personal-status.danger {
  border-color: rgba(251, 113, 133, 0.3);
  background: rgba(251, 113, 133, 0.12);
  color: #fb7185;
}

#panel-subscriber-detail .subscriber-detail-card-head .subscriber-personal-status {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
}

#panel-subscriber-detail .subscriber-detail-small-action.danger {
  border-color: rgba(251, 113, 133, 0.34);
  background: rgba(251, 113, 133, 0.12);
  color: #fecdd3;
}

#panel-subscriber-detail .subscriber-dossier-field input,
#panel-subscriber-detail .subscriber-dossier-field textarea,
#panel-subscriber-detail .subscriber-dossier-field select,
#panel-subscriber-detail .subscriber-dossier-drive-row input {
  border-radius: 8px;
  border-color: rgba(226, 232, 240, 0.12);
  background: #0d1117;
  color: #f8fafc;
}

#panel-subscriber-detail .subscriber-dossier-field select {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  outline: none;
  padding: 10px 11px;
}

#panel-subscriber-detail .subscriber-dossier-field input:focus,
#panel-subscriber-detail .subscriber-dossier-field textarea:focus,
#panel-subscriber-detail .subscriber-dossier-field select:focus,
#panel-subscriber-detail .subscriber-dossier-drive-row input:focus {
  border-color: rgba(249, 115, 22, 0.42);
}

#panel-subscriber-detail .subscriber-detail-list {
  display: grid;
  gap: 8px;
}

#panel-subscriber-detail .subscriber-personal-open-link {
  width: max-content;
  color: #93c5fd;
  font-size: 0.76rem;
  font-weight: 850;
  text-decoration: none;
}

#panel-subscriber-detail .subscriber-personal-open-link:hover {
  color: #bfdbfe;
}

#panel-subscriber-detail .subscriber-personal-root {
  --restoup-page: #090909;
  --restoup-card: #121212;
  --restoup-card-2: #171717;
  --restoup-line: rgba(255, 255, 255, 0.1);
  --restoup-line-soft: rgba(255, 255, 255, 0.075);
  --restoup-text: #f8fafc;
  --restoup-muted: #9ca3af;
  --restoup-accent: #ff6b00;
  color: var(--restoup-text);
}

#panel-subscriber-detail .subscriber-personal-hero,
#panel-subscriber-detail .subscriber-personal-toolbar,
#panel-subscriber-detail .subscriber-personal-brand-rail,
#panel-subscriber-detail .subscriber-personal-workspace .subscriber-detail-card,
#panel-subscriber-detail .subscriber-personal-workspace .subscriber-dossier-workspace,
#panel-subscriber-detail .subscriber-personal-account-card {
  border-color: var(--restoup-line);
  background: linear-gradient(135deg, var(--restoup-card), #0b0b0b);
}

#panel-subscriber-detail .subscriber-personal-hero {
  border-color: rgba(255, 107, 0, 0.2);
}

#panel-subscriber-detail .subscriber-personal-hero-main span,
#panel-subscriber-detail .subscriber-personal-hero-main p,
#panel-subscriber-detail .subscriber-personal-hero-grid span,
#panel-subscriber-detail .subscriber-personal-hero-grid small,
#panel-subscriber-detail .subscriber-personal-account-card .subscriber-detail-card-head span {
  color: var(--restoup-muted);
}

#panel-subscriber-detail .subscriber-personal-hero-main h2,
#panel-subscriber-detail .subscriber-personal-hero-grid strong,
#panel-subscriber-detail .subscriber-detail-card-head h3,
#panel-subscriber-detail .subscriber-dossier-workspace-head h3 {
  color: var(--restoup-text);
}

#panel-subscriber-detail .subscriber-personal-hero-grid>div,
#panel-subscriber-detail .subscriber-dossier-brand-option,
#panel-subscriber-detail .subscriber-dossier-drive-row,
#panel-subscriber-detail .subscriber-dossier-empty,
#panel-subscriber-detail .subscriber-detail-empty {
  border-color: var(--restoup-line-soft);
  background: rgba(255, 255, 255, 0.025);
}

#panel-subscriber-detail .subscriber-dossier-brand-option:hover,
#panel-subscriber-detail .subscriber-dossier-brand-option.active {
  border-color: rgba(255, 107, 0, 0.36);
  background: rgba(255, 107, 0, 0.08);
}

#panel-subscriber-detail .subscriber-personal-tabs button {
  border-color: var(--restoup-line);
  background: rgba(255, 255, 255, 0.035);
  color: #d1d5db;
}

#panel-subscriber-detail .subscriber-personal-tabs button.active,
#panel-subscriber-detail .subscriber-dossier-status-tabs button.active {
  border-color: rgba(255, 107, 0, 0.48);
  background: rgba(255, 107, 0, 0.14);
  color: #fff;
}

#panel-subscriber-detail .subscriber-dossier-primary-action,
#panel-subscriber-detail .subscriber-dossier-add-brand {
  border-color: #ff6b00;
  background: linear-gradient(135deg, #ff6b00, #ff8a2a);
  color: #fff;
}

#panel-subscriber-detail .subscriber-dossier-field input,
#panel-subscriber-detail .subscriber-dossier-field textarea,
#panel-subscriber-detail .subscriber-dossier-field select,
#panel-subscriber-detail .subscriber-dossier-drive-row input {
  border-color: rgba(255, 255, 255, 0.12);
  background: #080808;
  color: var(--restoup-text);
}

#panel-subscriber-detail .subscriber-dossier-field input:focus,
#panel-subscriber-detail .subscriber-dossier-field textarea:focus,
#panel-subscriber-detail .subscriber-dossier-field select:focus,
#panel-subscriber-detail .subscriber-dossier-drive-row input:focus {
  border-color: rgba(255, 107, 0, 0.68);
}

@media (max-width: 1180px) {

  #panel-subscriber-detail .subscriber-personal-hero,
  #panel-subscriber-detail .subscriber-personal-layout,
  #panel-subscriber-detail .subscriber-personal-overview {
    grid-template-columns: 1fr;
  }

  #panel-subscriber-detail .subscriber-personal-brand-rail {
    position: static;
  }

  #panel-subscriber-detail .subscriber-personal-hero-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {

  #panel-subscriber-detail .subscriber-personal-toolbar,
  #panel-subscriber-detail .subscriber-detail-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  #panel-subscriber-detail .subscriber-personal-save-state {
    width: 100%;
    min-width: 0;
    text-align: left;
  }

  #panel-subscriber-detail .subscriber-personal-hero-grid,
  #panel-subscriber-detail .subscriber-personal-account-grid,
  #panel-subscriber-detail .subscriber-dossier-form-grid,
  #panel-subscriber-detail .subscriber-dossier-drive-row {
    grid-template-columns: 1fr;
  }

  #panel-subscriber-detail .subscriber-dossier-field.wide {
    grid-column: auto;
  }
}

#panel-subscriber-accounts .table-container {
  overflow-x: auto;
}

#panel-subscriber-accounts .leads-table {
  min-width: 1040px;
}

/* Admin subscriber detail v6 */
body.subscriber-detail-active .top-status-row,
body.subscriber-detail-active .topbar,
body.subscriber-detail-active .right-activity-sidebar {
  display: none !important;
}

body.subscriber-detail-active .main-content {
  height: 100vh;
  margin-right: 0 !important;
  padding: 0 !important;
  overflow-y: auto;
}

body.subscriber-detail-active .panels-wrapper,
body.subscriber-detail-active #panel-subscriber-detail {
  margin: 0 !important;
  padding: 0 !important;
}

body.subscriber-detail-active #panel-subscriber-detail.active {
  display: block;
  min-height: 100vh;
}

#panel-subscriber-detail .subscriber-detail-shell,
#panel-subscriber-detail .subscriber-personal-root {
  width: 100%;
  max-width: none;
}

#panel-subscriber-detail .subscriber-personal-root {
  display: grid;
  gap: 12px;
  padding: 0 12px 96px;
}

#panel-subscriber-detail .subscriber-personal-hero {
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.6fr);
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
}

#panel-subscriber-detail .subscriber-personal-hero-main {
  display: flex;
  align-items: center;
  gap: 14px;
}

#panel-subscriber-detail .subscriber-detail-back-inline {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: #f8fafc;
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 850;
  padding: 7px 10px;
}

#panel-subscriber-detail .subscriber-personal-hero-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

#panel-subscriber-detail .subscriber-personal-hero-line span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  color: #9ca3af;
  font-size: 0.72rem;
  font-weight: 800;
}

#panel-subscriber-detail .subscriber-personal-hero-line strong {
  color: #fff;
  font-size: 0.86rem;
}

#panel-subscriber-detail .subscriber-personal-hero-line small {
  color: #9ca3af;
  font-size: 0.68rem;
}

#panel-subscriber-detail .subscriber-personal-sticky {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: rgba(12, 12, 12, 0.97);
  backdrop-filter: blur(14px);
}

#panel-subscriber-detail .subscriber-personal-toolbar,
#panel-subscriber-detail .subscriber-personal-brand-strip {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#panel-subscriber-detail .subscriber-personal-brand-strip {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  padding: 0;
}

#panel-subscriber-detail .subscriber-personal-navline {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.2fr);
  gap: 10px;
  align-items: center;
}

#panel-subscriber-detail .subscriber-dossier-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: 8px;
  min-width: 150px;
}

#panel-subscriber-detail .subscriber-dossier-rail-head span {
  display: none;
}

#panel-subscriber-detail .subscriber-dossier-rail-head strong {
  font-size: 0.74rem;
  white-space: nowrap;
}

#panel-subscriber-detail .subscriber-personal-brand-strip .subscriber-dossier-add-brand {
  width: auto;
  min-height: 28px;
  margin: 0;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  white-space: nowrap;
}

#panel-subscriber-detail .subscriber-dossier-status-tabs {
  flex: 0 0 auto;
  width: max-content;
}

#panel-subscriber-detail .subscriber-dossier-status-tabs button {
  min-height: 28px;
  padding: 0 10px;
  font-size: 0.7rem;
}

#panel-subscriber-detail .subscriber-personal-brand-list {
  display: flex;
  flex: 1 1 auto;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
}

#panel-subscriber-detail .subscriber-dossier-brand-option {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: 118px;
  max-width: 190px;
  min-height: 30px;
  flex: 0 0 auto !important;
  gap: 8px;
  margin: 0 !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  text-align: left;
}

#panel-subscriber-detail .subscriber-personal-brand-strip .subscriber-dossier-brand-kind,
#panel-subscriber-detail .subscriber-personal-brand-strip .subscriber-dossier-brand-option small,
#panel-subscriber-detail .subscriber-personal-brand-strip .subscriber-dossier-brand-option em {
  display: none;
}

#panel-subscriber-detail .subscriber-personal-brand-strip .subscriber-dossier-brand-option strong {
  min-width: 0;
  overflow: hidden;
  color: #f8fafc;
  font-size: 0.78rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-subscriber-detail .subscriber-personal-toolbar {
  min-width: 0;
  padding: 0;
}

#panel-subscriber-detail .subscriber-personal-tabs button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 0.72rem;
}

#panel-subscriber-detail .subscriber-personal-layout,
#panel-subscriber-detail .subscriber-personal-brand-rail {
  display: contents;
}

#panel-subscriber-detail .subscriber-personal-workspace {
  width: 100%;
  min-width: 0;
}

#panel-subscriber-detail .subscriber-personal-workspace .subscriber-detail-card,
#panel-subscriber-detail .subscriber-personal-workspace .subscriber-dossier-workspace,
#panel-subscriber-detail .subscriber-account-section {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: #101010;
  box-shadow: none;
}

#panel-subscriber-detail .subscriber-personal-workspace .subscriber-dossier-workspace,
#panel-subscriber-detail .subscriber-personal-workspace .subscriber-detail-card {
  padding: 14px;
}

#panel-subscriber-detail .subscriber-accounts-workspace {
  display: grid;
  gap: 12px;
}

#panel-subscriber-detail .subscriber-account-section {
  display: grid;
  gap: 10px;
  padding: 12px;
}

#panel-subscriber-detail .subscriber-account-section-head,
#panel-subscriber-detail .subscriber-detail-save-bar,
#panel-subscriber-detail .subscriber-detail-save-bar>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#panel-subscriber-detail .subscriber-account-section-head h3 {
  margin: 2px 0 0;
  color: #f8fafc;
  font-size: 0.98rem;
}

#panel-subscriber-detail .subscriber-account-section-head span {
  color: #9ca3af;
  font-size: 0.68rem;
  font-weight: 850;
}

#panel-subscriber-detail .subscriber-account-add-menu {
  position: relative;
}

#panel-subscriber-detail .subscriber-account-add-menu summary {
  list-style: none;
  border: 1px solid #ff6b00;
  border-radius: 8px;
  background: #ff6b00;
  color: #fff;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 900;
  padding: 8px 11px;
}

#panel-subscriber-detail .subscriber-account-add-menu summary::-webkit-details-marker {
  display: none;
}

#panel-subscriber-detail .subscriber-account-add-menu div {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  display: grid;
  min-width: 220px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #151515;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.34);
}

#panel-subscriber-detail .subscriber-account-add-menu button {
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #f8fafc;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 8px 9px;
  text-align: left;
}

#panel-subscriber-detail .subscriber-account-add-menu button:hover {
  background: rgba(255, 107, 0, 0.12);
}

#panel-subscriber-detail .subscriber-account-rows {
  display: grid;
  gap: 8px;
}

#panel-subscriber-detail .subscriber-account-row {
  display: grid;
  grid-template-columns: minmax(132px, 0.8fr) minmax(130px, 0.9fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(220px, 1.2fr) minmax(170px, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.022);
}

#panel-subscriber-detail .subscriber-account-row-title {
  align-self: center;
  min-width: 0;
}

#panel-subscriber-detail .subscriber-account-row-title strong,
#panel-subscriber-detail .subscriber-account-row-title span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-subscriber-detail .subscriber-account-row-title strong {
  color: #fff;
  font-size: 0.86rem;
  font-weight: 900;
}

#panel-subscriber-detail .subscriber-account-row-title span {
  margin-top: 3px;
  color: #9ca3af;
  font-size: 0.66rem;
  font-weight: 800;
}

#panel-subscriber-detail .subscriber-account-password-field>div {
  display: flex;
  gap: 5px;
}

#panel-subscriber-detail .subscriber-account-password-field input {
  flex: 1 1 auto;
}

#panel-subscriber-detail .subscriber-account-password-field button {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: #e5e7eb;
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 850;
  padding: 0 8px;
}

#panel-subscriber-detail .subscriber-detail-save-bar {
  position: sticky;
  bottom: 0;
  z-index: 35;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px 8px 0 0;
  background: rgba(15, 15, 15, 0.96);
  backdrop-filter: blur(14px);
}

#panel-subscriber-detail .subscriber-detail-save-bar button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#panel-subscriber-detail .subscriber-personal-save-state[data-state="dirty"] {
  color: #fdba74;
}

@media (max-width: 1180px) {
  #panel-subscriber-detail .subscriber-personal-hero,
  #panel-subscriber-detail .subscriber-personal-navline,
  #panel-subscriber-detail .subscriber-account-row {
    grid-template-columns: 1fr;
  }

  #panel-subscriber-detail .subscriber-personal-hero-line {
    justify-content: flex-start;
  }

  #panel-subscriber-detail .subscriber-personal-brand-strip {
    align-items: stretch;
    flex-wrap: wrap;
  }
}

@media (max-width: 700px) {
  body.subscriber-detail-active .main-content {
    height: auto;
    min-height: 100vh;
  }

  #panel-subscriber-detail .subscriber-personal-root {
    padding: 0 10px 96px;
  }

  #panel-subscriber-detail .subscriber-personal-hero-main,
  #panel-subscriber-detail .subscriber-account-section-head,
  #panel-subscriber-detail .subscriber-detail-save-bar {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Admin subscriber detail v8: compact form rhythm */
#panel-subscriber-detail .subscriber-personal-root {
  gap: 10px;
  padding: 0 12px 84px;
}

#panel-subscriber-detail .subscriber-personal-sticky {
  gap: 7px;
  padding: 7px 12px;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(10, 10, 10, 0.98);
}

#panel-subscriber-detail .subscriber-personal-hero {
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.4fr);
}

#panel-subscriber-detail .subscriber-personal-navline {
  grid-template-columns: minmax(420px, 1.1fr) minmax(480px, 1fr);
  gap: 12px;
}

#panel-subscriber-detail .subscriber-personal-workspace .subscriber-detail-card,
#panel-subscriber-detail .subscriber-personal-workspace .subscriber-dossier-workspace,
#panel-subscriber-detail .subscriber-account-section {
  border-color: rgba(255, 255, 255, 0.08);
  background: #0f0f0f;
}

#panel-subscriber-detail .subscriber-personal-workspace .subscriber-dossier-workspace,
#panel-subscriber-detail .subscriber-personal-workspace .subscriber-detail-card {
  padding: 12px 14px;
}

#panel-subscriber-detail .subscriber-dossier-form-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 280px));
  gap: 10px;
  justify-content: start;
  align-items: start;
}

#panel-subscriber-detail .subscriber-dossier-field {
  width: 100%;
  max-width: 280px;
}

#panel-subscriber-detail .subscriber-dossier-field.wide {
  grid-column: span 2;
  max-width: 580px;
}

#panel-subscriber-detail .subscriber-dossier-field input,
#panel-subscriber-detail .subscriber-dossier-field textarea,
#panel-subscriber-detail .subscriber-dossier-field select,
#panel-subscriber-detail .subscriber-dossier-drive-row input {
  min-height: 36px;
  border-color: rgba(255, 107, 0, 0.22);
  border-radius: 8px;
  background: #070707;
}

#panel-subscriber-detail .subscriber-dossier-field.compact input {
  min-height: 34px;
}

#panel-subscriber-detail .subscriber-dossier-drive-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 340px));
  gap: 10px;
  justify-content: start;
}

#panel-subscriber-detail .subscriber-dossier-drive-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-content: start;
  min-height: 116px;
  padding: 12px;
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.018);
}

#panel-subscriber-detail .subscriber-dossier-drive-row label,
#panel-subscriber-detail .subscriber-account-row-title {
  min-width: 0;
}

#panel-subscriber-detail .subscriber-dossier-drive-row strong,
#panel-subscriber-detail .subscriber-account-row-title strong {
  display: block;
  overflow: hidden;
  color: #f8fafc;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-subscriber-detail .subscriber-dossier-drive-row small,
#panel-subscriber-detail .subscriber-account-row-title span {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #9ca3af;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-subscriber-detail .subscriber-inline-control,
#panel-subscriber-detail .subscriber-account-password-field>div {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

#panel-subscriber-detail .subscriber-inline-control input,
#panel-subscriber-detail .subscriber-account-password-field input {
  min-width: 0;
  flex: 1 1 auto;
}

#panel-subscriber-detail .subscriber-inline-actions {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
}

#panel-subscriber-detail .subscriber-inline-action,
#panel-subscriber-detail .subscriber-account-password-field button {
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
  color: #e5e7eb;
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 850;
  padding: 0 8px;
  white-space: nowrap;
}

#panel-subscriber-detail .subscriber-inline-action:hover,
#panel-subscriber-detail .subscriber-account-password-field button:hover {
  border-color: rgba(255, 107, 0, 0.38);
  color: #fff;
}

#panel-subscriber-detail .subscriber-account-rows {
  grid-template-columns: repeat(auto-fit, minmax(340px, 560px));
  gap: 10px;
  justify-content: start;
}

#panel-subscriber-detail .subscriber-account-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
  padding: 12px;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.018);
}

#panel-subscriber-detail .subscriber-account-row-title,
#panel-subscriber-detail .subscriber-account-row .subscriber-detail-small-action.danger {
  grid-column: 1 / -1;
}

#panel-subscriber-detail .subscriber-account-row .subscriber-detail-small-action.danger {
  justify-self: end;
  min-height: 30px;
  padding: 0 10px;
}

#panel-subscriber-detail .subscriber-account-section {
  padding: 10px 12px 12px;
}

#panel-subscriber-detail .subscriber-detail-save-bar {
  position: fixed;
  right: 24px;
  bottom: 104px;
  left: auto;
  width: auto;
  min-width: 260px;
  margin: 0;
  padding: 8px;
  border-radius: 10px;
  background: rgba(14, 14, 14, 0.96);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.36);
}

@media (max-width: 1180px) {
  #panel-subscriber-detail .subscriber-personal-hero,
  #panel-subscriber-detail .subscriber-personal-navline,
  #panel-subscriber-detail .subscriber-dossier-form-grid,
  #panel-subscriber-detail .subscriber-dossier-drive-list,
  #panel-subscriber-detail .subscriber-account-rows,
  #panel-subscriber-detail .subscriber-account-row {
    grid-template-columns: 1fr;
  }

  #panel-subscriber-detail .subscriber-dossier-field.wide {
    grid-column: auto;
    max-width: 100%;
  }
}

@media (max-width: 700px) {
  #panel-subscriber-detail .subscriber-detail-save-bar {
    right: 10px;
    bottom: 92px;
    left: 10px;
    width: auto;
  }
}

.subscriber-account-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.subscriber-account-filterbar span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font-size: 0.66rem;
}

.subscriber-account-bulk {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(239, 68, 68, 0.24);
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.08);
  color: #fecaca;
  font-size: 0.74rem;
  font-weight: 850;
  cursor: pointer;
}

.subscriber-account-row td {
  vertical-align: middle;
}

.subscriber-account-credentials,
.subscriber-account-brand-count {
  display: grid;
  gap: 4px;
}

.subscriber-account-credentials strong,
.subscriber-account-brand-count strong {
  overflow-wrap: anywhere;
  color: #f8fafc;
  font-size: 0.84rem;
  font-weight: 850;
}

.subscriber-account-credentials span,
.subscriber-account-brand-count span,
.subscriber-account-name span {
  overflow-wrap: anywhere;
  color: var(--text2);
  font-size: 0.72rem;
  font-weight: 700;
}

.subscriber-account-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 900;
}

.subscriber-account-status.success {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
}

.subscriber-account-status.warning {
  background: rgba(245, 158, 11, 0.13);
  color: #fbbf24;
}

.subscriber-account-status.muted {
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1;
}

.subscriber-account-actions {
  min-width: 240px;
}

@media (max-width: 760px) {

  #panel-subscriber-accounts .section-header,
  .subscriber-account-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  #subscriber-account-search-input {
    width: 100% !important;
  }
}

/* Final guard: subscriber task detail modal header must keep separated ID/meta and rounded clipping. */
.customer-task-modal:not(.customer-request-modal-container) .customer-task-modal-dialog {
  overflow: hidden !important;
  border-radius: 28px !important;
}

.customer-task-modal:not(.customer-request-modal-container) .customer-task-modal-head {
  overflow: hidden !important;
}

.customer-task-modal:not(.customer-request-modal-container) .customer-task-modal-meta,
.customer-task-modal:not(.customer-request-modal-container) .customer-task-modal-meta-group {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.customer-task-modal:not(.customer-request-modal-container) .customer-task-modal-meta * {
  text-transform: none !important;
}

.customer-task-modal:not(.customer-request-modal-container) .customer-task-id-tag {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  width: max-content !important;
  max-width: 100% !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  font-size: 0.66rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.customer-task-modal:not(.customer-request-modal-container) .customer-task-id-tag {
  background: rgba(235, 94, 40, 0.15) !important;
  border: 1px solid rgba(235, 94, 40, 0.3) !important;
  color: #ffedd5 !important;
}

.customer-task-modal-meta-text {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* PayTR minimal SaaS control center */
#panel-paytr {
  --paytr-surface: rgba(17, 16, 15, 0.96);
  --paytr-surface-2: rgba(24, 23, 21, 0.94);
  --paytr-surface-3: rgba(10, 10, 10, 0.92);
  --paytr-border: rgba(255, 255, 255, 0.09);
  --paytr-border-strong: rgba(255, 255, 255, 0.15);
  --paytr-text: #f8fafc;
  --paytr-muted: rgba(248, 250, 252, 0.58);
  --paytr-muted-2: rgba(248, 250, 252, 0.38);
  --paytr-accent: #ff6b00;
  color: var(--paytr-text);
}

.paytr-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1520px;
  margin: 0 auto;
  padding: 10px;
}

.paytr-header,
.paytr-filter-card,
.paytr-plan-defaults,
.paytr-table-card,
.paytr-metric,
.paytr-drawer {
  background: var(--paytr-surface);
  border: 1px solid var(--paytr-border);
  box-shadow: none;
}

.paytr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border-radius: 14px;
}

.paytr-title-block {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.paytr-title-mark {
  width: 4px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--paytr-accent);
}

.paytr-title-block h1 {
  margin: 0;
  color: var(--paytr-text);
  font-size: 1.15rem;
  font-weight: 850;
  letter-spacing: 0;
}

.paytr-title-block p {
  margin: 4px 0 0;
  color: var(--paytr-muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.paytr-mode-strip {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.paytr-control-body,
.paytr-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

.paytr-metric {
  min-width: 0;
  padding: 13px 14px;
  border-radius: 12px;
}

.paytr-metric span,
.paytr-field,
.paytr-mini-field span {
  color: var(--paytr-muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.paytr-metric strong {
  display: block;
  margin-top: 8px;
  color: var(--paytr-metric-color, var(--paytr-text));
  font-size: 1.18rem;
  font-weight: 850;
}

.paytr-metric small {
  display: block;
  margin-top: 4px;
  color: var(--paytr-muted-2);
  font-size: 0.7rem;
  font-weight: 650;
}

.paytr-filter-card,
.paytr-plan-defaults {
  border-radius: 12px;
  padding: 12px;
}

.paytr-filter-grid,
.paytr-advanced-filters,
.paytr-plan-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(140px, 1fr)) auto;
  gap: 10px;
  align-items: end;
}

.paytr-advanced-filters {
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--paytr-border);
}

.paytr-plan-grid {
  grid-template-columns: minmax(220px, 1.2fr) repeat(2, minmax(160px, 1fr)) auto;
  margin-top: 12px;
}

.paytr-plan-defaults summary {
  cursor: pointer;
  color: var(--paytr-text);
  font-size: 0.82rem;
  font-weight: 750;
  list-style-position: inside;
}

.paytr-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.paytr-field input,
.paytr-field select,
.paytr-adjustment-form input,
.paytr-adjustment-form select,
.paytr-adjustment-form textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--paytr-border);
  border-radius: 8px;
  background: var(--paytr-surface-3);
  color: var(--paytr-text);
  padding: 9px 10px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  outline: none;
}

.paytr-field input:focus,
.paytr-field select:focus,
.paytr-adjustment-form input:focus,
.paytr-adjustment-form select:focus,
.paytr-adjustment-form textarea:focus {
  border-color: rgba(255, 107, 0, 0.42);
}

.paytr-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 1px solid var(--paytr-border);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 0.78rem;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.paytr-button-primary {
  border-color: rgba(255, 107, 0, 0.35);
  background: var(--paytr-accent);
  color: #050505;
}

.paytr-button-secondary {
  background: var(--paytr-surface-2);
  color: var(--paytr-text);
}

.paytr-button-danger {
  border-color: rgba(239, 68, 68, 0.28);
  background: rgba(239, 68, 68, 0.09);
  color: #fecaca;
}

.paytr-icon-button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--paytr-border);
  border-radius: 8px;
  background: var(--paytr-surface-2);
  color: var(--paytr-text);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.paytr-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  border: 1px solid var(--paytr-badge-border);
  border-radius: 999px;
  background: var(--paytr-badge-bg);
  color: var(--paytr-badge-color);
  padding: 4px 8px;
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

.paytr-table-card {
  overflow: visible;
  border-radius: 12px;
}

.paytr-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--paytr-border);
}

.paytr-table-head h3 {
  margin: 0;
  color: var(--paytr-text);
  font-size: 0.85rem;
  font-weight: 850;
}

.paytr-table-head p,
.paytr-table-head span {
  margin: 4px 0 0;
  color: var(--paytr-muted);
  font-size: 0.72rem;
  font-weight: 650;
}

.paytr-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
}

.paytr-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.78rem;
}

.paytr-table thead th {
  padding: 11px 14px;
  border-bottom: 1px solid var(--paytr-border);
  color: var(--paytr-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.paytr-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  cursor: pointer;
}

.paytr-table tbody tr:hover,
.paytr-table tbody tr.is-selected {
  background: rgba(255, 255, 255, 0.035);
}

.paytr-table td {
  padding: 14px;
  color: var(--paytr-text);
  vertical-align: middle;
}

.paytr-subscription-cell {
  min-width: 290px;
}

.paytr-subscription-cell strong,
.paytr-money-cell strong,
.paytr-mini-field strong,
.paytr-log-item strong {
  display: block;
  color: var(--paytr-text);
  font-weight: 800;
}

.paytr-subscription-cell span,
.paytr-subscription-cell small,
.paytr-money-cell small,
.paytr-cell-note {
  display: block;
  margin-top: 4px;
  color: var(--paytr-muted);
  font-size: 0.72rem;
  font-weight: 650;
}

.paytr-subscription-cell small {
  color: var(--paytr-muted-2);
  overflow-wrap: anywhere;
}

.paytr-actions-cell {
  position: relative;
  width: 130px;
  text-align: right;
}

.paytr-action-menu {
  position: relative;
  display: inline-flex;
  justify-content: flex-end;
}

.paytr-action-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  display: none;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--paytr-border-strong);
  border-radius: 10px;
  background: #11100f;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.34);
}

.paytr-action-menu.is-open .paytr-action-popover {
  display: grid;
  gap: 2px;
}

.paytr-action-popover button,
.paytr-action-popover a {
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--paytr-text);
  padding: 9px 10px;
  text-align: left;
  text-decoration: none;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}

.paytr-action-popover button:hover,
.paytr-action-popover a:hover {
  background: rgba(255, 255, 255, 0.06);
}

.paytr-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 920;
  background: rgba(0, 0, 0, 0.42);
}

.paytr-drawer {
  position: fixed;
  top: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 930;
  display: flex;
  flex-direction: column;
  width: min(440px, calc(100vw - 32px));
  border-radius: 14px;
  overflow: hidden;
}

.paytr-drawer-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  border-bottom: 1px solid var(--paytr-border);
}

.paytr-drawer-header span {
  color: var(--paytr-muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.paytr-drawer-header h3 {
  margin: 3px 0 0;
  color: var(--paytr-text);
  font-size: 1rem;
  font-weight: 850;
}

.paytr-drawer-header p {
  margin: 4px 0 0;
  color: var(--paytr-muted);
  font-size: 0.76rem;
  font-weight: 650;
}

.paytr-drawer-header-actions {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 0 0 auto;
}

.paytr-drawer-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 10px;
  border-bottom: 1px solid var(--paytr-border);
}

.paytr-drawer-tabs button {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--paytr-muted);
  padding: 9px 8px;
  font-size: 0.76rem;
  font-weight: 750;
  cursor: pointer;
}

.paytr-drawer-tabs button.is-active {
  background: rgba(255, 255, 255, 0.065);
  color: var(--paytr-text);
}

.paytr-drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
}

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

.paytr-mini-field,
.paytr-log-item {
  min-width: 0;
  border: 1px solid var(--paytr-border);
  border-radius: 10px;
  background: var(--paytr-surface-3);
  padding: 10px;
}

.paytr-mini-field strong {
  margin-top: 5px;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.paytr-drawer-section {
  margin-top: 14px;
}

.paytr-drawer-section h4 {
  margin: 0 0 10px;
  color: var(--paytr-text);
  font-size: 0.86rem;
  font-weight: 800;
}

.paytr-log-list,
.paytr-adjustment-form,
.paytr-drawer-actions {
  display: grid;
  gap: 8px;
}

.paytr-log-list-short {
  max-height: 230px;
  overflow: auto;
}

.paytr-log-item>div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.paytr-log-item small,
.paytr-empty-note {
  display: block;
  margin-top: 6px;
  color: var(--paytr-muted);
  font-size: 0.7rem;
  font-weight: 650;
}

.paytr-adjustment-form textarea {
  min-height: 86px;
  resize: vertical;
}

.paytr-empty-row,
.paytr-loading,
.paytr-admin-only,
.paytr-error {
  padding: 28px;
  color: var(--paytr-muted);
  text-align: center;
  font-weight: 750;
}

.paytr-loading-compact {
  padding: 18px;
}

.paytr-admin-only,
.paytr-error {
  max-width: 720px;
  margin: 80px auto;
  border: 1px solid var(--paytr-border);
  border-radius: 12px;
  background: var(--paytr-surface);
}

.paytr-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fecaca;
  border-color: rgba(239, 68, 68, 0.28);
}

@media (max-width: 1040px) {
  .paytr-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 680px) {
  .paytr-shell {
    padding: 0;
  }

  .paytr-header,
  .paytr-table-head,
  .paytr-mode-strip {
    align-items: stretch;
    flex-direction: column;
  }

  .paytr-metrics,
  .paytr-filter-grid,
  .paytr-advanced-filters,
  .paytr-plan-grid,
  .paytr-detail-grid {
    grid-template-columns: 1fr;
  }

  .paytr-drawer {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 88vh;
    border-radius: 16px 16px 0 0;
  }
}

/* PayTR workspace refresh: dense, live, less modal-heavy */
body.paytr-panel-active .main-content {
  margin-right: 0;
  height: 100vh;
  min-height: 100vh;
  height: 100dvh;
  min-height: 100dvh;
  padding: 0;
  overflow: hidden;
}

body.paytr-panel-active .topbar,
body.paytr-panel-active .top-status-row,
body.paytr-panel-active .right-activity-sidebar,
body.paytr-panel-active #sub-fixed-support {
  display: none !important;
}

body.paytr-panel-active .panels-wrapper {
  display: flex;
  flex: 1;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
}

#panel-paytr.active {
  display: flex;
  flex: 1;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

#panel-paytr .paytr-shell {
  max-width: none;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  gap: 10px;
}

#panel-paytr .paytr-header,
#panel-paytr .paytr-filter-card,
#panel-paytr .paytr-table-card,
#panel-paytr .paytr-metric,
#panel-paytr .paytr-package-card,
#panel-paytr .paytr-automation-card,
#panel-paytr .paytr-calendar-panel,
#panel-paytr .paytr-info-strip,
#panel-paytr .paytr-automation-header,
#panel-paytr .paytr-detail-surface,
#panel-paytr .paytr-live-rail,
#panel-paytr .paytr-mini-field,
#panel-paytr .paytr-log-item {
  border-radius: 8px;
  background: rgba(13, 16, 20, 0.94);
  border-color: rgba(148, 163, 184, 0.14);
  box-shadow: none;
}

#panel-paytr .paytr-header {
  flex: 0 0 auto;
  min-height: 70px;
  padding: 8px 12px;
  background: rgba(9, 12, 16, 0.98);
}

#panel-paytr .paytr-control-body {
  display: flex;
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

#panel-paytr .paytr-title-mark {
  width: 3px;
  height: 38px;
  background: #38bdf8;
}

#panel-paytr .paytr-title-block h1 {
  font-size: 1.05rem;
}

#panel-paytr .paytr-title-block p {
  color: #94a3b8;
}

.paytr-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(34, 197, 94, 0.24);
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.08);
  color: #bbf7d0;
  font-size: 0.72rem;
  font-weight: 850;
  white-space: nowrap;
}

.paytr-live-pill span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
}

.paytr-last-sync {
  color: #94a3b8;
  font-size: 0.7rem;
  font-weight: 750;
  white-space: nowrap;
}

.paytr-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 348px;
  gap: 12px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.paytr-command-workspace.has-detail {
  grid-template-columns: minmax(560px, 1fr) minmax(360px, 430px) 320px;
}

.paytr-command-center {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.paytr-readonly-strip,
.paytr-dunning-panel,
.paytr-pricing-command {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(13, 16, 20, 0.94);
}

.paytr-readonly-strip {
  padding: 10px 12px;
  color: #fde68a;
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.2);
  font-size: 0.78rem;
  font-weight: 800;
}

.paytr-command-section-head,
.paytr-dunning-panel>header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
}

.paytr-command-section-head span,
.paytr-dunning-panel>header span,
.paytr-dunning-panel>header p {
  display: block;
  color: #94a3b8;
  font-size: 0.7rem;
  font-weight: 800;
}

.paytr-command-section-head>div>span,
.paytr-dunning-panel>header>div>span {
  color: #38bdf8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.64rem;
  font-weight: 900;
}

.paytr-command-section-head h3,
.paytr-dunning-panel h3 {
  margin: 3px 0 0;
  color: #f8fafc;
  font-size: 1rem;
}

.paytr-dunning-panel>header p {
  margin: 4px 0 0;
  line-height: 1.45;
  max-width: 680px;
}

#panel-paytr .paytr-saas-kpis {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.paytr-dunning-stats {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 8px;
  align-items: baseline;
  min-width: 120px;
}

.paytr-dunning-stats strong {
  color: #f8fafc;
  font-size: 1rem;
  font-weight: 900;
}

.paytr-dunning-list {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}

.paytr-dunning-item {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(120px, auto) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 8px;
  background: rgba(2, 6, 12, 0.42);
}

.paytr-dunning-item strong,
.paytr-dunning-money strong {
  display: block;
  color: #f8fafc;
  font-weight: 900;
}

.paytr-dunning-item span,
.paytr-dunning-item small,
.paytr-dunning-money span {
  display: block;
  margin-top: 4px;
  color: #94a3b8;
  font-size: 0.7rem;
  font-weight: 750;
}

.paytr-dunning-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.paytr-package-grid-command {
  padding: 0 12px 12px;
}

.paytr-usage-cell strong {
  color: #bae6fd;
}

.paytr-usage-summary {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(2, 6, 12, 0.42);
}

.paytr-usage-summary span,
.paytr-usage-summary small {
  display: block;
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 750;
}

.paytr-usage-summary strong {
  display: block;
  margin-top: 4px;
  color: #f8fafc;
  font-size: 1.25rem;
  font-weight: 900;
}

.paytr-usage-bar {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
}

.paytr-usage-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #facc15, #ef4444);
}

.paytr-work-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
}

#panel-paytr .paytr-top-tabs {
  display: inline-grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  width: min(960px, 100%);
  padding: 4px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(2, 6, 12, 0.52);
}

#panel-paytr .paytr-top-tabs button,
#panel-paytr .paytr-drawer-tabs button {
  border-radius: 6px;
  min-height: 34px;
}

#panel-paytr .paytr-top-tabs button.is-active,
#panel-paytr .paytr-drawer-tabs button.is-active {
  background: rgba(56, 189, 248, 0.12);
  color: #e0f2fe;
}

#panel-paytr .paytr-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#panel-paytr .paytr-metric {
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.72);
}

#panel-paytr .paytr-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 10px;
  min-height: 0;
}

#panel-paytr .paytr-settings-form,
#panel-paytr .paytr-settings-status,
#panel-paytr .paytr-guide-list {
  display: grid;
  gap: 12px;
}

#panel-paytr .paytr-mode-segment {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#panel-paytr .paytr-mode-segment button {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 58px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.44);
  color: #cbd5e1;
  padding: 10px;
  text-align: left;
  opacity: 1;
}

#panel-paytr .paytr-mode-segment button.is-active {
  border-color: rgba(34, 197, 94, 0.38);
  background: rgba(34, 197, 94, 0.12);
  color: #f8fafc;
}

#panel-paytr .paytr-mode-segment button.is-locked {
  border-color: rgba(245, 158, 11, 0.34);
  background: rgba(245, 158, 11, 0.12);
}

#panel-paytr .paytr-mode-segment span {
  font-size: 0.82rem;
  font-weight: 850;
}

#panel-paytr .paytr-mode-segment small {
  color: #94a3b8;
  font-size: 0.7rem;
  font-weight: 700;
}

#panel-paytr .paytr-secret-notice {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 8px;
  background: rgba(56, 189, 248, 0.08);
  color: #cbd5e1;
}

#panel-paytr .paytr-secret-notice.is-warning {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(245, 158, 11, 0.1);
}

#panel-paytr .paytr-secret-notice strong {
  color: #f8fafc;
  font-size: 0.82rem;
  font-weight: 850;
}

#panel-paytr .paytr-secret-notice span {
  color: #94a3b8;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.35;
}

#panel-paytr .paytr-copy-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

#panel-paytr .paytr-checklist {
  display: grid;
  gap: 8px;
}

#panel-paytr .paytr-checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.48);
  font-size: 0.78rem;
}

#panel-paytr .paytr-checklist-item span,
#panel-paytr .paytr-guide-step b {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
  color: #cbd5e1;
  font-weight: 900;
  flex: 0 0 auto;
}

#panel-paytr .paytr-checklist-item.is-done span,
#panel-paytr .paytr-guide-step b {
  background: rgba(34, 197, 94, 0.14);
  color: #86efac;
}

#panel-paytr .paytr-guide-card {
  min-height: 0;
}

#panel-paytr .paytr-guide-step {
  display: flex;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.48);
}

#panel-paytr .paytr-guide-step strong {
  display: block;
  color: #f8fafc;
  font-size: 0.86rem;
}

#panel-paytr .paytr-guide-step p,
#panel-paytr .paytr-code-note span {
  margin: 4px 0 0;
  color: #94a3b8;
  font-size: 0.78rem;
  line-height: 1.45;
}

#panel-paytr .paytr-code-note {
  display: grid;
  gap: 7px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(56, 189, 248, 0.18);
  background: rgba(8, 47, 73, 0.24);
}

#panel-paytr .paytr-code-note strong {
  color: #bae6fd;
  font-size: 0.78rem;
}

#panel-paytr .paytr-code-note code {
  display: block;
  overflow-x: auto;
  color: #e0f2fe;
  font-size: 0.8rem;
}

#panel-paytr .paytr-metric strong {
  font-size: 1.02rem;
}

#panel-paytr .paytr-main {
  flex: 1;
  min-height: 0;
  gap: 10px;
}

#panel-paytr .paytr-filter-card {
  padding: 10px;
}

#panel-paytr .paytr-filter-grid {
  grid-template-columns: minmax(220px, 1.7fr) repeat(3, minmax(118px, 1fr)) auto;
  gap: 8px;
}

#panel-paytr .paytr-table-card {
  overflow: visible;
}

#panel-paytr .paytr-table-head {
  padding: 8px 12px;
}

#panel-paytr .paytr-table-head p {
  display: none;
}

#panel-paytr .paytr-table {
  min-width: 1080px;
}

#panel-paytr .paytr-table-wrap {
  overflow: visible;
}

#panel-paytr .paytr-table thead th,
#panel-paytr .paytr-table td {
  padding: 10px 12px;
}

#panel-paytr .paytr-action-popover {
  border-radius: 8px;
  background: #0b1017;
}

.paytr-action-menu.is-up .paytr-action-popover {
  top: auto;
  bottom: calc(100% + 6px);
}

.paytr-calendar-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.paytr-calendar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.paytr-calendar-head h3 {
  margin: 0;
  color: #f8fafc;
  font-size: 1rem;
}

.paytr-calendar-head p {
  margin: 4px 0 0;
  color: #94a3b8;
  font-size: 0.76rem;
  font-weight: 650;
}

.paytr-calendar-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 8px;
  min-width: min(520px, 100%);
}

.paytr-calendar-stats div,
.paytr-calendar-item {
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 8px;
  background: rgba(2, 6, 12, 0.42);
}

.paytr-calendar-stats div {
  padding: 10px;
}

.paytr-calendar-stats span,
.paytr-calendar-date span,
.paytr-calendar-money span,
.paytr-calendar-subject small,
.paytr-calendar-change small {
  display: block;
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 750;
}

.paytr-calendar-stats strong {
  display: block;
  margin-top: 4px;
  color: #f8fafc;
  font-size: 0.85rem;
  font-weight: 900;
}

.paytr-calendar-list {
  display: grid;
  gap: 8px;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px;
}

.paytr-calendar-item {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(190px, 1.2fr) minmax(150px, 0.8fr) minmax(200px, 1.2fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
}

.paytr-calendar-item.is-renewal-closed {
  border-color: rgba(245, 158, 11, 0.22);
  background: rgba(245, 158, 11, 0.07);
}

.paytr-calendar-date strong,
.paytr-calendar-subject strong,
.paytr-calendar-money strong {
  display: block;
  color: #f8fafc;
  font-weight: 900;
}

.paytr-calendar-subject span,
.paytr-calendar-money small {
  display: block;
  margin-top: 4px;
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 650;
}

.paytr-calendar-change {
  display: grid;
  justify-items: start;
  gap: 4px;
}

.paytr-live-rail {
  position: relative;
  top: auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.paytr-live-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.paytr-live-rail-head span {
  display: block;
  color: #38bdf8;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.paytr-live-rail-head h3 {
  margin: 3px 0 0;
  color: #f8fafc;
  font-size: 0.92rem;
}

.paytr-live-rail-head em {
  min-width: 28px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.12);
  color: #bae6fd;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 900;
}

.paytr-live-rail-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 10px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.paytr-live-log-item {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-left: 3px solid rgba(56, 189, 248, 0.6);
  border-radius: 8px;
  background: rgba(2, 6, 12, 0.45);
}

.paytr-live-log-item.is-payment {
  border-left-color: rgba(34, 197, 94, 0.7);
}

.paytr-live-log-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.paytr-live-log-top strong {
  min-width: 0;
  color: #f8fafc;
  font-size: 0.78rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.paytr-live-log-item p,
.paytr-live-log-item small,
.paytr-live-log-item footer {
  color: #94a3b8;
  font-size: 0.68rem;
  line-height: 1.35;
}

.paytr-live-log-item p {
  margin: 0;
  overflow-wrap: anywhere;
}

.paytr-live-log-item footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.paytr-live-log-item footer b {
  color: #e2e8f0;
  font-size: 0.7rem;
}

.paytr-live-log-item code {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 5px;
  background: rgba(148, 163, 184, 0.1);
  color: #cbd5e1;
  padding: 2px 5px;
  font-size: 0.64rem;
}

.paytr-live-log-item a {
  width: fit-content;
  color: #7dd3fc;
  font-size: 0.68rem;
  font-weight: 850;
  text-decoration: none;
}

.paytr-live-empty {
  padding: 28px 12px;
  color: #94a3b8;
  text-align: center;
  font-size: 0.76rem;
  font-weight: 750;
}

.paytr-detail-surface {
  min-height: calc(100vh - 182px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.paytr-detail-surface-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.paytr-detail-surface-head span {
  display: block;
  color: #94a3b8;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.paytr-detail-surface-head h3 {
  margin: 4px 0 0;
  color: #f8fafc;
  font-size: 0.95rem;
}

.paytr-detail-surface-head p {
  margin: 4px 0 0;
  color: #94a3b8;
  font-size: 0.76rem;
}

.paytr-detail-surface-actions {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.paytr-detail-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.paytr-detail-surface-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px;
}

#panel-paytr .paytr-detail-grid {
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 8px;
}

#panel-paytr .paytr-drawer-section {
  margin-top: 12px;
}

#panel-paytr .paytr-drawer-actions {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

#panel-paytr .paytr-adjustment-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#panel-paytr .paytr-adjustment-form textarea,
#panel-paytr .paytr-adjustment-form .paytr-form-note {
  grid-column: 1 / -1;
}

@media (max-width: 1280px) {

  .paytr-workspace,
  .paytr-command-workspace.has-detail {
    grid-template-columns: minmax(0, 1fr) 310px;
  }

  .paytr-command-workspace.has-detail .paytr-live-rail {
    display: none;
  }

  .paytr-calendar-item {
    grid-template-columns: minmax(150px, 0.8fr) minmax(180px, 1fr) minmax(150px, 0.8fr);
  }

  #panel-paytr .paytr-detail-grid {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }
}

@media (max-width: 1080px) {

  .paytr-workspace,
  .paytr-command-workspace.has-detail {
    grid-template-columns: 1fr;
  }

  .paytr-command-workspace.has-detail .paytr-live-rail {
    display: flex;
  }

  .paytr-live-rail {
    position: relative;
    top: auto;
    height: auto;
    max-height: 420px;
  }

  #panel-paytr .paytr-table-wrap {
    overflow-x: auto;
    overflow-y: auto;
  }

  .paytr-calendar-head,
  .paytr-calendar-item {
    grid-template-columns: 1fr;
  }

  .paytr-calendar-head {
    align-items: stretch;
    flex-direction: column;
  }

  #panel-paytr .paytr-filter-grid,
  #panel-paytr .paytr-metrics,
  #panel-paytr .paytr-saas-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .paytr-dunning-item {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  body.paytr-panel-active .main-content {
    padding-left: 16px;
    padding-right: 16px;
  }

  #panel-paytr .paytr-header,
  #panel-paytr .paytr-mode-strip,
  .paytr-detail-surface-head,
  .paytr-detail-surface-actions {
    align-items: stretch;
    flex-direction: column;
  }

  #panel-paytr .paytr-metrics,
  #panel-paytr .paytr-saas-kpis,
  #panel-paytr .paytr-filter-grid,
  #panel-paytr .paytr-advanced-filters,
  #panel-paytr .paytr-detail-grid,
  #panel-paytr .paytr-adjustment-form,
  .paytr-calendar-stats {
    grid-template-columns: 1fr;
  }

  #panel-paytr .paytr-top-tabs,
  .paytr-detail-tabs {
    width: 100%;
  }

  #panel-paytr .paytr-top-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  #panel-paytr .paytr-copy-field {
    grid-template-columns: 1fr;
  }
}

/* PayTR-backed payment calendar: compact operations layout */
#panel-subscribers {
  max-width: none;
}

#subscriber-calendar-container {
  width: 100%;
  margin-bottom: 0 !important;
}

.calendar-ops-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  background: rgba(9, 12, 16, 0.96);
  padding: 14px;
}

.calendar-ops-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.calendar-ops-header .calendar-title-group {
  min-width: 0;
}

.calendar-ops-header .calendar-title-group h3 {
  font-size: 1.05rem;
  letter-spacing: 0;
}

.calendar-ops-header .calendar-title-group p {
  max-width: 720px;
}

.calendar-ops-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.calendar-ops-kpis div,
.calendar-agenda-panel,
.calendar-month-panel {
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
  background: rgba(2, 6, 12, 0.38);
}

.calendar-ops-kpis div {
  min-width: 0;
  padding: 10px;
}

.calendar-ops-kpis span,
.calendar-section-head span,
.calendar-agenda-main span,
.calendar-agenda-main small,
.calendar-agenda-money span {
  display: block;
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 750;
}

.calendar-ops-kpis strong {
  display: block;
  margin-top: 4px;
  color: #f8fafc;
  font-size: 1rem;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-ops-kpis small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 0.62rem;
  font-weight: 800;
  white-space: nowrap;
}

.calendar-ops-layout {
  display: grid;
  grid-template-columns: minmax(420px, 0.95fr) minmax(520px, 1.05fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.calendar-agenda-panel,
.calendar-month-panel {
  min-width: 0;
  overflow: hidden;
}

.calendar-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.calendar-section-head strong {
  display: block;
  color: #f8fafc;
  font-size: 0.9rem;
  font-weight: 900;
}

.calendar-agenda-list {
  display: grid;
  gap: 7px;
  max-height: calc(100vh - 390px);
  min-height: 280px;
  overflow: auto;
  padding: 10px;
}

.calendar-agenda-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) minmax(94px, auto);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.44);
}

.calendar-agenda-item.overdue {
  border-color: rgba(239, 68, 68, 0.24);
  background: rgba(239, 68, 68, 0.06);
}

.calendar-agenda-item.canceled {
  border-style: dashed;
  opacity: 0.74;
}

.calendar-agenda-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border-radius: 7px;
  background: rgba(148, 163, 184, 0.1);
  color: #e2e8f0;
  font-size: 0.7rem;
  font-weight: 900;
  text-align: center;
}

.calendar-agenda-main {
  min-width: 0;
}

.calendar-agenda-main strong,
.calendar-agenda-money strong {
  display: block;
  color: #f8fafc;
  font-weight: 900;
}

.calendar-agenda-main strong,
.calendar-agenda-main span,
.calendar-agenda-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-agenda-main a {
  display: inline-flex;
  margin-top: 4px;
  color: #7dd3fc;
  font-size: 0.68rem;
  font-weight: 850;
  text-decoration: none;
}

.calendar-agenda-money {
  text-align: right;
}

.calendar-agenda-empty {
  padding: 28px 12px;
  color: #94a3b8;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 800;
}

.calendar-month-panel {
  padding: 10px;
}

.calendar-month-panel .calendar-grid-container {
  gap: 5px;
}

.calendar-month-panel .calendar-weekday-header {
  padding: 6px 0;
  margin: 0;
  font-size: 0.62rem;
}

.calendar-month-panel .calendar-day-cell {
  min-height: 74px;
  gap: 5px;
  padding: 7px;
  border-radius: 8px;
  overflow: hidden;
}

.calendar-month-panel .calendar-day-cell:hover {
  transform: none;
}

.calendar-month-panel .calendar-day-cell.today-cell::before {
  top: 5px;
  right: 6px;
  font-size: 0.48rem;
}

.calendar-month-panel .calendar-day-number {
  margin: 0;
  font-size: 0.78rem;
}

.calendar-month-panel .calendar-events-stack {
  max-height: none;
  overflow: hidden;
  padding: 0;
}

.calendar-compact-day-summary {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 5px;
  border: 1px solid rgba(34, 197, 94, 0.18);
  border-radius: 6px;
  background: rgba(34, 197, 94, 0.07);
}

.calendar-compact-day-summary.is-risk {
  border-color: rgba(239, 68, 68, 0.24);
  background: rgba(239, 68, 68, 0.07);
}

.calendar-compact-day-summary.is-muted {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(148, 163, 184, 0.07);
}

.calendar-compact-day-summary strong,
.calendar-compact-day-summary span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-compact-day-summary strong {
  color: #f8fafc;
  font-size: 0.68rem;
  font-weight: 900;
}

.calendar-compact-day-summary span {
  color: #94a3b8;
  font-size: 0.58rem;
  font-weight: 800;
}

.calendar-payment-dot.pending {
  background: transparent;
  border-color: #38bdf8;
}

.calendar-month-panel .calendar-details-panel {
  margin-top: 10px;
  padding: 12px;
  border-radius: 8px;
}

.calendar-month-panel .calendar-details-list {
  grid-template-columns: 1fr;
}

@media (max-width: 1360px) {
  .calendar-ops-layout {
    grid-template-columns: minmax(360px, 0.9fr) minmax(480px, 1.1fr);
  }

  .calendar-ops-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .calendar-agenda-list {
    max-height: calc(100vh - 410px);
  }
}

@media (max-width: 1120px) {
  .calendar-ops-header {
    align-items: stretch;
    flex-direction: column;
  }

  .calendar-ops-layout {
    grid-template-columns: 1fr;
  }

  .calendar-agenda-list {
    max-height: 360px;
  }
}

@media (max-width: 760px) {
  .calendar-ops-shell {
    padding: 10px;
  }

  .calendar-ops-kpis,
  .calendar-agenda-item {
    grid-template-columns: 1fr;
  }

  .calendar-agenda-money {
    text-align: left;
  }

  .calendar-month-panel .calendar-day-cell {
    min-height: 58px;
    padding: 5px;
  }
}

/* Keep PayTR live rail on the right for admin workbench widths. */
@media (max-width: 1080px) {
  body.paytr-panel-active .paytr-workspace {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  body.paytr-panel-active .paytr-live-rail {
    height: 100%;
    max-height: none;
  }
}

@media (max-width: 860px) {
  body.paytr-panel-active .paytr-workspace {
    grid-template-columns: 1fr;
  }

  #panel-paytr .paytr-settings-grid {
    grid-template-columns: 1fr;
  }

  body.paytr-panel-active .paytr-live-rail {
    max-height: 320px;
  }
}

#panel-paytr .paytr-action-menu {
  z-index: 20;
}

#panel-paytr .paytr-action-menu.is-open {
  z-index: 1200;
}

#panel-paytr .paytr-action-popover {
  z-index: 1201;
  min-width: 190px;
  max-height: min(360px, calc(100vh - 120px));
  overflow: auto;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.48);
}

/* PayTR Billing OS */
#panel-paytr .billing-os-root {
  width: 100%;
}

#panel-paytr .billing-os {
  --billing-bg: #0f1217;
  --billing-panel: #161b22;
  --billing-panel-2: #21262d;
  --billing-ink: #f8fafc;
  --billing-muted: #94a3b8;
  --billing-soft: #64748b;
  --billing-line: rgba(255, 255, 255, 0.12);
  --billing-line-strong: rgba(255, 255, 255, 0.22);
  --billing-accent: #e65f26;
  --billing-green: #16794c;
  --billing-blue: #2563a8;
  --billing-red: #c9362c;
  --billing-amber: #b76e00;
  width: 100%;
  min-height: calc(100vh - 150px);
  padding: 16px;
  border: 1px solid var(--billing-line);
  border-radius: 8px;
  background: var(--billing-bg);
  color: var(--billing-ink);
  box-shadow: none;
}

#panel-paytr .billing-os *,
#panel-paytr .billing-os *::before,
#panel-paytr .billing-os *::after {
  box-sizing: border-box;
}

#panel-paytr .billing-os button,
#panel-paytr .billing-os input,
#panel-paytr .billing-os select,
#panel-paytr .billing-os textarea {
  font-family: inherit;
}

#panel-paytr .billing-os-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: 18px;
  align-items: stretch;
  padding: 22px;
  border: 1px solid var(--billing-line-strong);
  border-radius: 8px;
  background: var(--billing-panel-2);
  color: var(--billing-ink);
}

#panel-paytr .billing-kicker {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: #fbd0bd;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#panel-paytr .billing-os-hero h1 {
  max-width: 840px;
  margin: 12px 0 0;
  color: var(--billing-ink);
  font-size: clamp(1.55rem, 2.2vw, 2.35rem);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: 0;
}

#panel-paytr .billing-os-hero p {
  max-width: 780px;
  margin: 10px 0 0;
  color: var(--billing-muted);
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.5;
}

#panel-paytr .billing-sync-panel {
  display: grid;
  align-content: center;
  gap: 7px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

#panel-paytr .billing-sync-panel strong {
  color: var(--billing-ink);
  font-size: 1rem;
  font-weight: 850;
}

#panel-paytr .billing-sync-panel span,
#panel-paytr .billing-sync-panel small {
  color: var(--billing-muted);
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.35;
}

#panel-paytr .billing-sync-panel button,
#panel-paytr .billing-tabs button,
#panel-paytr .billing-btn,
#panel-paytr .billing-dunning-actions button,
#panel-paytr .billing-customer-actions button,
#panel-paytr .billing-subscriber-row button,
#panel-paytr .billing-risk-panel button,
#panel-paytr .billing-mini-list button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid var(--billing-line);
  border-radius: 7px;
  padding: 0 12px;
  background: var(--billing-panel);
  color: var(--billing-ink);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

#panel-paytr .billing-sync-panel button {
  width: fit-content;
  margin-top: 5px;
  border-color: var(--billing-line-strong);
  background: var(--billing-panel);
  color: var(--billing-ink);
}

#panel-paytr .billing-btn,
#panel-paytr .billing-risk-panel button {
  border-color: rgba(230, 95, 38, 0.36);
  background: var(--billing-accent);
  color: var(--billing-ink);
}

#panel-paytr .billing-btn.secondary {
  border-color: var(--billing-line);
  background: var(--billing-panel);
  color: var(--billing-ink);
}

#panel-paytr .billing-tabs {
  display: flex;
  gap: 6px;
  margin: 14px 0;
  padding: 6px;
  border: 1px solid var(--billing-line);
  border-radius: 8px;
  background: var(--billing-panel);
  overflow-x: auto;
}

#panel-paytr .billing-tabs button {
  flex: 0 0 auto;
  color: var(--billing-muted);
  border-color: transparent;
  background: transparent;
}

#panel-paytr .billing-tabs button.active {
  border-color: rgba(19, 32, 45, 0.22);
  background: var(--billing-panel-2);
  color: var(--billing-ink);
}

#panel-paytr .billing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

#panel-paytr .billing-layout.with-customer {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
}

#panel-paytr .billing-stage {
  min-width: 0;
}

#panel-paytr .billing-kpi-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

#panel-paytr .billing-kpi {
  min-width: 0;
  min-height: 132px;
  padding: 15px;
  border: 1px solid var(--billing-line);
  border-left: 4px solid var(--billing-blue);
  border-radius: 8px;
  background: var(--billing-panel);
}

#panel-paytr .billing-kpi.green {
  border-left-color: var(--billing-green);
}

#panel-paytr .billing-kpi.blue {
  border-left-color: var(--billing-blue);
}

#panel-paytr .billing-kpi.orange {
  border-left-color: var(--billing-amber);
}

#panel-paytr .billing-kpi.violet {
  border-left-color: #6750a4;
}

#panel-paytr .billing-kpi.ink {
  border-left-color: var(--billing-ink);
}

#panel-paytr .billing-kpi span,
#panel-paytr .billing-panel-head span,
#panel-paytr .billing-section-title span,
#panel-paytr .billing-filterbar label,
#panel-paytr .billing-form-grid label,
#panel-paytr .billing-customer-summary span,
#panel-paytr .billing-ledger dt {
  color: var(--billing-muted);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#panel-paytr .billing-kpi strong {
  display: block;
  margin-top: 13px;
  color: var(--billing-ink);
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

#panel-paytr .billing-kpi small {
  display: block;
  margin-top: 8px;
  color: var(--billing-muted);
  font-size: 0.74rem;
  font-weight: 700;
}

#panel-paytr .billing-completion-kpi {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

#panel-paytr .billing-ring {
  --billing-progress: 0%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, var(--billing-panel) 0 56%, transparent 58%),
    conic-gradient(var(--billing-green) var(--billing-progress), #e2e8f0 0);
}

#panel-paytr .billing-ring strong {
  margin: 0;
  font-size: 1rem;
  line-height: 1;
}

#panel-paytr .billing-health-grid,
#panel-paytr .billing-pricing-grid,
#panel-paytr .billing-usage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

#panel-paytr .billing-panel,
#panel-paytr .billing-filterbar,
#panel-paytr .billing-subscriber-row,
#panel-paytr .billing-dunning-row,
#panel-paytr .billing-customer-card,
#panel-paytr .billing-audit-list article {
  border: 1px solid var(--billing-line);
  border-radius: 8px;
  background: var(--billing-panel);
}

#panel-paytr .billing-panel {
  min-width: 0;
  padding: 14px;
}

#panel-paytr .billing-panel.wide {
  grid-column: 1 / -1;
}

#panel-paytr .billing-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

#panel-paytr .billing-panel-head strong {
  color: var(--billing-ink);
  font-size: 0.85rem;
  font-weight: 850;
  line-height: 1.2;
}

#panel-paytr .billing-risk-numbers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#panel-paytr .billing-risk-numbers div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--billing-line);
  border-radius: 7px;
  background: var(--billing-panel-2);
}

#panel-paytr .billing-risk-numbers b {
  display: block;
  color: var(--billing-red);
  font-size: 1.3rem;
  font-weight: 900;
}

#panel-paytr .billing-risk-numbers span {
  display: block;
  margin-top: 4px;
  color: var(--billing-muted);
  font-size: 0.72rem;
  font-weight: 750;
}

#panel-paytr .billing-risk-panel button {
  margin-top: 12px;
}

#panel-paytr .billing-mini-list {
  display: grid;
  gap: 7px;
}

#panel-paytr .billing-mini-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  justify-content: stretch;
  width: 100%;
  min-height: 40px;
  border-color: var(--billing-line);
  background: var(--billing-panel-2);
  color: var(--billing-ink);
  text-align: left;
}

#panel-paytr .billing-mini-list span,
#panel-paytr .billing-mini-list b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-mini-list b {
  color: var(--billing-blue);
  font-size: 0.74rem;
}

#panel-paytr .billing-ledger {
  display: grid;
  gap: 8px;
  margin: 0;
}

#panel-paytr .billing-ledger div,
#panel-paytr .billing-customer-ledger div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--billing-line);
}

#panel-paytr .billing-ledger div:last-child,
#panel-paytr .billing-customer-ledger div:last-child {
  border-bottom: 0;
}

#panel-paytr .billing-ledger dd {
  margin: 0;
  color: var(--billing-ink);
  font-size: 0.9rem;
  font-weight: 850;
  white-space: nowrap;
}

#panel-paytr .billing-workspace-section,
#panel-paytr .billing-dunning-board,
#panel-paytr .billing-audit {
  display: grid;
  gap: 12px;
}

#panel-paytr .billing-section-title {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--billing-line);
  border-radius: 8px;
  background: var(--billing-panel);
}

#panel-paytr .billing-section-title h2 {
  margin: 0;
  color: var(--billing-ink);
  font-size: 1.25rem;
  font-weight: 850;
  letter-spacing: 0;
}

#panel-paytr .billing-section-title p {
  margin: 0;
  color: var(--billing-muted);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.45;
}

#panel-paytr .billing-filterbar {
  position: sticky;
  top: 8px;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(7, minmax(118px, 1fr));
  gap: 9px;
  align-items: end;
  padding: 12px;
}

#panel-paytr .billing-filterbar label,
#panel-paytr .billing-form-grid label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

#panel-paytr .billing-filterbar input,
#panel-paytr .billing-filterbar select,
#panel-paytr .billing-form-grid input,
#panel-paytr .billing-form-grid select,
#panel-paytr .billing-form-grid textarea,
#panel-paytr .billing-dunning-actions select,
#panel-paytr .billing-mini-admin-form input,
#panel-paytr .billing-mini-admin-form select,
#panel-paytr .billing-mini-admin-form textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 34px;
  border: 1px solid var(--billing-line);
  border-radius: 7px;
  background: var(--billing-panel);
  color: var(--billing-ink);
  padding: 8px 9px;
  font-size: 0.78rem;
  font-weight: 700;
  outline: none;
}

#panel-paytr .billing-form-grid textarea,
#panel-paytr .billing-mini-admin-form textarea {
  min-height: 68px;
  resize: vertical;
}

#panel-paytr .billing-filterbar input:focus,
#panel-paytr .billing-filterbar select:focus,
#panel-paytr .billing-form-grid input:focus,
#panel-paytr .billing-form-grid select:focus,
#panel-paytr .billing-form-grid textarea:focus,
#panel-paytr .billing-dunning-actions select:focus,
#panel-paytr .billing-mini-admin-form input:focus,
#panel-paytr .billing-mini-admin-form select:focus,
#panel-paytr .billing-mini-admin-form textarea:focus {
  border-color: rgba(230, 95, 38, 0.55);
  box-shadow: 0 0 0 3px rgba(230, 95, 38, 0.12);
}

#panel-paytr .billing-filterbar select:disabled,
#panel-paytr .billing-form-grid input:disabled,
#panel-paytr .billing-form-grid select:disabled {
  background: var(--billing-panel-2);
  color: var(--billing-soft);
  cursor: not-allowed;
}

#panel-paytr .billing-subscriber-list,
#panel-paytr .billing-dunning-list,
#panel-paytr .billing-audit-list {
  display: grid;
  gap: 8px;
}

#panel-paytr .billing-subscriber-row {
  display: grid;
  grid-template-columns: 42px minmax(190px, 1.4fr) minmax(100px, 0.75fr) minmax(130px, 0.9fr) minmax(92px, 0.65fr) minmax(110px, 0.75fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 11px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

#panel-paytr .billing-subscriber-row:hover,
#panel-paytr .billing-dunning-row:hover {
  border-color: var(--billing-line-strong);
  background: var(--billing-panel-2);
}

#panel-paytr .billing-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--billing-panel-2);
  color: var(--billing-ink);
  font-size: 0.82rem;
  font-weight: 900;
}

#panel-paytr .billing-row-main,
#panel-paytr .billing-row-date,
#panel-paytr .billing-row-plan,
#panel-paytr .billing-usage-chip,
#panel-paytr .billing-money-stack {
  display: grid;
  gap: 4px;
  min-width: 0;
}

#panel-paytr .billing-row-main strong,
#panel-paytr .billing-row-date b,
#panel-paytr .billing-row-plan b,
#panel-paytr .billing-usage-chip b,
#panel-paytr .billing-money-stack b {
  min-width: 0;
  overflow: hidden;
  color: var(--billing-ink);
  font-size: 0.85rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-row-main span,
#panel-paytr .billing-row-date span,
#panel-paytr .billing-row-plan span,
#panel-paytr .billing-usage-chip span,
#panel-paytr .billing-money-stack span {
  min-width: 0;
  overflow: hidden;
  color: var(--billing-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  min-width: 0;
}

#panel-paytr .billing-row-actions button {
  min-height: 32px;
  padding: 0 9px;
}

#panel-paytr .billing-dunning-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.5fr) minmax(300px, auto);
  gap: 12px;
  align-items: center;
  padding: 12px;
}

#panel-paytr .billing-dunning-row>div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

#panel-paytr .billing-dunning-row strong {
  color: var(--billing-ink);
  font-size: 0.9rem;
  font-weight: 850;
}

#panel-paytr .billing-dunning-row span,
#panel-paytr .billing-dunning-row small {
  min-width: 0;
  overflow: hidden;
  color: var(--billing-muted);
  font-size: 0.74rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-dunning-timeline {
  display: flex;
  gap: 6px;
  align-items: center;
}

#panel-paytr .billing-dunning-timeline i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 28px;
  border: 1px solid var(--billing-line);
  border-radius: 7px;
  background: var(--billing-panel-2);
  color: var(--billing-muted);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 850;
}

#panel-paytr .billing-dunning-timeline i.done {
  border-color: rgba(201, 54, 44, 0.32);
  background: rgba(201, 54, 44, 0.09);
  color: var(--billing-red);
}

#panel-paytr .billing-dunning-actions {
  display: grid;
  grid-template-columns: minmax(135px, 1fr) auto auto;
  gap: 7px;
  align-items: center;
}

#panel-paytr .billing-plan-list,
#panel-paytr .billing-coupon-grid,
#panel-paytr .billing-redemption-list,
#panel-paytr .billing-catalog-columns {
  display: grid;
  gap: 8px;
}

#panel-paytr .billing-plan-list div,
#panel-paytr .billing-coupon-card,
#panel-paytr .billing-catalog-columns div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--billing-line);
  border-radius: 8px;
  background: var(--billing-panel-2);
}

#panel-paytr .billing-plan-list strong,
#panel-paytr .billing-coupon-card strong {
  color: var(--billing-ink);
  font-size: 0.86rem;
  font-weight: 850;
}

#panel-paytr .billing-plan-list span,
#panel-paytr .billing-plan-list small,
#panel-paytr .billing-coupon-card span,
#panel-paytr .billing-coupon-card small,
#panel-paytr .billing-redemption-list span,
#panel-paytr .billing-catalog-columns span {
  min-width: 0;
  overflow: hidden;
  color: var(--billing-muted);
  font-size: 0.74rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  align-items: end;
  margin-top: 8px;
}

#panel-paytr .billing-form-grid.one,
#panel-paytr .billing-form-grid.compact {
  grid-template-columns: 1fr;
}

#panel-paytr .billing-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

#panel-paytr .billing-coupon-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#panel-paytr .billing-catalog-columns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#panel-paytr .billing-customer-card {
  position: sticky;
  top: 12px;
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 110px);
  min-width: 0;
  padding: 14px;
  overflow: auto;
  background: var(--billing-panel);
}

#panel-paytr .billing-customer-card>header {
  display: grid;
  gap: 5px;
  padding: 14px;
  border-radius: 8px;
  background: var(--billing-panel-2);
  color: var(--billing-ink);
}

#panel-paytr .billing-customer-card>header button {
  justify-self: end;
  min-height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--billing-ink);
  padding: 0 10px;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

#panel-paytr .billing-customer-card>header span {
  color: var(--billing-muted);
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#panel-paytr .billing-customer-card>header h2,
#panel-paytr .billing-customer-card>header p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-customer-card>header h2 {
  color: var(--billing-ink);
  font-size: 1.18rem;
  font-weight: 850;
}

#panel-paytr .billing-customer-card>header p {
  color: var(--billing-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

#panel-paytr .billing-customer-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#panel-paytr .billing-customer-summary div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--billing-line);
  border-radius: 8px;
  background: var(--billing-panel-2);
}

#panel-paytr .billing-customer-summary strong {
  min-width: 0;
  overflow: hidden;
  color: var(--billing-ink);
  font-size: 0.82rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-contract-strip {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--billing-line);
  border-radius: 8px;
  background: var(--billing-panel);
}

#panel-paytr .billing-contract-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#panel-paytr .billing-contract-summary div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--billing-line);
  border-radius: 8px;
  background: var(--billing-panel-2);
}

#panel-paytr .billing-contract-summary span,
#panel-paytr .billing-contract-summary small {
  min-width: 0;
  overflow: hidden;
  color: var(--billing-muted);
  font-size: 0.66rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-contract-summary strong {
  min-width: 0;
  overflow: hidden;
  color: var(--billing-ink);
  font-size: 0.82rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-projection-band {
  display: grid;
  grid-template-columns: repeat(12, minmax(44px, 1fr));
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 2px;
}

#panel-paytr .billing-projection-pill {
  display: grid;
  gap: 3px;
  min-width: 44px;
  min-height: 48px;
  align-content: center;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: var(--billing-panel-2);
  padding: 6px;
  text-align: center;
}

#panel-paytr .billing-projection-pill.is-paid {
  border-color: rgba(34, 197, 94, 0.32);
  background: rgba(34, 197, 94, 0.1);
}

#panel-paytr .billing-projection-pill.is-failed,
#panel-paytr .billing-projection-pill.is-risk {
  border-color: rgba(239, 68, 68, 0.28);
  background: rgba(239, 68, 68, 0.08);
}

#panel-paytr .billing-projection-pill span {
  color: var(--billing-muted);
  font-size: 0.66rem;
  font-weight: 850;
}

#panel-paytr .billing-projection-pill strong {
  min-width: 0;
  overflow: hidden;
  color: var(--billing-ink);
  font-size: 0.68rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-customer-ledger,
#panel-paytr .billing-customer-actions {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--billing-line);
  border-radius: 8px;
  background: var(--billing-panel);
}

#panel-paytr .billing-customer-ledger h3,
#panel-paytr .billing-customer-actions h3 {
  margin: 0;
  color: var(--billing-ink);
  font-size: 0.9rem;
  font-weight: 850;
}

#panel-paytr .billing-customer-ledger span,
#panel-paytr .billing-customer-ledger strong {
  min-width: 0;
  overflow: hidden;
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-customer-ledger span {
  color: var(--billing-muted);
  font-weight: 700;
}

#panel-paytr .billing-customer-ledger strong {
  color: var(--billing-ink);
  font-weight: 850;
}

#panel-paytr .billing-customer-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#panel-paytr .billing-customer-actions h3,
#panel-paytr .billing-customer-actions .billing-mini-admin-form,
#panel-paytr .billing-customer-actions .billing-empty {
  grid-column: 1 / -1;
}

#panel-paytr .billing-customer-actions>button {
  width: 100%;
  min-width: 0;
  white-space: normal;
}

#panel-paytr .billing-mini-admin-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--billing-line);
  border-radius: 8px;
  background: var(--billing-panel-2);
}

#panel-paytr .billing-mini-admin-form textarea,
#panel-paytr .billing-mini-admin-form input {
  grid-column: 1 / -1;
}

#panel-paytr .billing-mini-admin-form button {
  min-height: 34px;
  border-color: rgba(230, 95, 38, 0.36);
  background: var(--billing-accent);
  color: var(--billing-ink);
}

#panel-paytr .billing-audit-list article {
  display: grid;
  gap: 5px;
  padding: 12px;
}

#panel-paytr .billing-audit-list strong {
  color: var(--billing-ink);
  font-size: 0.88rem;
  font-weight: 850;
}

#panel-paytr .billing-audit-list span,
#panel-paytr .billing-audit-list small {
  min-width: 0;
  overflow: hidden;
  color: var(--billing-muted);
  font-size: 0.74rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 10px;
  border: 1px dashed var(--billing-line);
  border-radius: 8px;
  background: var(--billing-panel-2);
  color: var(--billing-muted);
  font-size: 0.78rem;
  font-weight: 750;
  text-align: center;
}

#panel-paytr .billing-empty.large {
  min-height: 110px;
}

@media (max-width: 1460px) {
  #panel-paytr .billing-kpi-wall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #panel-paytr .billing-layout.with-customer {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
  }

  #panel-paytr .billing-filterbar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #panel-paytr .billing-subscriber-row {
    grid-template-columns: 42px minmax(180px, 1.2fr) minmax(95px, 0.75fr) minmax(115px, 0.85fr) minmax(92px, 0.7fr) minmax(105px, 0.75fr);
  }

  #panel-paytr .billing-row-actions {
    grid-column: 2 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 1180px) {

  #panel-paytr .billing-os-hero,
  #panel-paytr .billing-layout.with-customer,
  #panel-paytr .billing-health-grid,
  #panel-paytr .billing-pricing-grid,
  #panel-paytr .billing-usage-grid {
    grid-template-columns: 1fr;
  }

  #panel-paytr .billing-customer-card {
    position: relative;
    top: auto;
    max-height: none;
  }

  #panel-paytr .billing-dunning-row,
  #panel-paytr .billing-dunning-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  #panel-paytr .billing-os {
    padding: 10px;
  }

  #panel-paytr .billing-os-hero {
    padding: 16px;
  }

  #panel-paytr .billing-kpi-wall,
  #panel-paytr .billing-filterbar,
  #panel-paytr .billing-coupon-grid,
  #panel-paytr .billing-catalog-columns,
  #panel-paytr .billing-customer-summary,
  #panel-paytr .billing-customer-actions,
  #panel-paytr .billing-form-grid {
    grid-template-columns: 1fr;
  }

  #panel-paytr .billing-subscriber-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  #panel-paytr .billing-subscriber-row>div:not(.billing-avatar):not(.billing-row-main) {
    grid-column: 2;
  }

  #panel-paytr .billing-row-actions {
    grid-column: 2;
    flex-wrap: wrap;
  }

  #panel-paytr .billing-tabs {
    margin-inline: -2px;
  }

  #panel-paytr .billing-tabs button {
    min-height: 36px;
  }
}

@media (max-width: 560px) {
  #panel-paytr .billing-os {
    padding: 8px;
    border-radius: 0;
  }

  #panel-paytr .billing-os-hero h1 {
    font-size: 1.42rem;
  }

  #panel-paytr .billing-row-actions,
  #panel-paytr .billing-inline-actions,
  #panel-paytr .billing-mini-admin-form {
    grid-template-columns: 1fr;
  }

  #panel-paytr .billing-row-actions {
    display: grid;
  }

  #panel-paytr .billing-ledger div,
  #panel-paytr .billing-customer-ledger div,
  #panel-paytr .billing-mini-list button {
    grid-template-columns: 1fr;
  }
}

/* PayTR Billing Ops simplified calendar workspace */
#panel-paytr .billing-ops {
  --billing-bg: #0f1217;
  --billing-panel: #161b22;
  --billing-panel-2: #21262d;
  --billing-ink: #f8fafc;
  --billing-muted: #94a3b8;
  --billing-soft: #64748b;
  --billing-line: rgba(255, 255, 255, 0.12);
  --billing-line-strong: rgba(255, 255, 255, 0.22);
  --billing-accent: #e65f26;
  --billing-green: #157347;
  --billing-blue: #1f5f9f;
  --billing-red: #c2362b;
  --billing-amber: #b76e00;
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 12px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 8px;
  background: var(--billing-bg);
  color: var(--billing-ink);
  overflow: hidden;
}

#panel-paytr .billing-ops button,
#panel-paytr .billing-ops input,
#panel-paytr .billing-ops select,
#panel-paytr .billing-ops textarea {
  font-family: inherit;
}

#panel-paytr .billing-topbar,
#panel-paytr .billing-tabs,
#panel-paytr .billing-calendar-board,
#panel-paytr .billing-day-panel,
#panel-paytr .billing-panel,
#panel-paytr .billing-filterbar,
#panel-paytr .billing-subscriber-row,
#panel-paytr .billing-customer-hero,
#panel-paytr .billing-customer-ledger,
#panel-paytr .billing-customer-actions,
#panel-paytr .billing-action-panel,
#panel-paytr .billing-section-title {
  border: 1px solid var(--billing-line);
  border-radius: 8px;
  background: var(--billing-panel);
}

#panel-paytr .billing-topbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
}

#panel-paytr .billing-topbar span,
#panel-paytr .billing-sync-inline span,
#panel-paytr .billing-kpi span,
#panel-paytr .billing-calendar-toolbar span,
#panel-paytr .billing-day-panel-head span,
#panel-paytr .billing-action-head span,
#panel-paytr .billing-section-title span,
#panel-paytr .billing-panel-head span,
#panel-paytr .billing-filterbar label,
#panel-paytr .billing-form-grid label,
#panel-paytr .billing-customer-summary span,
#panel-paytr .billing-action-facts dt {
  color: var(--billing-muted);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#panel-paytr .billing-topbar h1 {
  margin: 3px 0 0;
  color: var(--billing-ink);
  font-size: 0.95rem;
  font-weight: 850;
  letter-spacing: 0;
}

#panel-paytr .billing-sync-inline {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
  min-width: 0;
}

#panel-paytr .billing-sync-inline strong {
  color: var(--billing-ink);
  font-size: 0.78rem;
  font-weight: 850;
}

#panel-paytr .billing-sync-inline small {
  color: var(--billing-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

#panel-paytr .billing-sync-inline button,
#panel-paytr .billing-tabs button,
#panel-paytr .billing-calendar-nav button,
#panel-paytr .billing-btn,
#panel-paytr .billing-action-buttons button,
#panel-paytr .billing-customer-hero button,
#panel-paytr .billing-mini-admin-form button {
  min-height: 34px;
  border: 1px solid var(--billing-line);
  border-radius: 7px;
  background: var(--billing-panel);
  color: var(--billing-ink);
  padding: 0 12px;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
}

#panel-paytr .billing-tabs {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 10px 0 12px;
  padding: 4px;
  overflow-x: auto;
}

#panel-paytr .billing-tabs button {
  border-color: transparent;
  background: transparent;
  color: var(--billing-muted);
}

#panel-paytr .billing-tabs button.active {
  border-color: var(--billing-line-strong);
  background: var(--billing-panel-2);
  color: var(--billing-ink);
}

#panel-paytr .billing-stage {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

#panel-paytr .billing-kpi-wall {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

#panel-paytr .billing-kpi {
  min-height: 96px;
  padding: 13px 14px;
  border: 1px solid var(--billing-line);
  border-top: 3px solid var(--billing-blue);
  border-radius: 8px;
  background: var(--billing-panel);
}

#panel-paytr .billing-kpi.green {
  border-top-color: var(--billing-green);
}

#panel-paytr .billing-kpi.blue {
  border-top-color: var(--billing-blue);
}

#panel-paytr .billing-kpi.orange {
  border-top-color: var(--billing-amber);
}

#panel-paytr .billing-kpi.ink {
  border-top-color: var(--billing-ink);
}

#panel-paytr .billing-kpi strong {
  display: block;
  margin-top: 10px;
  color: var(--billing-ink);
  font-size: 1.28rem;
  font-weight: 900;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

#panel-paytr .billing-kpi small {
  display: block;
  margin-top: 5px;
  color: var(--billing-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

#panel-paytr .billing-calendar-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 12px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#panel-paytr .billing-calendar-board,
#panel-paytr .billing-day-panel {
  min-width: 0;
  min-height: 0;
  padding: 12px;
  overflow: auto;
}

#panel-paytr .billing-calendar-board {
  display: flex;
  flex-direction: column;
}

#panel-paytr .billing-calendar-toolbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

#panel-paytr .billing-calendar-toolbar strong,
#panel-paytr .billing-day-panel-head strong,
#panel-paytr .billing-action-head strong,
#panel-paytr .billing-section-title h2 {
  display: block;
  margin-top: 3px;
  color: var(--billing-ink);
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: 0;
}

#panel-paytr .billing-calendar-nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#panel-paytr .billing-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: auto repeat(6, minmax(0, 1fr));
  gap: 6px;
  flex: 1;
  min-height: 0;
}

#panel-paytr .billing-weekday {
  padding: 4px 2px;
  color: var(--billing-muted);
  font-size: 0.66rem;
  font-weight: 850;
  text-align: center;
  text-transform: uppercase;
}

#panel-paytr .billing-day-cell {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--billing-line);
  border-radius: 8px;
  background: var(--billing-panel);
  padding: 8px;
  color: var(--billing-ink);
  text-align: left;
  cursor: pointer;
}

#panel-paytr .billing-day-cell.is-muted-month {
  background: var(--billing-panel-2);
  color: var(--billing-soft);
}

#panel-paytr .billing-day-cell.is-selected {
  border-color: var(--billing-line-strong);
  box-shadow: inset 0 0 0 1px #111827;
}

#panel-paytr .billing-day-cell.is-today span {
  color: var(--billing-blue);
}

#panel-paytr .billing-day-cell.has-risk {
  border-color: rgba(194, 54, 43, 0.38);
  background: var(--billing-panel);
}

#panel-paytr .billing-day-cell span {
  color: inherit;
  font-size: 0.74rem;
  font-weight: 850;
}

#panel-paytr .billing-day-cell strong {
  min-width: 0;
  overflow: hidden;
  color: var(--billing-ink);
  font-size: 0.82rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-day-cell small {
  color: var(--billing-muted);
  font-size: 0.66rem;
  font-weight: 800;
}

#panel-paytr .billing-day-cell div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#panel-paytr .billing-day-cell i {
  min-width: 0;
  overflow: hidden;
  color: var(--billing-muted);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-day-cell i.risk {
  color: var(--billing-red);
}

#panel-paytr .billing-day-cell.is-spacer {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  cursor: default;
}

#panel-paytr .billing-marker-list {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

#panel-paytr .billing-day-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  border: 1.5px solid #94a3b8;
  border-radius: 999px;
  background: var(--billing-panel);
  color: var(--billing-muted);
  padding: 0;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

#panel-paytr .billing-day-marker.is-active {
  outline: 2px solid rgba(17, 24, 39, 0.22);
  outline-offset: 1px;
}

#panel-paytr .billing-day-marker.is-paid {
  border-color: #22c55e;
  background: #22c55e;
  color: var(--billing-ink);
}

#panel-paytr .billing-day-marker.is-failed {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

#panel-paytr .billing-day-marker.is-risk {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

#panel-paytr .billing-day-marker span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
}

#panel-paytr .billing-marker-list em {
  color: var(--billing-muted);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 850;
}

#panel-paytr .billing-day-panel {
  position: relative;
  top: auto;
  display: grid;
  align-content: start;
  gap: 10px;
  max-height: 100%;
}

#panel-paytr .billing-day-panel-head small,
#panel-paytr .billing-action-head small,
#panel-paytr .billing-section-title p {
  color: var(--billing-muted);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.35;
}

#panel-paytr .billing-day-payment-list {
  display: grid;
  gap: 6px;
}

#panel-paytr .billing-day-payment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  width: 100%;
  min-width: 0;
  min-height: 54px;
  border: 1px solid var(--billing-line);
  border-radius: 8px;
  background: var(--billing-panel-2);
  padding: 9px;
  text-align: left;
  cursor: pointer;
}

#panel-paytr .billing-day-payment.is-active {
  border-color: var(--billing-line-strong);
  background: var(--billing-panel);
}

#panel-paytr .billing-day-payment span,
#panel-paytr .billing-day-payment small {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-day-payment span {
  color: var(--billing-ink);
  font-size: 0.8rem;
  font-weight: 850;
}

#panel-paytr .billing-day-payment strong {
  grid-column: 2;
  grid-row: 1;
  color: var(--billing-blue);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

#panel-paytr .billing-day-payment small {
  color: var(--billing-muted);
  font-size: 0.7rem;
  font-weight: 700;
}

#panel-paytr .billing-action-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
}

#panel-paytr .billing-action-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

#panel-paytr .billing-action-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

#panel-paytr .billing-action-facts div,
#panel-paytr .billing-customer-summary div {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--billing-line);
  border-radius: 8px;
  background: var(--billing-panel-2);
  padding: 9px;
}

#panel-paytr .billing-action-facts dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--billing-ink);
  font-size: 0.78rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-action-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

#panel-paytr .billing-action-buttons button,
#panel-paytr .billing-mini-admin-form button,
#panel-paytr .billing-btn {
  border-color: rgba(230, 95, 38, 0.35);
  background: var(--billing-accent);
  color: var(--billing-ink);
}

#panel-paytr .billing-action-buttons button.secondary,
#panel-paytr .billing-btn.secondary {
  border-color: var(--billing-line);
  background: var(--billing-panel);
  color: var(--billing-ink);
}

#panel-paytr .billing-workspace-section {
  display: grid;
  align-content: start;
  grid-template-rows: auto auto;
  flex: 1;
  gap: 8px;
  width: 100%;
  max-width: none;
  min-height: 0;
  overflow: auto;
}

#panel-paytr .billing-filter-stack {
  display: grid;
  position: relative;
  align-content: start;
  gap: 6px;
  width: min(420px, 100%);
  margin-bottom: 4px;
}

#panel-paytr .billing-filterbar {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  padding: 8px 10px;
}

#panel-paytr .billing-filterbar-main {
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 0;
}

#panel-paytr .billing-filterbar-advanced {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  width: min(520px, calc(100vw - 32px));
  border-color: var(--billing-line-strong);
  box-shadow: 0 16px 34px rgba(2, 6, 23, 0.38);
}

#panel-paytr .billing-filterbar label,
#panel-paytr .billing-form-grid label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

#panel-paytr .billing-filterbar input,
#panel-paytr .billing-filterbar select,
#panel-paytr .billing-form-grid input,
#panel-paytr .billing-form-grid select,
#panel-paytr .billing-form-grid textarea,
#panel-paytr .billing-mini-admin-form input,
#panel-paytr .billing-mini-admin-form select,
#panel-paytr .billing-mini-admin-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--billing-line);
  border-radius: 7px;
  background: var(--billing-panel);
  color: var(--billing-ink);
  padding: 8px 9px;
  font-size: 0.78rem;
  font-weight: 700;
  outline: none;
}

#panel-paytr .billing-search-field span {
  display: none;
}

#panel-paytr .billing-search-field input {
  min-height: 32px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.46);
  padding: 6px 12px;
  font-size: 0.74rem;
}

#panel-paytr .billing-filterbar input:focus,
#panel-paytr .billing-filterbar select:focus,
#panel-paytr .billing-form-grid input:focus,
#panel-paytr .billing-form-grid select:focus,
#panel-paytr .billing-form-grid textarea:focus {
  border-color: rgba(31, 95, 159, 0.5);
  box-shadow: 0 0 0 3px rgba(31, 95, 159, 0.1);
}

#panel-paytr .billing-filter-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  width: 34px;
  min-width: 34px;
  min-height: 32px;
  border: 1px solid var(--billing-line);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.64);
  color: var(--billing-ink);
  padding: 0;
  cursor: pointer;
  line-height: 1;
}

#panel-paytr .billing-filter-toggle svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

#panel-paytr .billing-filter-toggle:hover,
#panel-paytr .billing-filter-toggle:focus-visible,
#panel-paytr .billing-filter-toggle.is-open {
  border-color: var(--billing-line-strong);
  color: #bfdbfe;
}

#panel-paytr .billing-subscriber-list {
  display: grid;
  align-content: start;
  gap: 6px;
  width: 100%;
  max-width: none;
  min-width: 0;
  overflow-x: auto;
}

#panel-paytr .billing-subscriber-header {
  display: grid;
  grid-template-columns: 30px minmax(150px, 1.35fr) minmax(62px, 0.42fr) minmax(126px, 0.74fr) minmax(86px, 0.48fr) minmax(104px, 0.58fr) minmax(52px, 0.3fr) minmax(88px, 0.46fr);
  gap: 5px 7px;
  align-items: center;
  min-width: 0;
  padding: 0 10px 2px;
}

#panel-paytr .billing-subscriber-header>span {
  min-width: 0;
  overflow: hidden;
  color: #93c5fd;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-sort-cell {
  display: flex;
  align-items: center;
}

#panel-paytr .billing-sort-header {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-transform: inherit;
  cursor: pointer;
}

#panel-paytr .billing-sort-header span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-sort-header em {
  flex: 0 0 auto;
  color: var(--billing-accent);
  font-size: 0.52rem;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0;
}

#panel-paytr .billing-sort-header:hover,
#panel-paytr .billing-sort-header:focus-visible,
#panel-paytr .billing-sort-header.is-active {
  color: #bfdbfe;
  outline: none;
}

#panel-paytr .billing-sort-header:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

#panel-paytr .billing-header-date .billing-sort-header,
#panel-paytr .billing-header-cycle .billing-sort-header {
  justify-content: center;
}

#panel-paytr .billing-header-discount .billing-sort-header,
#panel-paytr .billing-header-final .billing-sort-header {
  justify-content: flex-end;
}

#panel-paytr .billing-header-date,
#panel-paytr .billing-header-cycle {
  text-align: center;
}

#panel-paytr .billing-header-discount,
#panel-paytr .billing-header-final {
  text-align: right;
}

#panel-paytr .billing-subscriber-row {
  display: grid;
  grid-template-columns: 30px minmax(150px, 1.35fr) minmax(62px, 0.42fr) minmax(126px, 0.74fr) minmax(86px, 0.48fr) minmax(104px, 0.58fr) minmax(52px, 0.3fr) minmax(88px, 0.46fr);
  gap: 5px 7px;
  align-items: center;
  min-height: 58px;
  min-width: 0;
  padding: 8px 10px;
  cursor: pointer;
}

#panel-paytr .billing-subscriber-row:hover {
  border-color: var(--billing-line-strong);
  background: var(--billing-panel-2);
}

#panel-paytr .billing-subscriber-row:focus-visible {
  border-color: var(--billing-line-strong);
  outline: 2px solid rgba(249, 115, 22, 0.28);
  outline-offset: 1px;
}

#panel-paytr .billing-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--billing-panel-2);
  color: var(--billing-ink);
  font-size: 0.68rem;
  font-weight: 900;
}

#panel-paytr .billing-row-main,
#panel-paytr .billing-row-date,
#panel-paytr .billing-row-plan,
#panel-paytr .billing-row-cycle,
#panel-paytr .billing-row-discount,
#panel-paytr .billing-usage-chip,
#panel-paytr .billing-money-stack {
  display: grid;
  gap: 2px;
  min-width: 0;
}

#panel-paytr .billing-row-status {
  display: flex;
  align-items: center;
  justify-self: start;
  min-width: 0;
}

#panel-paytr .billing-row-status .paytr-badge {
  max-width: 100%;
  padding: 3px 7px;
  overflow: hidden;
  font-size: 0.65rem;
  text-overflow: ellipsis;
}

#panel-paytr .billing-row-main strong,
#panel-paytr .billing-row-date b,
#panel-paytr .billing-row-plan b,
#panel-paytr .billing-row-cycle b,
#panel-paytr .billing-row-discount b,
#panel-paytr .billing-usage-chip b,
#panel-paytr .billing-money-stack b,
#panel-paytr .billing-customer-summary strong,
#panel-paytr .billing-plan-list strong,
#panel-paytr .billing-coupon-card strong {
  min-width: 0;
  overflow: hidden;
  color: var(--billing-ink);
  font-size: 0.8rem;
  font-weight: 850;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-row-main span,
#panel-paytr .billing-row-date span,
#panel-paytr .billing-row-plan span,
#panel-paytr .billing-row-cycle span,
#panel-paytr .billing-row-discount span,
#panel-paytr .billing-usage-chip span,
#panel-paytr .billing-money-stack span,
#panel-paytr .billing-plan-list span,
#panel-paytr .billing-plan-list small,
#panel-paytr .billing-coupon-card span,
#panel-paytr .billing-coupon-card small,
#panel-paytr .billing-redemption-list span,
#panel-paytr .billing-catalog-columns span {
  min-width: 0;
  overflow: hidden;
  color: var(--billing-muted);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-row-date b,
#panel-paytr .billing-row-date span,
#panel-paytr .billing-row-cycle b,
#panel-paytr .billing-row-cycle span {
  display: block;
}

#panel-paytr .billing-time-meter {
  display: grid;
  justify-items: center;
  align-items: center;
  width: min(82px, 100%);
  min-width: 0;
}

#panel-paytr .billing-time-chip {
  display: none;
}

#panel-paytr .billing-time-track {
  display: block;
  width: 76px;
  max-width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.2);
}

#panel-paytr .billing-time-fill {
  display: block;
  width: var(--billing-time-meter-value, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--billing-time-meter-color, #38bdf8);
}

#panel-paytr .billing-row-date {
  display: grid !important;
  align-content: center;
  justify-items: center;
  gap: 3px !important;
  min-width: 0;
  text-align: center;
}

#panel-paytr .billing-row-date .billing-time-meter {
  justify-self: center;
}

#panel-paytr .billing-row-date.has-time-meter {
  gap: 4px !important;
}

#panel-paytr .billing-row-date>b {
  justify-self: center;
  text-align: center;
}

#panel-paytr .billing-row-date-label {
  display: block;
  justify-self: center;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--billing-ink) !important;
  font-size: 0.7rem !important;
  font-weight: 850 !important;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-row-date>span:not(.billing-row-date-label) {
  justify-self: center;
  max-width: 100%;
  overflow: hidden;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-row-date.has-time-meter .billing-row-date-label {
  display: none;
}

/* Month dots */
#panel-paytr .billing-month-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 2px 0;
}

#panel-paytr .billing-month-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 50%;
  background: transparent;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

#panel-paytr .billing-month-dot.is-filled {
  border-color: #22c55e;
  background: #22c55e;
  box-shadow: 0 0 5px rgba(34, 197, 94, 0.35);
}

#panel-paytr .billing-month-dot.is-price-notice {
  border-color: #f97316;
  background: rgba(249, 115, 22, 0.28);
  box-shadow: 0 0 5px rgba(249, 115, 22, 0.32);
}

#panel-paytr .billing-month-dot.is-filled.is-price-notice {
  background: #f97316;
}


#panel-paytr .billing-cycle-badge {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: max-content;
  max-width: 100%;
  min-height: 17px;
  margin-top: 1px;
  border: 1px solid rgba(245, 158, 11, 0.34);
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.1);
  color: #facc15;
  padding: 1px 6px;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

#panel-paytr .billing-cycle-badge.is-expired {
  border-color: rgba(248, 113, 113, 0.38);
  background: rgba(248, 113, 113, 0.1);
  color: #fca5a5;
}

#panel-paytr .billing-cycle-badge.is-final {
  border-color: rgba(249, 115, 22, 0.42);
  background: rgba(249, 115, 22, 0.12);
  color: #fdba74;
}

#panel-paytr .billing-subscriber-row .billing-money-stack {
  justify-items: end;
  text-align: right;
}

#panel-paytr .billing-row-plan,
#panel-paytr .billing-row-discount {
  align-content: center;
}

#panel-paytr .billing-row-discount {
  justify-items: end;
  text-align: right;
}

#panel-paytr .billing-row-cycle {
  align-content: center;
  justify-items: center;
  text-align: center;
}

#panel-paytr .billing-cycle-title,
#panel-paytr .billing-cycle-detail {
  display: block;
  max-width: 100%;
  overflow: hidden;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-cycle-title {
  color: var(--billing-ink) !important;
  font-weight: 850 !important;
}

#panel-paytr .billing-cycle-detail {
  color: var(--billing-muted) !important;
  font-size: 0.7rem !important;
}

#panel-paytr .billing-settings {
  display: grid;
  align-content: start;
  flex: 1;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

#panel-paytr .billing-customer-workspace {
  display: grid;
  align-content: start;
  flex: 1;
  gap: 12px;
  min-height: 0;
  overflow: auto;
}

#panel-paytr .billing-section-title {
  display: grid;
  gap: 4px;
  padding: 14px;
}

#panel-paytr .billing-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#panel-paytr .billing-panel {
  min-width: 0;
  padding: 12px;
}

#panel-paytr .billing-panel.wide {
  grid-column: 1 / -1;
}

#panel-paytr .billing-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

#panel-paytr .billing-panel-head strong {
  color: var(--billing-ink);
  font-size: 0.94rem;
  font-weight: 850;
}

#panel-paytr .billing-plan-list,
#panel-paytr .billing-coupon-grid,
#panel-paytr .billing-redemption-list,
#panel-paytr .billing-catalog-columns,
#panel-paytr .billing-audit-list {
  display: grid;
  gap: 7px;
}

#panel-paytr .billing-plan-list div,
#panel-paytr .billing-coupon-card,
#panel-paytr .billing-catalog-columns div,
#panel-paytr .billing-audit-list article {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid var(--billing-line);
  border-radius: 8px;
  background: var(--billing-panel-2);
  padding: 9px;
}

#panel-paytr .billing-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  margin-top: 8px;
}

#panel-paytr .billing-form-grid.one,
#panel-paytr .billing-form-grid.compact {
  grid-template-columns: 1fr;
}

#panel-paytr .billing-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

#panel-paytr .billing-coupon-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 8px;
}

#panel-paytr .billing-settings-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#panel-paytr .billing-settings-columns.two {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

#panel-paytr .billing-catalog-columns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 10px;
}

#panel-paytr .billing-catalog-columns.one {
  grid-template-columns: 1fr;
  margin-top: 0;
}

#panel-paytr .billing-customer-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
}

#panel-paytr .billing-customer-hero h2,
#panel-paytr .billing-customer-hero p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-customer-hero h2 {
  color: var(--billing-ink);
  font-size: 1.18rem;
  font-weight: 850;
}

#panel-paytr .billing-customer-hero p {
  margin-top: 3px;
  color: var(--billing-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

#panel-paytr .billing-customer-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#panel-paytr .billing-customer-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.86fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: 0;
}

#panel-paytr .billing-customer-ledger,
#panel-paytr .billing-customer-actions {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
}

#panel-paytr .billing-customer-ledger h3,
#panel-paytr .billing-customer-actions h3,
#panel-paytr .billing-action-panel h3 {
  margin: 0;
  color: var(--billing-ink);
  font-size: 0.9rem;
  font-weight: 850;
}

#panel-paytr .billing-customer-ledger div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--billing-line);
}

#panel-paytr .billing-customer-ledger div:last-child {
  border-bottom: 0;
}

#panel-paytr .billing-customer-ledger span,
#panel-paytr .billing-customer-ledger strong,
#panel-paytr .billing-audit-list span,
#panel-paytr .billing-audit-list strong {
  min-width: 0;
  overflow: hidden;
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-customer-ledger span,
#panel-paytr .billing-audit-list span {
  color: var(--billing-muted);
  font-weight: 700;
}

#panel-paytr .billing-customer-ledger strong,
#panel-paytr .billing-audit-list strong {
  color: var(--billing-ink);
  font-weight: 850;
}

#panel-paytr .billing-mini-admin-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  min-width: 0;
  border: 1px solid var(--billing-line);
  border-radius: 8px;
  background: var(--billing-panel-2);
  padding: 9px;
}

#panel-paytr .billing-mini-admin-form input,
#panel-paytr .billing-mini-admin-form textarea {
  grid-column: 1 / -1;
}

#panel-paytr .billing-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 10px;
  border: 1px dashed var(--billing-line);
  border-radius: 8px;
  background: var(--billing-panel-2);
  color: var(--billing-muted);
  font-size: 0.78rem;
  font-weight: 750;
  text-align: center;
}

#panel-paytr .billing-empty.large {
  min-height: 110px;
}

@media (max-width: 1320px) {
  #panel-paytr .billing-stage {
    overflow: auto;
  }

  #panel-paytr .billing-calendar-shell,
  #panel-paytr .billing-customer-grid,
  #panel-paytr .billing-settings-columns,
  #panel-paytr .billing-settings-columns.two {
    grid-template-columns: 1fr;
  }

  #panel-paytr .billing-calendar-shell {
    flex: 0 0 auto;
    overflow: visible;
  }

  #panel-paytr .billing-calendar-board,
  #panel-paytr .billing-day-panel {
    overflow: visible;
  }

  #panel-paytr .billing-month-grid {
    flex: 0 0 auto;
    grid-template-rows: auto repeat(6, 82px);
  }

  #panel-paytr .billing-day-panel {
    position: relative;
    top: auto;
    max-height: none;
  }

  #panel-paytr .billing-filterbar-main {
    grid-template-columns: minmax(0, 1fr) 34px;
  }

  #panel-paytr .billing-filterbar-advanced {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1040px) {
  #panel-paytr .billing-subscriber-header {
    display: none;
  }

  #panel-paytr .billing-subscriber-row {
    grid-template-columns: 30px minmax(0, 1fr) minmax(104px, auto);
    gap: 7px 10px;
    align-items: start;
    padding: 10px;
  }

  #panel-paytr .billing-row-main {
    grid-column: 2 / -1;
  }

  #panel-paytr .billing-row-status,
  #panel-paytr .billing-row-date,
  #panel-paytr .billing-row-discount {
    grid-column: 2 !important;
  }

  #panel-paytr .billing-row-status {
    grid-row: 2;
    justify-self: start;
  }

  #panel-paytr .billing-row-date {
    grid-row: 3;
  }

  #panel-paytr .billing-row-discount {
    grid-row: 4;
  }

  #panel-paytr .billing-row-plan,
  #panel-paytr .billing-subscriber-row .billing-money-stack {
    grid-column: 3 !important;
    justify-items: end;
    text-align: right;
  }

  #panel-paytr .billing-row-plan {
    grid-row: 2;
  }

  #panel-paytr .billing-row-cycle {
    grid-column: 3 !important;
    grid-row: 3;
    justify-items: center;
    text-align: center;
  }

  #panel-paytr .billing-row-cycle .billing-month-dots {
    justify-content: center;
    max-width: 108px;
  }

  #panel-paytr .billing-row-cycle .billing-cycle-badge {
    justify-self: center;
  }

  #panel-paytr .billing-subscriber-row .billing-money-stack {
    grid-row: 4;
    align-self: start;
  }
}

@media (max-width: 920px) {

  #panel-paytr .billing-topbar,
  #panel-paytr .billing-calendar-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  #panel-paytr .billing-sync-inline,
  #panel-paytr .billing-calendar-nav {
    justify-content: flex-start;
  }

  #panel-paytr .billing-kpi-wall,
  #panel-paytr .billing-settings-grid,
  #panel-paytr .billing-catalog-columns,
  #panel-paytr .billing-coupon-grid,
  #panel-paytr .billing-customer-summary,
  #panel-paytr .billing-filterbar-advanced {
    grid-template-columns: 1fr;
  }

  #panel-paytr .billing-filterbar-main .billing-filter-toggle {
    width: 34px;
  }
}

@media (max-width: 760px) {
  body.paytr-panel-active .sidebar {
    display: none !important;
  }

  body.paytr-panel-active .main-content {
    margin-left: 0;
    width: 100%;
  }

  body.paytr-panel-active .panels-wrapper {
    padding: 8px;
  }
}

@media (max-width: 620px) {
  #panel-paytr .billing-ops {
    padding: 8px;
  }

  #panel-paytr .billing-filter-stack {
    width: 100%;
  }

  #panel-paytr .billing-filterbar-advanced {
    position: static;
    width: 100%;
  }

  #panel-paytr .billing-month-grid {
    grid-template-rows: auto repeat(6, 58px);
    gap: 4px;
  }

  #panel-paytr .billing-day-cell {
    min-height: 0;
    padding: 6px;
  }

  #panel-paytr .billing-day-cell strong,
  #panel-paytr .billing-day-cell small,
  #panel-paytr .billing-day-cell div {
    display: none;
  }

  #panel-paytr .billing-action-facts,
  #panel-paytr .billing-action-buttons,
  #panel-paytr .billing-form-grid,
  #panel-paytr .billing-mini-admin-form,
  #panel-paytr .billing-customer-hero {
    grid-template-columns: 1fr;
  }

  #panel-paytr .billing-customer-ledger div,
  #panel-paytr .billing-day-payment {
    grid-template-columns: 1fr;
  }

  #panel-paytr .billing-subscriber-row {
    grid-template-columns: minmax(0, 1fr) minmax(92px, auto);
    gap: 6px 8px;
  }

  #panel-paytr .billing-avatar {
    display: none;
  }

  #panel-paytr .billing-row-main {
    grid-column: 1 / -1;
  }

  #panel-paytr .billing-row-status,
  #panel-paytr .billing-row-date,
  #panel-paytr .billing-row-discount {
    grid-column: 1 !important;
  }

  #panel-paytr .billing-row-plan,
  #panel-paytr .billing-subscriber-row .billing-money-stack {
    grid-column: 2 !important;
  }

  #panel-paytr .billing-row-cycle {
    grid-column: 2 !important;
    justify-items: center;
    text-align: center;
  }

  #panel-paytr .billing-row-date {
    min-width: 0;
  }
}

/* PayTR SaaS core billing cleanup */
#panel-paytr .billing-settings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#panel-paytr .billing-discount-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#panel-paytr .billing-discount-form>strong,
#panel-paytr .billing-discount-form textarea,
#panel-paytr .billing-discount-form .billing-inline-actions {
  grid-column: 1 / -1;
}

#panel-paytr .billing-discount-form textarea {
  min-height: 64px;
  resize: vertical;
}

#panel-paytr .billing-audit-list.detailed {
  display: grid;
  gap: 8px;
  max-height: 460px;
  overflow: auto;
}

#panel-paytr .billing-audit-list.detailed article {
  display: grid;
  gap: 5px;
}

#panel-paytr .billing-audit-list.detailed strong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

#panel-paytr .billing-audit-list.detailed .paytr-badge {
  font-size: 0.66rem;
}

#panel-paytr .billing-customer-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

#panel-paytr .billing-customer-actions .billing-action-buttons {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1280px) {
  #panel-paytr .billing-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #panel-paytr .billing-settings-grid .billing-panel.wide {
    grid-column: 1 / -1;
  }

  #panel-paytr .billing-customer-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {

  #panel-paytr .billing-settings-grid,
  #panel-paytr .billing-discount-form,
  #panel-paytr .billing-customer-summary {
    grid-template-columns: 1fr;
  }
}

/* PayTR overflow hardening */
#panel-paytr .billing-os-root,
#panel-paytr .billing-os-root * {
  box-sizing: border-box;
}

#panel-paytr .billing-os-root {
  overflow-anchor: none;
}

#panel-paytr .billing-stage {
  min-width: 0;
  min-height: 0;
  padding-bottom: 96px;
}

#panel-paytr .billing-calendar-shell {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  align-items: start;
  min-width: 0;
}

#panel-paytr .billing-calendar-board,
#panel-paytr .billing-day-panel,
#panel-paytr .billing-customer-workspace,
#panel-paytr .billing-settings-view,
#panel-paytr .billing-panel {
  min-width: 0;
}

#panel-paytr .billing-day-panel {
  max-width: 100%;
  max-height: min(72vh, 760px);
  overflow: auto;
  padding-bottom: 84px;
}

#panel-paytr .billing-day-cell,
#panel-paytr .billing-day-payment,
#panel-paytr .billing-action-panel,
#panel-paytr .billing-customer-actions,
#panel-paytr .billing-customer-ledger,
#panel-paytr .billing-mini-admin-form,
#panel-paytr .billing-form-grid,
#panel-paytr .billing-panel-head,
#panel-paytr .billing-catalog-columns>div {
  min-width: 0;
}

#panel-paytr .billing-day-cell {
  overflow: hidden;
}

#panel-paytr .billing-day-cell>* {
  min-width: 0;
}

#panel-paytr .billing-day-cell strong,
#panel-paytr .billing-day-cell small,
#panel-paytr .billing-day-cell i,
#panel-paytr .billing-day-payment span,
#panel-paytr .billing-day-payment strong,
#panel-paytr .billing-panel-head span,
#panel-paytr .billing-panel-head strong,
#panel-paytr .billing-catalog-columns span,
#panel-paytr .billing-customer-ledger span,
#panel-paytr .billing-customer-ledger strong,
#panel-paytr .billing-audit-list span,
#panel-paytr .billing-audit-list strong {
  max-width: 100%;
  overflow-wrap: anywhere;
}

#panel-paytr .billing-action-buttons {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#panel-paytr .billing-action-buttons button,
#panel-paytr .billing-inline-actions button,
#panel-paytr .billing-mini-admin-form button,
#panel-paytr .billing-calendar-nav button,
#panel-paytr .billing-tabs button,
#panel-paytr .billing-topbar button {
  min-width: 0;
  white-space: normal;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

#panel-paytr .billing-mini-admin-form {
  grid-template-columns: minmax(0, 1fr) minmax(110px, auto);
}

#panel-paytr .billing-mini-admin-form select,
#panel-paytr .billing-mini-admin-form input,
#panel-paytr .billing-mini-admin-form textarea,
#panel-paytr .billing-form-grid input,
#panel-paytr .billing-form-grid select,
#panel-paytr .billing-form-grid textarea {
  min-width: 0;
  width: 100%;
}

#panel-paytr .billing-settings-columns {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

#panel-paytr .billing-settings-columns.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#panel-paytr .billing-catalog-columns.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#panel-paytr .billing-customer-grid {
  grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1fr) minmax(0, 1fr);
}

@media (max-width: 1180px) {

  #panel-paytr .billing-calendar-shell,
  #panel-paytr .billing-customer-grid {
    grid-template-columns: 1fr;
  }

  #panel-paytr .billing-day-panel {
    max-height: none;
  }

  #panel-paytr .billing-customer-summary,
  #panel-paytr .billing-settings-columns.two,
  #panel-paytr .billing-catalog-columns.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #panel-paytr .billing-stage {
    padding-bottom: 120px;
  }

  #panel-paytr .billing-tabs {
    max-width: 100%;
    overflow-x: auto;
  }

  #panel-paytr .billing-calendar-toolbar,
  #panel-paytr .billing-topbar,
  #panel-paytr .billing-sync-inline,
  #panel-paytr .billing-calendar-nav,
  #panel-paytr .billing-inline-actions {
    width: 100%;
  }

  #panel-paytr .billing-calendar-nav,
  #panel-paytr .billing-inline-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #panel-paytr .billing-inline-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #panel-paytr .billing-customer-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {

  #panel-paytr .billing-action-buttons,
  #panel-paytr .billing-mini-admin-form,
  #panel-paytr .billing-customer-summary,
  #panel-paytr .billing-settings-columns,
  #panel-paytr .billing-settings-columns.two,
  #panel-paytr .billing-catalog-columns.two,
  #panel-paytr .billing-inline-actions {
    grid-template-columns: 1fr;
  }

  #panel-paytr .billing-calendar-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #panel-paytr .billing-tabs button,
  #panel-paytr .billing-calendar-nav button,
  #panel-paytr .billing-action-buttons button {
    min-height: 38px;
  }
}

@media (max-width: 760px) {
  #panel-paytr .billing-day-cell .billing-marker-list {
    display: flex !important;
  }

  #panel-paytr .billing-day-marker {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    font-size: 0.54rem;
  }

  #panel-paytr .billing-contract-summary,
  #panel-paytr .paytr-mode-segment {
    grid-template-columns: 1fr;
  }

  #panel-paytr .billing-projection-band {
    grid-template-columns: repeat(6, minmax(44px, 1fr));
  }
}



/* =========================================================
   SAAS WORKSPACE (BRAND NEW UI)
   ========================================================= */

.saas-dashboard {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background-color: #09090b;
  font-family: system-ui, -apple-system, sans-serif;
  color: #fafafa;
  overflow-y: auto;
  height: 100vh;
}

/* Header */
.saas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #27272a;
}

.saas-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.saas-back-btn {
  background: transparent;
  border: 1px solid #27272a;
  color: #a1a1aa;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}

.saas-back-btn:hover {
  background: #27272a;
  color: #fafafa;
}

.saas-header-title h2 {
  margin: 0 0 4px 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fafafa;
}

.saas-header-title p {
  margin: 0;
  color: #a1a1aa;
  font-size: 0.875rem;
}

.saas-badge {
  background: rgba(234, 88, 12, 0.1);
  color: #ea580c;
  border: 1px solid rgba(234, 88, 12, 0.2);
  padding: 6px 12px;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.875rem;
}

/* KPI Cards */
.saas-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.saas-kpi-card {
  background: #18181b;
  border: 1px solid #27272a;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.saas-kpi-card span {
  color: #a1a1aa;
  font-size: 0.875rem;
  margin-bottom: 8px;
  font-weight: 500;
}

.saas-kpi-card strong {
  color: #fafafa;
  font-size: 1.25rem;
  font-weight: 700;
}

.saas-kpi-card small {
  color: #71717a;
  font-size: 0.75rem;
  margin-top: 4px;
}

/* Main Grid Layout */
.saas-main-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
  align-items: start;
}

/* Sidebar / Controls */
.saas-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.saas-card {
  background: #18181b;
  border: 1px solid #27272a;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.saas-card h3 {
  margin: 0 0 20px 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #fafafa;
}

.saas-btn-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.saas-action-btn {
  width: 100%;
  padding: 12px;
  background: #27272a;
  color: #fafafa;
  border: 1px solid #3f3f46;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.saas-action-btn:hover {
  background: #3f3f46;
}

.saas-action-btn.primary {
  background: #ea580c;
  color: #fff;
  border-color: #ea580c;
}

.saas-action-btn.primary:hover {
  background: #d946ef;
  border-color: #d946ef;
}

.saas-form-group {
  margin-bottom: 16px;
}

.saas-form-group:last-child {
  margin-bottom: 0;
}

.saas-input,
.saas-select {
  width: 100%;
  padding: 12px;
  background: #09090b;
  border: 1px solid #3f3f46;
  border-radius: 8px;
  color: #fafafa;
  font-size: 0.875rem;
  margin-bottom: 12px;
}

.saas-input:focus,
.saas-select:focus {
  outline: none;
  border-color: #ea580c;
  box-shadow: 0 0 0 1px #ea580c;
}

/* Content Area */
.saas-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.saas-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #27272a;
}

.saas-list-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.saas-list-item-left strong {
  display: block;
  font-size: 1rem;
  color: #fafafa;
  margin-bottom: 4px;
}

.saas-list-item-left span {
  font-size: 0.875rem;
  color: #a1a1aa;
}

.saas-list-item-right span {
  font-size: 0.875rem;
  color: #71717a;
}

.saas-empty {
  text-align: center;
  padding: 24px;
  color: #71717a;
  background: #09090b;
  border: 1px dashed #3f3f46;
  border-radius: 8px;
  font-size: 0.875rem;
}

@media (max-width: 1024px) {
  .saas-main-grid {
    grid-template-columns: 1fr;
  }
}

/* Projection Strip */
.saas-projection-strip {
  background: #18181b;
  border: 1px solid #27272a;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.saas-projection-header {
  display: flex;
  gap: 24px;
  font-size: 0.85rem;
  color: #a1a1aa;
}

.saas-projection-header strong {
  color: #fafafa;
  margin-left: 4px;
}

.saas-projection-band {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.saas-projection-pill {
  flex-shrink: 0;
  padding: 6px 12px;
  background: #27272a;
  border: 1px solid #3f3f46;
  border-radius: 6px;
  font-size: 0.8rem;
  color: #d4d4d8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.saas-projection-pill span {
  font-weight: 700;
  color: #fafafa;
}

.saas-projection-pill.completed {
  background: rgba(22, 163, 74, 0.1);
  border-color: rgba(22, 163, 74, 0.2);
  color: #4ade80;
}

.saas-projection-pill.completed span {
  color: #4ade80;
}

.saas-projection-pill.active {
  background: rgba(234, 88, 12, 0.1);
  border-color: rgba(234, 88, 12, 0.2);
  color: #fb923c;
}

.saas-projection-pill.active span {
  color: #fb923c;
}

/* PAYTR CUSTOMER WORKSPACE: FINANCE COCKPIT */
.saas-dashboard {
  gap: 18px;
  height: auto;
  min-height: calc(100vh - 170px);
  padding: 28px 24px 42px;
  background: #090b0f;
  color: #f8fafc;
  overflow: visible;
}

.saas-header {
  align-items: flex-start;
  gap: 22px;
  padding: 0 0 22px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.saas-header-left {
  align-items: flex-start;
}

.saas-back-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.86);
  border-color: rgba(148, 163, 184, 0.2);
  color: #cbd5e1;
  font-size: 1rem;
  font-weight: 900;
}

.saas-header-title span,
.saas-card-head span,
.saas-action-group span {
  display: block;
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.saas-header-title h2 {
  margin: 6px 0 6px;
  font-size: clamp(1.9rem, 2.8vw, 3.1rem);
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
}

.saas-header-title p {
  color: #cbd5e1;
}

.saas-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.saas-status-pill,
.saas-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.78rem;
  font-weight: 850;
}

.saas-status-pill {
  background: var(--pill-bg);
  color: var(--pill-color);
  border: 1px solid var(--pill-border);
}

.saas-badge {
  background: rgba(249, 115, 22, 0.12);
  border-color: rgba(249, 115, 22, 0.24);
  color: #fdba74;
}

.saas-hero-band {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: 18px;
  padding: 20px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(9, 11, 15, 0.98));
}

.saas-hero-band.good {
  border-color: rgba(34, 197, 94, 0.24);
}

.saas-hero-band.warning {
  border-color: rgba(249, 115, 22, 0.32);
}

.saas-hero-band.danger {
  border-color: rgba(239, 68, 68, 0.34);
}

.saas-hero-band span,
.saas-kpi-card span,
.saas-context-list span {
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.saas-hero-band strong {
  display: block;
  margin-top: 7px;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 900;
}

.saas-hero-band p {
  margin: 3px 0 0;
  color: #cbd5e1;
}

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

.saas-kpi-card,
.saas-card,
.saas-projection-strip {
  border-radius: 8px;
  background: #14161b;
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: none;
}

.saas-kpi-card {
  min-height: 116px;
  padding: 18px;
}

.saas-kpi-card.good {
  border-color: rgba(34, 197, 94, 0.28);
}

.saas-kpi-card.warning {
  border-color: rgba(249, 115, 22, 0.32);
}

.saas-kpi-card.danger {
  border-color: rgba(239, 68, 68, 0.34);
}

.saas-kpi-card strong {
  margin-top: 8px;
  font-size: 1.24rem;
}

.saas-kpi-card small {
  color: #94a3b8;
}

.saas-main-grid {
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: 18px;
}

.saas-sidebar {
  gap: 14px;
}

.saas-card {
  padding: 18px;
}

.saas-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}

.saas-card-head.compact {
  margin-bottom: 14px;
}

.saas-card-head h3,
.saas-card h3 {
  margin: 3px 0 0;
  font-size: 1.02rem;
  font-weight: 900;
}

.saas-action-stack,
.saas-action-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.saas-action-group {
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.saas-action-group:first-child {
  padding-top: 0;
  border-top: 0;
}

.saas-action-btn {
  min-height: 38px;
  border-radius: 8px;
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.74);
  color: #f8fafc;
  font-weight: 850;
}

.saas-action-btn.primary {
  background: #f97316;
  border-color: #f97316;
  color: #111827;
}

.saas-action-btn.danger {
  color: #fecaca;
  border-color: rgba(239, 68, 68, 0.24);
  background: rgba(127, 29, 29, 0.2);
}

.saas-action-btn:hover,
.saas-action-btn.primary:hover {
  transform: translateY(-1px);
  background: #fb923c;
  border-color: #fb923c;
  color: #111827;
}

.saas-input,
.saas-select,
.billing-discount-form textarea {
  border-radius: 8px;
  background: #090b0f;
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: #f8fafc;
}

.saas-form-group.separated {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.billing-discount-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.billing-discount-form strong {
  color: #f8fafc;
}

.billing-discount-form select,
.billing-discount-form input,
.billing-discount-form textarea {
  width: 100%;
  margin: 0;
}

.billing-discount-form .billing-inline-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.billing-discount-form button {
  min-height: 38px;
  border-radius: 8px;
  font-weight: 850;
}

.saas-context-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.saas-context-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.saas-context-list div:last-child {
  border-bottom: 0;
}

.saas-context-list strong {
  text-align: right;
  color: #f8fafc;
  overflow-wrap: anywhere;
}

.saas-projection-header {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.saas-projection-header div {
  padding: 10px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.56);
}

.saas-projection-header span,
.saas-projection-header small {
  display: block;
  color: #94a3b8;
  font-size: 0.72rem;
}

.saas-projection-header strong {
  display: block;
  margin: 5px 0;
  color: #fff;
}

.saas-projection-band {
  gap: 8px;
  padding-bottom: 2px;
}

.saas-projection-pill {
  min-width: 84px;
  border-radius: 8px;
  background: #0f172a;
}

.saas-projection-pill small {
  color: #94a3b8;
  font-size: 0.64rem;
}

.saas-projection-pill.is-paid {
  background: #16a34a;
  border-color: #15803d;
}

.saas-projection-pill.is-paid span,
.saas-projection-pill.is-paid strong {
  color: #ffffff;
}

.saas-projection-pill.is-paid small {
  color: #dcfce7;
}

.saas-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.saas-filter-pills button {
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.62);
  color: #cbd5e1;
  font-size: 0.74rem;
  font-weight: 850;
}

.saas-filter-pills button.active {
  background: rgba(249, 115, 22, 0.16);
  border-color: rgba(249, 115, 22, 0.38);
  color: #fdba74;
}

.saas-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.saas-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 12px;
}

.saas-timeline-dot {
  width: 10px;
  height: 10px;
  margin-top: 17px;
  border-radius: 999px;
  background: #94a3b8;
}

.saas-timeline-item.payment .saas-timeline-dot {
  background: #22c55e;
}

.saas-timeline-item.invoice .saas-timeline-dot {
  background: #38bdf8;
}

.saas-timeline-item.subscription .saas-timeline-dot {
  background: #f97316;
}

.saas-timeline-item.price .saas-timeline-dot {
  background: #eab308;
}

.saas-timeline-body {
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.46);
}

.saas-timeline-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.saas-timeline-top span,
.saas-timeline-details summary,
.saas-timeline-details dt {
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 800;
}

.saas-timeline-top strong {
  display: block;
  margin-top: 4px;
  color: #f8fafc;
}

.saas-timeline-side {
  text-align: right;
  flex: 0 0 auto;
}

.saas-timeline-side small {
  display: block;
  margin-top: 5px;
  color: #cbd5e1;
}

.saas-timeline-body p {
  margin: 8px 0 0;
  color: #cbd5e1;
  line-height: 1.45;
}

.saas-timeline-details {
  margin-top: 10px;
}

.saas-timeline-details summary {
  cursor: pointer;
}

.saas-timeline-details dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 0;
}

.saas-timeline-details div {
  min-width: 0;
  padding: 8px;
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.48);
}

.saas-timeline-details dd {
  margin: 4px 0 0;
  color: #e2e8f0;
  overflow-wrap: anywhere;
}

.saas-empty-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
}

.saas-empty-cta.compact {
  margin-top: 14px;
  padding: 12px;
}

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

  .saas-main-grid,
  .saas-hero-band {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .saas-dashboard {
    padding: 18px 14px 32px;
  }

  .saas-header,
  .saas-timeline-top {
    flex-direction: column;
  }

  .saas-kpi-grid,
  .saas-projection-header,
  .saas-timeline-details dl {
    grid-template-columns: 1fr;
  }

  .saas-timeline-side {
    text-align: left;
  }
}

/* PayTR scroll and calendar fit repair */
@media (min-width: 761px) {
  body.paytr-panel-active .sidebar {
    display: flex !important;
  }

  body.paytr-panel-active .main-content {
    margin-left: 260px;
    width: calc(100vw - 260px);
    max-width: calc(100vw - 260px);
  }
}

body.paytr-panel-active .main-content,
body.paytr-panel-active .panels-wrapper,
#panel-paytr.active,
#panel-paytr .paytr-control-body,
#panel-paytr .billing-os-root,
#panel-paytr .billing-os {
  min-width: 0;
  min-height: 0;
}

body.paytr-panel-active .panels-wrapper,
#panel-paytr.active,
#panel-paytr .paytr-control-body,
#panel-paytr .billing-os-root {
  overflow: hidden;
}

#panel-paytr .paytr-control-body,
#panel-paytr .billing-os-root,
#panel-paytr .billing-os {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
}

#panel-paytr .billing-os {
  flex-direction: column;
  max-height: 100%;
  max-width: none;
  overflow: hidden;
}

#panel-paytr .billing-stage {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  overflow-anchor: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 150px;
  scroll-padding-bottom: 150px;
}

#panel-paytr .billing-calendar-shell {
  flex: 0 0 auto;
  grid-template-columns: minmax(680px, 1fr) minmax(300px, 340px);
  align-items: start;
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

#panel-paytr .billing-calendar-board {
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

#panel-paytr .billing-month-grid {
  flex: 0 0 auto;
  min-height: 624px;
  grid-template-rows: auto repeat(6, minmax(88px, 1fr));
}

#panel-paytr .billing-day-cell {
  min-height: 88px;
}

#panel-paytr .billing-day-panel {
  position: sticky;
  top: 0;
  align-self: start;
  width: 100%;
  max-width: 100%;
  max-height: calc(100dvh - 250px);
  overflow: auto;
  padding-bottom: 120px;
}

#panel-paytr .billing-kpi-wall {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#panel-paytr .billing-kpi,
#panel-paytr .billing-completion-kpi,
#panel-paytr .billing-calendar-toolbar,
#panel-paytr .billing-day-panel,
#panel-paytr .billing-action-panel,
#panel-paytr .billing-action-facts,
#panel-paytr .billing-action-buttons {
  min-width: 0;
}

#panel-paytr .saas-dashboard {
  height: auto;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  padding-bottom: 48px;
}

#panel-paytr .saas-main-grid {
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
}

#panel-paytr .saas-main-grid,
#panel-paytr .saas-sidebar,
#panel-paytr .saas-content,
#panel-paytr .saas-card,
#panel-paytr .saas-projection-strip,
#panel-paytr .saas-projection-band {
  min-width: 0;
}

body.paytr-panel-active .live-chat-widget {
  right: auto;
  left: 16px;
  bottom: 14px;
  width: 56px;
  max-width: 56px;
  min-height: 56px;
}

body.paytr-panel-active .live-chat-launcher {
  width: 56px;
  min-width: 56px;
  height: 56px;
  min-height: 56px;
  justify-content: center;
  padding: 0;
  border-left-width: 1px;
  border-radius: 999px;
}

body.paytr-panel-active .live-chat-launcher-copy,
body.paytr-panel-active .live-chat-unread-badge {
  display: none !important;
}

body.paytr-panel-active .live-chat-panel {
  max-width: calc(100vw - 32px);
}

@media (max-width: 1400px) {
  #panel-paytr .billing-kpi-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1380px) {
  #panel-paytr .billing-calendar-shell {
    grid-template-columns: 1fr;
  }

  #panel-paytr .billing-day-panel {
    position: relative;
    max-height: none;
  }
}

@media (max-width: 1180px) {
  #panel-paytr .saas-main-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  #panel-paytr .billing-stage {
    padding-bottom: 132px;
    scroll-padding-bottom: 132px;
  }

  #panel-paytr .billing-kpi-wall {
    grid-template-columns: 1fr;
  }

  #panel-paytr .billing-month-grid {
    min-height: 426px;
    grid-template-rows: auto repeat(6, 58px);
  }

  #panel-paytr .billing-day-cell {
    min-height: 58px;
  }

  body.paytr-panel-active .live-chat-widget {
    right: auto;
    left: 12px;
    bottom: 10px;
    width: 52px;
    max-width: 52px;
    min-height: 52px;
  }

  body.paytr-panel-active .live-chat-launcher {
    width: 52px;
    min-width: 52px;
    height: 52px;
    min-height: 52px;
  }
}

/* PayTR customer workspace: minimal console */
#panel-paytr .saas-dashboard.paytr-customer-console {
  gap: 10px;
  padding: 28px 24px 56px;
  background: #08090c;
}

#panel-paytr .paytr-customer-console,
#panel-paytr .paytr-customer-console * {
  min-width: 0;
}

#panel-paytr .paytr-console-header {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 4px 0 6px;
}

#panel-paytr .paytr-console-back {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 6px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 900;
}

#panel-paytr .paytr-console-title {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#panel-paytr .paytr-console-title span,
#panel-paytr .paytr-console-metrics span,
#panel-paytr .paytr-console-ops-group>span,
#panel-paytr .paytr-console-projection .saas-projection-header span,
#panel-paytr .paytr-console-timeline .saas-card-head span {
  color: #7f8da3;
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

#panel-paytr .paytr-console-title h2 {
  margin: 0;
  color: #f8fafc;
  font-size: 0.85rem;
  font-weight: 900;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .paytr-console-title small {
  color: #64748b;
  font-size: 0.68rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .paytr-console-badges {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

#panel-paytr .paytr-customer-console .saas-status-pill,
#panel-paytr .paytr-plan-badge {
  min-height: 23px;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 0.62rem;
  font-weight: 900;
}

#panel-paytr .paytr-plan-badge {
  border: 1px solid rgba(56, 189, 248, 0.18);
  background: rgba(56, 189, 248, 0.08);
  color: #38bdf8;
}

#panel-paytr .paytr-console-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.36);
  color: #94a3b8;
  font-size: 0.7rem;
}

#panel-paytr .paytr-console-status>span {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 999px;
  background: var(--paytr-health, #94a3b8);
}

#panel-paytr .paytr-console-status strong {
  color: var(--paytr-health, #cbd5e1);
  font-size: 0.72rem;
}

#panel-paytr .paytr-console-status em,
#panel-paytr .paytr-console-status small {
  color: #94a3b8;
  font-style: normal;
}

#panel-paytr .paytr-console-status.danger {
  border-color: rgba(239, 68, 68, 0.18);
  background: rgba(15, 23, 42, 0.36);
}

#panel-paytr .paytr-console-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 6px;
}

#panel-paytr .paytr-console-metrics>div {
  padding: 9px 10px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.018);
}

#panel-paytr .paytr-console-metrics strong {
  display: block;
  margin-top: 3px;
  color: #e2e8f0;
  font-size: 0.82rem;
  font-weight: 900;
}

#panel-paytr .paytr-console-metrics small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 0.62rem;
}

#panel-paytr .paytr-console-metrics .danger strong,
#panel-paytr .paytr-console-metrics .danger small {
  color: #ef4444;
}

#panel-paytr .paytr-console-metrics .success strong {
  color: #22c55e;
}

#panel-paytr .paytr-console-ops {
  display: grid;
  grid-template-columns: minmax(280px, 1.1fr) minmax(320px, 1.1fr) minmax(260px, 0.9fr) minmax(220px, 0.75fr);
  gap: 8px;
  align-items: start;
}

#panel-paytr .paytr-console-ops-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.32);
  align-self: start;
}

#panel-paytr .paytr-console-action-stack {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: stretch;
}

#panel-paytr .paytr-console-action-stack .saas-action-group {
  flex: 1 1 0;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

#panel-paytr .paytr-console-action-stack .saas-action-group>span {
  grid-column: 1 / -1;
  font-size: 0.6rem;
}

#panel-paytr .paytr-customer-console .saas-action-btn,
#panel-paytr .paytr-console-summary button,
#panel-paytr .paytr-customer-console .billing-inline-actions button {
  min-height: 32px;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.68rem;
}

#panel-paytr .paytr-console-plan-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) auto minmax(110px, 0.8fr) auto;
  gap: 6px;
  align-items: center;
}

#panel-paytr .paytr-customer-console .saas-input,
#panel-paytr .paytr-customer-console .saas-select,
#panel-paytr .paytr-customer-console .billing-discount-form input,
#panel-paytr .paytr-customer-console .billing-discount-form select,
#panel-paytr .paytr-customer-console .billing-discount-form textarea {
  min-height: 32px;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 0.7rem;
}

#panel-paytr .paytr-customer-console .billing-discount-form {
  display: grid;
  grid-template-columns: 110px 90px 1fr 1fr;
  gap: 6px;
}

#panel-paytr .paytr-customer-console .billing-discount-form strong {
  display: none;
}

#panel-paytr .paytr-customer-console .billing-discount-form textarea {
  grid-column: span 2;
  height: 32px;
  min-height: 32px;
  resize: vertical;
}

#panel-paytr .paytr-customer-console .billing-discount-form .billing-inline-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

#panel-paytr .paytr-console-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

#panel-paytr .paytr-console-summary b {
  color: #94a3b8;
  font-size: 0.62rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .paytr-console-summary strong {
  color: #f8fafc;
  font-size: 0.82rem;
  font-weight: 900;
}

#panel-paytr .paytr-console-summary button {
  grid-column: 1 / -1;
  border: 1px dashed rgba(249, 115, 22, 0.32);
  background: transparent;
  color: #f97316;
  font-weight: 900;
  cursor: pointer;
}

#panel-paytr .paytr-console-projection {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
  gap: 10px;
  padding: 10px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.28);
}

#panel-paytr .paytr-console-projection .saas-projection-header {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

#panel-paytr .paytr-console-projection .saas-projection-header div {
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 6px;
  background: transparent;
}

#panel-paytr .paytr-console-projection .saas-projection-header strong {
  margin: 3px 0;
  color: #e2e8f0;
  font-size: 0.78rem;
}

#panel-paytr .paytr-console-projection .saas-projection-header small {
  color: #64748b;
  font-size: 0.62rem;
}

#panel-paytr .paytr-projection-line {
  align-self: center;
  display: grid;
  grid-template-columns: repeat(12, minmax(18px, 1fr));
  gap: 3px;
  overflow: visible;
  padding: 0;
}

#panel-paytr .paytr-projection-line .saas-projection-pill {
  position: relative;
  display: block;
  min-width: 0;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.28);
}

#panel-paytr .paytr-projection-line .saas-projection-pill i {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

#panel-paytr .paytr-projection-line .saas-projection-pill.is-paid {
  background: #22c55e;
}

#panel-paytr .paytr-projection-line .saas-projection-pill.is-failed {
  background: #ef4444;
}

#panel-paytr .paytr-projection-line .saas-projection-pill.is-risk {
  background: #f97316;
}

#panel-paytr .paytr-console-timeline {
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 0;
  background: transparent;
}

#panel-paytr .paytr-console-timeline .saas-card-head {
  align-items: center;
  margin-bottom: 8px;
}

#panel-paytr .paytr-console-timeline .saas-card-head h3 {
  margin: 2px 0 0;
  font-size: 0.86rem;
}

#panel-paytr .paytr-console-timeline .saas-filter-pills {
  gap: 5px;
}

#panel-paytr .paytr-console-timeline .saas-filter-pills button {
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.66rem;
}

#panel-paytr .paytr-console-timeline .saas-empty-cta {
  padding: 18px 24px;
}

#panel-paytr .paytr-console-timeline .saas-empty-cta .saas-action-btn {
  width: auto;
  min-width: 180px;
  align-self: flex-start;
}

#panel-paytr .paytr-log-list {
  gap: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
}

#panel-paytr .paytr-log-item {
  display: block;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

#panel-paytr .paytr-log-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.65fr) minmax(320px, 1.55fr) minmax(90px, 0.35fr) minmax(78px, 0.25fr);
  gap: 12px;
  align-items: center;
  padding: 9px 2px;
}

#panel-paytr .paytr-log-meta,
#panel-paytr .paytr-log-main {
  display: flex;
  align-items: center;
  min-width: 0;
}

#panel-paytr .paytr-log-meta {
  gap: 7px;
  color: #7f8da3;
  font-size: 0.68rem;
}

#panel-paytr .paytr-log-meta b {
  color: #cbd5e1;
  font-size: 0.7rem;
  white-space: nowrap;
}

#panel-paytr .paytr-log-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .paytr-log-item.subscription .paytr-log-meta b {
  color: #f97316;
}

#panel-paytr .paytr-log-item.payment .paytr-log-meta b {
  color: #22c55e;
}

#panel-paytr .paytr-log-item.invoice .paytr-log-meta b {
  color: #38bdf8;
}

#panel-paytr .paytr-log-item.price .paytr-log-meta b {
  color: #eab308;
}

#panel-paytr .paytr-log-main {
  gap: 10px;
}

#panel-paytr .paytr-log-main strong,
#panel-paytr .paytr-log-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .paytr-log-main strong {
  color: #f8fafc;
  font-size: 0.82rem;
}

#panel-paytr .paytr-log-main span {
  color: #cbd5e1;
  font-size: 0.76rem;
}

#panel-paytr .paytr-log-state {
  justify-self: end;
  color: #cbd5e1;
  font-size: 0.68rem;
  font-weight: 800;
  text-align: right;
}

#panel-paytr .paytr-log-amount {
  justify-self: end;
  color: #f8fafc;
  font-size: 0.8rem;
  text-align: right;
  white-space: nowrap;
}

#panel-paytr .paytr-log-details {
  grid-column: 2 / -1;
  margin-top: 5px;
}

#panel-paytr .paytr-log-details dl {
  margin-top: 6px;
}

#panel-paytr .paytr-log-details div {
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.4);
}

@media (max-width: 1320px) {
  #panel-paytr .paytr-console-metrics {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }

  #panel-paytr .paytr-console-ops,
  #panel-paytr .paytr-console-projection {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {

  #panel-paytr .paytr-console-header,
  #panel-paytr .paytr-console-metrics,
  #panel-paytr .paytr-console-plan-row,
  #panel-paytr .paytr-customer-console .billing-discount-form {
    grid-template-columns: 1fr;
  }

  #panel-paytr .paytr-console-badges {
    justify-content: flex-start;
  }

  #panel-paytr .paytr-console-action-stack {
    flex-direction: column;
  }

  #panel-paytr .paytr-console-status {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  #panel-paytr .paytr-log-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  #panel-paytr .paytr-log-main {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  #panel-paytr .paytr-log-state,
  #panel-paytr .paytr-log-amount {
    justify-self: start;
    text-align: left;
  }

  #panel-paytr .paytr-log-details {
    grid-column: 1;
  }
}

/* PayTR settings command layout */
#panel-paytr .billing-stage.is-settings {
  overflow: hidden;
  padding-bottom: 0;
  scroll-padding-bottom: 0;
}

#panel-paytr .billing-settings-shell {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

#panel-paytr .billing-settings-shell>.billing-section-title {
  flex: 0 0 auto;
  border: 1px solid var(--billing-line);
  border-radius: 8px;
  background: var(--billing-panel);
  padding: 10px 14px;
}

#panel-paytr .billing-settings-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

#panel-paytr .billing-settings-menu {
  display: grid;
  align-self: start;
  align-content: start;
  gap: 7px;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--billing-line);
  border-radius: 8px;
  background: var(--billing-panel);
  padding: 8px;
}

#panel-paytr .billing-settings-menu button {
  display: grid;
  gap: 3px;
  width: 100%;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  padding: 9px 10px;
  color: var(--billing-muted);
  text-align: left;
  cursor: pointer;
}

#panel-paytr .billing-settings-menu button.is-active {
  border-color: rgba(230, 95, 38, 0.34);
  background: rgba(230, 95, 38, 0.12);
  color: var(--billing-ink);
}

#panel-paytr .billing-settings-menu span {
  min-width: 0;
  overflow: hidden;
  font-size: 0.78rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-settings-menu small {
  min-width: 0;
  overflow: hidden;
  color: var(--billing-muted);
  font-size: 0.68rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-settings-detail,
#panel-paytr .billing-settings-panel {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

#panel-paytr .billing-settings-panel {
  display: grid;
  align-content: start;
  gap: 9px;
  height: 100%;
}

#panel-paytr .billing-settings-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--billing-line);
  border-radius: 8px;
  background: var(--billing-panel);
  padding: 11px 13px;
}

#panel-paytr .billing-settings-hero div,
#panel-paytr .billing-settings-hero h3,
#panel-paytr .billing-settings-hero p {
  min-width: 0;
}

#panel-paytr .billing-settings-hero h3 {
  margin: 2px 0;
  color: var(--billing-ink);
  font-size: 1rem;
  font-weight: 900;
}

#panel-paytr .billing-settings-hero span,
#panel-paytr .billing-settings-hero p,
#panel-paytr .billing-settings-note {
  color: var(--billing-muted);
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.35;
}

#panel-paytr .billing-settings-stats,
#panel-paytr .billing-price-preview-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

#panel-paytr .billing-price-preview-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#panel-paytr .billing-settings-stats div,
#panel-paytr .billing-price-preview-stats div {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 1px solid var(--billing-line);
  border-radius: 8px;
  background: var(--billing-panel-2);
  padding: 8px 10px;
}

#panel-paytr .billing-settings-stats span,
#panel-paytr .billing-price-preview-stats span {
  min-width: 0;
  overflow: hidden;
  color: var(--billing-muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-settings-stats strong,
#panel-paytr .billing-price-preview-stats strong {
  color: var(--billing-ink);
  font-size: 1.05rem;
  font-weight: 950;
  line-height: 1.05;
}

#panel-paytr .billing-settings-stats small,
#panel-paytr .billing-price-preview-stats small {
  min-width: 0;
  overflow: hidden;
  color: var(--billing-muted);
  font-size: 0.64rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-notice-list,
#panel-paytr .billing-price-preview-list {
  display: grid;
  gap: 6px;
  min-width: 0;
}

#panel-paytr .billing-notice-task {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(118px, 0.55fr) minmax(150px, 0.6fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 48px;
  border: 1px solid var(--billing-line);
  border-left: 3px solid var(--billing-amber);
  border-radius: 8px;
  background: var(--billing-panel);
  padding: 8px 10px;
}

#panel-paytr .billing-notice-task.is-planned {
  border-left-color: var(--billing-blue);
}

#panel-paytr .billing-notice-task div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

#panel-paytr .billing-notice-task strong,
#panel-paytr .billing-notice-task b,
#panel-paytr .billing-price-preview-list strong,
#panel-paytr .billing-price-preview-list b {
  min-width: 0;
  overflow: hidden;
  color: var(--billing-ink);
  font-size: 0.76rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-notice-task span,
#panel-paytr .billing-price-preview-list span {
  min-width: 0;
  overflow: hidden;
  color: var(--billing-muted);
  font-size: 0.68rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-notice-task em {
  min-width: 0;
  overflow: hidden;
  color: var(--billing-amber);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-settings-empty,
#panel-paytr .billing-settings-more,
#panel-paytr .billing-price-preview.is-empty {
  min-width: 0;
  border: 1px dashed var(--billing-line);
  border-radius: 8px;
  color: var(--billing-muted);
  font-size: 0.72rem;
  font-weight: 750;
  padding: 10px;
}

#panel-paytr .billing-settings-empty.is-error {
  border-color: rgba(239, 68, 68, 0.35);
  color: var(--billing-red);
}

#panel-paytr .billing-integration-panel {
  height: 100%;
}

#panel-paytr .billing-integration-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.82fr);
  gap: 10px;
  min-width: 0;
}

#panel-paytr .billing-integration-grid .paytr-settings-form,
#panel-paytr .billing-integration-grid .paytr-credentials-section {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

#panel-paytr .billing-integration-grid .billing-form-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#panel-paytr .billing-integration-grid .billing-form-grid.compact .billing-btn {
  grid-column: 1 / -1;
}

#panel-paytr .billing-settings-grid {
  align-items: start;
}

#panel-paytr .billing-settings-pricing .billing-panel {
  height: 100%;
}

#panel-paytr .billing-price-selected-plan {
  display: grid;
  gap: 2px;
  min-width: 0;
  border-bottom: 1px solid var(--billing-line);
  padding-bottom: 7px;
}

#panel-paytr .billing-price-selected-plan strong {
  min-width: 0;
  overflow: hidden;
  color: var(--billing-ink);
  font-size: 0.82rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-price-selected-plan span {
  min-width: 0;
  overflow: hidden;
  color: var(--billing-muted);
  font-size: 0.68rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-price-preview {
  display: grid;
  gap: 7px;
  min-width: 0;
  margin-top: 8px;
  border-top: 1px solid var(--billing-line);
  padding-top: 8px;
}

#panel-paytr .billing-price-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

#panel-paytr .billing-price-preview-head div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

#panel-paytr .billing-price-preview-head span {
  color: var(--billing-muted);
  font-size: 0.68rem;
  font-weight: 800;
}

#panel-paytr .billing-price-preview-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--billing-ink);
  font-size: 0.86rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-price-preview-head b {
  color: var(--billing-green);
  font-size: 0.78rem;
  font-weight: 950;
  white-space: nowrap;
}

#panel-paytr .billing-price-preview-head b.is-down {
  color: var(--billing-red);
}

#panel-paytr .billing-price-preview-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
  gap: 2px 8px;
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid var(--billing-line);
  padding: 6px 0;
}

#panel-paytr .billing-price-preview-list div:last-child {
  border-bottom: 0;
}

#panel-paytr .billing-price-preview-list span {
  grid-column: 1;
}

#panel-paytr .billing-price-preview-list b {
  grid-column: 2;
  grid-row: 1 / span 2;
  text-align: right;
}

#panel-paytr .billing-log-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

#panel-paytr .billing-log-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--billing-line);
  border-radius: 8px;
  background: var(--billing-panel);
  padding: 12px;
}

#panel-paytr .billing-log-card div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

#panel-paytr .billing-log-card strong {
  min-width: 0;
  overflow: hidden;
  color: var(--billing-ink);
  font-size: 0.84rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel-paytr .billing-log-card span {
  color: var(--billing-muted);
  font-size: 0.7rem;
  font-weight: 750;
  line-height: 1.35;
}

#panel-paytr .billing-settings-log-backdrop {
  position: absolute;
  inset: 0;
  z-index: 38;
  background: rgba(2, 6, 23, 0.45);
}

#panel-paytr .billing-settings-log-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 39;
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  min-width: 0;
  border: 1px solid var(--billing-line-strong);
  border-radius: 8px;
  background: #0f172a;
  box-shadow: -20px 0 44px rgba(2, 6, 23, 0.45);
}

#panel-paytr .billing-settings-log-drawer header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #1e293b;
  padding: 12px;
}

#panel-paytr .billing-settings-log-drawer header div {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

#panel-paytr .billing-settings-log-drawer header div:first-child {
  display: grid;
  gap: 2px;
}

#panel-paytr .billing-settings-log-drawer header span {
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

#panel-paytr .billing-settings-log-drawer header strong {
  color: #e2e8f0;
  font-size: 0.92rem;
  font-weight: 950;
}

#panel-paytr .billing-settings-log-body {
  display: grid;
  align-content: start;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 12px;
}

#panel-paytr .billing-settings-log-item {
  display: grid;
  gap: 6px;
  min-width: 0;
  border-bottom: 1px dashed #334155;
  padding: 8px 0;
}

#panel-paytr .billing-settings-log-item div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

#panel-paytr .billing-settings-log-item span {
  color: #64748b;
  font-size: 0.7rem;
}

#panel-paytr .billing-settings-log-item strong {
  color: #10b981;
  font-size: 0.72rem;
  font-weight: 950;
}

#panel-paytr .billing-settings-log-item.is-error strong {
  color: #ef4444;
}

#panel-paytr .billing-settings-log-item b,
#panel-paytr .billing-settings-log-item em {
  color: #cbd5e1;
  font-size: 0.7rem;
  font-style: normal;
}

#panel-paytr .billing-settings-log-item pre {
  margin: 0;
  overflow: auto;
  border-radius: 6px;
  background: #020617;
  color: #94a3b8;
  padding: 8px;
  font-size: 0.68rem;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 1180px) {
  #panel-paytr .billing-settings-layout {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  #panel-paytr .billing-settings-grid,
  #panel-paytr .billing-integration-grid {
    grid-template-columns: 1fr;
  }

  #panel-paytr .billing-log-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  #panel-paytr .billing-stage.is-settings {
    overflow-y: auto;
    padding-bottom: 92px;
    scroll-padding-bottom: 92px;
  }

  #panel-paytr .billing-settings-shell {
    height: auto;
    min-height: 100%;
    overflow: visible;
  }

  #panel-paytr .billing-settings-layout,
  #panel-paytr .billing-settings-detail,
  #panel-paytr .billing-settings-panel {
    overflow: visible;
  }

  #panel-paytr .billing-settings-layout {
    grid-template-columns: 1fr;
  }

  #panel-paytr .billing-settings-menu {
    grid-template-columns: repeat(4, minmax(138px, 1fr));
    overflow-x: auto;
  }
}

@media (max-width: 620px) {

  #panel-paytr .billing-settings-stats,
  #panel-paytr .billing-price-preview-stats,
  #panel-paytr .billing-log-card-grid {
    grid-template-columns: 1fr;
  }

  #panel-paytr .billing-notice-task,
  #panel-paytr .billing-price-preview-list div,
  #panel-paytr .billing-integration-grid .billing-form-grid.compact {
    grid-template-columns: 1fr;
  }

  #panel-paytr .billing-price-preview-list b {
    grid-column: 1;
    grid-row: auto;
    text-align: left;
  }

  #panel-paytr .billing-settings-hero {
    align-items: stretch;
    flex-direction: column;
  }

  #panel-paytr .billing-settings-menu {
    grid-template-columns: repeat(2, minmax(132px, 1fr));
  }
}

/* PayTR RestoUp theme alignment */
#panel-paytr {
  --paytr-surface: var(--bg2);
  --paytr-surface-2: var(--bg3);
  --paytr-surface-3: var(--bg);
  --paytr-border: var(--border);
  --paytr-border-strong: rgba(255, 107, 0, 0.24);
  --paytr-text: var(--text);
  --paytr-muted: var(--text2);
  --paytr-muted-2: rgba(255, 247, 237, 0.42);
  --paytr-accent: var(--accent);
}

#panel-paytr .billing-os,
#panel-paytr .billing-ops {
  --billing-bg: var(--bg);
  --billing-panel: var(--bg2);
  --billing-panel-2: var(--bg3);
  --billing-ink: var(--text);
  --billing-muted: var(--text2);
  --billing-soft: rgba(255, 247, 237, 0.38);
  --billing-line: var(--border);
  --billing-line-strong: rgba(255, 107, 0, 0.26);
  --billing-accent: var(--accent);
  --billing-green: #16a34a;
  --billing-blue: var(--accent2);
  --billing-red: #ef4444;
  --billing-amber: #f59e0b;
  border-color: transparent;
  background: transparent;
  padding: 12px 0 0;
}

#panel-paytr .billing-topbar {
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  padding: 4px 0 10px;
}

#panel-paytr .billing-topbar h1 {
  color: var(--text);
  font-size: 1.22rem;
}

#panel-paytr .billing-sync-inline strong,
#panel-paytr .billing-sync-inline small,
#panel-paytr .billing-topbar span {
  color: var(--text2);
}

#panel-paytr .billing-sync-inline strong:first-child {
  color: var(--text);
}

#panel-paytr .billing-tabs {
  border-color: var(--border);
  border-radius: 10px;
  background: var(--bg2);
  padding: 4px;
}

#panel-paytr .billing-tabs button {
  border-color: transparent;
  background: transparent;
  color: var(--text2);
}

#panel-paytr .billing-tabs button.active {
  border-color: rgba(255, 107, 0, 0.26);
  background: var(--accent-glow);
  color: var(--text);
}

#panel-paytr .billing-calendar-board,
#panel-paytr .billing-day-panel,
#panel-paytr .billing-panel,
#panel-paytr .billing-filterbar,
#panel-paytr .billing-subscriber-row,
#panel-paytr .billing-customer-hero,
#panel-paytr .billing-customer-ledger,
#panel-paytr .billing-customer-actions,
#panel-paytr .billing-action-panel,
#panel-paytr .billing-section-title,
#panel-paytr .billing-settings-menu,
#panel-paytr .billing-settings-hero,
#panel-paytr .billing-log-card,
#panel-paytr .billing-settings-log-drawer,
#panel-paytr .billing-price-preview-list div,
#panel-paytr .billing-plan-list div,
#panel-paytr .billing-audit-list article {
  border-color: var(--border);
  background: var(--bg2);
}

#panel-paytr .billing-settings-stats div,
#panel-paytr .billing-price-preview-stats div,
#panel-paytr .billing-kpi,
#panel-paytr .billing-action-facts div,
#panel-paytr .billing-customer-summary div,
#panel-paytr .billing-day-payment,
#panel-paytr .billing-price-selected-plan {
  border-color: var(--border);
  background: var(--bg3);
}

#panel-paytr .billing-settings-menu button.is-active,
#panel-paytr .billing-subscriber-row:hover,
#panel-paytr .billing-day-payment.is-active,
#panel-paytr .billing-day-cell.is-selected {
  border-color: rgba(255, 107, 0, 0.32);
  background: rgba(255, 107, 0, 0.11);
}

#panel-paytr .billing-section-title h2,
#panel-paytr .billing-panel-head strong,
#panel-paytr .billing-settings-hero h3,
#panel-paytr .billing-row-brand strong,
#panel-paytr .billing-money-stack b,
#panel-paytr .billing-price-preview-head strong,
#panel-paytr .billing-kpi strong,
#panel-paytr .billing-day-cell strong {
  color: var(--text);
}

#panel-paytr .billing-section-title p,
#panel-paytr .billing-settings-hero p,
#panel-paytr .billing-settings-note,
#panel-paytr .billing-panel-head span,
#panel-paytr .billing-filterbar label,
#panel-paytr .billing-form-grid label,
#panel-paytr .billing-row-brand span,
#panel-paytr .billing-row-status span,
#panel-paytr .billing-cycle-detail,
#panel-paytr .billing-price-preview-list span,
#panel-paytr .billing-settings-stats small,
#panel-paytr .billing-price-preview-stats small {
  color: var(--text2);
}

#panel-paytr .billing-kicker,
#panel-paytr .billing-calendar-toolbar strong,
#panel-paytr .billing-cycle-title,
#panel-paytr .billing-row-date strong,
#panel-paytr .billing-row-cycle b,
#panel-paytr .billing-settings-menu button.is-active span,
#panel-paytr .billing-settings-menu button.is-active small {
  color: var(--accent2);
}

#panel-paytr .billing-btn,
#panel-paytr .paytr-button-primary,
#panel-paytr .billing-risk-panel button {
  border-color: rgba(255, 107, 0, 0.34);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 12px var(--accent-glow);
}

#panel-paytr .billing-btn.secondary,
#panel-paytr .paytr-button-secondary,
#panel-paytr .billing-sync-inline button,
#panel-paytr .billing-calendar-nav button,
#panel-paytr .billing-action-buttons button.secondary {
  border-color: var(--border);
  background: transparent;
  color: var(--text2);
  box-shadow: none;
}

#panel-paytr .billing-btn.secondary:hover,
#panel-paytr .paytr-button-secondary:hover,
#panel-paytr .billing-sync-inline button:hover,
#panel-paytr .billing-calendar-nav button:hover,
#panel-paytr .billing-tabs button:hover {
  background: var(--bg3);
  color: var(--text);
}

#panel-paytr .billing-form-grid input,
#panel-paytr .billing-form-grid select,
#panel-paytr .billing-form-grid textarea,
#panel-paytr .billing-filterbar input,
#panel-paytr .billing-filterbar select,
#panel-paytr .paytr-copy-field input,
#panel-paytr .paytr-field input,
#panel-paytr .paytr-field select {
  border-color: var(--border);
  background: var(--bg);
  color: var(--text);
}

#panel-paytr .billing-form-grid input:focus,
#panel-paytr .billing-form-grid select:focus,
#panel-paytr .billing-form-grid textarea:focus,
#panel-paytr .billing-filterbar input:focus,
#panel-paytr .billing-filterbar select:focus,
#panel-paytr .paytr-copy-field input:focus {
  border-color: rgba(255, 107, 0, 0.44);
  outline: none;
}

#panel-paytr .paytr-mode-segment button {
  border-color: var(--border);
  background: var(--bg);
  color: var(--text2);
}

#panel-paytr .paytr-mode-segment button.is-active {
  border-color: rgba(255, 107, 0, 0.35);
  background: var(--accent-glow);
  color: var(--text);
}

#panel-paytr .paytr-secret-notice,
#panel-paytr .billing-price-preview.is-empty,
#panel-paytr .billing-settings-empty,
#panel-paytr .billing-settings-more {
  border-color: var(--border);
  background: rgba(255, 107, 0, 0.04);
  color: var(--text2);
}

#panel-paytr .billing-month-dot.is-price-notice,
#panel-paytr .billing-notice-task {
  border-color: rgba(245, 158, 11, 0.45);
}

#panel-paytr .billing-time-track {
  background: rgba(255, 107, 0, 0.14);
}

#panel-paytr .billing-time-fill {
  background: var(--billing-time-meter-color, var(--accent));
}

#panel-paytr .billing-settings-log-backdrop {
  background: rgba(8, 7, 6, 0.68);
}

#panel-paytr .billing-settings-log-drawer {
  border-color: rgba(255, 107, 0, 0.26);
  background: var(--bg2);
  box-shadow: -20px 0 44px rgba(0, 0, 0, 0.46);
}

#panel-paytr .billing-settings-log-drawer header {
  border-bottom-color: var(--border);
  background: var(--bg3);
}

#panel-paytr .billing-settings-log-drawer header span,
#panel-paytr .billing-settings-log-item span {
  color: var(--text2);
}

#panel-paytr .billing-settings-log-drawer header strong,
#panel-paytr .billing-settings-log-item b,
#panel-paytr .billing-settings-log-item em {
  color: var(--text);
}

#panel-paytr .billing-settings-log-item,
#panel-paytr .billing-settings-log-item pre {
  border-color: var(--border);
  background: var(--bg);
  color: var(--text2);
}

#panel-paytr .billing-console-container {
  border: 1px solid var(--border) !important;
  background: var(--bg2) !important;
  color: var(--accent2) !important;
}

#panel-paytr .billing-console-container pre {
  background: var(--bg) !important;
  color: var(--text2) !important;
}

/* PayTR desktop fullscreen fit */
@media (min-width: 761px) {
  body.paytr-panel-active {
    overflow: hidden;
  }

  body.paytr-panel-active .dashboard-wrapper,
  body.paytr-panel-active .sidebar,
  body.paytr-panel-active .main-content {
    height: 100vh;
    min-height: 100vh;
    height: 100dvh;
    min-height: 100dvh;
  }

  body.paytr-panel-active .dashboard-wrapper,
  body.paytr-panel-active .main-content,
  body.paytr-panel-active .panels-wrapper,
  #panel-paytr.active,
  #panel-paytr .paytr-control-body,
  #panel-paytr .billing-os-root,
  #panel-paytr .billing-os,
  #panel-paytr .billing-ops {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  body.paytr-panel-active .panels-wrapper {
    height: 100%;
    padding: 12px 14px 0;
  }

  #panel-paytr.active,
  #panel-paytr .paytr-control-body,
  #panel-paytr .billing-os-root,
  #panel-paytr .billing-os,
  #panel-paytr .billing-ops {
    height: 100%;
    max-height: none;
  }

  #panel-paytr .billing-os,
  #panel-paytr .billing-ops {
    padding-bottom: 0;
  }

  #panel-paytr .billing-stage {
    padding-bottom: 0;
    scroll-padding-bottom: 0;
  }

  #panel-paytr .billing-stage.is-subscribers {
    overflow: hidden;
  }

  #panel-paytr .billing-stage.is-subscribers .billing-workspace-section {
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  #panel-paytr .billing-stage.is-subscribers .billing-subscriber-list {
    min-height: 0;
    border: 1px solid var(--border);
    border-radius: 8px 8px 0 0;
    background: rgba(255, 107, 0, 0.035);
    overflow: auto;
    padding: 6px 6px 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   PREMIUM SUBSCRIBER COCKPIT — Complete Dark Theme v3
   Inspired by Linear.app / Vercel Dashboard aesthetics
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. ROOT VARIABLES ── */
.customer-cockpit {
  --cc-bg: #0c0d10 !important;
  --cc-surface: rgba(255, 255, 255, 0.035) !important;
  --cc-surface-hover: rgba(255, 255, 255, 0.06) !important;
  --cc-border: rgba(255, 255, 255, 0.07) !important;
  --cc-border-hover: rgba(255, 255, 255, 0.14) !important;
  --cc-panel: rgba(255, 255, 255, 0.035) !important;
  --cc-panel-border: rgba(255, 255, 255, 0.07) !important;
  --cc-line: rgba(255, 255, 255, 0.06) !important;
  --cc-soft: rgba(255, 255, 255, 0.02) !important;
  --cc-text: #e8edf4 !important;
  --cc-muted: #7c8a9e !important;
  --cc-accent: #eab308 !important;
  --cc-accent-glow: rgba(234, 179, 8, 0.12) !important;
  --cc-green: #22c55e !important;
  --cc-green-glow: rgba(34, 197, 94, 0.12) !important;
  background: var(--cc-bg) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Ambient glow orbs for visual depth */
.customer-cockpit::before,
.customer-cockpit::after {
  content: "" !important;
  position: absolute !important;
  border-radius: 50% !important;
  filter: blur(120px) !important;
  opacity: 0.25 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.customer-cockpit::before {
  width: 400px !important;
  height: 400px !important;
  background: radial-gradient(circle, rgba(234, 179, 8, 0.35), transparent 70%) !important;
  top: -120px !important;
  right: -80px !important;
}

.customer-cockpit::after {
  width: 350px !important;
  height: 350px !important;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.25), transparent 70%) !important;
  bottom: -100px !important;
  left: -60px !important;
}

.customer-cockpit>* {
  position: relative !important;
  z-index: 1 !important;
}

/* ── 2. PANELS (Glass Cards) ── */
.customer-panel {
  background: var(--cc-surface) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.customer-panel:hover {
  border-color: var(--cc-border-hover) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* ── 3. PANEL HEADS ── */
.customer-panel-head {
  background: rgba(255, 255, 255, 0.015) !important;
  border-bottom: 1px solid var(--cc-border) !important;
  padding: 18px 22px !important;
  min-height: auto !important;
}

.customer-panel-head h2 {
  color: #fff !important;
  font-weight: 750 !important;
  font-size: 1.1rem !important;
  letter-spacing: -0.01em !important;
}

.customer-panel-head span {
  color: var(--cc-muted) !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.customer-panel-head strong,
.customer-panel-head a {
  color: var(--cc-accent) !important;
  font-size: 0.8rem !important;
}

/* ── 4. NOTIFICATIONS PANEL ── */
.customer-notifications-panel {
  background: var(--cc-surface) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  padding: 0 !important;
}

.customer-notifications-panel .customer-panel-head {
  background: rgba(255, 255, 255, 0.015) !important;
  border-bottom: 1px solid var(--cc-border) !important;
}

.customer-notifications-panel .customer-panel-head h2 {
  color: #fff !important;
  font-weight: 750 !important;
  font-size: 1.1rem !important;
}

.customer-notification-minimalist-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  transition: background 0.2s ease !important;
}

.customer-notification-minimalist-row:hover {
  background: rgba(255, 255, 255, 0.025) !important;
}

.notification-minimalist-content strong,
.notification-minimalist-note {
  color: var(--cc-text) !important;
}

.notification-minimalist-content span,
.notification-minimalist-date {
  color: var(--cc-muted) !important;
}

.customer-empty-notifications {
  color: var(--cc-muted) !important;
  padding: 32px 20px !important;
}

.customer-empty-notifications span {
  color: var(--cc-muted) !important;
}

/* ── 5. HEADER / BRAND CARD ── */
.customer-top .customer-brand-card {
  background: var(--cc-surface) !important;
  border: 1px solid var(--cc-border) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

.customer-brand-stats div {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
}

.customer-brand-stats div b {
  color: #fff !important;
  font-size: 1.3rem !important;
}

.customer-brand-stats div span {
  color: var(--cc-muted) !important;
  font-size: 0.68rem !important;
}

.customer-welcome span {
  color: var(--cc-muted) !important;
}

.customer-welcome strong {
  color: #fff !important;
}

.customer-brand-logout {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--cc-muted) !important;
  transition: all 0.2s ease !important;
}

.customer-brand-logout:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
  color: #f87171 !important;
}

/* ── 6. CREATE BUTTON ── */
.customer-welcome-create-btn {
  background: linear-gradient(135deg, #eab308, #ca9a06) !important;
  color: #0c0d10 !important;
  box-shadow: 0 4px 16px rgba(234, 179, 8, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  border: none !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.customer-welcome-create-btn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(234, 179, 8, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* ── 7. TASK CARDS ── */
.customer-task-card,
.customer-task-card.stage-created,
.customer-task-card.stage-review,
.customer-task-card.stage-work,
.customer-task-card.stage-done {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: var(--cc-text) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.customer-task-card .customer-task-toggle,
.customer-task-card.stage-created .customer-task-toggle,
.customer-task-card.stage-review .customer-task-toggle,
.customer-task-card.stage-work .customer-task-toggle,
.customer-task-card.stage-done .customer-task-toggle {
  /* removed transparent override so stage colors show */
}

.customer-task-card.is-collapsible:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(234, 179, 8, 0.2) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  transform: translateY(-2px) !important;
}

.customer-task-card.is-collapsible:hover .customer-task-toggle {
  background: transparent !important;
  border-color: transparent !important;
}

.customer-task-card h3 {
  color: #fff !important;
}

.customer-task-card.is-collapsible:hover h3 {
  color: var(--cc-accent) !important;
}

.customer-task-card .customer-task-meta span {
  color: var(--cc-muted) !important;
}

.customer-task-stage-progress-ring {
  background: rgba(12, 13, 16, 0.9) !important;
  border: 1px solid var(--cc-border) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

/* ── 8. EMPTY STATES ── */
.customer-empty {
  padding: 40px 24px !important;
}

.customer-empty strong {
  color: var(--cc-text) !important;
  font-size: 1rem !important;
}

.customer-empty span {
  color: var(--cc-muted) !important;
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
}

.customer-empty.compact {
  padding: 32px 24px !important;
  background: rgba(255, 255, 255, 0.015) !important;
  border: 1px dashed rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 6px !important;
}

.customer-empty.compact::before {
  content: '📁';
  font-size: 26px !important;
  margin-bottom: 4px !important;
  opacity: 0.8;
  filter: grayscale(1) opacity(0.6);
}

.customer-empty.compact strong {
  color: #f1f5f9 !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
}

.customer-empty.compact span {
  color: #94a3b8 !important;
  font-size: 0.85rem !important;
  max-width: 320px !important;
}

/* ── 9. COMPLETED TASKS TOGGLE ── */
.customer-completed-toggle {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: var(--cc-border) !important;
  color: var(--cc-muted) !important;
}

.customer-completed-toggle:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--cc-text) !important;
}

/* ── 10. TASK LIST & SCROLLING ── */
.customer-task-list {
  padding: 16px !important;
  gap: 12px !important;
}

/* ── 11. STAGE PREVIEW DOTS ── */
.customer-task-card .customer-stage-preview span i {
  border-color: rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.customer-task-card .customer-stage-preview .done i {
  border-color: #16a34a !important;
  background: #16a34a !important;
}

.customer-task-card .customer-stage-preview .active i {
  border-color: #eab308 !important;
  background: #eab308 !important;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.2) !important;
}

.customer-task-card .customer-stage-preview span:not(:first-child)::before {
  background: rgba(255, 255, 255, 0.1) !important;
}

.customer-task-card .customer-stage-preview .done:not(:first-child)::before,
.customer-task-card .customer-stage-preview .active:not(:first-child)::before {
  background: #16a34a !important;
}

/* ── 12. RATING REMINDER ── */
.customer-task-card.needs-rating-reminder .customer-task-rating-preview.attention {
  border-color: rgba(249, 115, 22, 0.5) !important;
  background: rgba(249, 115, 22, 0.08) !important;
}

/* ── 13. INFO-WAITING CARD ── */
.customer-task-card.info-waiting-alert {
  border-color: rgba(192, 132, 252, 0.25) !important;
  box-shadow: 0 8px 24px rgba(126, 34, 206, 0.1), inset 3px 0 0 rgba(192, 132, 252, 0.6) !important;
}

/* ── 14. LIVE CHAT ── */
.live-chat-day-separator {
  color: var(--cc-muted) !important;
  border-color: var(--cc-border) !important;
}

/* ── 15. AUTOMATIONS PANEL ── */
.customer-automations-panel {
  background: var(--cc-surface) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* ── 16. FORM INPUTS (Request Modal) ── */
.customer-cockpit .request-field-input {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--cc-border) !important;
  color: var(--cc-text) !important;
  border-radius: 12px !important;
}

.customer-cockpit .request-field-input:focus {
  border-color: rgba(234, 179, 8, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.1) !important;
}

.customer-cockpit .request-field-input option,
.customer-cockpit select option {
  background: #1a1b20 !important;
  color: var(--cc-text) !important;
}

/* ── 17. SCROLLBAR STYLING ── */
.customer-notifications-minimalist-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08) !important;
}

.customer-notifications-minimalist-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.14) !important;
}

.customer-notifications-minimalist-list::-webkit-scrollbar-track {
  background: transparent !important;
}

/* ── 18. PULSE ANIMATION ── */
@keyframes premiumPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }
}

/* ── 19. SUBMIT BUTTON ── */
.customer-submit,
.customer-submit-btn {
  background: linear-gradient(135deg, #eab308, #ca9a06) !important;
  color: #0c0d10 !important;
  border: none !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 16px rgba(234, 179, 8, 0.2) !important;
}

.customer-submit:hover,
.customer-submit-btn:hover {
  box-shadow: 0 6px 20px rgba(234, 179, 8, 0.35) !important;
  transform: translateY(-1px) !important;
}


/* ===========================================================
   CC-DASH � Complete New Layout System v4
   =========================================================== */
.cc-dash {
  --cc-bg: #0c0d10;
  --cc-surface: rgba(255, 255, 255, 0.04);
  --cc-border: rgba(255, 255, 255, 0.07);
  --cc-text: #e2e8f0;
  --cc-muted: #64748b;
  --cc-accent: #eab308;
  --cc-green: #22c55e;
  background: var(--cc-bg);
  min-height: 100vh;
  padding: 20px 24px 40px;
  position: relative;
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Ambient orbs */
.cc-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(100px);
}

.cc-orb--amber {
  width: 500px;
  height: 500px;
  background: rgba(234, 179, 8, 0.08);
  top: -200px;
  right: -100px;
}

.cc-orb--green {
  width: 400px;
  height: 400px;
  background: rgba(34, 197, 94, 0.06);
  bottom: -150px;
  left: -80px;
}

.cc-dash>*:not(.cc-orb) {
  position: relative;
  z-index: 1;
}

/* �� HEADER �� */
.cc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: 16px;
  margin-bottom: 16px;
  backdrop-filter: blur(12px);
}

.cc-header__left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cc-header__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cc-logo {
  font-size: 1.3rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.5px;
}

.cc-logo span {
  color: var(--cc-accent);
}

#subscriber-cockpit-root .cc-tool-header__brand .cc-logo,
#subscriber-cockpit-root .cc-mobile-topbar .cc-logo {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.55rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#subscriber-cockpit-root .cc-tool-header__brand .cc-logo span,
#subscriber-cockpit-root .cc-mobile-topbar .cc-logo span {
  color: var(--cc-accent) !important;
}

.cc-greeting__label {
  font-size: 0.75rem;
  color: var(--cc-muted);
  display: block;
}

.cc-greeting__name {
  font-size: 1.05rem;
  color: #fff;
  font-weight: 700;
}

/* Buttons */
.cc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  outline: none;
  white-space: nowrap;
}

.cc-btn--primary {
  background: linear-gradient(135deg, #eab308, #ca9a06);
  color: #0c0d10;
  box-shadow: 0 2px 12px rgba(234, 179, 8, 0.2);
}

.cc-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(234, 179, 8, 0.3);
}

.cc-btn--sm {
  padding: 6px 12px;
  font-size: 0.75rem;
  border-radius: 8px;
}

.cc-btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--cc-muted);
  position: relative;
}

.cc-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.cc-btn--danger:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.25);
  color: #f87171;
}

.cc-badge-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
}

/* �� STATS ROW �� */
.cc-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.cc-stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: 14px;
  backdrop-filter: blur(12px);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.cc-stat-card:hover {
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.cc-stat-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cc-stat-card__icon--amber {
  background: rgba(234, 179, 8, 0.1);
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.2);
}

.cc-stat-card__icon--blue {
  background: rgba(56, 189, 248, 0.1);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.2);
}

.cc-stat-card__icon--green {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.cc-stat-card__value {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

.cc-stat-card__label {
  font-size: 0.72rem;
  color: var(--cc-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 🍱 BENTO GRID 🍱 */
.cc-bento {
  display: grid !important;
  grid-template-columns: 320px minmax(0, 1fr) 360px !important;
  gap: 0 !important;
  min-height: 0;

  /* The new big modal container */
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 24px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  padding: 0 !important;
  overflow: hidden;
}

.cc-bento>* {
  padding: 24px 32px !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

.cc-bento>*:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}

@media (max-width: 820px) {
  .cc-bento>*:not(:last-child) {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  }
}

.cc-right-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  min-height: 0;
}

.cc-bento .cc-card__head {
  padding: 0 0 20px 0 !important;
}

.cc-bento .cc-card__body {
  padding: 0 !important;
}

.cc-bento #customer-files {
  padding: 0 0 24px 0 !important;
  margin: 0 !important;
}

.cc-bento .cc-card {
  margin: 0 !important;
}

/* �� CARDS �� */
.cc-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: visible;
  min-height: 0;
}

.cc-card:hover {
  border-color: transparent !important;
}

.cc-card--tasks {
  min-height: 420px;
  max-height: calc(100vh - 280px);
}

.cc-card--activity {
  flex: 1 1 0;
  min-height: 200px;
  max-height: 320px;
}

.cc-card--automations {
  flex: 0 0 auto;
  min-height: 160px;
  max-height: 280px;
}

.cc-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--cc-border);
  background: rgba(255, 255, 255, 0.015);
  flex-shrink: 0;
}

.cc-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 750;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
}

.cc-card__title svg {
  color: var(--cc-accent);
  flex-shrink: 0;
}

.cc-card__sub {
  font-size: 0.68rem;
  color: var(--cc-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}

.cc-card__link {
  font-size: 0.75rem;
  color: var(--cc-accent);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.cc-card__body {
  flex: 1 1 0;
  min-height: 0;
}

.cc-card__body--scroll {
  overflow-y: auto;
}

.cc-card__body--scroll::-webkit-scrollbar {
  width: 5px;
}

.cc-card__body--scroll::-webkit-scrollbar-track {
  background: transparent;
}

.cc-card__body--scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 99px;
}

.cc-card__body--scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Pulse dot for automations */
.cc-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: ccPulse 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes ccPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }

  100% {
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
  }
}

/* �� MOBILE �� */
@media (max-width:820px) {
  .cc-dash {
    padding: 12px 10px 32px;
  }

  .cc-header {
    flex-wrap: nowrap;
    padding: 12px 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .cc-header__right {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .cc-stats-row {
    display: flex;
    overflow-x: auto;
    padding-bottom: 8px;
    gap: 10px;
    scrollbar-width: none;
    /* Hide scrollbar Firefox */
  }

  .cc-stats-row::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar WebKit */

  .cc-stat-card {
    flex: 0 0 calc(80% - 10px);
    padding: 8px 12px;
  }

  .cc-bento {
    grid-template-columns: 1fr;
  }

  .cc-card--tasks {
    max-height: none;
  }

  .cc-card--activity {
    max-height: none;
  }

  .cc-card--automations {
    max-height: none;
  }
}


/* === CC-DASH v4 FIXES === */
/* Automations card - remove max-height, let it grow naturally */
.cc-card--automations {
  max-height: none !important;
  min-height: auto !important;
  flex: 0 0 auto !important;
}

.cc-card--automations .cc-card__body {
  overflow: visible !important;
  flex: none !important;
  min-height: auto !important;
}

/* Activity card - shrink when empty */
.cc-card--activity {
  max-height: none !important;
  flex: 0 1 auto !important;
}

.cc-card--activity .cc-card__body {
  min-height: 80px !important;
}

/* Tasks card - reduce empty space */
.cc-card--tasks {
  min-height: 300px !important;
  max-height: none !important;
}

/* Right stack - auto height, no overflow */
.cc-right-stack {
  min-height: auto !important;
  overflow: visible !important;
}

/* Bento grid - align start so right col doesn't stretch to match left */
.cc-bento {
  align-items: start !important;
}

/* Fix customer-empty spacing inside new cards */
.cc-card .customer-empty {
  padding: 32px 20px !important;
}

.cc-card .customer-empty-notifications {
  padding: 24px 20px !important;
}

/* Fix inner panels inheriting old styles - strip them inside cc-dash */
.cc-dash .customer-panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
}

.cc-dash .customer-panel-head {
  display: none !important;
}

.cc-dash .customer-notifications-panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.cc-dash .customer-notifications-panel .customer-panel-head {
  display: none !important;
}

/* Automation items inside cc-dash */
.cc-dash #sub-cockpit-automations {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cc-dash #sub-cockpit-automations>div {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  padding: 14px 16px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cc-dash #sub-cockpit-automations>div:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(234, 179, 8, 0.2) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  transform: translateY(-2px) !important;
}


/* === REMOVE BORDERS (Organic Premium Look) === */
.cc-dash {
  --cc-border: transparent;
  /* Remove global borders */
}

/* Remove borders, add subtle depth instead */
.cc-header {
  border: none !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

.cc-stat-card {
  border: none !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

.cc-stat-card:hover {
  transform: translateY(-2px) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.cc-card {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.cc-card:hover {
  background: transparent !important;
}

.cc-card__head {
  border-bottom: none !important;
  background: transparent !important;
}

.cc-dash #sub-cockpit-automations>div {
  border: none !important;
  background: rgba(255, 255, 255, 0.02) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
}

.cc-dash #sub-cockpit-automations>div:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* Make icons look more integrated */
.cc-stat-card__icon--amber,
.cc-stat-card__icon--blue,
.cc-stat-card__icon--green {
  border: none !important;
}


/* === PRO-TIER DENSITY OVERHAUL === */
.cc-dash {
  max-width: 960px !important;
  margin: 0 auto !important;
  padding: 24px 20px 60px !important;
  position: relative;
  z-index: 1;
}

/* Background gradient to ensure the centered layout looks good on wide screens */
body.subscriber-panel-active {
  background: radial-gradient(circle at top, #0f1115 0%, #0c0d10 60%) !important;
}

body.subscriber-panel-active .topbar,
body.subscriber-panel-active .top-status-row,
body.subscriber-panel-active .right-activity-sidebar,
body.subscriber-panel-active #sub-fixed-support {
  display: none !important;
}

body.subscriber-panel-active .panels-wrapper {
  display: flex;
  flex: 1;
}

@media (max-width: 820px) {
  body.subscriber-panel-active .sidebar {
    display: none !important;
  }

  body.subscriber-panel-active .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 0 !important;
  }
}

/* Empty States Restyling */
.cc-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px !important;
  text-align: center;
  width: 100%;
}

.cc-empty-icon {
  width: 56px;
  height: 56px;
  opacity: 0.3;
  margin-bottom: 16px;
  color: var(--cc-muted);
}

.cc-empty-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
}

.cc-empty-text {
  font-size: 0.85rem;
  color: var(--cc-muted);
  max-width: 340px;
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Automation Live State Animation */
.cc-automation-processing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  padding: 16px;
  border-radius: 12px;
  color: #22c55e;
  font-weight: 700;
  font-size: 0.9rem;
  margin-top: 20px;
  animation: ccPulseBg 2s infinite alternate;
}

@keyframes ccPulseBg {
  0% {
    background: rgba(34, 197, 94, 0.05);
  }

  100% {
    background: rgba(34, 197, 94, 0.15);
  }
}

/* Subscriber cockpit final premium layer */
body.subscriber-logged-in,
body.subscriber-panel-active {
  background:
    radial-gradient(circle at top right, rgba(234, 179, 8, 0.11), transparent 34%),
    linear-gradient(180deg, #0a0b0d 0%, #0d0f12 48%, #090a0c 100%) !important;
}

body.subscriber-logged-in .main-content,
body.subscriber-panel-active .main-content {
  padding: 0 !important;
  width: 100% !important;
}


#panel-subscriber-dashboard {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

#subscriber-cockpit-root {
  background: transparent !important;
  color: #f8fafc !important;
}

#subscriber-cockpit-root .cc-orb {
  display: none !important;
}

#subscriber-cockpit-root .cc-dash {
  --cc-bg: transparent;
  --cc-surface: rgba(17, 18, 22, 0.86);
  --cc-surface-strong: rgba(24, 25, 30, 0.94);
  --cc-border: rgba(255, 255, 255, 0.1);
  --cc-border-strong: rgba(234, 179, 8, 0.3);
  --cc-text: #f8fafc;
  --cc-muted: #94a3b8;
  --cc-accent: #facc15;
  --cc-accent-strong: #eab308;
  --cc-green: #22c55e;
  width: 100% !important;
  max-width: 1600px !important;
  min-height: 100vh !important;
  margin: 0 auto !important;
  padding: 12px 18px 44px !important;
  overflow: visible !important;
  background: transparent !important;
}

#subscriber-cockpit-root .cc-header,
#subscriber-cockpit-root .cc-stats-row,
#subscriber-cockpit-root .cc-bento {
  width: 100% !important;
  max-width: none !important;
}

#subscriber-cockpit-root .cc-header {
  padding: 10px 14px !important;
  margin-bottom: 10px !important;
  min-height: 58px !important;
  border-radius: 8px !important;
}

#subscriber-cockpit-root .cc-header__left,
#subscriber-cockpit-root .cc-header__right {
  min-width: 0 !important;
}

#subscriber-cockpit-root .cc-header__left {
  gap: 14px !important;
}

#subscriber-cockpit-root .cc-logo {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.9rem !important;
  letter-spacing: 0 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
}

#subscriber-cockpit-root .cc-logo span {
  color: var(--cc-accent) !important;
}

#subscriber-cockpit-root .cc-greeting {
  padding-left: 12px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
  min-width: 0 !important;
}

#subscriber-cockpit-root .cc-greeting__label {
  color: var(--cc-muted) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
}

#subscriber-cockpit-root .cc-greeting__name {
  color: #ffffff !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#subscriber-cockpit-root .cc-header__right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
}

#subscriber-cockpit-root .cc-btn {
  min-height: 36px !important;
  padding: 8px 13px !important;
  border-radius: 8px !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

#subscriber-cockpit-root .cc-btn--primary {
  background: linear-gradient(135deg, #facc15, #eab308) !important;
  color: #111827 !important;
  box-shadow: 0 10px 24px rgba(234, 179, 8, 0.22) !important;
}

#subscriber-cockpit-root .cc-btn--ghost {
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
}

#subscriber-cockpit-root .cc-btn:hover {
  transform: translateY(-1px) !important;
}

#subscriber-cockpit-root .cc-tool-header {
  justify-content: space-between !important;
}

#subscriber-cockpit-root .cc-tool-header__tools {
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: center !important;
  min-width: 0 !important;
}

#subscriber-cockpit-root .cc-tool-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  padding: 7px 12px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(234, 179, 8, 0.22) !important;
  background: rgba(234, 179, 8, 0.08) !important;
  color: #facc15 !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
  cursor: pointer !important;
}

#subscriber-cockpit-root .cc-tool-chip svg {
  width: 15px !important;
  height: 15px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.4 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#subscriber-cockpit-root .cc-tool-chip.is-disabled {
  opacity: 0.58 !important;
  filter: grayscale(0.35) !important;
}

#subscriber-cockpit-root .cc-work-counts {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  padding: 0 !important;
}

#subscriber-cockpit-root .cc-work-count {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  min-height: 30px !important;
  max-width: 145px !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(148, 163, 184, 0.1) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}

#subscriber-cockpit-root .cc-work-count svg {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
}

#subscriber-cockpit-root .cc-work-count span {
  color: #f8fafc !important;
  font-size: 0.82rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

#subscriber-cockpit-root .cc-work-count small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: rgba(255, 255, 255, 0.52) !important;
  font-size: 0.66rem !important;
  font-weight: 750 !important;
}

#subscriber-cockpit-root .customer-work-summary {
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  padding: 13px 12px 11px !important;
  border: 1px solid rgba(250, 204, 21, 0.15) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(250, 204, 21, 0.08), rgba(255, 255, 255, 0.025)) !important;
}

#subscriber-cockpit-root .customer-work-summary__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 18px !important;
}

#subscriber-cockpit-root .customer-work-summary__head span {
  color: #facc15 !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
}

#subscriber-cockpit-root .customer-work-summary__head small {
  color: rgba(203, 213, 225, 0.62) !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
}

#subscriber-cockpit-root .customer-work-summary__list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

#subscriber-cockpit-root .customer-work-summary__list>div {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 3px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 7px 0 !important;
  border-top: 1px solid rgba(148, 163, 184, 0.11) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#subscriber-cockpit-root .customer-work-summary__list>div.is-wide {
  min-height: 0 !important;
}

#subscriber-cockpit-root .customer-work-summary__list small,
#subscriber-cockpit-root .customer-work-summary__list strong {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#subscriber-cockpit-root .customer-work-summary__list small {
  color: #8ea2c3 !important;
  font-size: 0.6rem !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
}

#subscriber-cockpit-root .customer-work-summary__list strong {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  color: #fff !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-align: left !important;
}

#subscriber-cockpit-root .customer-work-summary__list>div.is-wide strong {
  font-size: 0.82rem !important;
}

.ys-cost-tool-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ys-cost-tool-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 7, 18, 0.78);
  backdrop-filter: blur(10px);
}

.ys-cost-tool-dialog {
  position: relative;
  width: min(980px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: hidden;
  border: 1px solid rgba(234, 179, 8, 0.24);
  border-radius: 18px;
  background: radial-gradient(circle at 12% 0%, rgba(234, 179, 8, 0.08), transparent 34%), linear-gradient(180deg, #12151b, #0b0e13);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.52);
  padding: 22px;
  color: #fff;
}

.ys-cost-tool-dialog header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ys-cost-tool-dialog header span {
  display: block;
  color: #facc15;
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.ys-cost-tool-dialog header h3 {
  margin: 3px 0 0;
  font-size: 1.35rem;
  font-weight: 900;
}

.ys-cost-tool-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
}

.ys-cost-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}

.ys-input-panel {
  display: grid;
  gap: 12px;
}

.ys-input-panel section {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.032);
  padding: 14px;
}

.ys-input-panel h4 {
  margin: 0 0 10px;
  color: #facc15;
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

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

.ys-cost-grid label {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  color: rgba(226, 232, 240, 0.72);
  font-size: 0.72rem;
  font-weight: 800;
}

.ys-cost-grid input,
.ys-cost-grid select {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(234, 179, 8, 0.16);
  border-radius: 10px;
  background: #07090d;
  color: #fff;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.82rem;
  box-sizing: border-box;
  appearance: auto;
  color-scheme: dark;
}

.ys-cost-grid input:focus,
.ys-cost-grid select:focus {
  outline: 2px solid rgba(250, 204, 21, 0.28);
  border-color: rgba(250, 204, 21, 0.55);
  box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.08);
}

.ys-cost-grid select option {
  background: #111827;
  color: #ffffff;
}

.ys-cost-grid label button {
  position: absolute;
  top: 24px;
  right: 7px;
  border: 0;
  border-radius: 6px;
  background: rgba(250, 204, 21, 0.14);
  color: #facc15;
  font-size: 0.68rem;
  font-weight: 900;
  padding: 4px 7px;
  cursor: pointer;
}

.ys-cost-grid label:has(button) input {
  padding-right: 48px;
}

.ys-input-suffix {
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: rgba(250, 204, 21, 0.82);
  font-size: 0.78rem;
  font-weight: 900;
  pointer-events: none;
}

.ys-cost-grid label:has(.ys-input-suffix) input {
  padding-right: 32px;
}

.ys-receipt {
  border: 1px solid rgba(250, 204, 21, 0.2);
  border-radius: 14px;
  background: rgba(7, 9, 13, 0.72);
  padding: 12px;
}

.ys-cost-visual {
  margin: 10px 0 8px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

.ys-cost-visual-bar {
  display: flex;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
}

.ys-cost-visual .profit {
  background: #22c55e;
}

.ys-cost-visual .deductions {
  background: #f97316;
}

.ys-cost-visual .costs {
  background: #facc15;
}

.ys-cost-visual-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  color: rgba(203, 213, 225, 0.78);
  font-size: 0.7rem;
  font-weight: 850;
}

.ys-cost-visual-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ys-cost-visual-legend i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.ys-courier-control {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  color: rgba(226, 232, 240, 0.72);
  font-size: 0.78rem;
  font-weight: 800;
}

.ys-courier-control>div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(234, 179, 8, 0.14);
  border-radius: 11px;
  background: #07090d;
}

.ys-courier-control button {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(203, 213, 225, 0.72);
  font-size: 0.76rem;
  font-weight: 900;
  cursor: pointer;
}

.ys-courier-control button.active {
  background: rgba(250, 204, 21, 0.16);
  color: #facc15;
}

.ys-courier-note {
  grid-column: 1 / -1;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.08);
  color: rgba(203, 213, 225, 0.72);
  padding: 10px 11px;
  font-size: 0.76rem;
  font-weight: 850;
}

.ys-receipt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  border-radius: 8px;
  padding: 7px 8px;
  color: rgba(226, 232, 240, 0.74);
  font-size: 0.78rem;
  font-weight: 800;
}

.ys-receipt-row b {
  color: #ffffff;
  font-weight: 900;
}

.ys-receipt-row.income,
.ys-receipt-row.payout {
  background: rgba(34, 197, 94, 0.07);
  color: #22c55e;
}

.ys-receipt-row.income b,
.ys-receipt-row.payout b {
  color: #22c55e;
}

.ys-receipt-row.muted {
  color: rgba(148, 163, 184, 0.78);
}

.ys-receipt-row.total {
  background: rgba(250, 204, 21, 0.065);
  color: #facc15;
}

.ys-receipt-row.total b {
  color: #facc15;
}

.ys-receipt-sep {
  height: 1px;
  margin: 7px 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
}

.ys-net-band {
  margin-top: 12px;
  border: 1px solid rgba(34, 197, 94, 0.22);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.16), rgba(21, 128, 61, 0.1));
  padding: 14px;
}

.ys-net-band span {
  display: block;
  color: rgba(203, 213, 225, 0.76);
  font-size: 0.74rem;
  font-weight: 900;
}

.ys-net-band strong {
  display: block;
  margin-top: 2px;
  color: #22c55e;
  font-size: 1.65rem;
  font-weight: 950;
}

.ys-net-band small {
  display: block;
  color: rgba(203, 213, 225, 0.76);
  font-size: 0.78rem;
  font-weight: 850;
}

.ys-net-band.is-negative {
  border-color: rgba(239, 68, 68, 0.25);
  background: rgba(239, 68, 68, 0.1);
}

.ys-net-band.is-negative strong {
  color: #ef4444;
}

@media (max-width: 760px) {
  #subscriber-cockpit-root .cc-tool-header {
    flex-wrap: wrap !important;
  }

  #subscriber-cockpit-root .cc-tool-header__tools {
    justify-content: flex-start !important;
    flex-basis: 100% !important;
  }

  .ys-cost-grid,
  .ys-cost-layout {
    grid-template-columns: 1fr;
  }
}

#subscriber-cockpit-root .cc-stats-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 0 10px !important;
}

#subscriber-cockpit-root .cc-stat-card {
  min-width: 0 !important;
  min-height: 62px !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  background: rgba(16, 18, 22, 0.82) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

#subscriber-cockpit-root .cc-stat-card__info {
  min-width: 0 !important;
}

#subscriber-cockpit-root .cc-stat-card__icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
}

#subscriber-cockpit-root .cc-stat-card__value {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #ffffff !important;
  font-size: 1.2rem !important;
  line-height: 1.15 !important;
}

#subscriber-cockpit-root .cc-stat-card__label {
  color: #7c8aa0 !important;
  font-size: 0.7rem !important;
  font-weight: 850 !important;
}

#subscriber-cockpit-root .cc-bento {
  display: grid !important;
  grid-template-columns: 270px minmax(0, 1fr) 320px !important;
  align-items: start !important;
  gap: 0 !important;
  min-height: calc(100vh - 116px) !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  background: rgba(12, 13, 16, 0.9) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

#subscriber-cockpit-root .cc-bento>.cc-card,
#subscriber-cockpit-root .cc-bento>.cc-right-stack {
  min-width: 0 !important;
  padding: 18px 20px !important;
}

#subscriber-cockpit-root .cc-bento>.cc-card:not(:last-child),
#subscriber-cockpit-root .cc-bento>.cc-right-stack:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#subscriber-cockpit-root .cc-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
}

#subscriber-cockpit-root .cc-card__head {
  min-height: 34px !important;
  padding: 0 0 12px !important;
  margin: 0 0 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

#subscriber-cockpit-root .cc-card__title {
  color: #ffffff !important;
  font-size: 0.98rem !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

#subscriber-cockpit-root .cc-card__title svg,
#subscriber-cockpit-root .cc-card__link {
  color: var(--cc-accent) !important;
}

#subscriber-cockpit-root .cc-card__sub {
  color: #768399 !important;
  font-size: 0.68rem !important;
  font-weight: 850 !important;
}

#subscriber-cockpit-root .cc-card__link {
  font-size: 0.72rem !important;
  white-space: normal !important;
  text-align: right !important;
}

#subscriber-cockpit-root .cc-card--automations,
#subscriber-cockpit-root .cc-card--tasks,
#subscriber-cockpit-root .cc-right-stack {
  height: auto !important;
  max-height: none !important;
}

#subscriber-cockpit-root .cc-card--tasks .cc-card__body--scroll,
#subscriber-cockpit-root .cc-card--activity .cc-card__body--scroll {
  overflow: visible !important;
  max-height: none !important;
}

#subscriber-cockpit-root .cc-right-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

#subscriber-cockpit-root #customer-files {
  padding: 0 0 10px !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  background: transparent !important;
}

#subscriber-cockpit-root #customer-files a,
#subscriber-cockpit-root #customer-files .customer-file-card,
#subscriber-cockpit-root #sub-cockpit-automations>div,
#subscriber-cockpit-root .customer-task-card {
  border-radius: 8px !important;
}

#subscriber-cockpit-root #sub-cockpit-automations {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
}

#subscriber-cockpit-root #sub-cockpit-automations>div {
  padding: 12px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16) !important;
  background: transparent !important;
  box-shadow: none !important;
}

#subscriber-cockpit-root #sub-cockpit-automations>div:hover {
  border-bottom-color: rgba(250, 204, 21, 0.26) !important;
  background: transparent !important;
}

#subscriber-cockpit-root #sub-cockpit-automations>div:last-child {
  border-bottom: 0 !important;
}

#subscriber-cockpit-root .customer-task-list {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 0 !important;
}

#subscriber-cockpit-root .customer-task-card {
  width: 100% !important;
  max-width: 240px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  background: linear-gradient(180deg, rgba(26, 28, 34, 0.96), rgba(18, 20, 24, 0.94)) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  text-align: left !important;
}

#subscriber-cockpit-root .customer-task-card:hover {
  border-color: rgba(250, 204, 21, 0.26) !important;
  transform: translateY(-1px) !important;
}

#subscriber-cockpit-root .customer-task-card .customer-task-toggle {
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

#subscriber-cockpit-root .customer-task-preview-top h3,
#subscriber-cockpit-root .customer-task-preview-mid,
#subscriber-cockpit-root .notification-minimalist-note,
#subscriber-cockpit-root .notification-minimalist-label {
  overflow-wrap: anywhere !important;
  text-align: left !important;
}

#subscriber-cockpit-root .customer-task-preview-top h3 {
  color: #ffffff !important;
  font-size: 0.84rem !important;
  line-height: 1.18 !important;
}

#subscriber-cockpit-root .customer-stage-preview {
  margin-top: 6px !important;
}

#subscriber-cockpit-root .customer-task-preview-top {
  gap: 8px !important;
}

#subscriber-cockpit-root .customer-task-preview-mid {
  gap: 1px !important;
}

#subscriber-cockpit-root .customer-task-preview-mid strong {
  font-size: 0.75rem !important;
}

#subscriber-cockpit-root .customer-task-preview-mid small {
  font-size: 0.62rem !important;
}

#subscriber-cockpit-root .customer-task-preview-mid p {
  min-height: 0 !important;
  margin-top: 2px !important;
  font-size: 0.66rem !important;
  line-height: 1.25 !important;
  max-height: 1.35em !important;
  -webkit-line-clamp: 1 !important;
}

#subscriber-cockpit-root .customer-task-card .customer-stage-preview {
  margin-top: 6px !important;
  gap: 4px !important;
}

#subscriber-cockpit-root .customer-task-card .customer-stage-preview b {
  font-size: 0.58rem !important;
}

#subscriber-cockpit-root .customer-task-card .customer-stage-preview i {
  width: 14px !important;
  height: 14px !important;
  font-size: 0.55rem !important;
}

#subscriber-cockpit-root .customer-task-card .customer-stage-preview span:not(:first-child)::before {
  background: rgba(255, 255, 255, 0.16) !important;
}

#subscriber-cockpit-root .customer-task-card .customer-stage-preview .done:not(:first-child)::before,
#subscriber-cockpit-root .customer-task-card .customer-stage-preview .active:not(:first-child)::before {
  background: var(--cc-accent) !important;
}

#subscriber-cockpit-root .customer-task-card .customer-stage-preview i {
  background: #111827 !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
}

#subscriber-cockpit-root .customer-task-card .customer-stage-preview .done i,
#subscriber-cockpit-root .customer-task-card .customer-stage-preview .active i {
  background: var(--cc-accent) !important;
  border-color: var(--cc-accent) !important;
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.16) !important;
}

#subscriber-cockpit-root .customer-notification-minimalist-row {
  padding: 10px 0 !important;
}

#subscriber-cockpit-root .notification-minimalist-note {
  color: #dbe4ef !important;
  line-height: 1.5 !important;
}

#subscriber-cockpit-root .notification-minimalist-time,
#subscriber-cockpit-root .notification-minimalist-author {
  color: #7c8aa0 !important;
}

#subscriber-cockpit-root .cc-empty-state {
  min-height: 190px !important;
  border: 1px dashed rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.025) !important;
}

@media (max-width: 1180px) {
  #subscriber-cockpit-root .cc-dash {
    padding: 18px 16px 48px !important;
  }

  #subscriber-cockpit-root .cc-bento {
    grid-template-columns: 280px minmax(0, 1fr) 300px !important;
  }

  #subscriber-cockpit-root .cc-bento>.cc-card,
  #subscriber-cockpit-root .cc-bento>.cc-right-stack {
    padding: 20px !important;
  }
}

@media (max-width: 900px) {
  #subscriber-cockpit-root .cc-header {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  #subscriber-cockpit-root .cc-header__right {
    width: 100% !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
  }

  #subscriber-cockpit-root .cc-stats-row {
    grid-template-columns: 1fr !important;
  }

  #subscriber-cockpit-root .cc-bento {
    grid-template-columns: 1fr !important;
  }

  #subscriber-cockpit-root .cc-bento>.cc-card,
  #subscriber-cockpit-root .cc-bento>.cc-right-stack {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  #subscriber-cockpit-root .cc-bento>.cc-right-stack {
    border-bottom: 0 !important;
  }
}

@media (max-width: 520px) {
  #subscriber-cockpit-root .cc-dash {
    padding: 12px 10px 36px !important;
  }

  #subscriber-cockpit-root .cc-header,
  #subscriber-cockpit-root .cc-stat-card,
  #subscriber-cockpit-root .cc-bento {
    border-radius: 8px !important;
  }

  #subscriber-cockpit-root .cc-header__left {
    width: 100% !important;
  }

  #subscriber-cockpit-root .cc-greeting {
    flex: 1 1 auto !important;
  }

  #subscriber-cockpit-root .cc-btn {
    padding: 8px 11px !important;
  }

  #subscriber-cockpit-root .cc-bento>.cc-card,
  #subscriber-cockpit-root .cc-bento>.cc-right-stack {
    padding: 16px !important;
  }
}

/* Subscriber cockpit compact header + wider work column */
#subscriber-cockpit-root .cc-dash {
  max-width: 1540px !important;
  padding-top: 18px !important;
}

#subscriber-cockpit-root .cc-header {
  min-height: 52px !important;
  margin-bottom: 8px !important;
  padding: 14px 24px !important;
  background: rgba(13, 15, 18, 0.92) !important;
  box-shadow: none !important;
}

#subscriber-cockpit-root .cc-logo {
  font-size: 1.18rem !important;
}

#subscriber-cockpit-root .cc-greeting {
  padding-left: 12px !important;
}

#subscriber-cockpit-root .cc-greeting__label {
  font-size: 0.68rem !important;
}

#subscriber-cockpit-root .cc-greeting__name {
  font-size: 0.9rem !important;
}

#subscriber-cockpit-root .cc-btn {
  min-height: 32px !important;
  padding: 7px 11px !important;
  font-size: 0.78rem !important;
}

#subscriber-cockpit-root .cc-stats-row {
  position: relative !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
  padding-bottom: 14px !important;
}

#subscriber-cockpit-root .cc-stats-row::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(250, 204, 21, 0.32), rgba(255, 255, 255, 0.08), transparent) !important;
}

#subscriber-cockpit-root .cc-stat-card {
  min-height: 58px !important;
  padding: 9px 12px !important;
  gap: 10px !important;
  background: rgba(13, 15, 18, 0.72) !important;
  box-shadow: none !important;
}

#subscriber-cockpit-root .cc-stat-card__icon {
  width: 32px !important;
  height: 32px !important;
}

#subscriber-cockpit-root .cc-stat-card__icon svg {
  width: 17px !important;
  height: 17px !important;
}

#subscriber-cockpit-root .cc-stat-card__value {
  font-size: 1.08rem !important;
}

#subscriber-cockpit-root .cc-stat-card__label {
  font-size: 0.62rem !important;
}

#subscriber-cockpit-root .cc-bento {
  grid-template-columns: 270px minmax(0, 1fr) 390px !important;
}

#subscriber-cockpit-root .cc-bento>.cc-card,
#subscriber-cockpit-root .cc-bento>.cc-right-stack {
  padding: 20px 24px !important;
}

#subscriber-cockpit-root .cc-card--tasks {
  padding-left: 28px !important;
  padding-right: 28px !important;
}

@media (max-width: 1180px) {
  #subscriber-cockpit-root .cc-bento {
    grid-template-columns: 220px minmax(0, 1fr) 300px !important;
  }
}

@media (max-width: 900px) {
  #subscriber-cockpit-root .cc-stats-row {
    padding-bottom: 12px !important;
  }

  #subscriber-cockpit-root .cc-bento {
    grid-template-columns: 1fr !important;
  }
}

/* Subscriber cockpit v3: centered compact summary and shorter separators */
#subscriber-cockpit-root .cc-dash {
  max-width: calc(100vw - 96px) !important;
  width: calc(100vw - 96px) !important;
  padding-top: 10px !important;
}

#subscriber-cockpit-root .cc-header,
#subscriber-cockpit-root .cc-stats-row {
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#subscriber-cockpit-root .cc-header {
  min-height: 46px !important;
  padding: 7px 10px !important;
  align-items: center !important;
}

#subscriber-cockpit-root .cc-header__left {
  gap: 12px !important;
}

#subscriber-cockpit-root .cc-logo {
  font-size: 1.08rem !important;
}

#subscriber-cockpit-root .cc-greeting {
  padding-left: 10px !important;
}

#subscriber-cockpit-root .cc-greeting__label {
  font-size: 0.62rem !important;
}

#subscriber-cockpit-root .cc-greeting__name {
  font-size: 0.82rem !important;
}

#subscriber-cockpit-root .cc-btn {
  min-height: 30px !important;
  padding: 6px 10px !important;
  font-size: 0.74rem !important;
}

#subscriber-cockpit-root .cc-stats-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  max-width: none !important;
  gap: 8px !important;
  margin-top: 6px !important;
  margin-bottom: 10px !important;
  padding-bottom: 8px !important;
}

#subscriber-cockpit-root .cc-stat-card {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-height: auto !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  border-color: rgba(255, 255, 255, 0.075) !important;
  gap: 8px !important;
}

#subscriber-cockpit-root .cc-stat-card__info {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
}

#subscriber-cockpit-root .cc-stat-card__icon {
  width: 20px !important;
  height: 20px !important;
  border-radius: 4px !important;
}

#subscriber-cockpit-root .cc-stat-card__icon svg {
  width: 12px !important;
  height: 12px !important;
}

#subscriber-cockpit-root .cc-stat-card__value {
  font-size: 0.95rem !important;
}

#subscriber-cockpit-root .cc-stat-card__label {
  font-size: 0.65rem !important;
}

#subscriber-cockpit-root .cc-bento {
  grid-template-columns: 240px minmax(760px, 1fr) 290px 300px !important;
  min-height: calc(100vh - 104px) !important;
}

#subscriber-cockpit-root .cc-bento>.cc-card,
#subscriber-cockpit-root .cc-bento>.cc-right-stack {
  position: relative !important;
  padding: 14px 16px !important;
  border-right: 0 !important;
}

#subscriber-cockpit-root .cc-bento>.cc-card:not(:last-child)::after,
#subscriber-cockpit-root .cc-bento>.cc-right-stack:not(:last-child)::after {
  content: "" !important;
  position: absolute !important;
  top: 28px !important;
  right: 0 !important;
  width: 1px !important;
  height: calc(100% - 56px) !important;
  max-height: 520px !important;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.12) 14%, rgba(255, 255, 255, 0.12) 86%, transparent) !important;
}

#subscriber-cockpit-root .cc-card--tasks {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

#subscriber-cockpit-root .cc-right-stack {
  padding-left: 14px !important;
}

@media (max-width: 1180px) {

  #subscriber-cockpit-root .cc-header,
  #subscriber-cockpit-root .cc-stats-row {
    max-width: none !important;
  }

  #subscriber-cockpit-root .cc-bento {
    grid-template-columns: 210px minmax(520px, 1fr) 260px 280px !important;
  }
}

@media (max-width: 900px) {
  #subscriber-cockpit-root .cc-dash {
    max-width: none !important;
    width: auto !important;
  }

  #subscriber-cockpit-root .cc-header,
  #subscriber-cockpit-root .cc-stats-row {
    max-width: none !important;
  }

  #subscriber-cockpit-root .cc-bento {
    grid-template-columns: 1fr !important;
  }

  #subscriber-cockpit-root .cc-bento>.cc-card:not(:last-child)::after,
  #subscriber-cockpit-root .cc-bento>.cc-right-stack:not(:last-child)::after {
    display: none !important;
  }
}

/* Subscriber cockpit: clean recurring requests, time bar, larger file actions */
#subscriber-cockpit-root #sub-cockpit-automations>div,
#subscriber-cockpit-root .customer-task-card,
#subscriber-cockpit-root .customer-task-card.stage-created,
#subscriber-cockpit-root .customer-task-card.stage-review,
#subscriber-cockpit-root .customer-task-card.stage-work {
  background: linear-gradient(180deg, rgba(22, 20, 14, 0.88), rgba(13, 14, 17, 0.94)) !important;
  border: 1.5px solid rgba(250, 204, 21, 0.3) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.08),
    inset 0 0 0 2px rgba(250, 204, 21, 0.15),
    0 12px 32px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(250, 204, 21, 0.06) !important;
}

#subscriber-cockpit-root .customer-task-card.stage-done,
#subscriber-cockpit-root .customer-task-list.completed .customer-task-card {
  background: linear-gradient(180deg, rgba(26, 27, 30, 0.88), rgba(13, 14, 17, 0.94)) !important;
  border: 1.5px solid rgba(148, 163, 184, 0.25) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.06),
    inset 0 0 0 2px rgba(148, 163, 184, 0.1),
    0 12px 32px rgba(0, 0, 0, 0.25) !important;
}

#subscriber-cockpit-root #sub-cockpit-automations>div {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16) !important;
  box-shadow: none !important;
}

#subscriber-cockpit-root #sub-cockpit-automations>div:last-child {
  border-bottom: 0 !important;
}

#subscriber-cockpit-root #sub-cockpit-automations>div:hover,
#subscriber-cockpit-root .customer-task-card.is-collapsible:not(.stage-done):not(.info-waiting-alert):hover {
  background: linear-gradient(180deg, rgba(27, 24, 15, 0.94), rgba(16, 17, 20, 0.96)) !important;
  border-color: rgba(250, 204, 21, 0.34) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 12px 28px rgba(0, 0, 0, 0.18) !important;
  transform: none !important;
}

#subscriber-cockpit-root .customer-task-card.stage-done.is-collapsible:hover,
#subscriber-cockpit-root .customer-task-list.completed .customer-task-card.is-collapsible:hover {
  background: linear-gradient(180deg, rgba(30, 31, 35, 0.94), rgba(16, 17, 20, 0.96)) !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 12px 28px rgba(0, 0, 0, 0.18) !important;
  transform: none !important;
}

#subscriber-cockpit-root #sub-cockpit-automations>div:hover {
  background: transparent !important;
  border-color: transparent !important;
  border-bottom-color: rgba(250, 204, 21, 0.26) !important;
  box-shadow: none !important;
}

#subscriber-cockpit-root .customer-task-card {
  max-width: none !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 12px !important;
}

#subscriber-cockpit-root .cc-card--tasks .customer-task-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  justify-content: start !important;
}

#subscriber-cockpit-root .customer-task-card .customer-task-toggle {
  align-items: stretch !important;
  min-height: 178px !important;
  padding: 12px 10px !important;
  /* removed border and transparent overrides to allow stage styling */
}

#subscriber-cockpit-root .customer-task-preview-top {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) auto !important;
  align-items: start !important;
  column-gap: 8px !important;
  width: 100% !important;
}

#subscriber-cockpit-root .customer-task-type-icon,
#subscriber-cockpit-root .customer-recurring-icon,
#subscriber-cockpit-root .customer-file-icon,
#subscriber-cockpit-root .customer-file-head-icon,
#subscriber-cockpit-root .customer-file-open-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}

#subscriber-cockpit-root .customer-task-type-icon {
  width: 24px !important;
  height: 24px !important;
  color: #eab308 !important;
  border-radius: 7px !important;
  background: rgba(234, 179, 8, 0.1) !important;
}

#subscriber-cockpit-root .customer-recurring-icon,
.customer-recurring-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 28px !important;
  height: 28px !important;
  color: #38bdf8 !important;
  border-radius: 8px !important;
  background: rgba(56, 189, 248, 0.1) !important;
  border: 1px solid rgba(56, 189, 248, 0.18) !important;
}

#subscriber-cockpit-root .customer-recurring-card {
  display: grid !important;
  gap: 9px !important;
  padding: 12px 10px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96)) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}

#subscriber-cockpit-root .customer-recurring-card:hover {
  border-color: rgba(217, 119, 6, 0.28) !important;
  box-shadow: 0 12px 24px rgba(146, 84, 18, 0.12) !important;
  transform: translateY(-1px) !important;
}

#subscriber-cockpit-root .customer-recurring-top {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 10px !important;
}

#subscriber-cockpit-root .customer-recurring-title {
  min-width: 0 !important;
}

#subscriber-cockpit-root .customer-recurring-title strong {
  display: block !important;
  color: #172033 !important;
  font-size: 0.84rem !important;
  line-height: 1.18 !important;
  font-weight: 850 !important;
}

#subscriber-cockpit-root .customer-recurring-title small,
#subscriber-cockpit-root .customer-recurring-foot small {
  display: block !important;
  overflow: hidden !important;
  color: rgba(148, 163, 184, 0.82) !important;
  font-size: 0.62rem !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#subscriber-cockpit-root .customer-recurring-frequency {
  color: #d97706 !important;
  font-size: 0.62rem !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
}

#subscriber-cockpit-root .customer-recurring-progress {
  height: 6px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, 0.11) !important;
}

#subscriber-cockpit-root .customer-recurring-progress i {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  min-width: 3px !important;
  background: linear-gradient(90deg, #16a34a, #d97706) !important;
  box-shadow: 0 0 10px rgba(22, 163, 74, 0.28) !important;
}

#subscriber-cockpit-root .customer-recurring-special {
  width: fit-content !important;
  border-radius: 999px !important;
  padding: 3px 8px !important;
  color: #fef3c7 !important;
  background: rgba(234, 179, 8, 0.16) !important;
  border: 1px solid rgba(234, 179, 8, 0.24) !important;
  font-size: 0.58rem !important;
  font-weight: 850 !important;
}

#subscriber-cockpit-root .customer-recurring-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  color: #5f6f7a !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
}

#subscriber-cockpit-root .customer-recurring-remaining {
  display: block !important;
  color: #334155 !important;
  font-weight: 780 !important;
}

#subscriber-cockpit-root .customer-recurring-state {
  color: #15803d !important;
  font-size: 0.58rem !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

#subscriber-cockpit-root .customer-recurring-foot button {
  flex: 0 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #38bdf8 !important;
  cursor: pointer !important;
  font-size: 0.62rem !important;
  font-weight: 850 !important;
}

.customer-recurring-icon--modal {
  width: 36px !important;
  height: 36px !important;
  color: #eab308 !important;
  background: rgba(234, 179, 8, 0.12) !important;
  border-color: rgba(234, 179, 8, 0.22) !important;
}

#subscriber-cockpit-root .customer-task-type-icon svg,
#subscriber-cockpit-root .customer-recurring-icon svg,
.customer-recurring-icon svg,
#subscriber-cockpit-root .customer-file-icon svg,
#subscriber-cockpit-root .customer-file-head-icon svg,
#subscriber-cockpit-root .customer-file-open-icon svg {
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#subscriber-cockpit-root .customer-task-preview-mid {
  width: 100% !important;
  margin-top: 8px !important;
  gap: 3px !important;
}

#subscriber-cockpit-root .customer-task-preview-mid strong {
  color: #eab308 !important;
  font-size: 0.78rem !important;
}

#subscriber-cockpit-root .customer-task-card.stage-done .customer-task-preview-mid strong,
#subscriber-cockpit-root .customer-task-list.completed .customer-task-card .customer-task-preview-mid strong {
  color: #94a3b8 !important;
}

#subscriber-cockpit-root .customer-task-progress-bar {
  width: 100% !important;
  margin-top: auto !important;
  padding-top: 12px !important;
}

#subscriber-cockpit-root .customer-task-progress-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 7px !important;
}

#subscriber-cockpit-root .customer-task-progress-head span,
#subscriber-cockpit-root .customer-task-progress-head strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-family: 'Outfit', 'Inter', sans-serif !important;
}

#subscriber-cockpit-root .customer-task-progress-head span {
  color: rgba(226, 232, 240, 0.76) !important;
  font-size: 0.66rem !important;
  font-weight: 800 !important;
}

#subscriber-cockpit-root .customer-task-progress-head strong {
  color: #facc15 !important;
  font-size: 0.66rem !important;
  font-weight: 850 !important;
  text-align: right !important;
}

#subscriber-cockpit-root .customer-task-progress-track {
  width: 100% !important;
  height: 6px !important;
  overflow: visible !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  position: relative !important;
}

#subscriber-cockpit-root .customer-task-progress-track i {
  display: block !important;
  width: var(--progress-target, 25%) !important;
  height: 100% !important;
  border-radius: inherit !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='6' viewBox='0 0 36 6'%3E%3Cpath d='M7 1.5 11.8 3 7 4.5' fill='none' stroke='%23000000' stroke-opacity='.35' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15 1.5 19.8 3 15 4.5' fill='none' stroke='%23000000' stroke-opacity='.55' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M29 1.5 33.8 3 29 4.5' fill='none' stroke='%23000000' stroke-opacity='.35' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(90deg, #22c55e, #eab308) !important;
  background-repeat: repeat-x, no-repeat !important;
  background-size: 36px 6px, 100% 100% !important;
  background-position: 0 0, 0 0;
  overflow: visible !important;
  position: relative !important;
}

#subscriber-cockpit-root .customer-task-progress-track i.is-filled {
  animation: customerTaskProgressActiveSweep 4.0s linear calc(var(--sweep-delay, 0.8s) * -1) infinite !important;
}

@keyframes customerTaskProgressActiveSweep {
  from {
    background-position: 0px 0, 0 0;
  }

  to {
    background-position: 36px 0, 0 0;
  }
}

/* === SYNCED PULSE ORB at the exact end of the filled bar === */
/* Scoped to .is-filled to ensure it starts exactly when the JS adds the class */
#subscriber-cockpit-root .customer-task-progress-track i.is-filled::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: -5px !important;
  width: 10px !important;
  height: 10px !important;
  margin-top: -5px !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-sizing: border-box !important;
  border: 1.5px solid #facc15 !important;
  pointer-events: none !important;
  z-index: 5 !important;
  opacity: 0;
  /* Sync exactly with the sweep animation (2.0s) and inherit its delay */
  animation: progressBarEdgePulse 2.0s ease-out calc(var(--sweep-delay, 0.8s) * -1) infinite both !important;
}

@keyframes progressBarEdgePulse {

  /* Initial idle state */
  0%,
  5.9% {
    transform: scale(0.2);
    opacity: 0;
    box-shadow: 0 0 0 0 rgba(234, 179, 8, 0);
  }

  /* P1: Triggered by C3 (single chevron) hitting the right edge */
  6% {
    transform: scale(0.5);
    opacity: 1;
    box-shadow: 0 0 4px 1px rgba(234, 179, 8, 0.8), inset 0 0 2px 0 rgba(234, 179, 8, 0.8);
  }

  16% {
    transform: scale(1.8);
    opacity: 0;
    box-shadow: 0 0 10px 2px rgba(234, 179, 8, 0), inset 0 0 4px 0 rgba(234, 179, 8, 0);
  }

  /* Idle between P1 and P2 */
  16.1%,
  44.9% {
    transform: scale(0.2);
    opacity: 0;
    box-shadow: 0 0 0 0 rgba(234, 179, 8, 0);
  }

  /* P2: Triggered by C2 (second chevron of pair) hitting the right edge */
  45% {
    transform: scale(0.5);
    opacity: 1;
    box-shadow: 0 0 4px 1px rgba(234, 179, 8, 0.8), inset 0 0 2px 0 rgba(234, 179, 8, 0.8);
  }

  55% {
    transform: scale(1.8);
    opacity: 0;
    box-shadow: 0 0 10px 2px rgba(234, 179, 8, 0), inset 0 0 4px 0 rgba(234, 179, 8, 0);
  }

  /* Idle between P2 and P3 */
  55.1%,
  66.9% {
    transform: scale(0.2);
    opacity: 0;
    box-shadow: 0 0 0 0 rgba(234, 179, 8, 0);
  }

  /* P3: Triggered by C1 (first chevron of pair) hitting the right edge */
  67% {
    transform: scale(0.5);
    opacity: 1;
    box-shadow: 0 0 4px 1px rgba(234, 179, 8, 0.8), inset 0 0 2px 0 rgba(234, 179, 8, 0.8);
  }

  77% {
    transform: scale(1.8);
    opacity: 0;
    box-shadow: 0 0 10px 2px rgba(234, 179, 8, 0), inset 0 0 4px 0 rgba(234, 179, 8, 0);
  }

  /* Final idle state to end of cycle */
  77.1%,
  100% {
    transform: scale(0.2);
    opacity: 0;
    box-shadow: 0 0 0 0 rgba(234, 179, 8, 0);
  }
}

#subscriber-cockpit-root .customer-task-progress-bar[data-state="overdue"] .customer-task-progress-head strong {
  color: #fb7185 !important;
}

/* OVERDUE STATE: Center split outward animation */
#subscriber-cockpit-root .customer-task-progress-bar[data-state="overdue"] .customer-task-progress-track i {
  background: transparent !important;
  overflow: hidden !important;
  position: relative !important;
  animation: none !important;
}

#subscriber-cockpit-root .customer-task-progress-bar[data-state="overdue"] .customer-task-progress-track i::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 50% !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='6' viewBox='0 0 36 6'%3E%3Cpath d='M7 1.5 11.8 3 7 4.5' fill='none' stroke='%23000000' stroke-opacity='.35' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15 1.5 19.8 3 15 4.5' fill='none' stroke='%23000000' stroke-opacity='.55' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M29 1.5 33.8 3 29 4.5' fill='none' stroke='%23000000' stroke-opacity='.35' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    repeating-linear-gradient(45deg, #ef4444 0 8px, #b91c1c 8px 16px) !important;
  background-repeat: repeat-x, no-repeat !important;
  background-size: 36px 6px, 100% 100% !important;
  transform: scaleX(-1) !important;
  animation: overdueSweepLeftAnim 4.0s linear calc(var(--sweep-delay, 0.8s) * -1) infinite !important;
}

#subscriber-cockpit-root .customer-task-progress-bar[data-state="overdue"] .customer-task-progress-track i::after,
#subscriber-cockpit-root .customer-task-progress-bar[data-state="overdue"] .customer-task-progress-track i.is-filled::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: 50% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='6' viewBox='0 0 36 6'%3E%3Cpath d='M7 1.5 11.8 3 7 4.5' fill='none' stroke='%23000000' stroke-opacity='.35' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15 1.5 19.8 3 15 4.5' fill='none' stroke='%23000000' stroke-opacity='.55' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M29 1.5 33.8 3 29 4.5' fill='none' stroke='%23000000' stroke-opacity='.35' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    repeating-linear-gradient(45deg, #ef4444 0 8px, #b91c1c 8px 16px) !important;
  background-repeat: repeat-x, no-repeat !important;
  background-size: 36px 6px, 100% 100% !important;
  transform: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
  animation: overdueSweepRightAnim 4.0s linear calc(var(--sweep-delay, 0.8s) * -1) infinite !important;
}

@keyframes overdueSweepLeftAnim {
  from {
    background-position: 0px 0, 0px 0;
  }

  to {
    background-position: 36px 0, 0px 0;
  }

  /* Stripes remain static */
}

@keyframes overdueSweepRightAnim {
  from {
    background-position: 0px 0, 0px 0;
  }

  to {
    background-position: 36px 0, 0px 0;
  }

  /* Positive offset to force rightward flow, stripes static */
}

#subscriber-cockpit-root .customer-task-modal-stage .customer-stage-preview,
.customer-task-modal-stage .customer-stage-preview {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: start !important;
}

#subscriber-cockpit-root .customer-task-modal-stage .customer-stage-preview span,
.customer-task-modal-stage .customer-stage-preview span {
  display: grid !important;
  grid-template-rows: 28px auto !important;
  width: 100% !important;
  justify-items: center !important;
  align-items: start !important;
}

#subscriber-cockpit-root .customer-task-modal-stage .customer-stage-preview span b,
.customer-task-modal-stage .customer-stage-preview span b {
  width: 100% !important;
  text-align: center !important;
  justify-self: stretch !important;
  max-width: 100% !important;
}

#subscriber-cockpit-root .customer-completed-divider {
  height: 1px !important;
  margin: 22px 0 18px !important;
  background: rgba(148, 163, 184, 0.28) !important;
}

#subscriber-cockpit-root .customer-file-head-icon {
  width: 24px !important;
  height: 24px !important;
  color: #38bdf8 !important;
}

#subscriber-cockpit-root #customer-files {
  padding-bottom: 14px !important;
}

#subscriber-cockpit-root .customer-shortcut-tools {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 0 0 2px !important;
}

#subscriber-cockpit-root .customer-shortcut-tool {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 64px !important;
  width: 100% !important;
  padding: 10px 9px !important;
  border: 1px solid rgba(56, 189, 248, 0.18) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, rgba(56, 189, 248, 0.11), rgba(15, 23, 42, 0.78) 48%),
    rgba(255, 255, 255, 0.025) !important;
  color: #dbeafe !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 10px 24px rgba(0, 0, 0, 0.12) !important;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
}

#subscriber-cockpit-root .customer-shortcut-tool>span:last-child {
  min-width: 0 !important;
  width: 100% !important;
  flex: 1 1 auto !important;
}

#subscriber-cockpit-root .customer-shortcut-tool.primary {
  border-color: rgba(234, 179, 8, 0.38) !important;
  background:
    linear-gradient(135deg, rgba(234, 179, 8, 0.18), rgba(15, 23, 42, 0.78) 52%),
    rgba(255, 255, 255, 0.025) !important;
  color: #fef3c7 !important;
}

#subscriber-cockpit-root .customer-shortcut-tool:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(125, 211, 252, 0.35) !important;
}

#subscriber-cockpit-root .customer-shortcut-tool.primary:hover {
  border-color: rgba(250, 204, 21, 0.58) !important;
}

#subscriber-cockpit-root .customer-shortcut-tool.is-disabled {
  opacity: 0.62 !important;
  filter: grayscale(0.25) !important;
}

#subscriber-cockpit-root #customer-files .customer-shortcut-tool.is-disabled>span:last-child {
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: left !important;
}

#subscriber-cockpit-root .customer-shortcut-tool-icon {
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.12) !important;
  border: 1px solid rgba(56, 189, 248, 0.2) !important;
}

#subscriber-cockpit-root .customer-shortcut-tool.primary .customer-shortcut-tool-icon {
  color: #facc15 !important;
  background: rgba(234, 179, 8, 0.13) !important;
  border-color: rgba(234, 179, 8, 0.24) !important;
}

#subscriber-cockpit-root .customer-shortcut-tool-icon svg {
  width: 15px !important;
  height: 15px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.4 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#subscriber-cockpit-root .customer-shortcut-tool strong {
  display: block !important;
  color: #f8fafc !important;
  font-size: 0.82rem !important;
  line-height: 1.12 !important;
  font-weight: 850 !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

#subscriber-cockpit-root .customer-shortcut-tool small {
  display: block !important;
  margin-top: 3px !important;
  color: #93c5fd !important;
  font-size: 0.66rem !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

#subscriber-cockpit-root .customer-shortcut-tool.primary small {
  color: #facc15 !important;
}

#subscriber-cockpit-root #customer-files a,
#subscriber-cockpit-root #customer-files .customer-file-card {
  min-height: 64px !important;
  padding: 12px 12px !important;
  gap: 11px !important;
  border-radius: 10px !important;
}

#subscriber-cockpit-root #customer-files .customer-file-link>div,
#subscriber-cockpit-root #customer-files .customer-file-card>div {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

#subscriber-cockpit-root #customer-files .customer-file-link>div strong,
#subscriber-cockpit-root #customer-files .customer-file-card>div strong {
  font-size: 0.9rem !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

#subscriber-cockpit-root #customer-files .customer-file-link>div span,
#subscriber-cockpit-root #customer-files .customer-file-card>div span {
  font-size: 0.75rem !important;
  line-height: 1.24 !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

#subscriber-cockpit-root .customer-file-icon {
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  color: #38bdf8 !important;
  border-radius: 9px !important;
  background: rgba(56, 189, 248, 0.1) !important;
  border: 1px solid rgba(56, 189, 248, 0.18) !important;
}

#subscriber-cockpit-root .customer-file-open-icon {
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 34px !important;
  margin-left: auto !important;
  color: #eab308 !important;
  border-radius: 8px !important;
  background: rgba(234, 179, 8, 0.1) !important;
}

#subscriber-cockpit-root #customer-files .is-disabled {
  opacity: 0.7 !important;
}

#subscriber-cockpit-root #customer-files .is-disabled .customer-file-icon {
  color: #94a3b8 !important;
  background: rgba(148, 163, 184, 0.08) !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
}

#subscriber-cockpit-root #customer-files .is-disabled>span:last-child {
  min-width: 48px !important;
  padding: 7px 10px !important;
  border-radius: 8px !important;
  background: rgba(234, 179, 8, 0.08) !important;
  color: rgba(226, 232, 240, 0.7) !important;
  text-align: center !important;
}

@media (max-width: 900px) {
  #subscriber-cockpit-root .customer-task-card {
    max-width: none !important;
  }

  #subscriber-cockpit-root .cc-card--tasks .customer-task-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #subscriber-cockpit-root .customer-task-card .customer-task-toggle {
    min-height: 0 !important;
  }

  #subscriber-cockpit-root #customer-files a,
  #subscriber-cockpit-root #customer-files .customer-file-card {
    align-items: flex-start !important;
  }
}


/* =========================================
   DARK MODE OVERRIDES FOR RATING PREVIEW
   ========================================= */
#subscriber-cockpit-root .customer-task-rating-preview {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(148, 163, 184, 0.15) !important;
  color: #94a3b8 !important;
}

#subscriber-cockpit-root .customer-task-rating-preview b {
  color: #f8fafc !important;
}

#subscriber-cockpit-root .customer-task-rating-preview.pending {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(148, 163, 184, 0.15) !important;
  color: #94a3b8 !important;
}

#subscriber-cockpit-root .customer-task-rating-preview.pending>span {
  color: #94a3b8 !important;
}

#subscriber-cockpit-root .customer-task-rating-preview.pending>span u {
  background: #64748b !important;
  box-shadow: none !important;
  animation: none !important;
}

#subscriber-cockpit-root .customer-task-card.needs-rating-reminder .customer-task-rating-preview.attention {
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
  animation: none !important;
}

#subscriber-cockpit-root .customer-task-card.needs-rating-reminder .customer-task-rating-preview.attention::after,
#subscriber-cockpit-root .customer-task-card.needs-rating-reminder .customer-task-rating-preview.attention::before {
  display: none !important;
}

#subscriber-cockpit-root .customer-preview-rating-stars button {
  background: rgba(0, 0, 0, 0.2) !important;
  border-color: rgba(148, 163, 184, 0.15) !important;
  color: rgba(148, 163, 184, 0.6) !important;
  animation: none !important;
}

#subscriber-cockpit-root .customer-task-card.needs-rating-reminder .customer-preview-rating-stars button {
  animation: customerRatingStarNudge 2.2s ease-in-out infinite !important;
}

/* Ensure dynamic rating colors take precedence */
#subscriber-cockpit-root .customer-preview-rating-stars[data-hover-score="1"] button.is-hovered {
  border-color: rgba(239, 68, 68, 0.42) !important;
  background: rgba(239, 68, 68, 0.08) !important;
  color: #ef4444 !important;
}

#subscriber-cockpit-root .customer-preview-rating-stars[data-hover-score="2"] button.is-hovered {
  border-color: rgba(249, 115, 22, 0.42) !important;
  background: rgba(249, 115, 22, 0.08) !important;
  color: #f97316 !important;
}

#subscriber-cockpit-root .customer-preview-rating-stars[data-hover-score="3"] button.is-hovered {
  border-color: rgba(234, 179, 8, 0.42) !important;
  background: rgba(234, 179, 8, 0.08) !important;
  color: #eab308 !important;
}

#subscriber-cockpit-root .customer-preview-rating-stars[data-hover-score="4"] button.is-hovered {
  border-color: rgba(132, 204, 22, 0.42) !important;
  background: rgba(132, 204, 22, 0.08) !important;
  color: #84cc16 !important;
}

#subscriber-cockpit-root .customer-preview-rating-stars[data-hover-score="5"] button.is-hovered {
  border-color: rgba(34, 197, 94, 0.42) !important;
  background: rgba(34, 197, 94, 0.08) !important;
  color: #22c55e !important;
}



/* Add jumping animation to the rating widget inside the request modal (light theme) */
.customer-rating-widget:not(.rated) .customer-rating-stars button {
  animation: customerRatingStarNudge 2.2s ease-in-out infinite;
}

.customer-rating-widget:not(.rated) .customer-rating-stars button:nth-child(2) {
  animation-delay: 0.08s;
}

.customer-rating-widget:not(.rated) .customer-rating-stars button:nth-child(3) {
  animation-delay: 0.16s;
}

.customer-rating-widget:not(.rated) .customer-rating-stars button:nth-child(4) {
  animation-delay: 0.24s;
}

.customer-rating-widget:not(.rated) .customer-rating-stars button:nth-child(5) {
  animation-delay: 0.32s;
}

/* Pause animation on hover */
.customer-rating-widget:not(.rated) .customer-rating-stars:hover button {
  animation-play-state: paused;
}


.customer-rating-desc {
  margin: 4px 0 0 0;
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.4;
  font-weight: 500;
}

body.dark-mode .customer-rating-desc {
  color: #94a3b8;
}


/* Her ne olursa olsun talep kartlarindaki tum yazilar tam gorunecek */
#subscriber-cockpit-root .customer-task-card .customer-task-preview-top span:not(.customer-task-type-icon):first-child,
#subscriber-cockpit-root .customer-task-card .customer-task-preview-top h3,
#subscriber-cockpit-root .customer-task-card .customer-task-preview-mid small,
#subscriber-cockpit-root .customer-task-card .customer-task-preview-mid p {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: block !important;
  max-height: none !important;
  -webkit-line-clamp: unset !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* Subscriber cockpit light theme */
body.subscriber-logged-in {
  background: #f6f3ea !important;
  color: #172033 !important;
}

body.subscriber-logged-in .dashboard-wrapper,
body.subscriber-logged-in .main-content,
body.subscriber-logged-in .panels-wrapper,
body.subscriber-logged-in #panel-subscriber-dashboard,
body.subscriber-logged-in #subscriber-cockpit-root {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 209, 102, 0.2), transparent 28%),
    linear-gradient(180deg, #fffaf0 0%, #f4f7f6 46%, #edf5f3 100%) !important;
  color: #172033 !important;
}

body.subscriber-logged-in .main-content {
  min-height: 100vh !important;
}

#subscriber-cockpit-root .cc-dash {
  --cc-bg: transparent !important;
  --cc-surface: rgba(255, 255, 255, 0.86) !important;
  --cc-surface-strong: rgba(255, 255, 255, 0.96) !important;
  --cc-border: rgba(23, 32, 51, 0.12) !important;
  --cc-border-strong: rgba(227, 158, 37, 0.34) !important;
  --cc-text: #172033 !important;
  --cc-muted: #5f6f7a !important;
  --cc-accent: #d97706 !important;
  --cc-accent-strong: #b45309 !important;
  --cc-green: #15803d !important;
  color: var(--cc-text) !important;
}

#subscriber-cockpit-root,
#subscriber-cockpit-root .cc-card__title,
#subscriber-cockpit-root .cc-logo,
#subscriber-cockpit-root .cc-greeting__name,
#subscriber-cockpit-root .cc-work-count,
#subscriber-cockpit-root .cc-work-count span,
#subscriber-cockpit-root .customer-task-card,
#subscriber-cockpit-root .customer-task-card h3,
#subscriber-cockpit-root .customer-task-preview-top h3,
#subscriber-cockpit-root .customer-recurring-title strong,
#subscriber-cockpit-root .customer-work-summary__list strong,
#subscriber-cockpit-root .customer-shortcut-tool strong,
#subscriber-cockpit-root #customer-files strong,
#subscriber-cockpit-root .activity-timeline-label {
  color: var(--cc-text) !important;
}

#subscriber-cockpit-root .cc-card__sub,
#subscriber-cockpit-root .cc-greeting__label,
#subscriber-cockpit-root .cc-work-count small,
#subscriber-cockpit-root .customer-recurring-title small,
#subscriber-cockpit-root .customer-recurring-foot,
#subscriber-cockpit-root .customer-recurring-remaining,
#subscriber-cockpit-root .customer-task-preview-top span:not(.customer-task-type-icon):first-child,
#subscriber-cockpit-root .customer-task-preview-mid small,
#subscriber-cockpit-root .customer-task-preview-mid p,
#subscriber-cockpit-root .customer-task-progress-head span,
#subscriber-cockpit-root .customer-work-summary__list small,
#subscriber-cockpit-root .customer-shortcut-tool small,
#subscriber-cockpit-root #customer-files span,
#subscriber-cockpit-root .activity-timeline-time,
#subscriber-cockpit-root .activity-timeline-summary,
#subscriber-cockpit-root .activity-timeline-author {
  color: var(--cc-muted) !important;
}

#subscriber-cockpit-root .cc-logo span,
#subscriber-cockpit-root .cc-card__title svg,
#subscriber-cockpit-root .cc-card__link,
#subscriber-cockpit-root .cc-tool-chip,
#subscriber-cockpit-root .customer-task-preview-mid strong,
#subscriber-cockpit-root .customer-task-progress-head strong,
#subscriber-cockpit-root .customer-recurring-frequency,
#subscriber-cockpit-root .customer-recurring-foot button {
  color: var(--cc-accent) !important;
}

#subscriber-cockpit-root .cc-header,
#subscriber-cockpit-root .cc-stat-card,
#subscriber-cockpit-root .cc-card,
#subscriber-cockpit-root .cc-work-count,
#subscriber-cockpit-root .customer-work-summary,
#subscriber-cockpit-root .customer-shortcut-tool,
#subscriber-cockpit-root #customer-files a,
#subscriber-cockpit-root #customer-files .customer-file-card {
  background: var(--cc-surface) !important;
  border-color: var(--cc-border) !important;
  box-shadow: 0 12px 30px rgba(23, 32, 51, 0.08) !important;
}

#subscriber-cockpit-root .cc-card--automations {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#subscriber-cockpit-root .cc-bento>.cc-card:not(:last-child)::after,
#subscriber-cockpit-root .cc-bento>.cc-right-stack:not(:last-child)::after {
  background: rgba(23, 32, 51, 0.12) !important;
}

#subscriber-cockpit-root .customer-task-card,
#subscriber-cockpit-root .customer-task-card.stage-created,
#subscriber-cockpit-root .customer-task-card.stage-review,
#subscriber-cockpit-root .customer-task-card.stage-work {
  background: linear-gradient(180deg, #fff8df, #ffffff) !important;
  border: 1.5px solid rgba(217, 119, 6, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 12px 28px rgba(146, 84, 18, 0.12) !important;
}

#subscriber-cockpit-root .customer-task-card.stage-done,
#subscriber-cockpit-root .customer-task-list.completed .customer-task-card {
  background: #ffffff !important;
  border-color: rgba(95, 111, 122, 0.22) !important;
  box-shadow: 0 10px 24px rgba(23, 32, 51, 0.08) !important;
}

#subscriber-cockpit-root .customer-task-card.is-collapsible:not(.stage-done):not(.info-waiting-alert):hover,
#subscriber-cockpit-root .customer-task-card.stage-done.is-collapsible:hover,
#subscriber-cockpit-root .customer-task-list.completed .customer-task-card.is-collapsible:hover {
  background: #fffdf4 !important;
  border-color: rgba(217, 119, 6, 0.42) !important;
  box-shadow: 0 14px 32px rgba(146, 84, 18, 0.14) !important;
}

#subscriber-cockpit-root #sub-cockpit-automations>div {
  border-bottom-color: transparent !important;
  margin-bottom: 10px !important;
}

#subscriber-cockpit-root #sub-cockpit-automations>div:hover {
  border-bottom-color: transparent !important;
}

#subscriber-cockpit-root .customer-recurring-icon,
#subscriber-cockpit-root .customer-file-icon,
#subscriber-cockpit-root .customer-file-head-icon,
#subscriber-cockpit-root .customer-file-open-icon,
#subscriber-cockpit-root .customer-shortcut-tool-icon {
  color: #0284c7 !important;
  background: rgba(14, 165, 233, 0.1) !important;
  border-color: rgba(14, 165, 233, 0.2) !important;
}

#subscriber-cockpit-root .customer-task-type-icon,
#subscriber-cockpit-root .customer-shortcut-tool.primary .customer-shortcut-tool-icon {
  color: var(--cc-accent) !important;
  background: rgba(217, 119, 6, 0.1) !important;
  border-color: rgba(217, 119, 6, 0.22) !important;
}

#subscriber-cockpit-root .customer-recurring-progress,
#subscriber-cockpit-root .customer-task-progress-track {
  background: rgba(23, 32, 51, 0.12) !important;
}

#subscriber-cockpit-root .customer-recurring-progress i,
#subscriber-cockpit-root .customer-task-progress-track i {
  background-image: linear-gradient(90deg, #16a34a, #d97706) !important;
}

#subscriber-cockpit-root .customer-recurring-special {
  color: #92400e !important;
  background: rgba(251, 191, 36, 0.24) !important;
  border-color: rgba(217, 119, 6, 0.28) !important;
}

#subscriber-cockpit-root .customer-work-summary {
  background: linear-gradient(180deg, #fff8df, #ffffff) !important;
  border-color: rgba(217, 119, 6, 0.22) !important;
}

#subscriber-cockpit-root .customer-work-summary__list>div {
  border-top-color: rgba(23, 32, 51, 0.12) !important;
}

#subscriber-cockpit-root .customer-shortcut-tool {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), #ffffff 52%) !important;
  color: #075985 !important;
}

#subscriber-cockpit-root .customer-shortcut-tool.primary {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.24), #ffffff 54%) !important;
  border-color: rgba(217, 119, 6, 0.3) !important;
  color: #92400e !important;
}

#subscriber-cockpit-root .activity-timeline-card,
#subscriber-cockpit-root .activity-timeline-row.has-click:hover .activity-timeline-card {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

#subscriber-cockpit-root .activity-timeline-row+div,
#subscriber-cockpit-root .activity-timeline-card+div {
  background: rgba(23, 32, 51, 0.1) !important;
}

#subscriber-cockpit-root .cc-btn--primary {
  background: linear-gradient(135deg, #ffd166, #f59e0b) !important;
  color: #172033 !important;
  box-shadow: 0 10px 22px rgba(217, 119, 6, 0.22) !important;
}

#subscriber-cockpit-root .cc-btn--ghost {
  background: #ffffff !important;
  border-color: rgba(239, 68, 68, 0.24) !important;
  color: #dc2626 !important;
}

#subscriber-cockpit-root .customer-task-rating-preview {
  background: #f8fafc !important;
  border-color: rgba(23, 32, 51, 0.12) !important;
  color: var(--cc-muted) !important;
}

#subscriber-cockpit-root .customer-task-rating-preview.pending {
  background: rgba(22, 163, 74, 0.08) !important;
  border-color: rgba(22, 163, 74, 0.25) !important;
  color: #16a34a !important;
}

#subscriber-cockpit-root .customer-task-rating-preview.pending > span {
  color: #16a34a !important;
  font-weight: 600;
}

#subscriber-cockpit-root .customer-task-rating-preview.pending > span u {
  background: #16a34a !important;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2) !important;
}

#subscriber-cockpit-root .customer-task-rating-preview b {
  color: var(--cc-text) !important;
}

#subscriber-cockpit-root .customer-preview-rating-stars button {
  background: #ffffff !important;
  border-color: rgba(23, 32, 51, 0.14) !important;
  color: #64748b !important;
}

#subscriber-cockpit-root .customer-task-rating-preview.pending .customer-preview-rating-stars button {
  border-color: rgba(22, 163, 74, 0.22) !important;
  color: rgba(22, 163, 74, 0.4) !important;
}

#subscriber-cockpit-root .customer-task-rating-preview.pending .customer-preview-rating-stars button:hover,
#subscriber-cockpit-root .customer-task-rating-preview.pending .customer-preview-rating-stars button.hovered {
  border-color: #16a34a !important;
  color: #16a34a !important;
  background: rgba(22, 163, 74, 0.06) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.15) !important;
}

#subscriber-cockpit-root .cc-card__body--scroll::-webkit-scrollbar-thumb {
  background: rgba(23, 32, 51, 0.18) !important;
}

#subscriber-cockpit-root [style*="color:#fff"],
#subscriber-cockpit-root [style*="color: #fff"],
#subscriber-cockpit-root [style*="color:#ffffff"],
#subscriber-cockpit-root [style*="color: #ffffff"],
#subscriber-cockpit-root [style*="color: rgba(255,255,255"],
#subscriber-cockpit-root [style*="color:rgba(255,255,255"] {
  color: var(--cc-text) !important;
}

#subscriber-cockpit-root [style*="background: rgba(255,255,255"],
#subscriber-cockpit-root [style*="background:rgba(255,255,255"],
#subscriber-cockpit-root [style*="background: rgba(0,0,0"],
#subscriber-cockpit-root [style*="background:rgba(0,0,0"] {
  background: #ffffff !important; border-color: transparent !important;
}

#subscriber-cockpit-root .cc-bento {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(23, 32, 51, 0.12) !important;
  box-shadow: 0 24px 70px rgba(23, 32, 51, 0.11) !important;
}

#subscriber-cockpit-root .cc-bento>.cc-card,
#subscriber-cockpit-root .cc-bento>.cc-right-stack {
  border-color: rgba(23, 32, 51, 0.12) !important;
}

#subscriber-cockpit-root .cc-card--automations,
#subscriber-cockpit-root .cc-right-stack {
  color: var(--cc-text) !important;
}

#subscriber-cockpit-root .activity-timeline-label,
#subscriber-cockpit-root .activity-timeline-summary {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 820px) {
  body.subscriber-logged-in .main-content {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  #subscriber-cockpit-root,
  #subscriber-cockpit-root .cc-dash {
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    margin-left: 0 !important;
    padding: 12px 10px 36px !important;
  }

  #subscriber-cockpit-root .cc-bento,
  #subscriber-cockpit-root .cc-header-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #subscriber-cockpit-root .cc-tool-header,
  #subscriber-cockpit-root .cc-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  #subscriber-cockpit-root .cc-header__left,
  #subscriber-cockpit-root .cc-tool-header__tools,
  #subscriber-cockpit-root .cc-work-counts {
    width: 100% !important;
  }

  #subscriber-cockpit-root .cc-work-counts {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  #subscriber-cockpit-root .cc-work-count {
    max-width: none !important;
  }

  #subscriber-cockpit-root .cc-header-grid>div {
    grid-column: auto !important;
    width: 100% !important;
    padding-left: 0 !important;
  }

  #subscriber-cockpit-root .cc-tool-header__brand {
    flex-wrap: wrap !important;
    row-gap: 4px !important;
  }

  #subscriber-cockpit-root .cc-header-grid>div:nth-child(2) {
    justify-content: flex-start !important;
  }

  #subscriber-cockpit-root .cc-bento>.cc-card,
  #subscriber-cockpit-root .cc-bento>.cc-right-stack,
  #subscriber-cockpit-root .cc-card--automations,
  #subscriber-cockpit-root .cc-card--tasks,
  #subscriber-cockpit-root .cc-card--activity {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #subscriber-cockpit-root .cc-card--tasks .customer-task-list,
  #subscriber-cockpit-root .customer-task-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #subscriber-cockpit-root .customer-task-card {
    width: 100% !important;
  }

  #subscriber-cockpit-root .cc-card--tasks,
  #subscriber-cockpit-root .cc-card--tasks .cc-card__body,
  #subscriber-cockpit-root .cc-card--tasks .cc-card__body--scroll {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #subscriber-cockpit-root .customer-shortcut-tools {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Subscriber cockpit light polish: modal surfaces + SLA bars */
body.subscriber-logged-in .customer-task-modal,
body.subscriber-logged-in .customer-request-modal-container,
body.subscriber-logged-in .ys-cost-tool-modal {
  color: #172033 !important;
}

body.subscriber-logged-in .customer-task-modal-backdrop,
body.subscriber-logged-in .ys-cost-tool-backdrop {
  background: rgba(23, 32, 51, 0.28) !important;
  backdrop-filter: blur(10px) !important;
}

body.subscriber-logged-in .customer-task-modal-dialog,
body.subscriber-logged-in .ys-cost-tool-dialog {
  background: #ffffff !important;
  border: 1px solid rgba(23, 32, 51, 0.14) !important;
  box-shadow: 0 24px 70px rgba(23, 32, 51, 0.18) !important;
  color: #172033 !important;
  border-radius: 28px !important;
  overflow: hidden !important;
}

body.subscriber-logged-in .customer-task-modal-head {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: #0a0a0c !important;
  border-top-left-radius: 28px !important;
  border-top-right-radius: 28px !important;
  margin: -2px -2px 0 -2px !important;
  width: calc(100% + 4px) !important;
}

body.subscriber-logged-in .ys-cost-tool-dialog header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: #0a0a0c !important;
  border-top-left-radius: 28px !important;
  border-top-right-radius: 28px !important;
  margin: -24px -24px 20px -24px !important;
  padding: 24px 24px 20px 24px !important;
  width: calc(100% + 48px) !important;
}
body.subscriber-logged-in .customer-task-modal-dialog .customer-task-modal-head h3,
body.subscriber-logged-in .ys-cost-tool-dialog header h3,
body.subscriber-logged-in .customer-task-modal-dialog .customer-task-modal-head .customer-task-modal-close {
  color: #ffffff !important;
}

body.subscriber-logged-in .customer-task-modal-dialog h3,
body.subscriber-logged-in .customer-task-modal-dialog h4,
body.subscriber-logged-in .customer-task-modal-dialog strong,
body.subscriber-logged-in .ys-cost-tool-dialog h3,
body.subscriber-logged-in .ys-cost-tool-dialog h4,
body.subscriber-logged-in .ys-cost-tool-dialog strong {
  color: #172033 !important;
}

body.subscriber-logged-in .customer-task-modal-dialog p,
body.subscriber-logged-in .customer-task-modal-dialog small,
body.subscriber-logged-in .customer-task-modal-meta,
body.subscriber-logged-in .customer-task-modal-meta-text,
body.subscriber-logged-in .ys-cost-tool-dialog label,
body.subscriber-logged-in .ys-cost-visual-legend {
  color: #5f6f7a !important;
}

body.subscriber-logged-in .customer-task-modal-close,
body.subscriber-logged-in .ys-cost-tool-close {
  background: #ffffff !important;
  border: 1px solid rgba(23, 32, 51, 0.12) !important;
  color: #5f6f7a !important;
  box-shadow: 0 8px 20px rgba(23, 32, 51, 0.08) !important;
}

body.subscriber-logged-in .customer-task-modal-close:hover,
body.subscriber-logged-in .ys-cost-tool-close:hover {
  color: #dc2626 !important;
  border-color: rgba(220, 38, 38, 0.24) !important;
}

body.subscriber-logged-in .customer-task-modal-dialog .customer-task-id-tag {
  background: rgba(235, 94, 40, 0.08) !important;
  border-color: rgba(235, 94, 40, 0.2) !important;
  color: #eb5e28 !important;
}

body.subscriber-logged-in .customer-task-modal-dialog .customer-task-body,
body.subscriber-logged-in .customer-task-modal-dialog .customer-task-event,
body.subscriber-logged-in .customer-task-modal-dialog .customer-task-body-title,
body.subscriber-logged-in .customer-task-modal-dialog .customer-stage-preview,
body.subscriber-logged-in .modal-form-left,
body.subscriber-logged-in .modal-form-right,
body.subscriber-logged-in .ys-input-panel section,
body.subscriber-logged-in .ys-receipt,
body.subscriber-logged-in .ys-cost-visual {
  background: #ffffff !important; border-color: transparent !important;
  border-color: rgba(23, 32, 51, 0.12) !important;
  color: #172033 !important;
}

body.subscriber-logged-in .customer-task-modal-dialog input,
body.subscriber-logged-in .customer-task-modal-dialog textarea,
body.subscriber-logged-in .customer-task-modal-dialog select,
body.subscriber-logged-in .ys-cost-grid input,
body.subscriber-logged-in .ys-cost-grid select {
  background: #ffffff !important;
  border-color: rgba(23, 32, 51, 0.16) !important;
  color: #172033 !important;
  color-scheme: light !important;
}

body.subscriber-logged-in .customer-task-modal-dialog input:focus,
body.subscriber-logged-in .customer-task-modal-dialog textarea:focus,
body.subscriber-logged-in .customer-task-modal-dialog select:focus,
body.subscriber-logged-in .ys-cost-grid input:focus,
body.subscriber-logged-in .ys-cost-grid select:focus {
  border-color: rgba(217, 119, 6, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.12) !important;
  outline: none !important;
}

#subscriber-cockpit-root .customer-task-stage-progress-ring {
  background: #ffffff !important;
  border: 1px solid rgba(23, 32, 51, 0.12) !important;
  box-shadow: 0 8px 22px rgba(23, 32, 51, 0.1) !important;
}

#subscriber-cockpit-root .customer-task-progress-head span {
  color: #5f6f7a !important;
}

#subscriber-cockpit-root .customer-task-progress-head strong {
  color: #b45309 !important;
}

#subscriber-cockpit-root,
body.subscriber-logged-in,
body.subscriber-logged-in .main-content {
  background: #f6f8f6 !important;
}

#subscriber-cockpit-root {
  margin-left: 0 !important;
  transform: none !important;
}

#subscriber-cockpit-root .cc-dash {
  background: #f7f9f7 !important;
  box-shadow: none !important;
}

#subscriber-cockpit-root .cc-card,
#subscriber-cockpit-root .cc-right-stack,
#subscriber-cockpit-root .cc-card__body,
#subscriber-cockpit-root .customer-panel,
#subscriber-cockpit-root .customer-notifications-panel {
  background-image: none !important;
}

body.subscriber-logged-in .customer-task-modal-dialog,
body.subscriber-logged-in .ys-cost-tool-dialog {
  background: #ffffff !important;
}

#subscriber-cockpit-root .customer-task-progress-track {
  height: 6px !important;
  overflow: hidden !important;
  background: #e5e7eb !important;
  border: 1px solid rgba(23, 32, 51, 0.08) !important;
  box-shadow: inset 0 1px 2px rgba(23, 32, 51, 0.08) !important;
}

#subscriber-cockpit-root .customer-task-progress-track i,
#subscriber-cockpit-root .customer-task-progress-track i.is-filled {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='6' viewBox='0 0 36 6'%3E%3Cpath d='M7 1.5 11.8 3 7 4.5' fill='none' stroke='%23000000' stroke-opacity='.35' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15 1.5 19.8 3 15 4.5' fill='none' stroke='%23000000' stroke-opacity='.55' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M29 1.5 33.8 3 29 4.5' fill='none' stroke='%23000000' stroke-opacity='.35' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(90deg, #16a34a 0%, #84cc16 48%, #f59e0b 100%) !important;
  background-repeat: repeat-x, no-repeat !important;
  background-size: 36px 6px, 100% 100% !important;
  background-position: 0 0, 0 0;
  animation: customerTaskProgressActiveSweep 4s linear calc(var(--sweep-delay, 0.8s) * -1) infinite !important;
}

#subscriber-cockpit-root .customer-task-progress-bar[data-state="near"] .customer-task-progress-track i,
#subscriber-cockpit-root .customer-task-progress-bar[data-state="near"] .customer-task-progress-track i.is-filled {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='6' viewBox='0 0 36 6'%3E%3Cpath d='M7 1.5 11.8 3 7 4.5' fill='none' stroke='%23000000' stroke-opacity='.35' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15 1.5 19.8 3 15 4.5' fill='none' stroke='%23000000' stroke-opacity='.55' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M29 1.5 33.8 3 29 4.5' fill='none' stroke='%23000000' stroke-opacity='.35' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(90deg, #f59e0b, #d97706) !important;
}

#subscriber-cockpit-root .customer-task-progress-bar[data-state="overdue"] .customer-task-progress-head strong {
  color: #dc2626 !important;
}

#subscriber-cockpit-root .customer-task-progress-bar[data-state="overdue"] .customer-task-progress-track i,
#subscriber-cockpit-root .customer-task-progress-bar[data-state="overdue"] .customer-task-progress-track i.is-filled {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='6' viewBox='0 0 36 6'%3E%3Cpath d='M7 1.5 11.8 3 7 4.5' fill='none' stroke='%23000000' stroke-opacity='.35' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15 1.5 19.8 3 15 4.5' fill='none' stroke='%23000000' stroke-opacity='.55' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M29 1.5 33.8 3 29 4.5' fill='none' stroke='%23000000' stroke-opacity='.35' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(90deg, #ef4444, #dc2626) !important;
}

body.subscriber-logged-in .ys-courier-control {
  color: #5f6f7a !important;
}

body.subscriber-logged-in .ys-courier-control>div {
  background: #ffffff !important;
  border-color: rgba(23, 32, 51, 0.14) !important;
  box-shadow: inset 0 1px 2px rgba(23, 32, 51, 0.06) !important;
}

body.subscriber-logged-in .ys-courier-control button {
  color: #5f6f7a !important;
}

body.subscriber-logged-in .ys-courier-control button.active {
  background: rgba(251, 191, 36, 0.24) !important;
  color: #92400e !important;
}

body.subscriber-logged-in .ys-courier-note {
  background: rgba(14, 165, 233, 0.08) !important;
  border-color: rgba(14, 165, 233, 0.18) !important;
  color: #31566d !important;
}

body.subscriber-logged-in .ys-receipt-row {
  color: #5f6f7a !important;
}

body.subscriber-logged-in .ys-receipt-row b {
  color: #172033 !important;
}

body.subscriber-logged-in .ys-receipt-row.muted {
  color: #9aa6af !important;
}

body.subscriber-logged-in .ys-receipt-row.total,
body.subscriber-logged-in .ys-receipt-row.total b {
  color: #d97706 !important;
}

body.subscriber-logged-in .ys-receipt-sep {
  background: linear-gradient(90deg, transparent, rgba(23, 32, 51, 0.12), transparent) !important;
}

body.subscriber-logged-in .ys-net-band {
  background: #dcfce7 !important;
  border-color: #86efac !important;
}
body.subscriber-logged-in .ys-net-band strong {
  color: #166534 !important;
}
body.subscriber-logged-in .ys-net-band span,
body.subscriber-logged-in .ys-net-band small {
  color: #166534 !important;
  opacity: 0.8;
}
body.subscriber-logged-in .ys-net-band.is-negative {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
}
body.subscriber-logged-in .ys-net-band.is-negative strong {
  color: #991b1b !important;
}
body.subscriber-logged-in .ys-net-band.is-negative span,
body.subscriber-logged-in .ys-net-band.is-negative small {
  color: #991b1b !important;
}

body.subscriber-logged-in #customer-request-modal .custom-select-trigger,
body.subscriber-logged-in #customer-request-modal .custom-select-dropdown-menu {
  background: #ffffff !important;
  border: 1px solid rgba(23, 32, 51, 0.16) !important;
  color: #172033 !important;
  box-shadow: 0 10px 24px rgba(23, 32, 51, 0.08) !important;
}

body.subscriber-logged-in #customer-request-modal .custom-select-trigger:hover,
body.subscriber-logged-in #customer-request-modal .custom-select-wrapper.open .custom-select-trigger {
  background: #ffffff !important;
  border-color: rgba(217, 119, 6, 0.42) !important;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.1) !important;
}

body.subscriber-logged-in #customer-request-modal .custom-select-trigger-text,
body.subscriber-logged-in #customer-request-modal .custom-select-trigger-arrow,
body.subscriber-logged-in #customer-request-modal .custom-select-option,
body.subscriber-logged-in #customer-request-modal .custom-select-option span {
  color: #172033 !important;
}

body.subscriber-logged-in #customer-request-modal .custom-select-option:hover {
  background: #fff8df !important;
  color: #92400e !important;
  padding-left: 14px !important;
}

body.subscriber-logged-in #customer-request-modal .custom-select-option.selected {
  background: rgba(251, 191, 36, 0.22) !important;
  color: #92400e !important;
}

body.subscriber-logged-in #customer-request-modal .custom-select-option.disabled,
body.subscriber-logged-in #customer-request-modal .custom-select-option.disabled span {
  color: #8a97a3 !important;
}

body.subscriber-logged-in #customer-request-modal #customer-request-brand-picker,
body.subscriber-logged-in #customer-request-modal #customer-request-brand-quota,
body.subscriber-logged-in #customer-request-modal .customer-request-brand-card,
body.subscriber-logged-in #customer-request-modal .v-count-box,
body.subscriber-logged-in #customer-request-modal .customer-request-attachments-wrapper,
body.subscriber-logged-in #customer-request-modal #customer-request-attachments-collapsible {
  background: #ffffff !important;
  border-color: rgba(23, 32, 51, 0.14) !important;
  color: #172033 !important;
}

body.subscriber-logged-in #customer-request-modal #customer-request-brand-picker *,
body.subscriber-logged-in #customer-request-modal #customer-request-brand-quota *,
body.subscriber-logged-in #customer-request-modal .customer-request-brand-card *,
body.subscriber-logged-in #customer-request-modal .v-count-box,
body.subscriber-logged-in #customer-request-modal .upload-text-wrapper,
body.subscriber-logged-in #customer-request-modal .upload-text-wrapper * {
  color: #172033 !important;
}

body.subscriber-logged-in #customer-request-modal .customer-request-brand-card.is-selected,
body.subscriber-logged-in #customer-request-modal .v-count-active {
  background: #fff8df !important;
  border-color: rgba(217, 119, 6, 0.34) !important;
  color: #92400e !important;
}

body.subscriber-logged-in #customer-request-modal .category-hint-text,
body.subscriber-logged-in #customer-request-modal .form-helper,
body.subscriber-logged-in #customer-request-modal .request-field-help {
  color: #64727d !important;
}

body.subscriber-logged-in #customer-task-modal .premium-creation-details>div:last-child {
  background: #ffffff !important;
  border: 1px solid rgba(23, 32, 51, 0.12) !important;
  color: #172033 !important;
}

body.subscriber-logged-in #customer-task-modal .premium-creation-details>div:last-child * {
  color: #172033 !important;
}

@media (max-width: 520px) {
  body.subscriber-logged-in #customer-request-modal .customer-task-modal-dialog {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  body.subscriber-logged-in #customer-request-modal .customer-request-form,
  body.subscriber-logged-in #customer-request-modal .modal-grid-form,
  body.subscriber-logged-in #customer-request-modal .modal-form-left,
  body.subscriber-logged-in #customer-request-modal .modal-form-right,
  body.subscriber-logged-in #customer-request-modal .custom-select-wrapper,
  body.subscriber-logged-in #customer-request-modal .custom-select-trigger,
  body.subscriber-logged-in #customer-request-modal .custom-select-dropdown-menu {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}



body.subscriber-logged-in,
body.subscriber-logged-in #dashboard-wrapper,
body.subscriber-logged-in .main-content,
body.subscriber-logged-in .panels-wrapper,
body.subscriber-logged-in .panel.active,
body.subscriber-logged-in #panel-subscriber-dashboard,
body.subscriber-logged-in #panel-subscriber-dashboard.panel.active,
body.subscriber-logged-in #subscriber-cockpit-root,
body.subscriber-logged-in #subscriber-cockpit-root .cc-dash,
html body.subscriber-logged-in #subscriber-cockpit-root main.cc-dash,
body.subscriber-logged-in #subscriber-cockpit-root .cc-tool-header,
body.subscriber-logged-in #subscriber-cockpit-root#subscriber-cockpit-root#subscriber-cockpit-root main.cc-dash,
body.subscriber-logged-in #subscriber-cockpit-root#subscriber-cockpit-root#subscriber-cockpit-root .cc-tool-header,
body.subscriber-logged-in #subscriber-cockpit-root#subscriber-cockpit-root#subscriber-cockpit-root .cc-brand,
body.subscriber-logged-in #subscriber-cockpit-root#subscriber-cockpit-root#subscriber-cockpit-root .cc-work-counts,
body.subscriber-logged-in #subscriber-cockpit-root#subscriber-cockpit-root#subscriber-cockpit-root .cc-tool-header__brand,
body.subscriber-logged-in #subscriber-cockpit-root#subscriber-cockpit-root#subscriber-cockpit-root .cc-tool-header__brand *,
body.subscriber-logged-in #subscriber-cockpit-root#subscriber-cockpit-root#subscriber-cockpit-root .cc-tool-header>div:not(.cc-work-count):not(.cc-work-counts) {
  background: var(--cc-shell-bg) !important;
  background-color: var(--cc-shell-bg) !important;
  background-image: none !important;
}

/* Colorful Customer File Links for RestoUp Style */
body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(1).customer-file-link {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), #ffffff 60%) !important;
  border-color: rgba(14, 165, 233, 0.22) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(1).customer-file-link:hover {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.16), #ffffff 60%) !important;
  border-color: rgba(14, 165, 233, 0.35) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(14, 165, 233, 0.1) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(1).customer-file-link .customer-file-icon {
  color: #0284c7 !important;
  background: rgba(14, 165, 233, 0.12) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(2).customer-file-link {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), #ffffff 60%) !important;
  border-color: rgba(245, 158, 11, 0.22) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(2).customer-file-link:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), #ffffff 60%) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(245, 158, 11, 0.1) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(2).customer-file-link .customer-file-icon {
  color: #d97706 !important;
  background: rgba(245, 158, 11, 0.12) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(3).customer-file-link {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), #ffffff 60%) !important;
  border-color: rgba(16, 185, 129, 0.22) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(3).customer-file-link:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.16), #ffffff 60%) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(16, 185, 129, 0.1) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(3).customer-file-link .customer-file-icon {
  color: #059669 !important;
  background: rgba(16, 185, 129, 0.12) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(4).customer-file-link {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), #ffffff 60%) !important;
  border-color: rgba(139, 92, 246, 0.22) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(4).customer-file-link:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.16), #ffffff 60%) !important;
  border-color: rgba(139, 92, 246, 0.35) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(139, 92, 246, 0.1) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(4).customer-file-link .customer-file-icon {
  color: #7c3aed !important;
  background: rgba(139, 92, 246, 0.12) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files .customer-file-link {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Fix panel backgrounds to ensure cream body color flows through gaps */
body.subscriber-logged-in {
  background: #fff1dc !important;
}

body.subscriber-logged-in #dashboard-wrapper,
body.subscriber-logged-in .main-content,
body.subscriber-logged-in .panels-wrapper,
body.subscriber-logged-in .panel.active,
body.subscriber-logged-in #panel-subscriber-dashboard,
body.subscriber-logged-in #subscriber-cockpit-root,
body.subscriber-logged-in #subscriber-cockpit-root .cc-dash,
body.subscriber-logged-in #subscriber-cockpit-root .cc-bento {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Explicit Grid Placement for Outer Gaps (Middle columns merged) */
body.subscriber-logged-in #subscriber-cockpit-root .cc-bento {
  gap: 0 !important;
  grid-template-columns: 240px 24px minmax(760px, 1fr) 330px 24px 300px !important;
}

@media (max-width: 1180px) {
  body.subscriber-logged-in #subscriber-cockpit-root .cc-bento {
    grid-template-columns: 210px 24px minmax(520px, 1fr) 300px 24px 280px !important;
  }
}

@media (max-width: 820px) {
  body.subscriber-logged-in #subscriber-cockpit-root .cc-bento {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }
}

/* Position columns explicitly on desktop */
@media (min-width: 821px) {
  body.subscriber-logged-in #subscriber-cockpit-root .cc-bento>.cc-card--automations {
    grid-column: 1 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-bento>.cc-card--tasks {
    grid-column: 3 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-bento>.cc-right-stack {
    grid-column: 4 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-bento>.cc-card--activity {
    grid-column: 6 !important;
  }

  /* Merge middle columns (Tasks and Right Stack) visually into one seamless card */
  body.subscriber-logged-in #subscriber-cockpit-root .cc-bento>.cc-card--tasks {
    border-right: 1px solid rgba(23, 32, 51, 0.06) !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-bento>.cc-right-stack {
    border-left: none !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
}

/* Force cards to have their own backgrounds, overriding any transparent inline styles */
body.subscriber-logged-in #subscriber-cockpit-root .cc-bento>.cc-card.cc-card.cc-card,
body.subscriber-logged-in #subscriber-cockpit-root .cc-bento>.cc-right-stack.cc-right-stack {
  background: #ffffff !important;
  border: 1px solid rgba(23, 32, 51, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(23, 32, 51, 0.04) !important;
}

/* Hide the pseudo-element vertical dividers since they are now separate cards */
body.subscriber-logged-in #subscriber-cockpit-root .cc-bento>.cc-card::after,
body.subscriber-logged-in #subscriber-cockpit-root .cc-bento>.cc-right-stack::after {
  display: none !important;
}

body.subscriber-logged-in #subscriber-cockpit-root#subscriber-cockpit-root#subscriber-cockpit-root .cc-bento {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Merge Tasks and Work Summary into one measured middle surface */
@media (min-width: 821px) {
  body.subscriber-logged-in #subscriber-cockpit-root .cc-bento {
    align-items: stretch !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-bento>.cc-card--tasks.cc-card.cc-card.cc-card {
    align-self: stretch !important;
    border-right: 0 !important;
    border-radius: 12px 0 0 12px !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-bento>.cc-right-stack.cc-right-stack {
    align-self: stretch !important;
    border-left: 1px solid rgba(23, 32, 51, 0.08) !important;
    border-radius: 0 12px 12px 0 !important;
    box-shadow: none !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-card--tasks .cc-card__body,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-card--tasks .cc-card__body--scroll {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-card--tasks .cc-card__head {
    margin-bottom: 2px !important;
  }
}

/* RestoUp dark animated outer shell */
@media (min-width: 1840px) {
  body.subscriber-logged-in {
    --cc-shell-bg: #0d0f12;
    position: relative !important;
    background:
      radial-gradient(circle at 50% -16%, rgba(255, 122, 0, 0.08), transparent 32%),
      linear-gradient(180deg, #151519 0%, #0d0f12 58%, #090a0d 100%) !important;
  }

  body.subscriber-logged-in::before {
    content: "" !important;
    position: fixed !important;
    inset: -86px !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background:
      radial-gradient(circle, rgba(255, 122, 0, 0.56) 0 1.5px, transparent 2.5px),
      radial-gradient(circle, rgba(255, 190, 40, 0.24) 0 1px, transparent 2px);
    background-position: 0 0, 46px 54px !important;
    background-size: 104px 104px, 148px 148px !important;
    opacity: 0.58 !important;
    animation: subscriberCockpitShellDrift 24s linear infinite !important;
  }
}

@keyframes subscriberCockpitShellDrift {
  to {
    transform: translate3d(86px, 86px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.subscriber-logged-in,
  body.subscriber-logged-in::before,
  body.subscriber-logged-in .customer-task-modal-head,
  body.subscriber-logged-in .ys-cost-tool-dialog header {
    animation: none !important;
  }
}

body.subscriber-logged-in #dashboard-wrapper,
body.subscriber-logged-in .main-content {
  position: relative !important;
  z-index: 1 !important;
}

body.subscriber-logged-in #dashboard-wrapper {
  background: transparent !important;
}

body.subscriber-logged-in #dashboard-wrapper,
body.subscriber-logged-in .main-content,
body.subscriber-logged-in .panels-wrapper,
body.subscriber-logged-in .panel.active,
body.subscriber-logged-in #panel-subscriber-dashboard,
body.subscriber-logged-in #subscriber-cockpit-root,
body.subscriber-logged-in #subscriber-cockpit-root .cc-dash,
body.subscriber-logged-in #subscriber-cockpit-root .cc-tool-header {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .cc-tool-header,
body.subscriber-logged-in #subscriber-cockpit-root .cc-tool-header__brand,
body.subscriber-logged-in #subscriber-cockpit-root .cc-tool-header__brand * {
  color: #ffffff !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .cc-tool-header {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .cc-tool-header::before {
  content: "" !important;
  position: absolute !important;
  inset: -48px -64px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle, rgba(255, 122, 0, 0.62) 0 1.5px, transparent 2.6px),
    radial-gradient(circle, rgba(255, 190, 40, 0.28) 0 1px, transparent 2px),
    linear-gradient(180deg, #121317, #090a0d) !important;
  background-position: 0 0, 46px 54px, 0 0 !important;
  background-size: 104px 104px, 148px 148px, auto !important;
  animation: subscriberCockpitShellDrift 24s linear infinite !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .cc-brand span,
body.subscriber-logged-in #subscriber-cockpit-root .cc-brand .cc-brand__accent,
body.subscriber-logged-in #subscriber-cockpit-root .cc-tool-header__brand [style*="orange"],
body.subscriber-logged-in #subscriber-cockpit-root .cc-tool-header__brand [style*="#f97316"],
body.subscriber-logged-in #subscriber-cockpit-root .cc-tool-header__brand [style*="#ff"] {
  color: #f97316 !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .cc-tool-header__brand>div[style] {
  color: #ffffff !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .cc-tool-header__brand>div>span {
  color: #f97316 !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .cc-tool-header__brand>span[style],
body.subscriber-logged-in #subscriber-cockpit-root .cc-tool-header__brand>span strong[style] {
  color: #ffffff !important;
}

body.subscriber-logged-in .customer-task-modal-head,
body.subscriber-logged-in .ys-cost-tool-dialog header {
  background:
    radial-gradient(circle, rgba(255, 122, 0, 0.42) 0 1.5px, transparent 2.5px),
    radial-gradient(circle, rgba(255, 190, 40, 0.2) 0 1px, transparent 2px),
    linear-gradient(180deg, #101114, #090a0d) !important;
  background-position: 0 0, 46px 54px, 0 0 !important;
  background-size: 104px 104px, 148px 148px, auto !important;
  animation: subscriberCockpitShellDrift 24s linear infinite !important;
}

@media (prefers-reduced-motion: reduce) {
  body.subscriber-logged-in .customer-task-modal-head,
  body.subscriber-logged-in .ys-cost-tool-dialog header {
    animation: none !important;
  }
}

@media (min-width: 821px) {
  body.subscriber-logged-in #subscriber-cockpit-root .cc-work-counts {
    left: -80px !important;
    position: relative !important;
  }

  html:has(body.subscriber-logged-in),
  body.subscriber-logged-in {
    min-height: 100vh !important;
    height: auto !important;
    overflow: auto !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-dash {
    min-height: 100vh !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(23, 32, 51, 0.04) !important;
  }
}

/* Hide the pseudo-element vertical dividers since they are now separate cards */
body.subscriber-logged-in #subscriber-cockpit-root .cc-bento>.cc-card::after,
body.subscriber-logged-in #subscriber-cockpit-root .cc-bento>.cc-right-stack::after {
  display: none !important;
}

body.subscriber-logged-in #subscriber-cockpit-root#subscriber-cockpit-root#subscriber-cockpit-root .cc-bento {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Merge Tasks and Work Summary into one measured middle surface */
@media (min-width: 821px) {
  body.subscriber-logged-in #subscriber-cockpit-root .cc-bento {
    align-items: stretch !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-bento>.cc-card--tasks.cc-card.cc-card.cc-card {
    align-self: stretch !important;
    border-right: 0 !important;
    border-radius: 12px 0 0 12px !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-bento>.cc-right-stack.cc-right-stack {
    align-self: stretch !important;
    border-left: 1px solid rgba(23, 32, 51, 0.08) !important;
    border-radius: 0 12px 12px 0 !important;
    box-shadow: none !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-card--tasks .cc-card__body,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-card--tasks .cc-card__body--scroll {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-card--tasks .cc-card__head {
    margin-bottom: 2px !important;
  }
}

body.subscriber-logged-in #subscriber-cockpit-root .cc-tool-header::before {
  content: "" !important;
  position: absolute !important;
  inset: -48px -64px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle, rgba(255, 122, 0, 0.62) 0 1.5px, transparent 2.6px),
    radial-gradient(circle, rgba(255, 190, 40, 0.28) 0 1px, transparent 2px),
    linear-gradient(180deg, #121317, #090a0d) !important;
  background-position: 0 0, 46px 54px, 0 0 !important;
  background-size: 104px 104px, 148px 148px, auto !important;
  animation: subscriberCockpitShellDrift 24s linear infinite !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .cc-brand span,
body.subscriber-logged-in #subscriber-cockpit-root .cc-brand .cc-brand__accent,
body.subscriber-logged-in #subscriber-cockpit-root .cc-tool-header__brand [style*="orange"],
body.subscriber-logged-in #subscriber-cockpit-root .cc-tool-header__brand [style*="#f97316"],
body.subscriber-logged-in #subscriber-cockpit-root .cc-tool-header__brand [style*="#ff"] {
  color: #f97316 !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .cc-tool-header__brand>div[style] {
  color: #ffffff !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .cc-tool-header__brand>div>span {
  color: #f97316 !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .cc-tool-header__brand>span[style],
body.subscriber-logged-in #subscriber-cockpit-root .cc-tool-header__brand>span strong[style] {
  color: #ffffff !important;
}

body.subscriber-logged-in .customer-task-modal-head,
body.subscriber-logged-in .ys-cost-tool-dialog header {
  background:
    radial-gradient(circle, rgba(255, 122, 0, 0.42) 0 1.5px, transparent 2.5px),
    radial-gradient(circle, rgba(255, 190, 40, 0.2) 0 1px, transparent 2px),
    linear-gradient(180deg, #101114, #090a0d) !important;
  background-position: 0 0, 46px 54px, 0 0 !important;
  background-size: 104px 104px, 148px 148px, auto !important;
  animation: subscriberCockpitShellDrift 24s linear infinite !important;
}

@media (prefers-reduced-motion: reduce) {
  body.subscriber-logged-in .customer-task-modal-head,
  body.subscriber-logged-in .ys-cost-tool-dialog header {
    animation: none !important;
  }
}

@media (min-width: 821px) {
  body.subscriber-logged-in #subscriber-cockpit-root .cc-work-counts {
    left: -80px !important;
    position: relative !important;
  }

  html:has(body.subscriber-logged-in),
  body.subscriber-logged-in {
    min-height: 100vh !important;
    height: auto !important;
    overflow: auto !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-dash {
    min-height: 100vh !important;
    height: auto !important;
    overflow: visible !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-bento {
    min-height: calc(100vh - 118px) !important;
  }

  /* Single subscriber cockpit moving background */
  body.subscriber-logged-in {
    background:
      radial-gradient(circle at 50% -12%, rgba(255, 122, 0, 0.18), transparent 30%),
      radial-gradient(circle at 16% 22%, rgba(255, 190, 40, 0.08), transparent 22%),
      linear-gradient(180deg, #0b0c10 0%, #07080b 54%, #050608 100%) !important;
  }

  body.subscriber-logged-in::before {
    content: "" !important;
    position: fixed !important;
    inset: -86px !important;
    z-index: 0 !important;
    pointer-events: none !important;
    transform: translateZ(0) !important;
    will-change: transform !important;
    contain: strict !important;
    background:
      radial-gradient(circle, rgba(255, 122, 0, 0.72) 0 1.8px, transparent 3.2px),
      radial-gradient(circle, rgba(255, 190, 40, 0.34) 0 1px, transparent 2.4px) !important;
    background-position: 0 0, 43px 43px !important;
    background-size: 86px 86px, 86px 86px !important;
    opacity: 1 !important;
    animation: subscriberCockpitShellDrift 16s linear infinite !important;
  }

  @media (max-width: 1839px), (prefers-reduced-motion: reduce) {
    body.subscriber-logged-in::before {
      animation: none !important;
      opacity: 0.3 !important;
    }
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-bento>.cc-card,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-bento>.cc-right-stack {
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-bento .customer-task-list.completed {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

body.subscriber-logged-in #subscriber-cockpit-root .cc-tool-header::before {
  content: none !important;
  animation: none !important;
  background: none !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .cc-bento>.cc-card.cc-card.cc-card,
body.subscriber-logged-in #subscriber-cockpit-root .cc-bento>.cc-right-stack.cc-right-stack {
  background: #ffffff !important;
  background-image: none !important;
}

html body.subscriber-logged-in #subscriber-cockpit-root#subscriber-cockpit-root .cc-bento>.cc-card.cc-card.cc-card,
html body.subscriber-logged-in #subscriber-cockpit-root#subscriber-cockpit-root .cc-bento>.cc-right-stack.cc-right-stack {
  background-color: #ffffff !important;
  background-image: none !important;
}

body.subscriber-logged-in .customer-task-modal-head,
body.subscriber-logged-in .ys-cost-tool-dialog header {
  background: #0a0a0c !important;
  animation: none !important;
}

body.subscriber-logged-in .modal-overlay,
body.subscriber-logged-in .customer-task-modal-backdrop,
body.subscriber-logged-in .ys-cost-tool-backdrop {
  background: rgba(8, 9, 12, 0.28) !important;
  background-image: none !important;
  animation: none !important;
  backdrop-filter: blur(1px) !important;
}

body.subscriber-logged-in #dashboard-wrapper,
body.subscriber-logged-in .main-content,
body.subscriber-logged-in .panels-wrapper,
body.subscriber-logged-in .panel.active,
body.subscriber-logged-in #panel-subscriber-dashboard,
body.subscriber-logged-in #panel-subscriber-dashboard.panel.active,
body.subscriber-logged-in #subscriber-cockpit-root,
body.subscriber-logged-in #subscriber-cockpit-root .cc-dash,
body.subscriber-logged-in #subscriber-cockpit-root#subscriber-cockpit-root .cc-tool-header,
body.subscriber-logged-in #subscriber-cockpit-root#subscriber-cockpit-root .cc-tool-header>div,
body.subscriber-logged-in #subscriber-cockpit-root#subscriber-cockpit-root .cc-tool-header__brand,
body.subscriber-logged-in #subscriber-cockpit-root#subscriber-cockpit-root .cc-tool-header__brand *,
body.subscriber-logged-in #subscriber-cockpit-root#subscriber-cockpit-root .cc-work-counts {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

html body.subscriber-logged-in #subscriber-cockpit-root#subscriber-cockpit-root#subscriber-cockpit-root main.cc-dash,
html body.subscriber-logged-in #subscriber-cockpit-root#subscriber-cockpit-root#subscriber-cockpit-root .cc-dash,
html body.subscriber-logged-in #subscriber-cockpit-root#subscriber-cockpit-root#subscriber-cockpit-root .cc-tool-header,
html body.subscriber-logged-in #subscriber-cockpit-root#subscriber-cockpit-root#subscriber-cockpit-root .cc-tool-header>div,
html body.subscriber-logged-in #subscriber-cockpit-root#subscriber-cockpit-root#subscriber-cockpit-root .cc-tool-header>div:not(.cc-work-count):not(.cc-work-counts),
html body.subscriber-logged-in #subscriber-cockpit-root#subscriber-cockpit-root#subscriber-cockpit-root .cc-brand,
html body.subscriber-logged-in #subscriber-cockpit-root#subscriber-cockpit-root#subscriber-cockpit-root .cc-work-counts,
html body.subscriber-logged-in #subscriber-cockpit-root#subscriber-cockpit-root#subscriber-cockpit-root .cc-tool-header__brand,
html body.subscriber-logged-in #subscriber-cockpit-root#subscriber-cockpit-root#subscriber-cockpit-root .cc-tool-header__brand * {
  --cc-bg: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Stronger right-panel shortcut contrast */
body.subscriber-logged-in #subscriber-cockpit-root .customer-shortcut-tool,
body.subscriber-logged-in #subscriber-cockpit-root #customer-files a,
body.subscriber-logged-in #subscriber-cockpit-root #customer-files .customer-file-card {
  color: #000000 !important;
  border-color: rgba(2, 132, 199, 0.58) !important;
  background:
    linear-gradient(120deg, #7dd3fc 0%, #e0f2fe 34%, #ffffff 50%, #bae6fd 68%, #7dd3fc 100%) !important;
  background-size: 240% 240% !important;
  box-shadow: 0 14px 28px rgba(14, 165, 233, 0.22), inset 0 1px 0 rgba(255,255,255,0.95) !important;
  animation: subscriberShortcutGlow 7s ease-in-out infinite !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .customer-shortcut-tool.primary {
  color: #000000 !important;
  border-color: rgba(217, 119, 6, 0.62) !important;
  background:
    linear-gradient(120deg, #fb923c 0%, #fed7aa 34%, #ffffff 50%, #fdba74 68%, #fb923c 100%) !important;
  background-size: 240% 240% !important;
  box-shadow: 0 14px 28px rgba(217, 119, 6, 0.26), inset 0 1px 0 rgba(255,255,255,0.95) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files a:nth-child(2),
body.subscriber-logged-in #subscriber-cockpit-root #customer-files .customer-file-card:nth-child(2) {
  border-color: rgba(217, 119, 6, 0.62) !important;
  background: linear-gradient(120deg, #fb923c 0%, #fed7aa 34%, #ffffff 50%, #fdba74 68%, #fb923c 100%) !important;
  background-size: 240% 240% !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files a:nth-child(3),
body.subscriber-logged-in #subscriber-cockpit-root #customer-files .customer-file-card:nth-child(3) {
  border-color: rgba(13, 148, 136, 0.56) !important;
  background: linear-gradient(120deg, #2dd4bf 0%, #99f6e4 34%, #ffffff 50%, #5eead4 68%, #2dd4bf 100%) !important;
  background-size: 240% 240% !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files a:nth-child(4),
body.subscriber-logged-in #subscriber-cockpit-root #customer-files .customer-file-card:nth-child(4) {
  border-color: rgba(124, 58, 237, 0.58) !important;
  background: linear-gradient(120deg, #a78bfa 0%, #ddd6fe 34%, #ffffff 50%, #c4b5fd 68%, #a78bfa 100%) !important;
  background-size: 240% 240% !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .customer-shortcut-tool strong,
body.subscriber-logged-in #subscriber-cockpit-root #customer-files strong,
body.subscriber-logged-in #subscriber-cockpit-root #customer-files strong span {
  color: #000000 !important;
  font-weight: 950 !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .customer-shortcut-tool small,
body.subscriber-logged-in #subscriber-cockpit-root #customer-files .customer-file-link>div>span,
body.subscriber-logged-in #subscriber-cockpit-root #customer-files .customer-file-card>div>span {
  color: #64748b !important;
  font-weight: 750 !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .customer-shortcut-tool strong + br + small,
body.subscriber-logged-in #subscriber-cockpit-root #customer-files strong + span,
body.subscriber-logged-in #subscriber-cockpit-root #customer-files .customer-file-link>div>span,
body.subscriber-logged-in #subscriber-cockpit-root #customer-files .customer-file-card>div>span {
  color: #64748b !important;
  font-weight: 750 !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .customer-shortcut-tool:hover,
body.subscriber-logged-in #subscriber-cockpit-root #customer-files a:hover {
  transform: translateY(-2px) !important;
  filter: saturate(1.22) brightness(1.02) !important;
  box-shadow: 0 16px 30px rgba(14, 165, 233, 0.2), inset 0 1px 0 rgba(255,255,255,0.95) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .customer-shortcut-tool.primary:hover,
body.subscriber-logged-in #subscriber-cockpit-root #customer-files a:nth-child(2):hover {
  box-shadow: 0 16px 30px rgba(217, 119, 6, 0.22), inset 0 1px 0 rgba(255,255,255,0.95) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .customer-file-open-icon {
  background: rgba(255, 255, 255, 0.82) !important;
  color: #0f172a !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(1).customer-file-link,
body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(1).customer-file-card {
  border-color: rgba(2, 132, 199, 0.58) !important;
  background: linear-gradient(120deg, #7dd3fc 0%, #e0f2fe 34%, #ffffff 50%, #bae6fd 68%, #7dd3fc 100%) !important;
  background-size: 240% 240% !important;
  animation: subscriberShortcutGlow 7s ease-in-out infinite !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(2).customer-file-link,
body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(2).customer-file-card {
  border-color: rgba(217, 119, 6, 0.62) !important;
  background: linear-gradient(120deg, #fb923c 0%, #fed7aa 34%, #ffffff 50%, #fdba74 68%, #fb923c 100%) !important;
  background-size: 240% 240% !important;
  animation: subscriberShortcutGlow 7s ease-in-out infinite !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(3).customer-file-link,
body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(3).customer-file-card {
  border-color: rgba(13, 148, 136, 0.56) !important;
  background: linear-gradient(120deg, #2dd4bf 0%, #99f6e4 34%, #ffffff 50%, #5eead4 68%, #2dd4bf 100%) !important;
  background-size: 240% 240% !important;
  animation: subscriberShortcutGlow 7s ease-in-out infinite !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(4).customer-file-link,
body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(4).customer-file-card {
  border-color: rgba(124, 58, 237, 0.58) !important;
  background: linear-gradient(120deg, #a78bfa 0%, #ddd6fe 34%, #ffffff 50%, #c4b5fd 68%, #a78bfa 100%) !important;
  background-size: 240% 240% !important;
  animation: subscriberShortcutGlow 7s ease-in-out infinite !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .customer-shortcut-tool strong,
body.subscriber-logged-in #subscriber-cockpit-root .customer-shortcut-tool strong span,
body.subscriber-logged-in #subscriber-cockpit-root #customer-files strong,
body.subscriber-logged-in #subscriber-cockpit-root #customer-files strong>span:first-child {
  color: #000000 !important;
  opacity: 1 !important;
  filter: none !important;
  font-weight: 950 !important;
}

@keyframes subscriberShortcutGlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* RestoUp warm final shortcut design */
body.subscriber-logged-in #subscriber-cockpit-root .customer-shortcut-tool,
body.subscriber-logged-in #subscriber-cockpit-root #customer-files .customer-file-link,
body.subscriber-logged-in #subscriber-cockpit-root #customer-files .customer-file-card {
  color: #000000 !important;
  border-color: rgba(255, 122, 0, 0.32) !important;
  background:
    linear-gradient(120deg, rgba(255, 122, 0, 0.16) 0%, #fff7ed 34%, #ffffff 52%, rgba(255, 190, 40, 0.18) 72%, #ffffff 100%) !important;
  background-size: 240% 240% !important;
  box-shadow:
    0 12px 24px rgba(255, 122, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  animation: subscriberShortcutGlow 9s ease-in-out infinite !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, border-color 0.18s ease !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .customer-shortcut-tool.primary {
  border-color: rgba(255, 122, 0, 0.58) !important;
  background:
    linear-gradient(120deg, #ff7a00 0%, #ffb057 31%, #fff7ed 52%, #ffd166 72%, #ff8a1f 100%) !important;
  background-size: 240% 240% !important;
  box-shadow:
    0 14px 28px rgba(255, 122, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .customer-shortcut-tool.is-disabled {
  opacity: 0.82 !important;
  filter: saturate(0.72) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(n).customer-file-link,
body.subscriber-logged-in #subscriber-cockpit-root #customer-files>div>*:nth-child(n).customer-file-card {
  border-color: rgba(255, 122, 0, 0.32) !important;
  background:
    linear-gradient(120deg, rgba(255, 122, 0, 0.13) 0%, #fff7ed 34%, #ffffff 52%, rgba(255, 190, 40, 0.16) 72%, #ffffff 100%) !important;
  background-size: 240% 240% !important;
  animation: subscriberShortcutGlow 9s ease-in-out infinite !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .customer-shortcut-tool:hover,
body.subscriber-logged-in #subscriber-cockpit-root #customer-files .customer-file-link:hover {
  transform: translateY(-2px) !important;
  filter: saturate(1.08) brightness(1.015) !important;
  border-color: rgba(255, 122, 0, 0.58) !important;
  box-shadow:
    0 16px 30px rgba(255, 122, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .customer-shortcut-tool strong,
body.subscriber-logged-in #subscriber-cockpit-root .customer-shortcut-tool strong span,
body.subscriber-logged-in #subscriber-cockpit-root #customer-files strong,
body.subscriber-logged-in #subscriber-cockpit-root #customer-files strong>span:first-child {
  color: #000000 !important;
  opacity: 1 !important;
  filter: none !important;
  font-weight: 950 !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .customer-shortcut-tool small,
body.subscriber-logged-in #subscriber-cockpit-root #customer-files .customer-file-link>div>span,
body.subscriber-logged-in #subscriber-cockpit-root #customer-files .customer-file-card>div>span {
  color: #64748b !important;
  font-weight: 750 !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .customer-shortcut-tool-icon,
body.subscriber-logged-in #subscriber-cockpit-root .customer-file-icon {
  color: #d97706 !important;
  border-color: rgba(255, 122, 0, 0.26) !important;
  background: rgba(255, 122, 0, 0.1) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .customer-file-open-icon {
  color: #111827 !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(255, 122, 0, 0.14) !important;
  box-shadow: 0 10px 20px rgba(17, 24, 39, 0.12) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .customer-file-link:hover .customer-file-open-icon {
  box-shadow: 0 12px 24px rgba(255, 122, 0, 0.2) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .customer-file-open-icon,
body.subscriber-logged-in #subscriber-cockpit-root .customer-file-open-icon svg,
body.subscriber-logged-in #subscriber-cockpit-root .customer-file-open-icon path {
  color: #111827 !important;
  stroke: #111827 !important;
}

@media (prefers-reduced-motion: reduce) {
  body.subscriber-logged-in::before {
    animation: none !important;
  }
}

/* Fix missing lines in stage preview */
.customer-task-modal-stage .customer-stage-preview span:not(:first-child)::before {
  display: block !important;
}


/* Extreme fallback for connecting lines */
.customer-stage-preview span {
  position: relative !important;
}

.customer-task-modal-stage .customer-stage-preview span:not(:first-child)::before,
#subscriber-cockpit-root .customer-stage-preview span:not(:first-child)::before,
.customer-stage-preview span:not(:first-child)::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 13px !important;
  right: 50% !important;
  width: 100% !important;
  height: 2px !important;
  background: #cbd5e1 !important;
  z-index: 0 !important;
}

.customer-task-modal-stage .customer-stage-preview .active:not(:first-child)::before,
.customer-task-modal-stage .customer-stage-preview .done:not(:first-child)::before,
#subscriber-cockpit-root .customer-stage-preview .active:not(:first-child)::before,
#subscriber-cockpit-root .customer-stage-preview .done:not(:first-child)::before,
.customer-stage-preview .active:not(:first-child)::before,
.customer-stage-preview .done:not(:first-child)::before {
  background: #16a34a !important;
}
.ys-slider-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.ys-slider-wrap input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: #facc15;
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  outline: none;
  border: none;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
}
.ys-slider-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #facc15;
  cursor: pointer;
  border: 2px solid #000;
}
.ys-slider-input-box {
  position: relative;
  width: 76px;
  flex-shrink: 0;
}
.ys-slider-input-box input[type="number"] {
  width: 100%;
  padding: 8px !important;
  padding-right: 22px !important;
  text-align: right;
  min-height: 36px !important;
}
.ys-input-suffix-inline {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(250, 204, 21, 0.82);
  font-size: 0.75rem;
  font-weight: 900;
  pointer-events: none;
}

body.subscriber-logged-in .ys-slider-wrap input[type="range"] {
  background: rgba(23, 32, 51, 0.1) !important;
}
body.subscriber-logged-in .ys-slider-wrap input[type="range"]::-webkit-slider-thumb {
  border-color: #fff !important;
  background: #f59e0b !important;
}
body.subscriber-logged-in .ys-input-suffix-inline {
  color: #d97706 !important;
}


.ys-cost-grid label:has(button) input[type="number"] {
  padding-right: 48px !important;
}
.ys-cost-grid label:has(.ys-input-suffix-inline) input[type="number"] {
  padding-right: 24px !important;
}


.ys-cost-grid input[type="range"],
body.subscriber-logged-in .ys-cost-grid input[type="range"] {
  min-height: 6px !important;
  height: 6px !important;
  padding: 0 !important;
  border: none !important;
  background: rgba(255,255,255,0.1) !important;
  box-shadow: none !important;
}
body.subscriber-logged-in .ys-cost-grid input[type="range"] {
  background: rgba(23, 32, 51, 0.1) !important;
}


.ys-target-price-alert {
  background: rgba(250, 204, 21, 0.12);
  border: 1px solid rgba(250, 204, 21, 0.4);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
  text-align: center;
}
.ys-target-price-alert small {
  display: block;
  font-size: 0.75rem;
  color: #facc15;
  font-weight: 800;
  margin-bottom: 4px;
}
.ys-target-price-alert strong {
  display: block;
  font-size: 1.6rem;
  font-weight: 900;
  color: #fff;
}

body.subscriber-logged-in .ys-target-price-alert {
  background: #fef9c3 !important;
  border-color: #fde047 !important;
}
body.subscriber-logged-in .ys-target-price-alert small {
  color: #b45309 !important;
}
body.subscriber-logged-in .ys-target-price-alert strong {
  color: #78350f !important;
}


.ys-lbl-icon {
  width: 15px;
  height: 15px;
  margin-right: 6px;
  vertical-align: text-bottom;
  color: #f59e0b;
}
body.subscriber-logged-in .ys-lbl-icon {
  color: #f59e0b;
}



.ys-section-income {
  background: rgba(34, 197, 94, 0.04) !important;
  border-color: rgba(34, 197, 94, 0.12) !important;
}
.ys-section-expense {
  background: rgba(239, 68, 68, 0.03) !important;
  border-color: rgba(239, 68, 68, 0.1) !important;
}
body.subscriber-logged-in .ys-input-panel section.ys-section-income {
  background: rgba(220, 252, 231, 0.65) !important;
  border-color: rgba(134, 239, 172, 0.6) !important;
}
body.subscriber-logged-in .ys-input-panel section.ys-section-expense {
  background: rgba(254, 226, 226, 0.55) !important;
  border-color: rgba(252, 165, 165, 0.5) !important;
}



.ys-receipt-row.expense {
  background: rgba(239, 68, 68, 0.05);
  color: #ef4444;
}
.ys-receipt-row.expense b {
  color: #ef4444;
}
body.subscriber-logged-in .ys-receipt-row.expense {
  background: rgba(254, 226, 226, 0.5) !important;
}
body.subscriber-logged-in .ys-receipt-row.income,
body.subscriber-logged-in .ys-receipt-row.payout {
  background: rgba(220, 252, 231, 0.5) !important;
}


/* Work count badges vibrant styling */
#subscriber-cockpit-root .cc-work-count {
  padding: 6px 12px !important;
  border-radius: 8px !important;
  min-height: 28px !important;
  border-width: 1px !important;
  border-style: solid !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#subscriber-cockpit-root .cc-work-count-open {
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #f59e0b !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.08) !important;
}
#subscriber-cockpit-root .cc-work-count-open span {
  color: #f59e0b !important;
  font-size: 0.9rem !important;
  font-weight: 900 !important;
}
#subscriber-cockpit-root .cc-work-count-open small {
  color: rgba(245, 158, 11, 0.8) !important;
  font-size: 0.65rem !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

#subscriber-cockpit-root .cc-work-count-completed {
  background: rgba(34, 197, 94, 0.12) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
  color: #22c55e !important;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.08) !important;
}
#subscriber-cockpit-root .cc-work-count-completed span {
  color: #22c55e !important;
  font-size: 0.9rem !important;
  font-weight: 900 !important;
}
#subscriber-cockpit-root .cc-work-count-completed small {
  color: rgba(34, 197, 94, 0.8) !important;
  font-size: 0.65rem !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Light theme overrides */
body.subscriber-logged-in #subscriber-cockpit-root .cc-work-count-open {
  background: rgba(254, 243, 199, 0.8) !important; /* amber-100 */
  border-color: rgba(252, 211, 77, 0.8) !important; /* amber-300 */
  color: #d97706 !important; /* amber-600 */
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.12) !important;
}
body.subscriber-logged-in #subscriber-cockpit-root .cc-work-count-open span,
body.subscriber-logged-in #subscriber-cockpit-root .cc-work-count-open small {
  color: #d97706 !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .cc-work-count-completed {
  background: rgba(220, 252, 231, 0.8) !important; /* green-100 */
  border-color: rgba(134, 239, 172, 0.8) !important; /* green-300 */
  color: #16a34a !important; /* green-600 */
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.12) !important;
}
body.subscriber-logged-in #subscriber-cockpit-root .cc-work-count-completed span,
body.subscriber-logged-in #subscriber-cockpit-root .cc-work-count-completed small {
  color: #16a34a !important;
}


/* RestoUp Style Instant Tooltip */
[data-cc-tooltip] {
  position: relative;
}
[data-cc-tooltip]::before,
[data-cc-tooltip]::after {
  display: none !important;
  content: none !important;
}

/* Center work-count pill text */
body.subscriber-logged-in #subscriber-cockpit-root .cc-work-count {
  align-items: center !important;
  justify-content: center !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .cc-work-count>div:last-child {
  display: flex !important;
  align-items: center !important;
  transform: translateY(1px) !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .cc-work-count strong,
body.subscriber-logged-in #subscriber-cockpit-root .cc-work-count small {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* Header brief ticker */
body.subscriber-logged-in #subscriber-cockpit-root .cc-tool-header {
  position: relative !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .cc-brief-ticker {
  position: absolute;
  left: calc(50% - 90px);
  top: 50%;
  width: min(560px, 37vw);
  height: 44px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(245, 158, 11, 0.12);
  border-radius: 14px;
  background: rgba(61, 44, 27, 0.72) !important;
  background-color: rgba(61, 44, 27, 0.72) !important;
  background-image: none !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

body.subscriber-logged-in #subscriber-cockpit-root .cc-work-counts {
  position: relative !important;
  z-index: 4 !important;
}

html body.subscriber-logged-in #subscriber-cockpit-root#subscriber-cockpit-root#subscriber-cockpit-root .cc-tool-header>div.cc-brief-ticker {
  background: rgba(61, 44, 27, 0.72) !important;
  background-color: rgba(61, 44, 27, 0.72) !important;
  background-image: none !important;
}

body.subscriber-logged-in #subscriber-cockpit-root .cc-brief-ticker::before {
  content: none;
}

body.subscriber-logged-in #subscriber-cockpit-root .cc-brief-ticker__item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 18px;
  opacity: 0;
  transform: translateY(8px);
  animation: ccBriefItem 240s ease-in-out infinite;
  animation-delay: calc(var(--brief-index) * 20s);
  z-index: 1;
}

body.subscriber-logged-in #subscriber-cockpit-root .cc-brief-ticker strong {
  color: #fff4e6;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

body.subscriber-logged-in #subscriber-cockpit-root .cc-brief-ticker small {
  color: rgba(255, 241, 222, 0.72);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

@keyframes ccBriefItem {
  0%, 8.1% {
    opacity: 1;
    transform: translateY(0);
  }
  8.5%, 100% {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@media (max-width: 1180px) {
  body.subscriber-logged-in #subscriber-cockpit-root .cc-brief-ticker {
    display: none;
  }
}

/* Admin subscriber detail v10: final compact input guard */
#panel-subscriber-detail .subscriber-dossier-form-grid,
#panel-subscriber-detail .subscriber-simple-section .subscriber-dossier-form-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 280px)) !important;
  justify-content: start !important;
  align-items: start !important;
}

#panel-subscriber-detail .subscriber-dossier-field {
  width: 100% !important;
  max-width: 280px !important;
}

#panel-subscriber-detail .subscriber-dossier-field.wide {
  grid-column: span 2 !important;
  max-width: 560px !important;
}

#panel-subscriber-detail input:not([type="hidden"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]),
#panel-subscriber-detail select {
  width: min(100%, 280px) !important;
  max-width: 280px !important;
}

#panel-subscriber-detail textarea {
  width: min(100%, 560px) !important;
  max-width: 560px !important;
}

#panel-subscriber-detail .subscriber-inline-control,
#panel-subscriber-detail .subscriber-account-password-field>div {
  width: min(100%, 340px) !important;
  max-width: 340px !important;
}

#panel-subscriber-detail .subscriber-inline-control input,
#panel-subscriber-detail .subscriber-account-password-field input {
  width: 100% !important;
  max-width: none !important;
}

#panel-subscriber-detail .subscriber-dossier-drive-list {
  grid-template-columns: repeat(auto-fit, minmax(250px, 340px)) !important;
  justify-content: start !important;
}

#panel-subscriber-detail .subscriber-account-rows {
  grid-template-columns: repeat(auto-fit, minmax(340px, 560px)) !important;
  justify-content: start !important;
}

@media (max-width: 760px) {
  #panel-subscriber-detail .subscriber-dossier-form-grid,
  #panel-subscriber-detail .subscriber-simple-section .subscriber-dossier-form-grid,
  #panel-subscriber-detail .subscriber-dossier-drive-list,
  #panel-subscriber-detail .subscriber-account-rows {
    grid-template-columns: 1fr !important;
  }

  #panel-subscriber-detail .subscriber-dossier-field,
  #panel-subscriber-detail .subscriber-dossier-field.wide,
  #panel-subscriber-detail input:not([type="hidden"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]),
  #panel-subscriber-detail select,
  #panel-subscriber-detail textarea,
  #panel-subscriber-detail .subscriber-inline-control,
  #panel-subscriber-detail .subscriber-account-password-field>div {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Admin subscriber detail v11: flatter sections, no full-row nested cards */
#panel-subscriber-detail .subscriber-personal-workspace {
  display: grid !important;
  justify-content: start !important;
}

#panel-subscriber-detail .subscriber-personal-workspace .subscriber-dossier-workspace,
#panel-subscriber-detail .subscriber-personal-workspace .subscriber-detail-card {
  width: min(100%, 1180px) !important;
  max-width: 1180px !important;
  background: #0f0f0f !important;
}

#panel-subscriber-detail .subscriber-personal-overview {
  grid-template-columns: repeat(auto-fit, minmax(320px, 520px)) !important;
  justify-content: start !important;
}

#panel-subscriber-detail .subscriber-personal-overview .subscriber-detail-card {
  max-width: 520px !important;
}

#panel-subscriber-detail .subscriber-detail-info-grid {
  grid-template-columns: repeat(2, minmax(130px, 1fr)) !important;
}

#panel-subscriber-detail .subscriber-detail-info-grid>div,
#panel-subscriber-detail .subscriber-detail-list-item,
#panel-subscriber-detail .subscriber-detail-request-card,
#panel-subscriber-detail .subscriber-detail-note,
#panel-subscriber-detail .subscriber-dossier-empty,
#panel-subscriber-detail .subscriber-detail-empty {
  border-color: rgba(255, 255, 255, 0.07) !important;
  background: transparent !important;
  box-shadow: none !important;
}

#panel-subscriber-detail .subscriber-detail-info-grid>div {
  border-left: 2px solid rgba(255, 107, 0, 0.28) !important;
  border-radius: 0 !important;
  padding: 8px 0 8px 12px !important;
}

#panel-subscriber-detail .subscriber-account-section {
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 14px 0 0 !important;
}

#panel-subscriber-detail .subscriber-account-section:first-of-type {
  border-top: 0 !important;
  padding-top: 0 !important;
}

#panel-subscriber-detail .subscriber-account-section-head {
  max-width: 560px !important;
}

#panel-subscriber-detail .subscriber-account-rows {
  grid-template-columns: repeat(auto-fit, minmax(340px, 480px)) !important;
  gap: 10px !important;
}

#panel-subscriber-detail .subscriber-account-row {
  max-width: 480px !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
  box-shadow: none !important;
}

#panel-subscriber-detail .subscriber-dossier-drive-list {
  grid-template-columns: repeat(auto-fit, minmax(250px, 300px)) !important;
}

#panel-subscriber-detail .subscriber-dossier-drive-row {
  max-width: 300px !important;
  min-height: 0 !important;
  border: 0 !important;
  border-left: 2px solid rgba(255, 107, 0, 0.28) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 6px 0 6px 12px !important;
}

#panel-subscriber-detail .subscriber-detail-list,
#panel-subscriber-detail .subscriber-personal-chip-list {
  max-width: 760px !important;
}

@media (max-width: 760px) {
  #panel-subscriber-detail .subscriber-personal-workspace .subscriber-dossier-workspace,
  #panel-subscriber-detail .subscriber-personal-workspace .subscriber-detail-card,
  #panel-subscriber-detail .subscriber-personal-overview .subscriber-detail-card,
  #panel-subscriber-detail .subscriber-account-row,
  #panel-subscriber-detail .subscriber-dossier-drive-row,
  #panel-subscriber-detail .subscriber-account-section-head,
  #panel-subscriber-detail .subscriber-detail-list,
  #panel-subscriber-detail .subscriber-personal-chip-list {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Admin subscriber detail v12: balanced compact surfaces */
#panel-subscriber-detail .subscriber-personal-workspace {
  display: block !important;
}

#panel-subscriber-detail .subscriber-personal-overview {
  width: min(100%, 1080px) !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 520px)) !important;
}

#panel-subscriber-detail .subscriber-accounts-workspace,
#panel-subscriber-detail .subscriber-dossier-workspace:has(.subscriber-dossier-drive-list) {
  width: min(100%, 1020px) !important;
  max-width: 1020px !important;
}

#panel-subscriber-detail .subscriber-dossier-workspace:has(.subscriber-dossier-form-grid) {
  width: min(100%, 900px) !important;
  max-width: 900px !important;
}

#panel-subscriber-detail .subscriber-account-row {
  max-width: 480px !important;
  border: 0 !important;
  border-left: 2px solid rgba(255, 107, 0, 0.28) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 8px 0 10px 12px !important;
}

#panel-subscriber-detail .subscriber-account-rows {
  grid-template-columns: repeat(auto-fit, minmax(340px, 480px)) !important;
}

#panel-subscriber-detail .subscriber-dossier-drive-list {
  grid-template-columns: repeat(auto-fit, minmax(250px, 300px)) !important;
}

@media (max-width: 760px) {
  #panel-subscriber-detail .subscriber-personal-overview,
  #panel-subscriber-detail .subscriber-accounts-workspace,
  #panel-subscriber-detail .subscriber-dossier-workspace:has(.subscriber-dossier-drive-list),
  #panel-subscriber-detail .subscriber-dossier-workspace:has(.subscriber-dossier-form-grid) {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Admin subscriber detail v13: override older broad workspace widths */
#panel-subscriber-detail .subscriber-personal-workspace .subscriber-accounts-workspace {
  width: min(100%, 1020px) !important;
  max-width: 1020px !important;
}

#panel-subscriber-detail .subscriber-personal-requests {
  display: grid !important;
  grid-template-columns: minmax(320px, 900px) !important;
  justify-content: start !important;
  gap: 12px !important;
}

#panel-subscriber-detail .subscriber-personal-requests .subscriber-dossier-workspace {
  width: min(100%, 900px) !important;
  max-width: 900px !important;
}

#panel-subscriber-detail .subscriber-personal-requests .subscriber-detail-card {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
}

@media (max-width: 760px) {
  #panel-subscriber-detail .subscriber-personal-workspace .subscriber-accounts-workspace,
  #panel-subscriber-detail .subscriber-personal-requests,
  #panel-subscriber-detail .subscriber-personal-requests .subscriber-dossier-workspace,
  #panel-subscriber-detail .subscriber-personal-requests .subscriber-detail-card {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Admin subscriber detail v14: use the canvas without stretching controls */
#panel-subscriber-detail .subscriber-personal-root {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

#panel-subscriber-detail .subscriber-personal-workspace {
  width: 100% !important;
  margin: 0 !important;
  padding: 8px !important;
  display: block !important;
}

#panel-subscriber-detail .subscriber-personal-workspace .subscriber-dossier-workspace,
#panel-subscriber-detail .subscriber-personal-workspace .subscriber-detail-card,
#panel-subscriber-detail .subscriber-personal-workspace .subscriber-accounts-workspace {
  width: 100% !important;
  max-width: none !important;
}

#panel-subscriber-detail .subscriber-personal-overview {
  width: 100% !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#panel-subscriber-detail .subscriber-personal-overview .subscriber-detail-card {
  max-width: none !important;
}

#panel-subscriber-detail .subscriber-account-rows {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#panel-subscriber-detail .subscriber-account-row {
  max-width: none !important;
}

#panel-subscriber-detail .subscriber-dossier-drive-list {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#panel-subscriber-detail .subscriber-dossier-drive-row {
  max-width: none !important;
}

#panel-subscriber-detail .subscriber-dossier-form-grid {
  grid-template-columns: repeat(4, minmax(210px, 280px)) !important;
  gap: 10px 12px !important;
}

#panel-subscriber-detail .subscriber-personal-requests {
  width: 100% !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.85fr) !important;
  align-items: start !important;
}

#panel-subscriber-detail .subscriber-personal-requests .subscriber-dossier-workspace,
#panel-subscriber-detail .subscriber-personal-requests .subscriber-detail-card {
  width: 100% !important;
  max-width: none !important;
}

@media (max-width: 1180px) {
  #panel-subscriber-detail .subscriber-personal-overview,
  #panel-subscriber-detail .subscriber-account-rows,
  #panel-subscriber-detail .subscriber-dossier-drive-list,
  #panel-subscriber-detail .subscriber-personal-requests {
    grid-template-columns: 1fr !important;
  }

  #panel-subscriber-detail .subscriber-dossier-form-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 280px)) !important;
  }
}

/* Admin subscriber detail v15: compact every detail form control */
#panel-subscriber-detail .subscriber-personal-hero-line span {
  max-width: 340px !important;
  min-width: 0 !important;
}

#panel-subscriber-detail .subscriber-personal-hero-line strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#panel-subscriber-detail .subscriber-dossier-form-grid,
#panel-subscriber-detail .subscriber-simple-section .subscriber-dossier-form-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 280px)) !important;
  justify-content: start !important;
  align-items: start !important;
}

#panel-subscriber-detail .subscriber-dossier-field {
  width: min(100%, 280px) !important;
  max-width: 280px !important;
  justify-self: start !important;
}

#panel-subscriber-detail .subscriber-dossier-field.wide {
  grid-column: span 2 !important;
  width: min(100%, 520px) !important;
  max-width: 520px !important;
}

#panel-subscriber-detail input:not([type="hidden"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]),
#panel-subscriber-detail select {
  width: 100% !important;
  max-width: 280px !important;
  min-width: 0 !important;
}

#panel-subscriber-detail textarea {
  width: 100% !important;
  max-width: 520px !important;
  min-width: 0 !important;
}

#panel-subscriber-detail .subscriber-dossier-field input,
#panel-subscriber-detail .subscriber-dossier-field select,
#panel-subscriber-detail .subscriber-dossier-field textarea {
  max-width: 100% !important;
}

#panel-subscriber-detail .subscriber-inline-control,
#panel-subscriber-detail .subscriber-account-password-field>div {
  width: min(100%, 300px) !important;
  max-width: 300px !important;
  justify-self: start !important;
}

#panel-subscriber-detail .subscriber-inline-control input,
#panel-subscriber-detail .subscriber-account-password-field input {
  width: 100% !important;
  max-width: none !important;
}

#panel-subscriber-detail .subscriber-account-rows {
  grid-template-columns: repeat(auto-fit, minmax(340px, 620px)) !important;
  justify-content: start !important;
  align-items: start !important;
}

#panel-subscriber-detail .subscriber-account-row {
  max-width: 620px !important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 280px)) !important;
  justify-content: start !important;
}

#panel-subscriber-detail .subscriber-account-row-title,
#panel-subscriber-detail .subscriber-account-row .subscriber-detail-small-action.danger {
  grid-column: 1 / -1 !important;
}

#panel-subscriber-detail .subscriber-dossier-drive-list {
  grid-template-columns: repeat(auto-fit, minmax(240px, 320px)) !important;
  justify-content: start !important;
}

#panel-subscriber-detail .subscriber-dossier-drive-row {
  max-width: 320px !important;
}

#panel-subscriber-detail .subscriber-dossier-drive-row .subscriber-inline-control {
  width: min(100%, 280px) !important;
  max-width: 280px !important;
}

#panel-subscriber-detail .subscriber-personal-requests {
  grid-template-columns: minmax(0, 680px) minmax(280px, 420px) !important;
  justify-content: start !important;
}

#panel-subscriber-detail .subscriber-personal-requests .subscriber-dossier-workspace {
  max-width: 680px !important;
}

#panel-subscriber-detail .subscriber-personal-requests .subscriber-detail-card {
  max-width: 420px !important;
}

#panel-subscriber-detail .subscriber-dossier-field>span,
#panel-subscriber-detail .subscriber-dossier-drive-row label strong {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

#panel-subscriber-detail .subscriber-dossier-field>span::before,
#panel-subscriber-detail .subscriber-dossier-drive-row label strong::before {
  content: "i";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 1px solid rgba(255, 107, 0, 0.55);
  border-radius: 5px;
  background: rgba(255, 107, 0, 0.16);
  color: #ffd7ba;
  font-family: "Outfit", "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  text-transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#panel-subscriber-detail [data-field-icon="T"]>span::before,
#panel-subscriber-detail label[data-field-icon="T"] strong::before { content: "T"; }

#panel-subscriber-detail [data-field-icon="@"]>span::before,
#panel-subscriber-detail label[data-field-icon="@"] strong::before { content: "@"; }

#panel-subscriber-detail [data-field-icon="*"]>span::before,
#panel-subscriber-detail label[data-field-icon="*"] strong::before { content: "*"; }

#panel-subscriber-detail [data-field-icon=">"]>span::before,
#panel-subscriber-detail label[data-field-icon=">"] strong::before { content: ">"; }

#panel-subscriber-detail [data-field-icon="A"]>span::before,
#panel-subscriber-detail label[data-field-icon="A"] strong::before { content: "A"; }

#panel-subscriber-detail [data-field-icon="#"]>span::before,
#panel-subscriber-detail label[data-field-icon="#"] strong::before { content: "#"; }

#panel-subscriber-detail [data-field-icon="N"]>span::before,
#panel-subscriber-detail label[data-field-icon="N"] strong::before { content: "N"; }

#panel-subscriber-detail [data-field-icon="!"]>span::before,
#panel-subscriber-detail label[data-field-icon="!"] strong::before { content: "!"; }

#panel-subscriber-detail [data-field-icon="I"]>span::before,
#panel-subscriber-detail label[data-field-icon="I"] strong::before { content: "I"; }

#panel-subscriber-detail [data-field-icon="C"]>span::before,
#panel-subscriber-detail label[data-field-icon="C"] strong::before { content: "C"; }

#panel-subscriber-detail [data-field-icon="H"]>span::before,
#panel-subscriber-detail label[data-field-icon="H"] strong::before { content: "H"; }

#panel-subscriber-detail [data-field-icon="M"]>span::before,
#panel-subscriber-detail label[data-field-icon="M"] strong::before { content: "M"; }

#panel-subscriber-detail [data-field-icon="$"]>span::before,
#panel-subscriber-detail label[data-field-icon="$"] strong::before { content: "$"; }

#panel-subscriber-detail [data-field-icon="B"]>span::before,
#panel-subscriber-detail label[data-field-icon="B"] strong::before { content: "B"; }

#panel-subscriber-detail [data-field-icon="K"]>span::before,
#panel-subscriber-detail label[data-field-icon="K"] strong::before { content: "K"; }

#panel-subscriber-detail [data-field-icon="i"]>span::before,
#panel-subscriber-detail label[data-field-icon="i"] strong::before { content: "i"; }

@media (max-width: 760px) {
  #panel-subscriber-detail .subscriber-dossier-form-grid,
  #panel-subscriber-detail .subscriber-simple-section .subscriber-dossier-form-grid,
  #panel-subscriber-detail .subscriber-account-rows,
  #panel-subscriber-detail .subscriber-account-row,
  #panel-subscriber-detail .subscriber-dossier-drive-list,
  #panel-subscriber-detail .subscriber-personal-requests {
    grid-template-columns: 1fr !important;
  }

  #panel-subscriber-detail .subscriber-dossier-field,
  #panel-subscriber-detail .subscriber-dossier-field.wide,
  #panel-subscriber-detail .subscriber-inline-control,
  #panel-subscriber-detail .subscriber-account-password-field>div,
  #panel-subscriber-detail input:not([type="hidden"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]),
  #panel-subscriber-detail select,
  #panel-subscriber-detail textarea,
  #panel-subscriber-detail .subscriber-account-row,
  #panel-subscriber-detail .subscriber-dossier-drive-row,
  #panel-subscriber-detail .subscriber-personal-requests .subscriber-dossier-workspace,
  #panel-subscriber-detail .subscriber-personal-requests .subscriber-detail-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  #panel-subscriber-detail .subscriber-dossier-field.wide {
    grid-column: auto !important;
  }
}

/* Admin subscriber detail v18: clean top command header */
#panel-subscriber-detail .subscriber-personal-sticky {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid rgba(255, 107, 0, 0.1) !important;
  border-radius: 0 0 14px 14px !important;
  background: linear-gradient(135deg, #13110f, #0a0908) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
  margin-bottom: 16px !important;
}

#panel-subscriber-detail .subscriber-personal-sticky.success {
  border-left: 3px solid #16a34a !important;
}

#panel-subscriber-detail .subscriber-personal-sticky.warning {
  border-left: 3px solid #ff6b00 !important;
}

#panel-subscriber-detail .subscriber-personal-sticky.danger {
  border-left: 3px solid #e11d6b !important;
}

#panel-subscriber-detail .subscriber-personal-hero,
#panel-subscriber-detail .subscriber-personal-navline,
#panel-subscriber-detail .subscriber-personal-brand-strip,
#panel-subscriber-detail .subscriber-personal-toolbar {
  width: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#panel-subscriber-detail .subscriber-personal-hero {
  display: grid !important;
  grid-template-columns: minmax(300px, 1fr) auto !important;
  gap: 14px !important;
  align-items: center !important;
  min-height: 52px !important;
}

#panel-subscriber-detail .subscriber-personal-hero-main {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
}

#panel-subscriber-detail .subscriber-detail-back-inline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  background: #111 !important;
  color: #f8fafc !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
}

#panel-subscriber-detail .subscriber-personal-hero-main > div > span:first-child {
  display: block !important;
  color: #9ca3af !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

#panel-subscriber-detail .subscriber-personal-hero-main h2 {
  margin: 1px 0 2px !important;
  max-width: 360px !important;
  overflow: hidden !important;
  color: #fff !important;
  font-size: 1.16rem !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#panel-subscriber-detail .subscriber-personal-hero-main p {
  max-width: 620px !important;
  overflow: hidden !important;
  color: #a1a1aa !important;
  font-size: 0.78rem !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#panel-subscriber-detail .subscriber-personal-hero-line {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

#panel-subscriber-detail .subscriber-personal-hero-line span {
  min-height: 28px !important;
  max-width: 210px !important;
  padding: 5px 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px !important;
  background: #111 !important;
  color: #9ca3af !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
}

#panel-subscriber-detail .subscriber-personal-hero-line strong {
  color: #fff !important;
  font-size: 0.78rem !important;
}

#panel-subscriber-detail .subscriber-personal-hero-line small {
  margin-left: 0 !important;
  color: #8b8b92 !important;
  font-size: 0.62rem !important;
}

#panel-subscriber-detail .subscriber-personal-navline {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 16px 24px 0 !important;
}

#panel-subscriber-detail .subscriber-personal-brand-strip {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

#panel-subscriber-detail .subscriber-dossier-rail-head {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

#panel-subscriber-detail .subscriber-dossier-rail-head span {
  display: none !important;
}

#panel-subscriber-detail .subscriber-dossier-rail-head strong {
  display: inline-flex !important;
  align-items: center !important;
  height: 32px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: #a1a1aa !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

#panel-subscriber-detail .subscriber-dossier-add-brand {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 16px !important;
  border: none !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #ff7a1f, #e65c00) !important;
  color: #fff !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(255, 107, 0, 0.25) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#panel-subscriber-detail .subscriber-dossier-add-brand:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(255, 107, 0, 0.35) !important;
}

#panel-subscriber-detail .subscriber-dossier-brand-tabs {
  flex: 0 0 auto !important;
  display: flex !important;
  gap: 4px !important;
  padding: 4px !important;
  border-radius: 8px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
}

#panel-subscriber-detail .subscriber-dossier-brand-tabs button {
  min-height: 24px !important;
  padding: 0 12px !important;
  border: none !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #71717a !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#panel-subscriber-detail .subscriber-dossier-brand-tabs button:hover {
  color: #d4d4d8 !important;
}

#panel-subscriber-detail .subscriber-dossier-brand-tabs button.active {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

#panel-subscriber-detail .subscriber-personal-brand-list {
  display: flex !important;
  flex: 1 1 auto !important;
  gap: 8px !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  padding-bottom: 4px !important;
}

#panel-subscriber-detail .subscriber-personal-brand-list::-webkit-scrollbar {
  display: none !important;
}

#panel-subscriber-detail .subscriber-personal-brand-strip .subscriber-dossier-brand-option {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 104px !important;
  max-width: 160px !important;
  height: 32px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#panel-subscriber-detail .subscriber-personal-brand-strip .subscriber-dossier-brand-option:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

#panel-subscriber-detail .subscriber-personal-brand-strip .subscriber-dossier-brand-option.active {
  border-color: rgba(255, 107, 0, 0.4) !important;
  background: rgba(255, 107, 0, 0.08) !important;
}

#panel-subscriber-detail .subscriber-personal-brand-strip .subscriber-dossier-brand-option strong {
  overflow: hidden !important;
  color: #a1a1aa !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  transition: color 0.2s ease !important;
}

#panel-subscriber-detail .subscriber-personal-brand-strip .subscriber-dossier-brand-option:hover strong {
  color: #f8fafc !important;
}

#panel-subscriber-detail .subscriber-personal-brand-strip .subscriber-dossier-brand-option.active strong {
  color: #ff6b00 !important;
}

/* Redesigned bottom nav tabs */
#panel-subscriber-detail .subscriber-personal-tabs {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 24px !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

#panel-subscriber-detail .subscriber-personal-tabs::-webkit-scrollbar {
  display: none !important;
}

#panel-subscriber-detail .subscriber-personal-tabs button {
  flex: 0 0 auto !important;
  height: 40px !important;
  padding: 0 4px !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #71717a !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  top: 1px !important; /* Overlap the border-bottom */
}

#panel-subscriber-detail .subscriber-personal-tabs button:hover {
  color: #d4d4d8 !important;
}

#panel-subscriber-detail .subscriber-personal-tabs button.active {
  color: #ff6b00 !important;
  border-bottom-color: #ff6b00 !important;
}

@media (max-width: 1180px) {
  #panel-subscriber-detail .subscriber-personal-hero,
  #panel-subscriber-detail .subscriber-personal-navline {
    grid-template-columns: 1fr !important;
  }

  #panel-subscriber-detail .subscriber-personal-hero-line,
  #panel-subscriber-detail .subscriber-personal-tabs {
    justify-content: flex-start !important;
  }
}

@media (max-width: 760px) {
  #panel-subscriber-detail .subscriber-personal-sticky {
    padding: 8px !important;
  }

  #panel-subscriber-detail .subscriber-personal-brand-strip {
    flex-wrap: wrap !important;
  }

  #panel-subscriber-detail .subscriber-personal-hero-main h2,
  #panel-subscriber-detail .subscriber-personal-hero-main p {
    max-width: 100% !important;
  }
}

/* Admin subscriber detail v20: calmer button language */
#panel-subscriber-detail button,
#panel-subscriber-detail .subscriber-detail-small-action,
#panel-subscriber-detail .subscriber-inline-action,
#panel-subscriber-detail .subscriber-account-password-field button {
  box-shadow: none !important;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease !important;
}

#panel-subscriber-detail .subscriber-detail-back-inline {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 7px !important;
  background: transparent !important;
}

#panel-subscriber-detail .subscriber-detail-back-inline:hover {
  border-color: rgba(255, 107, 0, 0.62) !important;
  background: rgba(255, 107, 0, 0.08) !important;
}

#panel-subscriber-detail .subscriber-dossier-add-brand,
#panel-subscriber-detail .subscriber-dossier-primary-action,
#panel-subscriber-detail .subscriber-detail-save-bar button:last-child {
  min-height: 32px !important;
  padding: 0 12px !important;
  border: 1px solid #ff6b00 !important;
  border-radius: 7px !important;
  background: #ff6b00 !important;
  color: #fff !important;
}

#panel-subscriber-detail .subscriber-dossier-brand-tabs {
  height: 30px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 7px !important;
  background: transparent !important;
}

#panel-subscriber-detail .subscriber-dossier-brand-tabs button {
  min-height: 28px !important;
  border-radius: 5px !important;
}

#panel-subscriber-detail .subscriber-dossier-brand-tabs button.active {
  background: #1f1f1f !important;
  color: #fff !important;
}

#panel-subscriber-detail .subscriber-personal-brand-strip .subscriber-dossier-brand-option {
  height: 30px !important;
  min-width: 92px !important;
  border-radius: 7px !important;
  background: transparent !important;
}

#panel-subscriber-detail .subscriber-personal-brand-strip .subscriber-dossier-brand-option.active {
  border-color: #ff6b00 !important;
  background: rgba(255, 107, 0, 0.1) !important;
}

#panel-subscriber-detail .subscriber-personal-tabs {
  gap: 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#panel-subscriber-detail .subscriber-personal-tabs button {
  position: relative !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #a1a1aa !important;
}

#panel-subscriber-detail .subscriber-personal-tabs button::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  bottom: -1px !important;
  left: 0 !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: transparent !important;
}

#panel-subscriber-detail .subscriber-personal-tabs button:hover,
#panel-subscriber-detail .subscriber-personal-tabs button.active {
  color: #fff !important;
}

#panel-subscriber-detail .subscriber-personal-tabs button.active::after {
  background: #ff6b00 !important;
}

#panel-subscriber-detail .subscriber-inline-action,
#panel-subscriber-detail .subscriber-account-password-field button,
#panel-subscriber-detail .subscriber-detail-small-action,
#panel-subscriber-detail .subscriber-detail-save-bar button:first-child {
  min-height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #d4d4d8 !important;
}

#panel-subscriber-detail .subscriber-inline-action:hover,
#panel-subscriber-detail .subscriber-account-password-field button:hover,
#panel-subscriber-detail .subscriber-detail-small-action:hover,
#panel-subscriber-detail .subscriber-detail-save-bar button:first-child:hover {
  border-color: rgba(255, 107, 0, 0.42) !important;
  color: #fff !important;
}

#panel-subscriber-detail .subscriber-detail-small-action.danger {
  border-color: rgba(248, 113, 113, 0.38) !important;
  background: transparent !important;
  color: #fecaca !important;
}

/* ===== Subscriber Detail Hero — Redesign v21 ===== */
#panel-subscriber-detail .subscriber-personal-hero {
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) auto !important;
  gap: 20px !important;
  align-items: center !important;
  padding: 20px 24px 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}

#panel-subscriber-detail .subscriber-personal-hero-main {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

#panel-subscriber-detail .subscriber-detail-back-inline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: #f8fafc !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#panel-subscriber-detail .subscriber-detail-back-inline:hover {
  background: #ff6b00 !important;
  color: #080706 !important;
  border-color: #ff6b00 !important;
  box-shadow: 0 0 12px rgba(255, 107, 0, 0.35) !important;
  transform: translateX(-2px) !important;
}

#panel-subscriber-detail .subscriber-personal-hero-main > div > span:first-child {
  display: block !important;
  color: #ff6b00 !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

#panel-subscriber-detail .subscriber-personal-hero-main h2 {
  margin: 0 0 8px !important;
  color: #f8fafc !important;
  font-size: 1.55rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.015em !important;
  white-space: normal !important;
  overflow: visible !important;
  max-width: none !important;
}

#panel-subscriber-detail .subscriber-personal-hero-main p {
  display: none !important;
}

/* Contact info chips row */
#panel-subscriber-detail .subscriber-hero-contact-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

#panel-subscriber-detail .hero-contact-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 4px 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  color: #a1a1aa !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  transition: all 0.18s ease !important;
  white-space: nowrap !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin-bottom: 0 !important;
}

#panel-subscriber-detail .hero-contact-chip:hover {
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f8fafc !important;
}

#panel-subscriber-detail .hero-contact-chip svg {
  flex: 0 0 auto !important;
  color: #ff6b00 !important;
  opacity: 0.7 !important;
  transition: opacity 0.18s ease !important;
}

#panel-subscriber-detail .hero-contact-chip:hover svg {
  opacity: 1 !important;
}

/* Stat cards in hero line */
#panel-subscriber-detail .subscriber-personal-hero-line {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

#panel-subscriber-detail .subscriber-personal-hero-line span {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-width: 96px !important;
  min-height: auto !important;
  max-width: none !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  color: #8b8b92 !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  line-height: 1.25 !important;
  gap: 4px !important;
  transition: all 0.18s ease !important;
}

#panel-subscriber-detail .subscriber-personal-hero-line span:hover {
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(255, 107, 0, 0.18) !important;
  transform: translateY(-1px) !important;
}

#panel-subscriber-detail .subscriber-personal-hero-line strong {
  display: block !important;
  color: #f8fafc !important;
  font-size: 0.98rem !important;
  font-weight: 800 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.1 !important;
}

#panel-subscriber-detail .subscriber-personal-hero-line small {
  display: block !important;
  margin: 1px 0 0 !important;
  color: #ff6b00 !important;
  font-size: 0.64rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

@media (max-width: 1180px) {
  #panel-subscriber-detail .subscriber-personal-hero {
    grid-template-columns: 1fr !important;
  }

  #panel-subscriber-detail .subscriber-personal-hero-line {
    justify-content: flex-start !important;
  }
}

@media (max-width: 700px) {
  #panel-subscriber-detail .subscriber-personal-hero {
    padding: 16px !important;
    gap: 16px !important;
  }

  #panel-subscriber-detail .subscriber-personal-hero-main {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  #panel-subscriber-detail .subscriber-personal-hero-main h2 {
    font-size: 1.3rem !important;
  }

  #panel-subscriber-detail .hero-contact-chip {
    font-size: 0.7rem !important;
  }

  #panel-subscriber-detail .subscriber-personal-hero-line span {
    min-width: 80px !important;
  }
}

/* ===== Subscription Workspace Redesign v1 ===== */
#panel-subscriber-detail .subscriber-dossier-workspace {
  background: linear-gradient(135deg, rgba(20,20,20,0.8), rgba(10,10,10,0.8)) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  padding: 24px !important;
  margin-top: 24px !important;
}

#panel-subscriber-detail .subscriber-dossier-workspace-head {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-bottom: 16px !important;
  margin-bottom: 20px !important;
}

#panel-subscriber-detail .subscriber-dossier-workspace-head span {
  display: inline-block !important;
  color: #ff6b00 !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 6px !important;
}

#panel-subscriber-detail .subscriber-dossier-workspace-head h3 {
  color: #f8fafc !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  margin: 0 0 6px !important;
}

#panel-subscriber-detail .subscriber-dossier-workspace-head p {
  color: #a1a1aa !important;
  font-size: 0.85rem !important;
  margin: 0 !important;
}

#panel-subscriber-detail .subscriber-dossier-subscription .subscriber-renewal-brand-card {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

#panel-subscriber-detail .subscriber-dossier-subscription .subscriber-renewal-brand-card:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 107, 0, 0.3) !important;
}

#panel-subscriber-detail .subscriber-dossier-subscription .subscriber-renewal-brand-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

#panel-subscriber-detail .subscriber-dossier-subscription .subscriber-renewal-brand-top span {
  display: block !important;
  color: #a1a1aa !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
}

#panel-subscriber-detail .subscriber-dossier-subscription .subscriber-renewal-brand-top h4 {
  color: #fff !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

#panel-subscriber-detail .subscriber-dossier-subscription .subscriber-renewal-brand-top em {
  display: inline-flex !important;
  align-items: center !important;
  height: 24px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: rgba(22, 163, 74, 0.15) !important;
  color: #4ade80 !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  font-style: normal !important;
  border: 1px solid rgba(22, 163, 74, 0.3) !important;
}

#panel-subscriber-detail .subscriber-dossier-subscription .subscriber-renewal-brand-card.warning .subscriber-renewal-brand-top em {
  background: rgba(255, 107, 0, 0.15) !important;
  color: #ff6b00 !important;
  border-color: rgba(255, 107, 0, 0.3) !important;
}

#panel-subscriber-detail .subscriber-dossier-subscription .subscriber-renewal-brand-card.danger .subscriber-renewal-brand-top em {
  background: rgba(225, 29, 107, 0.15) !important;
  color: #fb7185 !important;
  border-color: rgba(225, 29, 107, 0.3) !important;
}

#panel-subscriber-detail .subscriber-dossier-subscription .subscriber-renewal-timeline {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  gap: 8px !important;
  display: flex !important;
  flex-direction: column !important;
}

#panel-subscriber-detail .subscriber-dossier-subscription .subscriber-renewal-timeline-head span {
  color: #71717a !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

#panel-subscriber-detail .subscriber-dossier-subscription .subscriber-renewal-timeline-scale small {
  color: #71717a !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
}

#panel-subscriber-detail .subscriber-dossier-subscription .subscriber-renewal-brand-meta {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 16px !important;
  padding: 16px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
}

#panel-subscriber-detail .subscriber-dossier-subscription .subscriber-renewal-brand-meta div {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

#panel-subscriber-detail .subscriber-dossier-subscription .subscriber-renewal-brand-meta span {
  color: #71717a !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

#panel-subscriber-detail .subscriber-dossier-subscription .subscriber-renewal-brand-meta strong {
  color: #f8fafc !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
}

#panel-subscriber-detail .subscriber-dossier-subscription .subscriber-renewal-brand-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

#panel-subscriber-detail .subscriber-dossier-subscription .subscriber-renewal-brand-footer small {
  color: #a1a1aa !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}

#panel-subscriber-detail .subscriber-dossier-subscription .subscriber-renewal-brand-footer button {
  height: 32px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #d4d4d8 !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#panel-subscriber-detail .subscriber-dossier-subscription .subscriber-renewal-brand-footer button:hover {
  background: #fff !important;
  color: #000 !important;
  border-color: #fff !important;
}

/* === Subtask preview pill — overflow fix (MUST stay at bottom to win cascade) === */
#subscriber-cockpit-root .customer-task-card {
  overflow: visible !important;
}
#subscriber-cockpit-root .customer-task-card.is-queued {
  overflow: hidden !important;
}
#subscriber-cockpit-root .customer-task-card .customer-task-toggle {
  overflow: visible !important;
}

/* Task detail left panel v23 final guard: no inner scroll in detail/subtasks */
body.subscriber-logged-in .customer-task-modal:not(.customer-request-modal-container) .customer-task-modal-dialog {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

body.subscriber-logged-in .customer-task-modal:not(.customer-request-modal-container) .customer-task-modal-content,
body.subscriber-logged-in .customer-task-modal:not(.customer-request-modal-container) .customer-task-body,
body.subscriber-logged-in .customer-task-modal:not(.customer-request-modal-container) .customer-task-split-left,
body.subscriber-logged-in .customer-task-modal:not(.customer-request-modal-container) .premium-creation-details,
body.subscriber-logged-in .customer-task-modal:not(.customer-request-modal-container) .customer-task-subtasks,
body.subscriber-logged-in .customer-task-modal:not(.customer-request-modal-container) .customer-task-attachments-section {
  overflow: visible !important;
  max-height: none !important;
  min-height: auto !important;
  height: auto !important;
  flex: none !important;
}

body.subscriber-logged-in .customer-task-modal:not(.customer-request-modal-container) .customer-task-modal-split {
  height: auto !important;
  min-height: auto !important;
  align-items: start !important;
}

body.subscriber-logged-in .customer-task-modal:not(.customer-request-modal-container) .customer-detail-metrics {
  flex-wrap: nowrap !important;
  overflow: visible !important;
  gap: 4px !important;
  padding: 1px 1px 2px 1px !important;
  box-sizing: border-box !important;
}

body.subscriber-logged-in .customer-task-modal:not(.customer-request-modal-container) .customer-detail-metrics > div,
body.subscriber-logged-in .customer-task-modal:not(.customer-request-modal-container) .customer-detail-metrics .customer-completion-time-tile {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

body.subscriber-logged-in .customer-task-modal:not(.customer-request-modal-container) .customer-task-subtasks li span {
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}


/* modal-scroll-lock-v26 final guard */
html.customer-task-modal-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  inset: 0 !important;
}

body.customer-task-modal-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
  position: fixed !important;
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}

body.customer-task-modal-open .main-content,
body.customer-task-modal-open #dashboard-wrapper,
body.customer-task-modal-open #subscriber-cockpit-root,
body.customer-task-modal-open main,
body.customer-task-modal-open .cc-card__body--scroll,
body.customer-task-modal-open .customer-notifications-minimalist-list {
  overflow: hidden !important;
  overflow-y: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

body.customer-task-modal-open .customer-task-modal:not([hidden]) {
  overflow-y: auto !important;
  touch-action: auto !important;
}

body.customer-task-modal-open .customer-task-modal-backdrop {
  pointer-events: none !important;
}

body.customer-task-modal-open .customer-task-modal-dialog,
body.customer-task-modal-open .customer-task-modal-dialog * {
  touch-action: auto !important;
}

/* quota-dots-only-v2: request form quota shows dots without text */
.customer-request-modal-container #customer-request-brand-quota,
#customer-request-modal #customer-request-brand-quota {
  font-size: 0 !important;
  line-height: 0 !important;
}

.customer-request-modal-container #customer-request-brand-quota > span,
.customer-request-modal-container #customer-request-brand-quota > [data-cc-tooltip],
#customer-request-modal #customer-request-brand-quota > span,
#customer-request-modal #customer-request-brand-quota > [data-cc-tooltip] {
  display: none !important;
}

.customer-request-modal-container #customer-request-brand-quota .customer-request-quota-dots,
#customer-request-modal #customer-request-brand-quota .customer-request-quota-dots {
  font-size: initial;
  line-height: initial;
}

/* timeline-author-weight-v2: subscriber names stay regular weight */
body.subscriber-logged-in .customer-task-modal-dialog .customer-task-event .customer-task-event-author,
.customer-task-event .customer-task-event-author {
  font-weight: 400 !important;
  font-size: 0.84rem !important;
  color: #5f6f7a !important;
}

/* talep-detay-border-v13: restore detail card + metric tile borders in subscriber modal */
body.subscriber-logged-in .customer-task-modal-dialog .premium-creation-details {
  border: 2px solid rgba(235, 94, 40, 0.34) !important;
  box-shadow: 0 4px 15px rgba(235, 94, 40, 0.08) !important;
}

body.subscriber-logged-in .customer-task-modal-dialog .premium-creation-details > div:first-of-type {
  border-bottom: 2px solid rgba(235, 94, 40, 0.22) !important;
}

body.subscriber-logged-in .customer-task-modal-dialog .customer-detail-metric-tile,
body.subscriber-logged-in .customer-task-modal-dialog .customer-detail-metrics .customer-completion-time-tile {
  border: 2px solid rgba(235, 94, 40, 0.32) !important;
  background: rgba(255, 255, 255, 0.82) !important;
}

body.subscriber-logged-in .customer-task-modal-dialog .customer-detail-metric-tile.is-accent {
  border: 2px solid rgba(235, 94, 40, 0.38) !important;
  background: rgba(235, 94, 40, 0.1) !important;
}

/* talep-detay-border-v14: prevent metric/card border clipping + nudge timeline right */
body.subscriber-logged-in .customer-task-modal-dialog .customer-task-split-left {
  overflow: visible !important;
  padding-right: 3px !important;
  box-sizing: border-box !important;
}

body.subscriber-logged-in .customer-task-modal-dialog .premium-creation-details {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

body.subscriber-logged-in .customer-task-modal-dialog .customer-detail-metrics {
  overflow: visible !important;
  padding: 1px 1px 2px 1px !important;
  box-sizing: border-box !important;
}

/* talep-popup-border-v18: black frame on task detail modal (matches header) */
body.subscriber-logged-in .customer-task-modal:not(.customer-request-modal-container) .customer-task-modal-dialog {
  border: 2px solid #0a0a0c !important;
  box-shadow: 0 24px 70px rgba(10, 10, 12, 0.22) !important;
}

/* cockpit-no-hscroll-v19: remove slight horizontal scroll on subscriber cockpit */
html:has(body.subscriber-logged-in),
body.subscriber-logged-in {
  overflow-x: clip !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-width: 100% !important;
}

body.subscriber-logged-in .main-content,
body.subscriber-logged-in main:has(#subscriber-cockpit-root),
body.subscriber-logged-in #subscriber-cockpit-root,
body.subscriber-logged-in #subscriber-cockpit-root .cc-dash,
body.subscriber-logged-in #subscriber-cockpit-root .cc-bento {
  overflow-x: clip !important;
  overflow-y: visible !important;
  max-width: 100% !important;
}

body.subscriber-logged-in #subscriber-cockpit-root {
  width: 100% !important;
  left: auto !important;
  margin-left: 0 !important;
}

/* subscriber-cost-tools-v1: ten calculators in the existing cost modal */
body.subscriber-logged-in .ys-cost-tool-dialog {
  width: min(1120px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 32px) !important;
  padding: 22px !important;
}

body.subscriber-logged-in #ys-cost-tool-body {
  max-height: none;
  overflow: hidden;
  overscroll-behavior: contain;
  padding-right: 2px;
}

body.subscriber-cost-tools-active #live-chat-widget {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.ys-tool-tabs {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  overflow: visible;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(23, 32, 51, 0.1);
  background: #fff;
  scrollbar-width: thin;
}

.ys-tool-tabs button {
  min-width: 0;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid rgba(23, 32, 51, 0.12);
  border-radius: 999px;
  background: #f8fafc;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 850;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.ys-tool-tabs button:hover {
  border-color: rgba(245, 158, 11, 0.42);
  color: #9a5200;
}

.ys-tool-tabs button.active {
  border-color: #f59e0b;
  background: #fff7e6;
  color: #9a5200;
  box-shadow: 0 5px 16px rgba(245, 158, 11, 0.12);
}

.ys-cost-section-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 14px;
}

.ys-cost-section-content {
  min-width: 0;
}

/* Keep the combined cost calculator fully visible without an inner scroll. */
body.subscriber-logged-in .ys-cost-tool-modal {
  align-items: center !important;
  overflow: hidden !important;
  padding: 14px !important;
}

body.subscriber-logged-in .ys-cost-tool-dialog {
  height: min(calc(100vh - 28px), 900px) !important;
  max-height: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

body.subscriber-logged-in .ys-cost-tool-dialog header {
  flex: 0 0 auto !important;
}

body.subscriber-logged-in #ys-cost-tool-body {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  padding-right: 0 !important;
}

.ys-cost-section-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.ys-cost-section-content.is-other {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.ys-cost-section-content.is-legacy > .ys-legacy-cost-layout {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.ys-legacy-cost-layout .ys-input-panel {
  min-height: 0;
  gap: 8px;
}

.ys-legacy-cost-layout .ys-cost-mode-toggle {
  flex: 0 0 auto;
  margin-bottom: 0 !important;
}

.ys-legacy-cost-layout .ys-input-panel section {
  min-height: 0;
  padding: 10px;
}

.ys-legacy-cost-layout .ys-input-panel h4 {
  margin-bottom: 7px;
  font-size: 0.7rem;
}

.ys-legacy-cost-layout .ys-cost-grid {
  gap: 8px;
}

.ys-legacy-cost-layout .ys-cost-grid label {
  gap: 4px;
  font-size: 0.68rem;
}

.ys-legacy-cost-layout .ys-cost-grid input,
.ys-legacy-cost-layout .ys-cost-grid select {
  min-height: 34px;
  padding: 6px 9px;
  font-size: 0.76rem;
}

.ys-legacy-cost-layout #ys-cost-tool-result {
  min-height: 0;
  overflow: hidden;
}

.ys-tool-tabs {
  position: static;
  flex: 0 0 auto;
}

.ys-tool-heading {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(320px, 1.3fr);
  gap: 18px;
  align-items: end;
  padding: 18px 4px 14px;
}

.ys-tool-heading span {
  display: block;
  margin-bottom: 3px;
  color: #d97706;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.ys-tool-heading h4 {
  margin: 0;
  color: #172033;
  font-size: 1.15rem;
  font-weight: 900;
}

.ys-tool-heading p {
  margin: 0;
  color: #64748b;
  font-size: 0.82rem;
  line-height: 1.5;
}

body.subscriber-logged-in .ys-cost-layout {
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
}

body.subscriber-logged-in .ys-input-panel section {
  border: 1px solid rgba(23, 32, 51, 0.1) !important;
  border-radius: 16px;
  background: #f8fafc !important;
  padding: 16px;
}

.ys-tool-field {
  display: flex !important;
  flex-direction: column;
  gap: 7px !important;
  color: #475569 !important;
  font-size: 0.74rem !important;
  font-weight: 850 !important;
}

.ys-tool-number {
  position: relative;
  display: block;
}

body.subscriber-logged-in .ys-tool-field input[type="number"],
body.subscriber-logged-in .ys-tool-field select {
  min-height: 44px;
  padding: 9px 48px 9px 11px !important;
  border-radius: 11px !important;
  background: #fff !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
}

body.subscriber-logged-in .ys-tool-field select {
  padding-right: 30px !important;
}

.ys-tool-number i {
  position: absolute;
  top: 50%;
  right: 11px;
  transform: translateY(-50%);
  color: #d97706;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 900;
  pointer-events: none;
}

.ys-health-field > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ys-health-field > span b {
  color: #d97706;
  font-size: 0.72rem;
}

body.subscriber-logged-in .ys-health-field input[type="range"] {
  width: 100%;
  height: 6px !important;
  min-height: 6px !important;
  padding: 0 !important;
  border: 0 !important;
  accent-color: #f59e0b;
  background: rgba(23, 32, 51, 0.12) !important;
}

.ys-tool-result-card {
  overflow: hidden;
  border: 1px solid rgba(23, 32, 51, 0.12);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(23, 32, 51, 0.08);
}

.ys-tool-result-hero {
  padding: 18px;
  border-bottom: 1px solid rgba(23, 32, 51, 0.08);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(255, 255, 255, 0.98));
}

.ys-tool-result-hero.is-negative {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.11), rgba(255, 255, 255, 0.98));
}

.ys-tool-result-hero span,
.ys-tool-result-hero small {
  display: block;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 850;
}

.ys-tool-result-hero strong {
  display: block;
  margin: 5px 0 3px;
  color: #16a34a !important;
  font-size: 1.7rem;
  font-weight: 950;
  letter-spacing: -0.03em;
}

.ys-tool-result-hero.is-negative strong {
  color: #dc2626 !important;
}

.ys-tool-result-metrics {
  display: grid;
  gap: 0;
  padding: 7px 14px;
}

.ys-tool-result-metrics > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  border-bottom: 1px solid rgba(23, 32, 51, 0.08);
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 750;
}

.ys-tool-result-metrics > div:last-child {
  border-bottom: 0;
}

.ys-tool-result-metrics b {
  color: #172033 !important;
  text-align: right;
  font-size: 0.78rem;
  font-weight: 900;
}

.ys-health-priorities {
  margin: 0 14px 10px;
  padding: 11px 12px;
  border-radius: 11px;
  background: #fff7e6;
}

.ys-health-priorities > span {
  color: #9a5200;
  font-size: 0.7rem;
  font-weight: 900;
}

.ys-health-priorities ul {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.ys-health-priorities li {
  padding: 5px 7px;
  border: 1px solid rgba(217, 119, 6, 0.16);
  border-radius: 999px;
  background: #fff;
  color: #7c4a03;
  font-size: 0.64rem;
  font-weight: 800;
}

.ys-tool-disclaimer {
  margin: 0;
  padding: 10px 14px 13px;
  color: #94a3b8;
  font-size: 0.65rem;
  line-height: 1.4;
}

@media (max-width: 760px) {
  .ys-cost-tool-modal {
    padding: 10px;
  }

  body.subscriber-logged-in .ys-cost-tool-dialog {
    width: calc(100vw - 20px) !important;
    height: calc(100vh - 20px) !important;
    max-height: none !important;
    padding: 16px !important;
    border-radius: 20px !important;
  }

  body.subscriber-logged-in .ys-cost-tool-dialog header {
    margin: -18px -18px 14px -18px !important;
    width: calc(100% + 36px) !important;
    padding: 18px !important;
    border-radius: 20px 20px 0 0 !important;
  }

  body.subscriber-logged-in #ys-cost-tool-body {
    max-height: none !important;
    overflow: hidden !important;
  }

  .ys-tool-tabs {
    display: flex;
    overflow-x: auto;
    margin-right: -2px;
  }

  .ys-tool-tabs button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 10px;
    font-size: 0.68rem;
  }

  .ys-tool-heading {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 2px 12px;
  }

  body.subscriber-logged-in .ys-cost-layout,
  .ys-cost-layout {
    grid-template-columns: 1fr;
  }

  .ys-cost-grid,
  .ys-cost-grid.is-health-grid {
    grid-template-columns: 1fr;
  }
}

/* Subscriber mobile app shell v1 */
.cc-mobile-topbar,
.cc-mobile-nav {
  display: none;
}

@media (max-width: 767px) {
  html:has(body.subscriber-logged-in),
  body.subscriber-logged-in {
    min-height: 100% !important;
    background: #f6f3ea !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.subscriber-logged-in .main-content,
  body.subscriber-logged-in .panels-wrapper,
  body.subscriber-logged-in #panel-subscriber-dashboard,
  body.subscriber-logged-in #subscriber-cockpit-root {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: clip !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-dash {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100dvh !important;
    box-sizing: border-box !important;
    padding: max(12px, env(safe-area-inset-top)) 12px calc(124px + env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-orb,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-desktop-header,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-desktop-account-actions {
    display: none !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-topbar {
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
    margin-bottom: 16px !important;
    padding: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg, #171b24 0%, #10131a 100%) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    color: #f8fafc !important;
  }

  .cc-mobile-topbar-row,
  .cc-mobile-brand,
  .cc-mobile-summary {
    display: flex !important;
    align-items: center !important;
  }

  .cc-mobile-topbar-row {
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .cc-mobile-brand {
    min-width: 0 !important;
    gap: 10px !important;
  }

  .cc-mobile-brand img {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    border-radius: 12px !important;
    object-fit: contain !important;
  }

  .cc-mobile-brand > div {
    display: grid !important;
    min-width: 0 !important;
    gap: 3px !important;
  }

  .cc-mobile-eyebrow {
    color: #a7b0c0 !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }

  .cc-mobile-brand strong {
    overflow-wrap: anywhere !important;
    color: #ffffff !important;
    font-family: Outfit, Inter, sans-serif !important;
    font-size: clamp(1rem, 4.5vw, 1.25rem) !important;
    line-height: 1.15 !important;
  }

  .cc-mobile-icon-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 107, 0, 0.32) !important;
    border-radius: 13px !important;
    background: rgba(255, 107, 0, 0.1) !important;
    color: #ff8a3d !important;
  }

  .cc-mobile-icon-button svg,
  .cc-mobile-nav svg {
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .cc-mobile-summary {
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 16px !important;
  }

  .cc-mobile-summary > span {
    min-height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    max-width: 100% !important;
    padding: 6px 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.045) !important;
    color: #b6c0cf !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    overflow-wrap: anywhere !important;
  }

  .cc-mobile-summary .cc-mobile-status {
    border-color: rgba(34, 197, 94, 0.3) !important;
    color: #8af0b1 !important;
  }

  .cc-mobile-status i {
    width: 7px !important;
    height: 7px !important;
    margin-right: 6px !important;
    border-radius: 50% !important;
    background: #22c55e !important;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12) !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-bento {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body.subscriber-logged-in #subscriber-cockpit-root#subscriber-cockpit-root .cc-bento > .cc-card,
  html body.subscriber-logged-in #subscriber-cockpit-root#subscriber-cockpit-root .cc-bento > .cc-right-stack {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    align-self: stretch !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    background: #131720 !important;
    background-image: none !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22) !important;
    color: #f8fafc !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-card__head {
    min-width: 0 !important;
    padding: 16px 16px 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-card__title,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-card__sub {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-card__title {
    color: #f8fafc !important;
    font-size: 1rem !important;
    line-height: 1.25 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-card__sub {
    color: #8f9bad !important;
    font-size: 0.74rem !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-card__body,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-card__body--scroll {
    width: 100% !important;
    max-height: none !important;
    min-width: 0 !important;
    padding: 12px 16px 16px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .customer-task-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .customer-task-card,
  body.subscriber-logged-in #subscriber-cockpit-root .customer-task-card * {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .customer-task-card {
    width: 100% !important;
    border-radius: 16px !important;
    background: #1a202b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root #sub-cockpit-automations > div,
  body.subscriber-logged-in #subscriber-cockpit-root .customer-shortcut-tool,
  body.subscriber-logged-in #subscriber-cockpit-root #customer-files .customer-file-link,
  body.subscriber-logged-in #subscriber-cockpit-root #customer-files .customer-file-card {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    background: #1a202b !important;
    background-image: none !important;
    box-shadow: none !important;
    animation: none !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-work-calendar-button,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-btn,
  body.subscriber-logged-in #subscriber-cockpit-root button,
  body.subscriber-logged-in #subscriber-cockpit-root a {
    min-height: 44px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-work-calendar-button {
    margin-top: 12px !important;
    border: 1px solid rgba(255, 107, 0, 0.32) !important;
    border-radius: 16px !important;
    background: rgba(255, 107, 0, 0.1) !important;
    color: #ffd7bd !important;
    box-shadow: none !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-work-calendar-button:hover {
    transform: none !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-nav {
    position: fixed !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    left: 10px !important;
    z-index: 2147481000 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    min-height: 66px !important;
    padding: 7px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 22px !important;
    background: rgba(15, 18, 25, 0.96) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(18px) !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-nav button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 6px 2px !important;
    border: 0 !important;
    border-radius: 15px !important;
    background: transparent !important;
    color: #8792a4 !important;
    font-size: 0.63rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-nav button.is-active {
    background: rgba(255, 107, 0, 0.16) !important;
    color: #ff9a55 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-nav button:focus-visible,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-icon-button:focus-visible,
  body.subscriber-logged-in #subscriber-cockpit-root button:focus-visible,
  body.subscriber-logged-in #subscriber-cockpit-root a:focus-visible {
    outline: 3px solid rgba(255, 154, 85, 0.85) !important;
    outline-offset: 2px !important;
  }

  body.subscriber-logged-in #live-chat-widget {
    right: 12px !important;
    bottom: calc(86px + env(safe-area-inset-bottom)) !important;
    left: 12px !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    align-items: stretch !important;
  }

  body.subscriber-logged-in #live-chat-widget .live-chat-launcher {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    border-radius: 17px !important;
  }

  body.subscriber-logged-in #live-chat-widget .live-chat-pro-panel {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(70dvh, 560px) !important;
  }

  body.subscriber-logged-in .customer-task-modal,
  body.subscriber-logged-in .customer-work-calendar-modal,
  body.subscriber-logged-in .ys-cost-tool-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  body.subscriber-logged-in .customer-task-modal-dialog,
  body.subscriber-logged-in .customer-work-calendar-dialog,
  body.subscriber-logged-in .ys-cost-tool-dialog {
    width: 100% !important;
    max-width: 100% !important;
    height: min(92dvh, 760px) !important;
    max-height: calc(100dvh - env(safe-area-inset-top)) !important;
    margin: 0 !important;
    border-radius: 24px 24px 0 0 !important;
  }

  body.subscriber-logged-in #sub-fixed-support {
    display: none !important;
  }

  #cc-mobile-home,
  #cc-mobile-tasks,
  #cc-mobile-files {
    scroll-margin-top: 16px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body.subscriber-logged-in .main-content,
  body.subscriber-logged-in #subscriber-cockpit-root {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-bento {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-card--tasks,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-right-stack {
    min-width: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.subscriber-logged-in::before,
  body.subscriber-logged-in #subscriber-cockpit-root *,
  body.subscriber-logged-in #live-chat-widget * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Mobile request studio v2: one draft flow, explicit review context, no nested scroll. */
#customer-ai-request-modal .customer-ai-draft-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: auto;
  padding: 16px 0 0;
  border-top: 1px solid #eadfce;
}

#customer-ai-request-modal .customer-ai-draft-action,
#customer-ai-request-modal .customer-ai-create-selected-btn,
#customer-ai-request-modal .customer-ai-draft-touch-action {
  min-height: 44px;
  box-sizing: border-box;
}

#customer-ai-request-modal .customer-ai-draft-action {
  padding: 0 15px;
  border: 1px solid #ded5c9;
  border-radius: 12px;
  background: #fff;
  color: #48566c;
  font: 800 0.76rem/1.1 Inter, system-ui, sans-serif;
  cursor: pointer;
}

#customer-ai-request-modal .customer-ai-draft-action--secondary {
  color: #b45309;
  border-color: #f2c58d;
  background: #fff8ed;
}

#customer-ai-request-modal .customer-ai-create-selected-btn {
  padding: 0 18px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(105deg, #ff9f1c, #f25c12);
  color: #fff;
  font: 850 0.78rem/1.15 Inter, system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(242, 92, 18, 0.18);
}

#customer-ai-request-modal .customer-ai-create-selected-btn:disabled,
#customer-ai-request-modal .customer-ai-draft-action:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

#customer-ai-request-modal .customer-ai-draft-plan {
  display: grid;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #eee6dc;
}

#customer-ai-request-modal .customer-ai-draft-plan__label {
  display: block;
  margin-bottom: 5px;
  color: #8b98aa;
  font-size: 0.61rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#customer-ai-request-modal .customer-ai-draft-plan p,
#customer-ai-request-modal .customer-ai-draft-plan ul {
  margin: 0;
  color: #435168;
  font-size: 0.74rem;
  line-height: 1.45;
}

#customer-ai-request-modal .customer-ai-draft-plan ul {
  display: grid;
  gap: 5px;
  padding-left: 17px;
}

#customer-ai-request-modal .customer-ai-draft-plan li {
  overflow-wrap: anywhere;
}

#customer-ai-request-modal .customer-ai-draft-review {
  display: grid;
  gap: 3px;
  padding: 10px 11px;
  border: 1px solid #f5c48b;
  border-left: 3px solid #f97316;
  border-radius: 11px;
  background: #fff8ed;
  color: #8a4318;
  font-size: 0.72rem;
  line-height: 1.42;
}

#customer-ai-request-modal .customer-ai-draft-review strong {
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  #customer-ai-request-modal.cai-drafts-mode .customer-ai-studio-dialog {
    height: min(900px, calc(100dvh - 8px)) !important;
    max-height: calc(100dvh - 8px) !important;
  }

  #customer-ai-request-modal.cai-drafts-mode .customer-ai-studio-grid {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
  }

  #customer-ai-request-modal.cai-drafts-mode .customer-ai-context-panel,
  #customer-ai-request-modal.cai-drafts-mode .customer-ai-drafts-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #customer-ai-request-modal.cai-drafts-mode .customer-ai-context-panel {
    flex: 0 0 auto !important;
    padding: 16px !important;
    border-bottom: 1px solid #eadfce !important;
  }

  #customer-ai-request-modal.cai-drafts-mode .customer-ai-drafts-panel {
    padding: 16px !important;
  }

  #customer-ai-request-modal.cai-drafts-mode .customer-ai-drafts-scroll {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 0 0 4px !important;
  }

  #customer-ai-request-modal.cai-drafts-mode .customer-ai-draft-card {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
    padding: 16px !important;
    gap: 12px !important;
    cursor: default !important;
  }

  #customer-ai-request-modal.cai-drafts-mode .customer-ai-draft-card textarea {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  #customer-ai-request-modal.cai-drafts-mode .customer-ai-draft-touch-action {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    top: 10px !important;
    right: 10px !important;
    border-radius: 12px !important;
  }

  #customer-ai-request-modal.cai-drafts-mode .customer-ai-draft-card > div[style*="position:absolute"] span {
    max-width: calc(100% - 32px) !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
  }

  #customer-ai-request-modal.cai-drafts-mode .customer-ai-draft-plan {
    gap: 14px !important;
    padding-top: 14px !important;
  }

  #customer-ai-request-modal.cai-drafts-mode .customer-ai-draft-footer {
    position: sticky;
    bottom: 0;
    z-index: 12;
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 8px;
    margin: 4px -16px calc(-16px - env(safe-area-inset-bottom));
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 250, 242, 0.96);
    box-shadow: 0 -10px 24px rgba(23, 32, 51, 0.08);
    backdrop-filter: blur(12px);
  }

  #customer-ai-request-modal.cai-drafts-mode .customer-ai-draft-footer .customer-ai-create-selected-btn {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 52px;
  }

  #customer-ai-request-modal.cai-drafts-mode .customer-ai-draft-footer .customer-ai-draft-action,
  #customer-ai-request-modal.cai-drafts-mode .customer-ai-draft-footer .customer-ai-create-selected-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #customer-ai-request-modal .customer-ai-draft-footer,
  #customer-ai-request-modal .customer-ai-draft-footer * {
    transition: none !important;
  }
}

/* Subscriber responsive workspaces: light, page-based mobile/tablet surface */
@media (max-width: 1839px) {
  html:has(body.subscriber-logged-in),
  body.subscriber-logged-in {
    --cc-shell-bg: #f6f3ea !important;
    min-height: 100% !important;
    background: #f6f3ea !important;
    background-color: #f6f3ea !important;
    background-image: none !important;
    color: #172033 !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.subscriber-logged-in::before {
    display: none !important;
    content: none !important;
    animation: none !important;
  }

  body.subscriber-logged-in .main-content,
  body.subscriber-logged-in #dashboard-wrapper,
  body.subscriber-logged-in .panels-wrapper,
  body.subscriber-logged-in #panel-subscriber-dashboard,
  body.subscriber-logged-in #subscriber-cockpit-root {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    color: #172033 !important;
    background: transparent !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-workspace {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 980px !important;
    min-width: 0 !important;
    min-height: 100dvh !important;
    margin: 0 auto !important;
    padding: max(16px, env(safe-area-inset-top)) 16px calc(116px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
    background: transparent !important;
    color: #172033 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-page,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-section-card,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-account-summary {
    min-width: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(23, 32, 51, 0.12) !important;
    border-radius: 20px !important;
    background: #fffaf0 !important;
    color: #172033 !important;
    box-shadow: 0 10px 26px rgba(23, 32, 51, 0.07) !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px 14px !important;
    padding: 18px !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header__identity,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header__actions,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header__meta,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-section-card__heading,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-calendar-hero {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header__identity {
    gap: 12px !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header__identity img {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    object-fit: contain !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header__identity div {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header__identity span {
    color: #64748b !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header__identity strong {
    color: #172033 !important;
    font-family: Outfit, Inter, sans-serif !important;
    font-size: clamp(1rem, 4vw, 1.25rem) !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header__actions {
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header__meta {
    grid-column: 1 / -1 !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header__meta span,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-count-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 30px !important;
    padding: 5px 10px !important;
    border: 1px solid rgba(23, 32, 51, 0.1) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #526174 !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-status {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 30px !important;
    padding: 5px 10px !important;
    border: 1px solid rgba(21, 128, 61, 0.25) !important;
    border-radius: 999px !important;
    background: #ecfdf5 !important;
    color: #15803d !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-status i {
    width: 7px !important;
    height: 7px !important;
    margin-right: 6px !important;
    border-radius: 50% !important;
    background: #16a34a !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-icon-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 1px solid rgba(180, 83, 9, 0.22) !important;
    border-radius: 13px !important;
    background: #fff4e6 !important;
    color: #b45309 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-icon-button svg,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-primary-action svg,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-secondary-action svg,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-account-summary svg {
    width: 19px !important;
    height: 19px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-page {
    display: grid !important;
    gap: 14px !important;
    padding: 20px !important;
    overflow: visible !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-page-heading {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-kicker {
    display: block !important;
    margin-bottom: 5px !important;
    color: #b45309 !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-page h1 {
    margin: 0 !important;
    color: #172033 !important;
    font-family: Outfit, Inter, sans-serif !important;
    font-size: clamp(1.35rem, 5vw, 1.85rem) !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-page-heading p {
    max-width: 660px !important;
    margin: 7px 0 0 !important;
    color: #657184 !important;
    font-size: 0.83rem !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-section-card {
    padding: 16px !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-primary-action,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-secondary-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 46px !important;
    width: 100% !important;
    padding: 10px 16px !important;
    box-sizing: border-box !important;
    border-radius: 13px !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    cursor: pointer !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-primary-action {
    border: 1px solid #b45309 !important;
    background: #d97706 !important;
    color: #fff !important;
    box-shadow: 0 7px 16px rgba(180, 83, 9, 0.2) !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-secondary-action {
    border: 1px solid rgba(180, 83, 9, 0.25) !important;
    background: #fff4e6 !important;
    color: #9a3412 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-request-card,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-account-card,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-files-card {
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-section-card__heading {
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-section-card__heading h2,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-subsection-heading h2 {
    margin: 0 !important;
    color: #172033 !important;
    font-family: Outfit, Inter, sans-serif !important;
    font-size: 0.98rem !important;
    line-height: 1.2 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-section-card__heading p,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-subsection-heading span {
    margin: 3px 0 0 !important;
    color: #718096 !important;
    font-size: 0.72rem !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-section-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    border: 1px solid rgba(2, 132, 199, 0.2) !important;
    border-radius: 12px !important;
    background: #eff6ff !important;
    color: #0284c7 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-section-icon svg {
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-automation-list {
    display: grid !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-automation-list .customer-recurring-card,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-automation-list .automation-empty {
    min-width: 0 !important;
    border: 1px solid rgba(23, 32, 51, 0.1) !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #172033 !important;
    box-shadow: none !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-automation-list .customer-recurring-card * {
    color: inherit !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-automation-list .customer-recurring-meta,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-automation-list .customer-recurring-remaining {
    color: #667085 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-calendar-hero {
    gap: 12px !important;
    margin-bottom: 14px !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-calendar-hero svg {
    width: 36px !important;
    height: 36px !important;
    padding: 8px !important;
    border-radius: 11px !important;
    background: #fff4e6 !important;
    color: #b45309 !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    box-sizing: border-box !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-calendar-hero div {
    display: grid !important;
    gap: 3px !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-calendar-hero strong {
    color: #172033 !important;
    font-size: 0.9rem !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-calendar-hero span {
    color: #718096 !important;
    font-size: 0.74rem !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .customer-task-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .customer-task-card,
  body.subscriber-logged-in #subscriber-cockpit-root .customer-task-card.is-queued {
    width: 100% !important;
    min-width: 0 !important;
    border: 1px solid rgba(23, 32, 51, 0.12) !important;
    border-left: 4px solid #d97706 !important;
    border-radius: 15px !important;
    background: #fff !important;
    color: #172033 !important;
    box-shadow: 0 4px 12px rgba(23, 32, 51, 0.05) !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .customer-task-card.stage-review {
    border-left-color: #0284c7 !important;
    background: #f0f9ff !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .customer-task-card.stage-work {
    border-left-color: #15803d !important;
    background: #f0fdf4 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .customer-task-card.stage-done {
    border-left-color: #94a3b8 !important;
    background: #f8fafc !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .customer-task-card .customer-task-toggle,
  body.subscriber-logged-in #subscriber-cockpit-root .customer-task-card .customer-task-toggle * {
    min-width: 0 !important;
    max-width: 100% !important;
    color: #172033 !important;
    overflow-wrap: anywhere !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .customer-task-card h3 {
    color: #172033 !important;
    font-size: 0.9rem !important;
    line-height: 1.25 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .customer-task-card small,
  body.subscriber-logged-in #subscriber-cockpit-root .customer-task-card p,
  body.subscriber-logged-in #subscriber-cockpit-root .customer-task-card .customer-task-preview-mid,
  body.subscriber-logged-in #subscriber-cockpit-root .customer-task-card .customer-task-preview-mid * {
    color: #64748b !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .customer-task-card .customer-task-preview-mid strong {
    color: #b45309 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .customer-task-card .customer-task-type-icon {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    background: #eff6ff !important;
    color: #0284c7 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .customer-task-list-more,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-muted,
  body.subscriber-logged-in #subscriber-cockpit-root .customer-empty span {
    color: #718096 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root #customer-files {
    display: grid !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 16px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root #customer-files > div {
    display: grid !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root #customer-files .customer-file-link,
  body.subscriber-logged-in #subscriber-cockpit-root #customer-files .customer-file-card {
    min-width: 0 !important;
    min-height: 54px !important;
    border: 1px solid rgba(23, 32, 51, 0.1) !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #172033 !important;
    box-shadow: none !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root #customer-files .customer-file-link strong,
  body.subscriber-logged-in #subscriber-cockpit-root #customer-files .customer-file-card strong,
  body.subscriber-logged-in #subscriber-cockpit-root #customer-files .customer-file-link strong span,
  body.subscriber-logged-in #subscriber-cockpit-root #customer-files .customer-file-card strong span {
    color: #172033 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root #customer-files .customer-file-link > div > span,
  body.subscriber-logged-in #subscriber-cockpit-root #customer-files .customer-file-card > div > span {
    color: #718096 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .customer-shortcut-tool {
    min-width: 0 !important;
    min-height: 54px !important;
    border: 1px solid rgba(23, 32, 51, 0.1) !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #172033 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-account-summary {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 14px 16px !important;
    text-align: left !important;
    cursor: pointer !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-account-summary > span:nth-child(2) {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
    flex: 1 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-account-summary strong {
    color: #172033 !important;
    font-size: 0.88rem !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-account-summary small {
    color: #718096 !important;
    font-size: 0.72rem !important;
    overflow-wrap: anywhere !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-chevron {
    flex: 0 0 18px !important;
    color: #94a3b8 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-subsection-heading {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 16px 16px 0 !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(23, 32, 51, 0.08) !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-account-card .customer-task-list {
    padding-top: 10px !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-nav.cc-mobile-workspace-nav {
    position: fixed !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    max-width: min(720px, calc(100vw - 20px)) !important;
    margin: 0 auto !important;
    z-index: 2147481000 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    min-height: 66px !important;
    padding: 7px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(23, 32, 51, 0.14) !important;
    border-radius: 20px !important;
    background: rgba(23, 32, 51, 0.98) !important;
    box-shadow: 0 16px 38px rgba(23, 32, 51, 0.22) !important;
    transform: translateZ(0) !important;
    will-change: transform !important;
    contain: layout style paint !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-nav.cc-mobile-workspace-nav button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 5px 2px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    color: #cbd5e1 !important;
    font-size: 0.63rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-nav.cc-mobile-workspace-nav button.is-active {
    background: #fff4e6 !important;
    color: #b45309 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-nav.cc-mobile-workspace-nav button svg {
    width: 19px !important;
    height: 19px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  body.subscriber-logged-in #live-chat-widget {
    bottom: calc(88px + env(safe-area-inset-bottom)) !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-workspace,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-workspace * {
    overflow-wrap: anywhere !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root button:focus-visible,
  body.subscriber-logged-in #subscriber-cockpit-root a:focus-visible {
    outline: 3px solid rgba(180, 83, 9, 0.65) !important;
    outline-offset: 2px !important;
  }
}

@media (min-width: 768px) and (max-width: 1839px) {
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-workspace {
    padding-right: 24px !important;
    padding-left: 24px !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-page--files #customer-files > div,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-page--account .customer-shortcut-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1840px) {
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-workspace {
    display: none !important;
  }
}

@media (max-width: 360px) {
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header__actions {
    grid-row: 1 !important;
    justify-content: flex-end !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header__identity {
    grid-row: 2 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header__meta {
    grid-row: 3 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header__identity strong {
    font-size: 1.08rem !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-count-badge {
    flex: 0 0 auto !important;
    min-width: 56px !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  body.subscriber-logged-in #live-chat-widget {
    right: 12px !important;
    left: auto !important;
    width: 56px !important;
    align-items: flex-end !important;
  }

  body.subscriber-logged-in #live-chat-widget .live-chat-launcher {
    display: inline-flex !important;
    justify-content: center !important;
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 !important;
    border-radius: 16px !important;
  }

  body.subscriber-logged-in #live-chat-widget .live-chat-launcher-copy {
    display: none !important;
  }
}

/* Final mobile card contrast override: legacy recurring/file layers must not win. */
@media (max-width: 1839px) {
  body.subscriber-logged-in #subscriber-cockpit-root #sub-cockpit-automations > div.customer-recurring-card {
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    border: 1px solid rgba(23, 32, 51, 0.12) !important;
    color: #172033 !important;
    opacity: 1 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root #sub-cockpit-automations > div.customer-recurring-card .customer-recurring-title,
  body.subscriber-logged-in #subscriber-cockpit-root #sub-cockpit-automations > div.customer-recurring-card .customer-recurring-title-text,
  body.subscriber-logged-in #subscriber-cockpit-root #sub-cockpit-automations > div.customer-recurring-card .customer-recurring-foot,
  body.subscriber-logged-in #subscriber-cockpit-root #sub-cockpit-automations > div.customer-recurring-card .customer-recurring-remaining,
  body.subscriber-logged-in #subscriber-cockpit-root #sub-cockpit-automations > div.customer-recurring-card .customer-recurring-state {
    color: #172033 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root #sub-cockpit-automations > div.customer-recurring-card .customer-recurring-meta {
    color: #64748b !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-workspace .cc-mobile-automation-list > .customer-recurring-card {
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    border: 1px solid rgba(23, 32, 51, 0.12) !important;
    color: #172033 !important;
    opacity: 1 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-workspace .cc-mobile-automation-list > .customer-recurring-card .customer-recurring-title,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-workspace .cc-mobile-automation-list > .customer-recurring-card .customer-recurring-title-text,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-workspace .cc-mobile-automation-list > .customer-recurring-card .customer-recurring-foot,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-workspace .cc-mobile-automation-list > .customer-recurring-card .customer-recurring-remaining,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-workspace .cc-mobile-automation-list > .customer-recurring-card .customer-recurring-state {
    color: #172033 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-workspace .cc-mobile-automation-list > .customer-recurring-card .customer-recurring-meta {
    color: #64748b !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-workspace .cc-mobile-automation-list > .customer-recurring-card .customer-recurring-icon {
    border-color: rgba(2, 132, 199, 0.2) !important;
    background: #eff6ff !important;
    color: #0284c7 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-workspace #customer-files .customer-file-card.is-disabled {
    background: #fff !important;
    background-image: none !important;
    border-color: rgba(23, 32, 51, 0.12) !important;
    color: #172033 !important;
    opacity: 1 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-workspace #customer-files .customer-file-card.is-disabled strong,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-workspace #customer-files .customer-file-card.is-disabled strong span {
    color: #475569 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-workspace #customer-files .customer-file-card.is-disabled > div > span {
    color: #64748b !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-workspace #customer-files .customer-file-card.is-disabled > span:last-child {
    color: #b45309 !important;
  }
}

@media (max-width: 1839px) {
  body.subscriber-logged-in:has(#customer-work-calendar-modal) #live-chat-widget,
  body.subscriber-logged-in:has(#customer-ai-request-modal) #live-chat-widget,
  body.subscriber-logged-in:has(#customer-card-modal) #live-chat-widget,
  body.subscriber-logged-in:has(.customer-task-modal) #live-chat-widget {
    display: none !important;
  }
}

/* Subscriber mobile visual system: shared account sections, spacing and alignment. */
@media (max-width: 1839px) {
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-account-card {
    padding: 16px !important;
    overflow: visible !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-account-content,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-account-section,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-account-tools,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-activity-list,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-shortcut-list {
    min-width: 0;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-account-content {
    display: grid;
    gap: 16px;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-account-section {
    display: grid;
    gap: 0;
    margin-top: 4px;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-summary {
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(23, 32, 51, 0.1);
    border-radius: 18px;
    background: linear-gradient(145deg, #fffdf8 0%, #fff8ec 100%);
    color: #172033;
    box-shadow: 0 8px 20px rgba(23, 32, 51, 0.05);
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-summary-title {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-summary-title svg {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    fill: none;
    stroke: #64748b;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-summary-title h2 {
    min-width: 0;
    margin: 0;
    color: #172033;
    font: 800 1rem/1.2 Outfit, Inter, sans-serif;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-summary-tabs {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 3px;
    border: 1px solid rgba(23, 32, 51, 0.08);
    border-radius: 11px;
    background: rgba(23, 32, 51, 0.05);
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-summary-tabs button {
    min-width: 50px;
    min-height: 34px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    font: 800 0.68rem/1 Inter, sans-serif;
    cursor: pointer;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-summary-tabs button.is-active {
    background: #fff;
    color: #172033;
    box-shadow: 0 2px 7px rgba(23, 32, 51, 0.08);
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-summary-panel[hidden] {
    display: none !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-stat-card {
    position: relative;
    display: grid;
    align-content: start;
    min-width: 0;
    min-height: 94px;
    padding: 12px;
    overflow: hidden;
    border: 1px solid rgba(23, 32, 51, 0.08);
    border-radius: 13px;
    background: #fff;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-stat-label,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-last-completed small {
    display: block;
    color: #64748b;
    font: 800 0.62rem/1.25 Inter, sans-serif;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-stat-card strong {
    display: block;
    margin-top: 7px;
    color: #172033;
    font: 800 1.35rem/1 Outfit, Inter, sans-serif;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-stat-meta {
    display: block;
    max-width: calc(100% - 28px);
    margin-top: 5px;
    color: #475569;
    font: 700 0.66rem/1.3 Inter, sans-serif;
    overflow-wrap: anywhere;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-summary-sparkline {
    position: absolute;
    right: 11px;
    bottom: 12px;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 21px;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-summary-sparkline i {
    display: block;
    width: 4px;
    height: 7px;
    border-radius: 3px;
    background: #f6bd7a;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-summary-sparkline i:nth-child(2) { height: 11px; }
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-summary-sparkline i:nth-child(3) { height: 8px; }
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-summary-sparkline i:nth-child(4) { height: 15px; }
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-summary-sparkline i:nth-child(5) { height: 10px; }
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-summary-sparkline i:nth-child(6) { height: 18px; }
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-summary-sparkline i:nth-child(7) { height: 12px; }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-summary-sparkline--tone i.is-active {
    background: #eb5e28;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-progress-block {
    display: grid;
    gap: 7px;
    margin-top: 13px;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-progress-label {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #475569;
    font: 800 0.7rem/1.2 Inter, sans-serif;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-progress-label strong {
    color: #d45422;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-progress-track {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #e5e7eb;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-progress-track i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #18a957, #f59e0b);
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-last-completed {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed rgba(23, 32, 51, 0.14);
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-last-completed-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background: #e4f8ef;
    color: #159456;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-last-completed-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-last-completed > span:last-child {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-last-completed strong {
    min-width: 0;
    overflow: hidden;
    color: #172033;
    font: 800 0.78rem/1.25 Outfit, Inter, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-shortcut-list {
    display: grid;
    gap: 10px;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-shortcut-card {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 60px;
    padding: 10px 12px;
    border: 1px solid rgba(23, 32, 51, 0.11);
    border-radius: 14px;
    background: #fff;
    color: #172033;
    text-align: left;
    cursor: pointer;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-shortcut-card--primary {
    border-color: rgba(235, 94, 40, 0.28);
    background: #fff4e6;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-shortcut-card.is-disabled {
    opacity: 0.72;
    cursor: default;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-shortcut-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 1px solid rgba(235, 94, 40, 0.22);
    border-radius: 10px;
    background: #fff;
    color: #eb5e28;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-shortcut-icon svg,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-shortcut-chevron {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-shortcut-copy {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 2px;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-shortcut-copy strong {
    color: #172033;
    font: 800 0.8rem/1.2 Outfit, Inter, sans-serif;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-shortcut-copy small {
    color: #64748b;
    font: 700 0.68rem/1.2 Inter, sans-serif;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-shortcut-chevron {
    flex: 0 0 18px;
    color: #94a3b8;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-activity-list {
    display: grid;
    gap: 0;
    margin-top: 8px;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-activity-item {
    display: grid;
    min-width: 0;
    padding: 12px 0;
    border-top: 1px solid rgba(23, 32, 51, 0.1);
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-activity-item:first-child {
    border-top: 0;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-activity-item.is-clickable {
    cursor: pointer;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-activity-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
    min-width: 0;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-activity-label {
    min-width: 0;
    color: #172033;
    font: 800 0.78rem/1.28 Outfit, Inter, sans-serif;
    overflow-wrap: anywhere;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-activity-time {
    color: #64748b;
    font: 700 0.62rem/1.3 Inter, sans-serif;
    white-space: nowrap;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-activity-summary {
    margin: 5px 0 0;
    color: #64748b;
    font: 650 0.7rem/1.4 Inter, sans-serif;
    overflow-wrap: anywhere;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-activity-author {
    margin-top: 6px;
    color: #475569;
    font: 800 0.66rem/1.2 Outfit, Inter, sans-serif;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-empty {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 12px 0;
    color: #64748b;
    font: 700 0.72rem/1.35 Inter, sans-serif;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-empty svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    fill: none;
    stroke: #94a3b8;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-account-card .customer-task-list {
    padding: 8px 0 0 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-account-card .customer-empty {
    min-height: 0 !important;
    padding: 18px 8px !important;
  }
}

@media (max-width: 359px) {
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-stat-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-summary-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-summary-tabs button,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-shortcut-card {
    transition: none !important;
  }
}

/* Closed support stays a non-blocking FAB; the conversation panel expands when open. */
@media (max-width: 1839px) {
  body.subscriber-logged-in #live-chat-widget {
    right: 12px !important;
    bottom: calc(86px + env(safe-area-inset-bottom)) !important;
    left: auto !important;
    width: 56px !important;
    max-width: 56px !important;
    align-items: flex-end !important;
  }

  body.subscriber-logged-in #live-chat-widget .live-chat-launcher {
    display: inline-flex !important;
    justify-content: center !important;
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 !important;
    border-radius: 16px !important;
  }

  body.subscriber-logged-in #live-chat-widget .live-chat-launcher-copy {
    display: none !important;
  }

  body.subscriber-logged-in #live-chat-widget:has(.live-chat-pro-panel) {
    width: min(360px, calc(100vw - 24px)) !important;
    max-width: min(360px, calc(100vw - 24px)) !important;
  }

  body.subscriber-logged-in #live-chat-widget:has(.live-chat-pro-panel) .live-chat-launcher {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
  }

  body.subscriber-logged-in #live-chat-widget:has(.live-chat-pro-panel) .live-chat-launcher-copy {
    display: flex !important;
  }
}

/* Mobile work calendar: app-like full-screen surface with one controlled scroll area. */
body.subscriber-logged-in .customer-work-calendar-dialog--app {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: #fffaf0 !important;
  color: #172033 !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-dialog-header {
  position: relative !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-dialog-scroll {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  scrollbar-gutter: stable !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  line-height: 1 !important;
  font-size: 1.25rem !important;
  border-radius: 12px !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-month-nav button,
body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-today-btn,
body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-brand-filter button,
body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-detail-list > a,
body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-detail-list > button {
  min-height: 44px !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-dialog-scroll,
body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-dialog-scroll * {
  box-sizing: border-box !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

body.subscriber-logged-in:has(#customer-work-calendar-modal) #live-chat-widget {
  display: none !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-kpi-grid {
  flex: 0 0 auto !important;
}

@media (max-width: 1023px) {
  body.subscriber-logged-in .customer-work-calendar-modal {
    align-items: stretch !important;
    justify-content: stretch !important;
    inset: 0 !important;
    padding: 0 !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-dialog-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    grid-template-areas: "copy close" "controls controls" !important;
    gap: 12px !important;
    align-items: start !important;
    padding: max(16px, env(safe-area-inset-top)) 16px 14px !important;
    border-bottom: 1px solid #e8e1d4 !important;
    background: #fffaf0 !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-head-copy {
    grid-area: copy !important;
    padding: 0 !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-close {
    position: static !important;
    grid-area: close !important;
    justify-self: end !important;
    border: 1px solid #dce4ef !important;
    background: #ffffff !important;
    color: #172033 !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-controls {
    grid-area: controls !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-month-nav {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    border: 1px solid #dce4ef !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    overflow: hidden !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-month-nav button,
  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-today-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-month-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    padding: 0 8px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-today-btn {
    padding: 0 12px !important;
    border: 1px solid #dce4ef !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #172033 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-dialog-scroll {
    display: block !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 16px 16px calc(24px + env(safe-area-inset-bottom)) !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-kpi-card {
    width: auto !important;
    min-width: 0 !important;
    min-height: 68px !important;
    padding: 12px !important;
    border-radius: 14px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-kpi-card span,
  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-kpi-card b {
    overflow-wrap: normal !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-summary-line {
    margin: 10px 0 14px !important;
    padding: 0 2px !important;
    text-align: left !important;
    line-height: 1.45 !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-toolbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-legend {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 6px 10px !important;
    min-width: 0 !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-brand-filter {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 2px 2px 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-brand-filter::-webkit-scrollbar {
    display: none !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-brand-filter button {
    flex: 0 0 auto !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    white-space: nowrap !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-body {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-main {
    min-width: 0 !important;
    overflow: visible !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-grid {
    grid-template-rows: 28px repeat(6, minmax(56px, auto)) !important;
    gap: 6px !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-weekday {
    min-width: 0 !important;
    padding: 0 2px !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.04em !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-day {
    min-width: 0 !important;
    min-height: 56px !important;
    height: auto !important;
    padding: 8px 6px !important;
    border-radius: 12px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-day-head,
  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-day-number {
    min-width: 0 !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-day-num {
    font-size: 0.8rem !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-today-pill {
    max-width: 38px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-stack {
    min-height: 12px !important;
    margin-top: 3px !important;
    overflow: hidden !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-chip {
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-chip-text,
  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-more {
    display: none !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-chip-dot {
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    margin: 0 3px 0 0 !important;
    border-radius: 50% !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-day-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 3px !important;
    min-width: 0 !important;
    margin-top: auto !important;
    overflow: hidden !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-day-meta-count span {
    display: none !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-detail {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
    min-width: 0 !important;
    margin: 16px 0 0 !important;
    padding: 16px !important;
    border-radius: 16px !important;
    overflow: visible !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-detail-head,
  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-detail-strip {
    min-width: 0 !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-detail-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    white-space: normal !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-detail-list {
    max-height: 360px !important;
    overflow: auto !important;
    scrollbar-gutter: stable !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-detail-list > * {
    min-height: 44px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-dialog-header,
  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-dialog-scroll {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr) !important;
    gap: 16px !important;
    align-items: start !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--app .customer-work-calendar-detail {
    margin: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.subscriber-logged-in .customer-work-calendar-dialog--app *,
  body.subscriber-logged-in .customer-work-calendar-dialog--app *::before,
  body.subscriber-logged-in .customer-work-calendar-dialog--app *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* Work calendar v2: compact calendar cells, one scroll surface, and a clearer mobile hierarchy. */
body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 {
  width: min(1380px, calc(100vw - 40px)) !important;
  height: min(900px, calc(100dvh - 32px)) !important;
  max-height: calc(100dvh - 32px) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid #eadfce !important;
  border-radius: 20px !important;
  background: #fffaf0 !important;
  color: #172033 !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-dialog-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "copy controls" !important;
  align-items: center !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 20px 24px 16px !important;
  border-bottom: 1px solid #eadfce !important;
  background: #fffaf0 !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-head-copy {
  grid-area: copy !important;
  min-width: 0 !important;
  padding: 0 !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-title {
  font-size: 1.16rem !important;
  line-height: 1.2 !important;
  color: #172033 !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-subtitle {
  margin-top: 5px !important;
  color: #657085 !important;
  font-size: 0.72rem !important;
  line-height: 1.35 !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-controls {
  grid-area: controls !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-close {
  top: 18px !important;
  right: 18px !important;
  z-index: 2 !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border: 1px solid #d9e1ec !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #172033 !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-month-nav {
  display: grid !important;
  grid-template-columns: 44px minmax(112px, 1fr) 44px !important;
  min-width: 204px !important;
  min-height: 44px !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 1px solid #d9e1ec !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-month-nav button,
body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-today-btn,
body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-brand-filter button {
  min-width: 44px !important;
  min-height: 44px !important;
  height: 44px !important;
  touch-action: manipulation !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-month-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  padding: 0 8px !important;
  color: #172033 !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-today-btn {
  padding: 0 13px !important;
  border: 1px solid #f3b26f !important;
  border-radius: 12px !important;
  background: #fff4e7 !important;
  color: #c2410c !important;
  font-size: 0.68rem !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-dialog-scroll {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 20px 24px calc(24px + env(safe-area-inset-bottom)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable !important;
  -webkit-overflow-scrolling: touch !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-kpi-card {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 70px !important;
  padding: 13px 14px !important;
  border: 1px solid #eadfce !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 4px 12px rgba(37, 46, 66, 0.05) !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-kpi-card span,
body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-kpi-card b {
  padding-left: 2px !important;
  overflow-wrap: normal !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-summary-line {
  margin: 12px 2px 14px !important;
  color: #657085 !important;
  font-size: 0.7rem !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-legend {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 7px 12px !important;
  min-width: 0 !important;
  color: #657085 !important;
  font-size: 0.64rem !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-brand-filter {
  display: flex !important;
  flex: 0 1 auto !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  min-width: 0 !important;
  max-width: 52% !important;
  margin: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-brand-filter::-webkit-scrollbar {
  display: none !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-brand-filter button {
  flex: 0 0 auto !important;
  padding: 0 13px !important;
  border: 1px solid #d9e1ec !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #536074 !important;
  font-size: 0.66rem !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-brand-filter button.is-active {
  border-color: #172033 !important;
  background: #172033 !important;
  color: #ffffff !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1.24fr) minmax(340px, 0.76fr) !important;
  gap: 20px !important;
  align-items: start !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-main,
body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-detail {
  min-width: 0 !important;
  min-height: 0 !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-grid-card {
  display: block !important;
  padding: 16px !important;
  border: 1px solid #eadfce !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 5px 18px rgba(37, 46, 66, 0.05) !important;
  overflow: hidden !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-grid {
  grid-template-rows: 24px repeat(6, 72px) !important;
  gap: 8px !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-weekday {
  align-self: center !important;
  padding: 0 !important;
  color: #8792a5 !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.05em !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day {
  height: auto !important;
  min-height: 0 !important;
  padding: 8px 8px 7px !important;
  border: 1px solid #dce4ef !important;
  border-radius: 13px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day:hover {
  border-color: #b8c4d4 !important;
  background: #fffdf9 !important;
  box-shadow: none !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day.is-selected {
  border: 2px solid #ff6b00 !important;
  background: #fff3e5 !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12) !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day-num {
  min-width: 24px !important;
  height: 24px !important;
  padding: 0 5px !important;
  border-radius: 8px !important;
  background: #f2f5f8 !important;
  color: #4b5a70 !important;
  font-size: 0.72rem !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day.is-selected .customer-work-calendar-day-num {
  background: #ff6b00 !important;
  color: #ffffff !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-stack {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 18px !important;
  margin-top: 5px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-chip {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: 8px !important;
  min-width: 8px !important;
  height: 8px !important;
  min-height: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-chip-dot {
  width: 8px !important;
  height: 8px !important;
  min-height: 8px !important;
  margin: 0 !important;
  border-radius: 50% !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-chip-text,
body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-more {
  display: none !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  min-height: 18px !important;
  height: 18px !important;
  margin-top: auto !important;
  padding: 4px 0 0 !important;
  border-top: 1px solid #edf0f4 !important;
  background: transparent !important;
  color: #758197 !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day-meta-count b {
  color: #172033 !important;
  font-size: 0.72rem !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day-meta-count span {
  color: #8792a5 !important;
  font-size: 0.5rem !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day.is-selected .customer-work-calendar-day-meta {
  border-top-color: #f7b77d !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day.is-selected .customer-work-calendar-day-meta-count b,
body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day.is-selected .customer-work-calendar-day-meta-count span {
  color: #c2410c !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-today-pill,
body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-expiry-tag {
  max-width: 38px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-detail {
  height: auto !important;
  max-height: none !important;
  padding: 18px !important;
  border: 1px solid #eadfce !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 5px 18px rgba(37, 46, 66, 0.05) !important;
  overflow: visible !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-detail-list {
  display: flex !important;
  flex: 0 0 auto !important;
  max-height: none !important;
  overflow: visible !important;
  border: 1px solid #e4eaf2 !important;
  border-radius: 14px !important;
  background: #fbfcfe !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-detail-item {
  grid-template-columns: 4px minmax(0, 1fr) auto !important;
  min-height: 60px !important;
  padding: 11px 12px !important;
  background: transparent !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-detail-item.is-clickable:hover {
  background: #f3f7fb !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-detail-title {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  white-space: normal !important;
  overflow: hidden !important;
  font-size: 0.76rem !important;
  line-height: 1.3 !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-detail-meta {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-detail-time {
  align-self: start !important;
  padding-top: 3px !important;
}

body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 :is(button, a):focus-visible {
  outline: 3px solid rgba(255, 107, 0, 0.35) !important;
  outline-offset: 2px !important;
}

@media (max-width: 1023px) {
  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 {
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
}

@media (max-width: 767px) {
  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-dialog-header {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    grid-template-areas: "copy close" "controls controls" !important;
    gap: 12px !important;
    padding: max(14px, env(safe-area-inset-top)) 16px 12px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-title {
    font-size: 1rem !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-subtitle {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
    overflow: hidden !important;
    margin-top: 4px !important;
    font-size: 0.64rem !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-close {
    position: static !important;
    grid-area: close !important;
    justify-self: end !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-controls {
    grid-area: controls !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    width: 100% !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-month-nav {
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-dialog-scroll {
    padding: 14px 16px calc(24px + env(safe-area-inset-bottom)) !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-kpi-card {
    min-height: 60px !important;
    padding: 11px 12px !important;
    border-radius: 13px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-kpi-card span {
    font-size: 0.58rem !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-kpi-card b {
    font-size: 1rem !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-summary-line {
    margin: 10px 2px 12px !important;
    font-size: 0.65rem !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-toolbar {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 9px !important;
    margin-bottom: 13px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-legend {
    gap: 5px 10px !important;
    font-size: 0.58rem !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-brand-filter {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 2px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-body {
    display: block !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-grid-card {
    padding: 10px !important;
    border-radius: 16px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-grid {
    grid-template-rows: 22px repeat(6, 58px) !important;
    gap: 6px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day {
    padding: 4px 5px 3px !important;
    border-radius: 11px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day-head {
    height: 20px !important;
    min-height: 20px !important;
    margin-bottom: 1px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day-num {
    width: 26px !important;
    min-width: 26px !important;
    flex: 0 0 26px !important;
    height: 20px !important;
    padding: 0 4px !important;
    font-size: 0.68rem !important;
    white-space: nowrap !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-stack {
    min-height: 8px !important;
    margin-top: 1px !important;
    gap: 2px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-chip,
  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-chip-dot {
    width: 6px !important;
    min-width: 6px !important;
    height: 6px !important;
    min-height: 6px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day-meta {
    min-height: 12px !important;
    height: 12px !important;
    padding-top: 1px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day-meta-count b {
    font-size: 0.62rem !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day-meta-count span {
    display: none !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day-meta {
    justify-content: flex-start !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day-meta-dots {
    display: none !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-today-pill,
  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-expiry-tag {
    width: 7px !important;
    max-width: 7px !important;
    height: 7px !important;
    min-height: 7px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #ff6b00 !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-expiry-tag {
    background: #e11d48 !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-detail {
    margin-top: 14px !important;
    padding: 14px !important;
    border-radius: 16px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-detail-head {
    margin-bottom: 10px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-detail-strip {
    gap: 6px !important;
    margin-bottom: 10px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-detail-metric {
    padding: 8px 5px !important;
    border-radius: 11px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-detail-summary {
    font-size: 0.62rem !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-detail-list {
    overflow: visible !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-detail-item {
    min-height: 58px !important;
    padding: 10px 9px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-detail-status {
    margin-bottom: 2px !important;
    font-size: 0.5rem !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-detail-title {
    font-size: 0.72rem !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-detail-meta {
    font-size: 0.56rem !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-detail-time {
    min-width: 36px !important;
    font-size: 0.58rem !important;
  }
}

@media (max-width: 359px) {
  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-dialog-scroll {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-grid-card {
    padding: 8px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-grid {
    grid-template-rows: 20px repeat(6, 54px) !important;
    gap: 5px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day-num {
    width: 24px !important;
    min-width: 24px !important;
    flex-basis: 24px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-dialog-header,
  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-dialog-scroll {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-grid {
    grid-template-rows: 22px repeat(6, 62px) !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-detail {
    padding: 16px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) and (max-height: 700px) {
  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-body {
    display: block !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-detail {
    margin-top: 16px !important;
  }
}

@media (min-width: 768px) {
  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-dialog-header {
    padding-right: 82px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-controls {
    justify-self: end !important;
    max-width: 100% !important;
  }
}

/* Desktop calendar: lock the composition to the viewport instead of scrolling the modal. */
@media (min-width: 1024px) {
  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    width: min(1380px, calc(100vw - 48px)) !important;
    height: min(900px, calc(100dvh - 28px)) !important;
    max-height: calc(100dvh - 28px) !important;
    overflow: hidden !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-dialog-header {
    min-height: 78px !important;
    padding: 18px 24px 14px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-dialog-scroll {
    display: grid !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    gap: 0 !important;
    min-height: 0 !important;
    padding: 16px 24px 20px !important;
    overflow: hidden !important;
    scrollbar-gutter: auto !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-kpi-card {
    min-height: 62px !important;
    padding: 11px 14px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-summary-line {
    margin: 8px 2px 10px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-toolbar {
    margin-bottom: 12px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-body {
    height: 100% !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-main,
  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-detail {
    height: 100% !important;
    min-height: 0 !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-grid-card {
    height: 100% !important;
    min-height: 0 !important;
    padding: 16px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-grid {
    height: 100% !important;
    grid-template-rows: 26px repeat(6, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day {
    min-height: 0 !important;
    padding: 7px 8px 6px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-detail {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 16px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-detail-list {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-detail-item {
    min-height: 0 !important;
    padding: 8px 10px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-dialog-scroll {
    overflow: hidden !important;
    scrollbar-gutter: auto !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-grid-card {
    padding: 16px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-grid {
    grid-template-rows: 26px repeat(6, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day {
    min-height: 0 !important;
    padding: 7px 8px 6px !important;
  }
}

@media (min-width: 1024px) and (max-height: 780px) {
  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-dialog-header {
    min-height: 68px !important;
    padding-top: 12px !important;
    padding-bottom: 10px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-dialog-scroll {
    padding-top: 12px !important;
    padding-bottom: 14px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-kpi-card {
    min-height: 54px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-grid-card,
  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-detail {
    padding: 12px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-grid {
    grid-template-rows: 22px repeat(6, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2,
  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* Mobile request studio v3: the modal owns one touch-scroll surface; actions stay in flow. */
@media (max-width: 767px) {
  #customer-ai-request-modal {
    inset: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: env(safe-area-inset-top) 0 0 !important;
    overflow: hidden !important;
  }

  #customer-ai-request-modal .customer-ai-studio-dialog {
    width: 100% !important;
    max-width: none !important;
    height: calc(100dvh - env(safe-area-inset-top)) !important;
    max-height: calc(100dvh - env(safe-area-inset-top)) !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    overflow: hidden !important;
  }

  #customer-ai-request-modal .customer-ai-request-modal-content {
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    scrollbar-gutter: stable !important;
  }

  #customer-ai-request-modal .customer-ai-studio-form,
  #customer-ai-request-modal.cai-drafts-mode .customer-ai-studio-grid {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
  }

  #customer-ai-request-modal.cai-drafts-mode .customer-ai-draft-footer {
    position: static !important;
    bottom: auto !important;
    margin: 16px 0 0 !important;
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom)) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
}

/* Desktop calendar task chips: compact, complete rows instead of clipped multi-line labels. */
@media (min-width: 1024px) {
  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day {
    padding: 6px 8px 5px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day-head {
    min-height: 16px !important;
    height: 16px !important;
    margin-bottom: 2px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day-num {
    min-width: 17px !important;
    height: 17px !important;
    font-size: 0.6rem !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-stack {
    gap: 2px !important;
    margin-top: 0 !important;
    overflow: hidden !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-chip {
    display: grid !important;
    grid-template-columns: 3px minmax(0, 1fr) !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 17px !important;
    min-height: 17px !important;
    padding: 1px 5px !important;
    gap: 5px !important;
    border: 1px solid #bae6fd !important;
    border-left-width: 3px !important;
    border-radius: 6px !important;
    background: #f0f9ff !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    font-size: 0.58rem !important;
    line-height: 1.1 !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-chip.created {
    border-color: #fed7aa !important;
    border-left-color: #d97706 !important;
    background: #fff7ed !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-chip.completed {
    border-color: #bbf7d0 !important;
    border-left-color: #059669 !important;
    background: #f0fdf4 !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-chip-dot {
    width: 3px !important;
    height: 7px !important;
    min-height: 7px !important;
    border-radius: 999px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-chip-text {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-more {
    display: block !important;
    height: 11px !important;
    padding: 1px 0 0 !important;
    color: #64748b !important;
    font-size: 0.52rem !important;
    line-height: 1 !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day-meta {
    min-height: 13px !important;
    height: 13px !important;
    padding-top: 2px !important;
    font-size: 0.48rem !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day-meta-count b {
    font-size: 0.62rem !important;
  }
}

/* Mobile subscriber masthead: a quieter, premium account header instead of stacked pills. */
@media (max-width: 767px) {
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px 14px !important;
    padding: 18px !important;
    overflow: hidden !important;
    border: 1px solid rgba(23, 32, 51, 0.12) !important;
    border-radius: 20px !important;
    background: #fffaf0 !important;
    box-shadow: 0 10px 26px rgba(23, 32, 51, 0.07) !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header::after {
    display: none !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header__identity,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header__actions,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header__meta {
    position: relative !important;
    z-index: 1 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header__identity {
    gap: 12px !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header__identity img {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-wordmark {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    min-width: 72px !important;
    color: #172033 !important;
    font-family: Outfit, Inter, sans-serif !important;
    font-size: 1.08rem !important;
    font-weight: 850 !important;
    letter-spacing: -0.07em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-wordmark::after {
    display: none !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header__identity span {
    color: #64748b !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.08em !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header__identity strong {
    color: #172033 !important;
    font-size: clamp(1rem, 4vw, 1.25rem) !important;
    line-height: 1.06 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header__actions {
    align-self: start !important;
    gap: 10px !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-status {
    min-height: 30px !important;
    padding: 5px 10px !important;
    border: 1px solid rgba(21, 128, 61, 0.25) !important;
    background: #ecfdf5 !important;
    color: #15803d !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-status i {
    width: 7px !important;
    height: 7px !important;
    margin-right: 6px !important;
    background: #16a34a !important;
    box-shadow: none !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-icon-button {
    border: 1px solid rgba(180, 83, 9, 0.22) !important;
    border-radius: 13px !important;
    background: #fff4e6 !important;
    color: #b45309 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header__meta {
    grid-column: 1 / -1 !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 0 !important;
    border-top: 0 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header__meta span,
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-count-badge {
    display: inline-flex !important;
    min-height: 30px !important;
    padding: 5px 10px !important;
    border: 1px solid rgba(23, 32, 51, 0.1) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #526174 !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header__meta span + span::before {
    display: none !important;
  }
}

@media (max-width: 359px) {
  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header {
    padding: 18px !important;
  }

  body.subscriber-logged-in #subscriber-cockpit-root .cc-mobile-app-header__identity strong {
    font-size: 1rem !important;
  }
}

/* Mobile request studio v1: premium, single-surface request composer. */
@media (max-width: 767px) {
  body.subscriber-logged-in #customer-ai-request-modal,
  body.subscriber-logged-in #customer-request-modal {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: rgba(7, 18, 37, 0.62) !important;
    backdrop-filter: blur(9px) !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .customer-task-modal-backdrop,
  body.subscriber-logged-in #customer-request-modal .customer-task-modal-backdrop {
    background: transparent !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .customer-ai-studio-dialog,
  body.subscriber-logged-in #customer-request-modal .customer-ai-studio-dialog {
    width: 100% !important;
    max-width: none !important;
    height: min(820px, calc(100dvh - 8px)) !important;
    max-height: calc(100dvh - 8px) !important;
    min-height: 0 !important;
    margin: auto 0 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-bottom: 0 !important;
    border-radius: 26px 26px 0 0 !important;
    background: #fffaf2 !important;
    box-shadow: 0 -20px 60px rgba(7, 18, 37, 0.25) !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .customer-task-modal-close,
  body.subscriber-logged-in #customer-request-modal .customer-task-modal-close {
    top: 14px !important;
    right: 14px !important;
    z-index: 4 !important;
    width: 44px !important;
    height: 44px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    font-size: 1.35rem !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16) !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .cai-head,
  body.subscriber-logged-in #customer-request-modal .cai-head {
    display: block !important;
    flex: 0 0 auto !important;
    padding: 22px 72px 18px 20px !important;
    border-radius: 26px 26px 0 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: linear-gradient(145deg, #101a2b 0%, #17243a 68%, #20304a 100%) !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .cai-head::after,
  body.subscriber-logged-in #customer-request-modal .cai-head::after {
    position: absolute !important;
    right: 20px !important;
    bottom: 0 !important;
    left: 20px !important;
    height: 2px !important;
    content: "" !important;
    background: linear-gradient(90deg, #ff6b00 0%, #ffad5a 45%, rgba(255, 173, 90, 0) 100%) !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .cai-head-left,
  body.subscriber-logged-in #customer-request-modal .cai-head-left {
    gap: 12px !important;
    min-width: 0 !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .cai-head-icon,
  body.subscriber-logged-in #customer-request-modal .cai-head-icon {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
    border-radius: 13px !important;
    background: rgba(255, 132, 33, 0.12) !important;
    border-color: rgba(255, 173, 90, 0.34) !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .cai-title,
  body.subscriber-logged-in #customer-request-modal .cai-title {
    max-width: 100% !important;
    font-size: 1.14rem !important;
    letter-spacing: -0.18px !important;
    line-height: 1.15 !important;
  }

  body.subscriber-logged-in #customer-request-modal .cai-subtitle {
    max-width: 34ch !important;
    margin-top: 5px !important;
    color: #aebbd0 !important;
    font-size: 0.68rem !important;
    line-height: 1.4 !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .cai-mode-switch,
  body.subscriber-logged-in #customer-request-modal .cai-mode-switch {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    margin-top: 18px !important;
    padding: 3px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 13px !important;
    background: rgba(7, 18, 37, 0.42) !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .cai-mode-btn,
  body.subscriber-logged-in #customer-request-modal .cai-mode-btn {
    min-height: 42px !important;
    padding: 0 12px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    color: #9eacc1 !important;
    font-size: 0.72rem !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .cai-mode-btn--active,
  body.subscriber-logged-in #customer-request-modal .cai-mode-btn--active {
    border-color: rgba(255, 164, 83, 0.28) !important;
    background: rgba(255, 107, 0, 0.16) !important;
    color: #ffd1ad !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .customer-ai-request-modal-content,
  body.subscriber-logged-in #customer-request-modal .customer-request-modal-form-content {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
    padding: 0 !important;
    background: #fffaf2 !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .cai-entry-shell,
  body.subscriber-logged-in #customer-request-modal .customer-request-modal-form-content > * {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .cai-entry-shell {
    gap: 16px !important;
    padding: 20px 16px calc(28px + env(safe-area-inset-bottom)) !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .cai-brand-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 8px !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .cai-brand-pill {
    min-width: 0 !important;
    min-height: 48px !important;
    justify-content: flex-start !important;
    padding: 0 12px !important;
    border: 1px solid #e4d8c9 !important;
    border-radius: 13px !important;
    background: #fff !important;
    box-shadow: 0 3px 10px rgba(23, 32, 51, 0.05) !important;
    color: #172033 !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .cai-brand-pill[style*="#f59e0b"],
  body.subscriber-logged-in #customer-ai-request-modal .cai-brand-pill:focus-visible {
    border-color: #ff7a18 !important;
    background: #fff4e8 !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.13) !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .cai-brand-name {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #172033 !important;
    font-size: 0.78rem !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .cai-brand-plan,
  body.subscriber-logged-in #customer-ai-request-modal .cai-brand-change {
    display: none !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .cai-textarea-wrap {
    min-height: 182px !important;
    padding: 1px !important;
    border: 1px solid #ddcfbf !important;
    border-radius: 18px !important;
    background: #ddcfbf !important;
    box-shadow: 0 8px 22px rgba(23, 32, 51, 0.06) !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .cai-textarea-wrap:focus-within {
    border-color: #ff7a18 !important;
    background: #ff7a18 !important;
    box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.12) !important;
    animation: none !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .cai-textarea {
    min-height: 180px !important;
    max-height: 230px !important;
    padding: 16px !important;
    border-radius: 17px !important;
    background: #fff !important;
    color: #172033 !important;
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .cai-suggestions {
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
    scrollbar-width: none !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .cai-suggestions::-webkit-scrollbar {
    display: none !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .cai-chip {
    min-height: 40px !important;
    flex: 0 0 auto !important;
    padding: 0 12px !important;
    border-radius: 11px !important;
    color: #526078 !important;
    font-size: 0.7rem !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .compact-attachments {
    margin: 0 !important;
    padding-top: 0 !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal #customer-ai-attachment-toggle {
    min-height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid #ddcfbf !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #39465c !important;
    font-size: 0.74rem !important;
    box-shadow: 0 3px 10px rgba(23, 32, 51, 0.04) !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .cai-submit {
    min-height: 54px !important;
    padding: 0 18px !important;
    border-radius: 15px !important;
    background: linear-gradient(100deg, #ff9900 0%, #f35b0b 100%) !important;
    box-shadow: 0 10px 22px rgba(243, 91, 11, 0.2) !important;
    font-size: 0.92rem !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .cai-footer-hint {
    padding: 0 4px !important;
    color: #7d8798 !important;
    font-size: 0.68rem !important;
    line-height: 1.45 !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .customer-ai-studio-grid {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .customer-ai-context-panel,
  body.subscriber-logged-in #customer-ai-request-modal .customer-ai-drafts-panel {
    min-width: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    border-right: 0 !important;
    border-radius: 0 !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .customer-ai-context-panel {
    padding: 16px !important;
    border-bottom: 1px solid #eadfce !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .customer-ai-drafts-panel {
    padding: 16px !important;
    min-height: 0 !important;
  }

  body.subscriber-logged-in #customer-request-modal .customer-request-modal-form-content {
    padding: 16px !important;
  }

  body.subscriber-logged-in #customer-request-modal .customer-request-form.modal-grid-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    min-width: 0 !important;
    padding: 0 0 8px !important;
  }

  body.subscriber-logged-in #customer-request-modal #customer-request-brand-picker {
    display: flex !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 14px !important;
    border: 1px solid #eadfce !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 5px 16px rgba(23, 32, 51, 0.05) !important;
  }

  body.subscriber-logged-in #customer-request-modal #customer-request-brand-picker > div:first-child {
    text-align: left !important;
  }

  body.subscriber-logged-in #customer-request-modal #customer-request-brand-picker > div:last-child {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 8px !important;
  }

  body.subscriber-logged-in #customer-request-modal .customer-request-brand-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    justify-content: flex-start !important;
    padding: 0 11px !important;
    border: 1px solid #e4d8c9 !important;
    border-radius: 13px !important;
    background: #fffaf2 !important;
    box-shadow: none !important;
  }

  body.subscriber-logged-in #customer-request-modal .customer-request-brand-card.is-selected {
    border-color: #ff7a18 !important;
    background: #fff4e8 !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.11) !important;
  }

  body.subscriber-logged-in #customer-request-modal .customer-request-brand-name,
  body.subscriber-logged-in #customer-request-modal .customer-request-brand-plan {
    max-width: none !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.subscriber-logged-in #customer-request-modal .modal-form-left,
  body.subscriber-logged-in #customer-request-modal .modal-form-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.subscriber-logged-in #customer-request-modal .modal-grid-form .form-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    min-width: 0 !important;
  }

  body.subscriber-logged-in #customer-request-modal .modal-grid-form .form-group > span {
    color: #69758a !important;
    font-size: 0.68rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
  }

  body.subscriber-logged-in #customer-request-modal .modal-grid-form .request-field-input {
    width: 100% !important;
    min-height: 50px !important;
    box-sizing: border-box !important;
    border: 1px solid #d9d4cd !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #172033 !important;
    font-size: 0.82rem !important;
  }

  body.subscriber-logged-in #customer-request-modal .modal-grid-form .textarea-lg {
    min-height: 164px !important;
    padding: 14px !important;
    line-height: 1.5 !important;
    resize: vertical !important;
  }

  body.subscriber-logged-in #customer-request-modal #btn-attachment-toggle {
    min-height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid #ddcfbf !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #39465c !important;
  }

  body.subscriber-logged-in #customer-request-modal .modal-form-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr) !important;
    gap: 8px !important;
    margin-top: 0 !important;
    padding: 4px 0 calc(8px + env(safe-area-inset-bottom)) !important;
  }

  body.subscriber-logged-in #customer-request-modal .modal-form-actions button {
    min-height: 50px !important;
    width: 100% !important;
    border-radius: 14px !important;
    font-size: 0.78rem !important;
  }

  body.subscriber-logged-in #customer-request-modal .modal-form-actions .customer-submit-btn {
    background: linear-gradient(100deg, #ff9900 0%, #f35b0b 100%) !important;
    box-shadow: 0 10px 22px rgba(243, 91, 11, 0.2) !important;
  }

  body.subscriber-logged-in #customer-request-modal .customer-request-modal-form-content .customer-request-form,
  body.subscriber-logged-in #customer-request-modal .customer-request-modal-form-content .customer-task-form {
    min-width: 0 !important;
  }
}

@media (max-width: 359px) {
  body.subscriber-logged-in #customer-ai-request-modal .cai-head,
  body.subscriber-logged-in #customer-request-modal .cai-head {
    padding-left: 16px !important;
    padding-right: 66px !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .cai-entry-shell {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.subscriber-logged-in #customer-ai-request-modal .cai-brand-pill {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.subscriber-logged-in #customer-ai-request-modal,
  body.subscriber-logged-in #customer-ai-request-modal *,
  body.subscriber-logged-in #customer-request-modal,
  body.subscriber-logged-in #customer-request-modal * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Desktop calendar: keep the explanatory task composition while mobile stays compact. */
@media (min-width: 1024px) {
  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    width: min(1380px, calc(100vw - 48px)) !important;
    height: min(900px, calc(100dvh - 28px)) !important;
    max-height: calc(100dvh - 28px) !important;
    overflow: hidden !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-dialog-header {
    min-height: 78px !important;
    padding: 18px 24px 14px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-dialog-scroll {
    display: grid !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    gap: 0 !important;
    min-height: 0 !important;
    padding: 16px 24px 20px !important;
    overflow: hidden !important;
    scrollbar-gutter: auto !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-kpi-card {
    min-height: 62px !important;
    padding: 11px 14px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-summary-line {
    margin: 8px 2px 10px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-toolbar {
    margin-bottom: 12px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-body {
    height: 100% !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-main,
  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-detail {
    height: 100% !important;
    min-height: 0 !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-grid-card {
    height: 100% !important;
    min-height: 0 !important;
    padding: 16px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-grid {
    height: 100% !important;
    grid-template-rows: 26px repeat(6, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-body {
    grid-template-columns: minmax(0, 1.32fr) minmax(350px, 0.68fr) !important;
    gap: 24px !important;
  }

  /* desktop-calendar-fit-v16 */

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-grid-card {
    padding: 20px !important;
    border-radius: 20px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-grid {
    grid-template-rows: 26px repeat(6, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day {
    display: grid !important;
    grid-template-rows: 15px minmax(0, 1fr) 11px !important;
    padding: 4px 7px 3px !important;
    border-radius: 14px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day-head {
    min-height: 15px !important;
    height: 15px !important;
    margin: 0 !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day-num {
    min-width: 16px !important;
    height: 16px !important;
    font-size: 0.58rem !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-stack {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1px !important;
    min-height: 0 !important;
    margin-top: 0 !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-chip {
    display: grid !important;
    grid-template-columns: 3px minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 15px !important;
    height: 15px !important;
    padding: 0 4px !important;
    gap: 5px !important;
    border: 1px solid #dce4ef !important;
    border-left-width: 3px !important;
    border-radius: 6px !important;
    background: #f8fafc !important;
    font-size: 0.58rem !important;
    line-height: 1.1 !important;
    box-sizing: border-box !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-chip.planned {
    border-color: #bae6fd !important;
    border-left-color: #0284c7 !important;
    background: #f0f9ff !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-chip.created {
    border-color: #fed7aa !important;
    border-left-color: #d97706 !important;
    background: #fff7ed !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-chip.completed {
    border-color: #bbf7d0 !important;
    border-left-color: #059669 !important;
    background: #f0fdf4 !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-chip-dot {
    width: 3px !important;
    height: 7px !important;
    min-height: 7px !important;
    border-radius: 999px !important;
    align-self: center !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-chip-text {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
    font-weight: 750 !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-more {
    display: block !important;
    height: 9px !important;
    padding: 1px 0 0 !important;
    color: #64748b !important;
    font-size: 0.52rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day-meta-dots {
    display: none !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day-meta {
    min-height: 11px !important;
    height: 11px !important;
    margin-top: 0 !important;
    padding-top: 1px !important;
    font-size: 0.46rem !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-day-meta-count b {
    font-size: 0.58rem !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-detail {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 20px !important;
    border-radius: 20px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-detail-list {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-detail-item {
    min-height: 0 !important;
    padding: 8px 10px !important;
  }
}

/* Brand operations UI/UX polish */
.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;
}

#panel-subscribers .subscriber-section-header {
  align-items: flex-end;
  gap: 24px;
  padding-bottom: 18px;
}

#panel-subscribers .subscriber-section-heading {
  min-width: 220px;
}

#panel-subscribers .subscriber-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ff9a52;
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#panel-subscribers .subscriber-section-kicker-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff6b00;
  box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.12);
}

#panel-subscribers .subscriber-section-heading h2 {
  margin: 5px 0 5px;
  letter-spacing: -0.02em;
}

#panel-subscribers .subscriber-section-heading p {
  margin: 0;
  color: var(--text2);
  font-size: 0.78rem;
  line-height: 1.45;
}

#panel-subscribers .subscriber-section-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 1 1 auto;
  flex-wrap: wrap;
}

#panel-subscribers .subscriber-search-wrap {
  position: relative;
  min-width: 220px;
}

#panel-subscribers .subscriber-search-wrap svg {
  position: absolute;
  top: 50%;
  left: 13px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--text2);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  pointer-events: none;
  transform: translateY(-50%);
}

#panel-subscribers #subscriber-search-input,
#panel-subscribers #subscriber-page-size {
  min-height: 42px;
  border: 1px solid rgba(255, 107, 0, 0.24);
  border-radius: 10px;
  background: rgba(10, 10, 12, 0.72);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

#panel-subscribers #subscriber-search-input {
  width: 260px;
  padding: 0 14px 0 38px;
}

#panel-subscribers #subscriber-page-size {
  width: 104px;
  padding: 0 10px;
  cursor: pointer;
}

#panel-subscribers #subscriber-search-input:focus,
#panel-subscribers #subscriber-page-size:focus,
#panel-subscribers .subscriber-bulk-toolbar select:focus {
  border-color: rgba(255, 132, 47, 0.88);
  background: rgba(24, 17, 14, 0.92);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.13);
}

#panel-subscribers .subscriber-primary-action,
#panel-subscribers .subscriber-toolbar-button {
  min-height: 42px;
  white-space: nowrap;
}

#panel-subscribers .subscriber-primary-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
}

#panel-subscribers .subscriber-actions-dropdown {
  position: relative;
}

#panel-subscribers .subscriber-toolbar-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
}

#panel-subscribers .subscriber-bulk-toolbar {
  display: flex !important;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 5px 7px 5px 12px;
  border: 1px solid rgba(255, 107, 0, 0.24);
  border-radius: 12px;
  background: rgba(255, 107, 0, 0.06);
}

#panel-subscribers .subscriber-bulk-toolbar[style*="display:none"] {
  display: none !important;
}

#panel-subscribers .subscriber-bulk-toolbar select {
  min-height: 32px;
  min-width: 145px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.74rem;
  outline: none;
}

#panel-subscribers .subscriber-bulk-toolbar button {
  min-height: 32px;
  padding: 0 12px;
  font-size: 0.72rem;
}

#panel-subscribers .subscriber-bulk-toolbar button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

#panel-subscribers .subscriber-selection-count {
  color: var(--text2);
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
}

#panel-subscribers .subscriber-selection-count.has-selection {
  color: #ffb37d;
}

#panel-subscribers #subscribers-dashboard-container {
  display: grid;
  gap: 12px;
  margin-bottom: 20px !important;
}

#panel-subscribers .subscriber-crm-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

#panel-subscribers .subscriber-crm-summary-card {
  min-height: 94px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
}

#panel-subscribers .subscriber-crm-summary-card span,
#panel-subscribers .subscriber-crm-summary-card small {
  display: block;
  color: var(--text2);
  font-size: 0.68rem;
  font-weight: 750;
}

#panel-subscribers .subscriber-crm-summary-card strong {
  display: block;
  margin: 5px 0 3px;
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1;
}

#panel-subscribers .subscriber-crm-summary-card[data-tone="success"] strong { color: #55d99a; }
#panel-subscribers .subscriber-crm-summary-card[data-tone="warning"] strong { color: #ffb454; }
#panel-subscribers .subscriber-crm-summary-card[data-tone="info"] strong { color: #74c8ff; }

#panel-subscribers .subscriber-crm-filterbar {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid rgba(255, 107, 0, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  scrollbar-width: thin;
}

#panel-subscribers .subscriber-crm-filterbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text2);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

#panel-subscribers .subscriber-crm-filterbar button:hover,
#panel-subscribers .subscriber-crm-filterbar button:focus-visible {
  border-color: rgba(255, 107, 0, 0.26);
  color: var(--text);
}

#panel-subscribers .subscriber-crm-filterbar button.active,
#panel-subscribers .subscriber-crm-filterbar button[aria-selected="true"] {
  background: rgba(255, 107, 0, 0.16);
  border-color: rgba(255, 107, 0, 0.3);
  color: #ffd4bb;
}

#panel-subscribers .subscriber-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text2);
  font-size: 0.64rem;
}

#panel-subscribers .subscriber-filter-count.is-risk {
  background: rgba(239, 68, 68, 0.18);
  color: #ff8d8d;
}

#panel-subscribers .table-container {
  border: 1px solid rgba(255, 107, 0, 0.22);
  border-radius: 18px;
  scrollbar-color: rgba(255, 107, 0, 0.55) rgba(255, 255, 255, 0.04);
}

#panel-subscribers .leads-table.full {
  min-width: 1120px;
}

#panel-subscribers .leads-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #0d0d0f;
  box-shadow: 0 1px 0 rgba(255, 107, 0, 0.14);
}

#panel-subscribers .leads-table tbody tr {
  transition: background 140ms ease;
}

#panel-subscribers .leads-table tbody tr:hover {
  background: rgba(255, 107, 0, 0.045);
}

#panel-subscribers .leads-table tbody tr:focus-within {
  outline: 2px solid rgba(255, 132, 47, 0.72);
  outline-offset: -2px;
}

#panel-subscribers button:focus-visible,
#panel-subscribers a:focus-visible,
#panel-subscribers input:focus-visible,
#panel-subscribers select:focus-visible {
  outline: 2px solid rgba(255, 160, 100, 0.9);
  outline-offset: 2px;
}

@media (max-width: 1100px) {
  #panel-subscribers .subscriber-section-header {
    align-items: stretch;
  }

  #panel-subscribers .subscriber-section-toolbar {
    justify-content: flex-start;
  }

  #panel-subscribers .subscriber-crm-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body:has(#panel-subscribers.active) .sidebar,
  body:has(#panel-subscribers.active) .right-activity-sidebar {
    display: none !important;
  }

  body:has(#panel-subscribers.active) .main-content {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 18px 12px 32px !important;
  }

  #panel-subscribers .subscriber-section-header {
    flex-direction: column;
    gap: 14px;
  }

  #panel-subscribers .sub-view-tab-container {
    justify-content: flex-start;
    overflow-x: auto;
  }

  #panel-subscribers .sub-view-tab-btn {
    flex: 0 0 auto;
  }

  #panel-subscribers .subscriber-section-toolbar > * {
    flex: 1 1 auto;
  }

  #panel-subscribers .subscriber-search-wrap,
  #panel-subscribers #subscriber-search-input {
    width: 100%;
    min-width: 0;
  }

  #panel-subscribers #subscriber-page-size,
  #panel-subscribers .subscriber-primary-action,
  #panel-subscribers .subscriber-actions-dropdown,
  #panel-subscribers .subscriber-toolbar-button {
    width: 100%;
  }

  #panel-subscribers .subscriber-primary-action,
  #panel-subscribers .subscriber-toolbar-button {
    justify-content: center;
  }

  #panel-subscribers .subscriber-bulk-toolbar {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    border-radius: 12px;
  }

  #panel-subscribers .subscriber-crm-summary-card {
    min-height: 84px;
    padding: 12px;
  }

  #panel-subscribers .subscriber-crm-summary-card strong {
    font-size: 1.15rem;
  }

  #panel-subscribers .subscriber-crm-filterbar {
    margin-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #panel-subscribers #subscriber-search-input,
  #panel-subscribers #subscriber-page-size,
  #panel-subscribers .leads-table tbody tr {
    transition: none;
  }
}

/* AI modal reopen composition v1 */
@media (min-width: 821px) {
  html body.subscriber-logged-in #customer-ai-request-modal:not(.cai-drafts-mode) .customer-ai-studio-dialog {
    width: min(780px, calc(100vw - 40px)) !important;
    max-width: 780px !important;
    height: auto !important;
    max-height: calc(100dvh - 32px) !important;
    margin: auto !important;
  }
}

/* Subscriber detail simple UI v22 */
#panel-subscriber-detail,
#panel-subscriber-detail *,
#panel-subscriber-detail *::before,
#panel-subscriber-detail *::after {
  box-sizing: border-box;
}

#panel-subscriber-detail {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: clamp(10px, 1.6vw, 24px) !important;
  overflow-x: clip !important;
}

#panel-subscriber-detail #subscriber-detail-page-root,
#panel-subscriber-detail .subscriber-detail-shell,
#panel-subscriber-detail .subscriber-detail-content,
#panel-subscriber-detail .subscriber-personal-root,
#panel-subscriber-detail .subscriber-personal-workspace,
#panel-subscriber-detail .subscriber-dossier-workspace,
#panel-subscriber-detail .subscriber-account-section,
#panel-subscriber-detail .subscriber-account-row,
#panel-subscriber-detail .ops-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

#panel-subscriber-detail .subscriber-detail-shell {
  padding: 0 !important;
  margin: 0 auto !important;
}

#panel-subscriber-detail .subscriber-personal-root {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 0 !important;
  overflow: visible !important;
}

#panel-subscriber-detail .subscriber-personal-sticky {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  display: grid !important;
  gap: 10px !important;
  padding: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  background: #101011 !important;
  box-shadow: none !important;
}

#panel-subscriber-detail .subscriber-personal-hero {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#panel-subscriber-detail .subscriber-personal-hero-main {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

#panel-subscriber-detail .subscriber-detail-back-inline {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 12px !important;
}

#panel-subscriber-detail .subscriber-personal-hero-main > div {
  min-width: 0 !important;
}

#panel-subscriber-detail .subscriber-personal-hero-main > div > span {
  color: #ff7900 !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

#panel-subscriber-detail .subscriber-personal-hero h2 {
  margin: 2px 0 5px !important;
  color: #f8fafc !important;
  font-size: clamp(1.2rem, 2vw, 1.6rem) !important;
  line-height: 1.1 !important;
  overflow-wrap: anywhere !important;
}

#panel-subscriber-detail .subscriber-hero-contact-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

#panel-subscriber-detail .hero-contact-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 28px !important;
  max-width: 100% !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  color: #b7bdc8 !important;
  font-size: 0.72rem !important;
  overflow-wrap: anywhere !important;
}

#panel-subscriber-detail .subscriber-personal-hero-line {
  display: flex !important;
  flex: 0 1 auto !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: 0 !important;
}

#panel-subscriber-detail .subscriber-personal-hero-line > span,
#panel-subscriber-detail .subscriber-personal-hero-line > div > span {
  min-width: 140px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  color: #858c99 !important;
  font-size: 0.66rem !important;
}

#panel-subscriber-detail .subscriber-personal-hero-line strong {
  display: block !important;
  margin-top: 2px !important;
  color: #f8fafc !important;
  font-size: 0.78rem !important;
  overflow-wrap: anywhere !important;
}

#panel-subscriber-detail .subscriber-personal-navline {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#panel-subscriber-detail .subscriber-personal-brand-strip {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#panel-subscriber-detail .subscriber-dossier-rail-head,
#panel-subscriber-detail .subscriber-dossier-status-tabs {
  flex: 0 0 auto !important;
}

#panel-subscriber-detail .subscriber-personal-brand-list {
  display: flex !important;
  flex: 1 1 auto !important;
  gap: 7px !important;
  min-width: 0 !important;
  padding: 2px !important;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain !important;
  scrollbar-width: thin !important;
}

#panel-subscriber-detail .subscriber-dossier-brand-option {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 132px !important;
  min-height: 44px !important;
  padding: 7px 10px !important;
  border-radius: 10px !important;
  text-align: left !important;
}

#panel-subscriber-detail .subscriber-dossier-brand-kind,
#panel-subscriber-detail .subscriber-dossier-brand-option small,
#panel-subscriber-detail .subscriber-dossier-brand-option em {
  display: none !important;
}

#panel-subscriber-detail .subscriber-dossier-brand-option strong {
  display: block !important;
  max-width: 180px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#panel-subscriber-detail .subscriber-personal-toolbar {
  min-width: 0 !important;
  padding: 0 !important;
}

#panel-subscriber-detail .subscriber-personal-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  padding: 4px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-inline: contain !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  scrollbar-width: thin !important;
}

#panel-subscriber-detail .subscriber-personal-tabs button {
  flex: 0 0 auto !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  color: #aeb4bf !important;
  background: transparent !important;
  font-size: 0.76rem !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
}

#panel-subscriber-detail .subscriber-personal-tabs button.active {
  border-color: rgba(255, 121, 0, 0.38) !important;
  color: #fff !important;
  background: rgba(255, 121, 0, 0.14) !important;
}

#panel-subscriber-detail button:focus-visible,
#panel-subscriber-detail input:focus-visible,
#panel-subscriber-detail textarea:focus-visible,
#panel-subscriber-detail select:focus-visible,
#panel-subscriber-detail summary:focus-visible {
  outline: 3px solid rgba(255, 151, 45, 0.55) !important;
  outline-offset: 2px !important;
}

#panel-subscriber-detail .subscriber-personal-workspace {
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

#panel-subscriber-detail .subscriber-dossier-workspace,
#panel-subscriber-detail .subscriber-personal-requests-v2 > .ops-card {
  display: grid !important;
  gap: 16px !important;
  padding: clamp(14px, 1.7vw, 22px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  background: #101011 !important;
}

#panel-subscriber-detail .subscriber-dossier-workspace-head {
  margin: 0 !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

#panel-subscriber-detail .subscriber-dossier-workspace-head h3 {
  margin: 2px 0 3px !important;
  color: #f8fafc !important;
  font-size: 1.12rem !important;
}

#panel-subscriber-detail .subscriber-dossier-workspace-head p {
  margin: 0 !important;
  color: #8f97a5 !important;
  font-size: 0.76rem !important;
}

#panel-subscriber-detail .subscriber-detail-section-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#panel-subscriber-detail .subscriber-detail-form-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-width: 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, 0.018) !important;
}

#panel-subscriber-detail .subscriber-detail-form-section > header h4 {
  margin: 0 !important;
  color: #f5f7fa !important;
  font-size: 0.88rem !important;
}

#panel-subscriber-detail .subscriber-detail-form-section > header p {
  margin: 3px 0 0 !important;
  color: #838b99 !important;
  font-size: 0.7rem !important;
  line-height: 1.4 !important;
}

#panel-subscriber-detail .subscriber-dossier-form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 11px !important;
  min-width: 0 !important;
}

#panel-subscriber-detail .subscriber-dossier-field,
#panel-subscriber-detail .subscriber-dossier-drive-row,
#panel-subscriber-detail .subscriber-inline-control {
  min-width: 0 !important;
}

#panel-subscriber-detail .subscriber-dossier-field.wide {
  grid-column: 1 / -1 !important;
}

#panel-subscriber-detail .subscriber-dossier-field > span,
#panel-subscriber-detail .subscriber-dossier-drive-row label strong {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  margin-bottom: 6px !important;
  color: #aab2bf !important;
  font-size: 0.7rem !important;
  font-weight: 750 !important;
}

#panel-subscriber-detail .subscriber-dossier-field > span::before,
#panel-subscriber-detail .subscriber-dossier-drive-row label strong::before,
#panel-subscriber-detail [data-field-icon] > span::before,
#panel-subscriber-detail label[data-field-icon] strong::before {
  display: none !important;
  content: none !important;
}

#panel-subscriber-detail .subscriber-field-icon,
#panel-subscriber-detail .ops-search-icon svg {
  flex: 0 0 16px !important;
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#panel-subscriber-detail input,
#panel-subscriber-detail textarea,
#panel-subscriber-detail select {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 10px !important;
  background: #0a0a0b !important;
  color: #f3f4f6 !important;
  font-size: 0.8rem !important;
}

#panel-subscriber-detail textarea {
  min-height: 88px !important;
  resize: vertical !important;
}

#panel-subscriber-detail input.is-invalid,
#panel-subscriber-detail textarea.is-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

#panel-subscriber-detail .subscriber-field-error {
  display: block !important;
  margin-top: 5px !important;
  color: #fda4af !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
}

#panel-subscriber-detail button,
#panel-subscriber-detail summary,
#panel-subscriber-detail .subscriber-inline-action {
  min-width: 44px !important;
  min-height: 44px !important;
  touch-action: manipulation !important;
}

#panel-subscriber-detail .subscriber-dossier-add-brand,
#panel-subscriber-detail .subscriber-dossier-primary-action,
#panel-subscriber-detail .subscriber-inline-action,
#panel-subscriber-detail .subscriber-account-password-field button,
#panel-subscriber-detail .subscriber-detail-small-action,
#panel-subscriber-detail .subscriber-detail-save-bar button {
  height: auto !important;
  min-height: 44px !important;
  max-height: none !important;
}

#panel-subscriber-detail .subscriber-account-section {
  display: grid !important;
  gap: 12px !important;
  padding: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, 0.018) !important;
}

#panel-subscriber-detail .subscriber-dossier-media {
  display: grid !important;
  gap: 12px !important;
}

#panel-subscriber-detail .subscriber-dossier-media-group {
  min-width: 0 !important;
  padding: 13px !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.018) !important;
}

#panel-subscriber-detail .subscriber-dossier-media-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

#panel-subscriber-detail .subscriber-dossier-media-head > div {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

#panel-subscriber-detail .subscriber-dossier-media-head span {
  color: #f3f4f6 !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
}

#panel-subscriber-detail .subscriber-dossier-media-head small {
  color: #8f97a5 !important;
  font-size: 0.7rem !important;
  overflow-wrap: anywhere !important;
}

#panel-subscriber-detail .subscriber-dossier-file-grid {
  min-width: 0 !important;
  margin-top: 10px !important;
}

#panel-subscriber-detail .subscriber-account-rows {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#panel-subscriber-detail .subscriber-account-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: start !important;
  gap: 10px !important;
  padding: 13px !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-left: 2px solid rgba(255, 121, 0, 0.55) !important;
  border-radius: 12px !important;
  background: #0c0c0d !important;
}

#panel-subscriber-detail .subscriber-account-row-title,
#panel-subscriber-detail .subscriber-account-password-field,
#panel-subscriber-detail .subscriber-account-row > .danger {
  grid-column: 1 / -1 !important;
}

#panel-subscriber-detail .subscriber-account-password-field > div,
#panel-subscriber-detail .subscriber-inline-control {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 6px !important;
}

#panel-subscriber-detail .subscriber-inline-actions {
  display: contents !important;
}

#panel-subscriber-detail .subscriber-dossier-drive-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#panel-subscriber-detail .subscriber-dossier-drive-row {
  display: grid !important;
  gap: 8px !important;
  padding: 13px !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.018) !important;
}

#panel-subscriber-detail .subscriber-dossier-drive-row label small {
  display: block !important;
  color: #7f8794 !important;
  font-size: 0.68rem !important;
}

#panel-subscriber-detail .subscriber-active-contract-budget {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

#panel-subscriber-detail .ops-command-top-row,
#panel-subscriber-detail .ops-command-search-strip,
#panel-subscriber-detail .ops-filters-and-owner-group,
#panel-subscriber-detail .ops-filter-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
}

#panel-subscriber-detail .ops-command-top-row {
  align-items: center !important;
  justify-content: space-between !important;
}

#panel-subscriber-detail .ops-command-search-strip {
  align-items: stretch !important;
}

#panel-subscriber-detail .ops-search-box {
  flex: 1 1 280px !important;
  min-width: 0 !important;
}

#panel-subscriber-detail .ops-filters-and-owner-group {
  flex: 2 1 520px !important;
  align-items: center !important;
}

#panel-subscriber-detail .request-filter-chip {
  min-height: 44px !important;
}

#panel-subscriber-detail .subscriber-request-unassigned-note {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
  padding: 9px 11px !important;
  border: 1px solid rgba(245, 158, 11, 0.24) !important;
  border-radius: 10px !important;
  background: rgba(245, 158, 11, 0.08) !important;
  color: #d9a441 !important;
  font-size: 0.72rem !important;
}

#panel-subscriber-detail .subscriber-request-unassigned-note span {
  color: #aab2bf !important;
}

#panel-subscriber-detail .ops-queue-ticket-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)) !important;
}

#panel-subscriber-detail .subscriber-detail-save-bar {
  position: sticky !important;
  inset: auto 0 max(8px, env(safe-area-inset-bottom)) !important;
  z-index: 20 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: min(620px, calc(100% - 20px)) !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 10px !important;
  border: 1px solid rgba(255, 121, 0, 0.32) !important;
  border-radius: 14px !important;
  background: rgba(15, 15, 16, 0.96) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.36) !important;
  backdrop-filter: blur(14px) !important;
}

#panel-subscriber-detail #subscriber-detail-save-bar[data-dirty="false"] {
  display: none !important;
}

#panel-subscriber-detail .subscriber-detail-save-bar > div {
  display: flex !important;
  gap: 8px !important;
}

@media (max-width: 980px) {
  #panel-subscriber-detail .subscriber-personal-hero {
    align-items: flex-start !important;
  }

  #panel-subscriber-detail .subscriber-personal-hero-line {
    justify-content: flex-start !important;
  }

  #panel-subscriber-detail .subscriber-account-rows,
  #panel-subscriber-detail .subscriber-dossier-drive-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  body:has(#panel-subscriber-detail.active) .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 2147481000 !important;
    width: min(320px, 86vw) !important;
    transform: translateX(-105%) !important;
    transition: transform 0.2s ease !important;
  }

  body.sidebar-mobile-open:has(#panel-subscriber-detail.active) .sidebar {
    transform: translateX(0) !important;
  }

  body:has(#panel-subscriber-detail.active) .sidebar-mobile-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  body:has(#panel-subscriber-detail.active) .sidebar-mobile-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147480999 !important;
  }

  body.sidebar-mobile-open:has(#panel-subscriber-detail.active) .sidebar-mobile-backdrop {
    display: block !important;
  }

  body:has(#panel-subscriber-detail.active) .main-content,
  body:has(#panel-subscriber-detail.active) .main-content.no-right-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 760px) {
  #panel-subscriber-detail {
    padding: 8px !important;
  }

  #panel-subscriber-detail .subscriber-personal-sticky,
  #panel-subscriber-detail .subscriber-dossier-workspace,
  #panel-subscriber-detail .subscriber-personal-requests-v2 > .ops-card {
    border-radius: 13px !important;
  }

  #panel-subscriber-detail .subscriber-personal-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #panel-subscriber-detail .subscriber-personal-hero-line {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #panel-subscriber-detail .subscriber-personal-hero-line > span,
  #panel-subscriber-detail .subscriber-personal-hero-line > div > span {
    min-width: 0 !important;
  }

  #panel-subscriber-detail .subscriber-personal-brand-strip {
    align-items: stretch !important;
    flex-wrap: wrap !important;
  }

  #panel-subscriber-detail .subscriber-personal-brand-list {
    flex-basis: 100% !important;
  }

  #panel-subscriber-detail .subscriber-personal-tabs {
    scroll-snap-type: inline proximity !important;
    mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%) !important;
  }

  #panel-subscriber-detail .subscriber-personal-tabs button {
    scroll-snap-align: center !important;
  }

  #panel-subscriber-detail .subscriber-detail-section-grid,
  #panel-subscriber-detail .subscriber-dossier-form-grid,
  #panel-subscriber-detail .subscriber-account-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #panel-subscriber-detail .subscriber-dossier-field.wide,
  #panel-subscriber-detail .subscriber-account-row-title,
  #panel-subscriber-detail .subscriber-account-password-field,
  #panel-subscriber-detail .subscriber-account-row > .danger {
    grid-column: auto !important;
  }

  #panel-subscriber-detail .ops-command-top-row > button,
  #panel-subscriber-detail .ops-search-box,
  #panel-subscriber-detail .ops-filters-and-owner-group,
  #panel-subscriber-detail .ops-area-filter,
  #panel-subscriber-detail .ops-owner-filter {
    width: 100% !important;
    flex-basis: 100% !important;
  }

  #panel-subscriber-detail .subscriber-detail-save-bar {
    width: calc(100% - 12px) !important;
  }
}

@media (max-width: 430px) {
  #panel-subscriber-detail .subscriber-hero-contact-row {
    display: grid !important;
  }

  #panel-subscriber-detail .subscriber-personal-hero-line {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #panel-subscriber-detail .subscriber-inline-control,
  #panel-subscriber-detail .subscriber-account-password-field > div {
    grid-template-columns: minmax(0, 1fr) repeat(2, auto) !important;
  }

  #panel-subscriber-detail .subscriber-detail-save-bar {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  #panel-subscriber-detail .subscriber-detail-save-bar > div,
  #panel-subscriber-detail .subscriber-detail-save-bar button {
    flex: 1 1 auto !important;
  }
}

/* Responsive shell + modal scroll contract v1 */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.dashboard-wrapper {
  min-height: 100dvh;
}

.sidebar {
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
}

.sidebar-header,
.sidebar-footer {
  flex: 0 0 auto;
}

.sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.sidebar-footer {
  position: relative;
  z-index: 2;
  background: #0b0907;
}

.sidebar-mobile-toggle,
.sidebar-mobile-backdrop {
  display: none;
}

.main-content,
.panels-wrapper,
.panel,
.section-header,
.topbar,
.top-status-row {
  min-width: 0;
  max-width: 100%;
}

.main-content {
  overflow-x: hidden;
}

/* The activity rail is secondary on narrow desktop/tablet surfaces. */
@media (max-width: 1350px) and (min-width: 761px) {
  .right-activity-sidebar {
    display: none !important;
  }

  .main-content,
  .main-content.no-right-sidebar {
    margin-right: 0 !important;
    width: calc(100vw - 260px) !important;
    max-width: calc(100vw - 260px) !important;
  }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .sidebar {
    width: 220px;
  }

  .sidebar-header {
    padding: 18px;
  }

  .sidebar-nav {
    padding: 16px 12px;
  }

  .sidebar-footer {
    padding: 16px;
  }

  .main-content,
  .main-content.no-right-sidebar {
    margin-left: 220px !important;
    margin-right: 0 !important;
    width: calc(100vw - 220px) !important;
    max-width: calc(100vw - 220px) !important;
  }

  .panels-wrapper {
    padding-inline: clamp(16px, 3vw, 24px) !important;
  }
}

@media (max-width: 760px) {
  body.sidebar-mobile-open {
    overflow: hidden;
  }

  .right-activity-sidebar {
    display: none !important;
  }

  .sidebar {
    width: min(320px, 86vw);
    transform: translateX(-105%);
    transition: transform 180ms ease-out;
    z-index: 2147481000;
    box-shadow: 20px 0 60px rgba(0, 0, 0, 0.42);
  }

  body.sidebar-mobile-open .sidebar {
    transform: translateX(0);
  }

  .sidebar-mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2147480999;
    border: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.62);
    cursor: pointer;
  }

  body.sidebar-mobile-open .sidebar-mobile-backdrop {
    display: block;
  }

  .sidebar-mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin-right: 8px;
    border: 1px solid rgba(255, 107, 0, 0.24);
    border-radius: 10px;
    background: rgba(255, 107, 0, 0.08);
    color: var(--text);
    cursor: pointer;
    touch-action: manipulation;
  }

  .sidebar-mobile-toggle:focus-visible,
  .sidebar-mobile-backdrop:focus-visible {
    outline: 3px solid rgba(255, 160, 100, 0.9);
    outline-offset: 2px;
  }

  body.subscriber-logged-in .sidebar-mobile-toggle,
  body.subscriber-panel-active .sidebar-mobile-toggle {
    display: none;
  }

  .main-content,
  .main-content.no-left-sidebar,
  .main-content.no-right-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 12px !important;
  }

  .topbar {
    padding: 8px 12px 12px !important;
    gap: 8px;
  }

  .panels-wrapper {
    width: 100%;
    padding: 12px 0 28px !important;
  }

  .section-header,
  .section-header > div,
  .lead-panel-actions,
  .lead-panel-filter-row,
  .lead-assignment-controls {
    width: 100%;
  }

  .section-header,
  .lead-panel-actions,
  .lead-panel-filter-row,
  .lead-assignment-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .lead-panel-actions > *,
  .lead-assignment-controls > *,
  .lead-filter-controls > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  .lead-filter-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .modal-overlay,
  .manual-sub-modal-backdrop,
  .ops-popup-modal-backdrop,
  .customer-task-modal,
  #admin-brand-subscription-modal {
    align-items: flex-start !important;
    justify-content: center !important;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
  }
}

/* Every dynamic overlay gets a scroll owner. */
.modal-overlay,
.manual-sub-modal-backdrop,
.ops-popup-modal-backdrop,
.customer-task-modal,
#admin-brand-subscription-modal {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#admin-brand-subscription-modal {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#admin-brand-subscription-modal > div {
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column;
  width: min(560px, 100%) !important;
  max-height: calc(100dvh - 32px) !important;
  min-height: 0;
  overflow: hidden;
}

#admin-brand-subscription-modal > div > div:nth-child(2) {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#admin-brand-subscription-modal > div > div:last-child {
  flex: 0 0 auto;
  flex-wrap: wrap;
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}

#admin-brand-subscription-modal button {
  min-height: 44px;
  touch-action: manipulation;
}

.manual-sub-modal-backdrop {
  overflow-x: hidden;
  overflow-y: auto;
}

.manual-contract-modal {
  box-sizing: border-box;
  max-height: calc(100dvh - 24px) !important;
  min-height: 0;
}

.manual-contract-shell {
  min-height: 0;
}

.manual-contract-head,
.manual-contract-actions {
  flex: 0 0 auto;
}

.manual-contract-body {
  min-height: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.manual-contract-step.is-active,
.manual-contract-step[data-wizard-step="2"].is-active,
.manual-contract-step[data-wizard-step="3"].is-active {
  height: auto;
  min-height: 0;
  overflow: visible;
}

.manual-contract-close {
  flex: 0 0 44px;
  width: 44px;
  min-height: 44px !important;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

.manual-contract-actions {
  padding-bottom: max(16px, calc(16px + env(safe-area-inset-bottom)));
}

.manual-contract-modal button,
.manual-contract-modal input,
.manual-contract-modal select,
.manual-contract-modal textarea {
  box-sizing: border-box;
  max-width: 100%;
}

@media (max-width: 760px) {
  .manual-contract-modal {
    width: 100% !important;
    height: calc(100dvh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    min-height: 0 !important;
  }

  .manual-contract-head,
  .manual-contract-body,
  .manual-contract-actions {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .manual-contract-summary,
  .manual-contract-customer-grid,
  .manual-contract-step[data-wizard-step="2"].is-active,
  .manual-contract-step[data-wizard-step="3"].is-active {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .manual-contract-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar-mobile-toggle {
    transition: none !important;
  }
}

/* Talep Asistanı: final responsive contract */
#customer-ai-request-modal,
#customer-ai-request-modal .customer-ai-request-modal-content,
#customer-ai-request-modal .customer-ai-drafts-scroll {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

#customer-ai-request-modal {
  box-sizing: border-box !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

#customer-ai-request-modal .customer-ai-draft-card,
#customer-ai-request-modal .customer-ai-draft-card textarea,
#customer-ai-request-modal .customer-ai-draft-plan,
#customer-ai-request-modal .customer-ai-draft-plan__tasks {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

#customer-ai-request-modal .customer-ai-drafts-panel > #customer-ai-draft-preview {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex;
  flex-direction: column;
}

#customer-ai-request-modal .cai-submit {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  flex-wrap: wrap !important;
}

#customer-ai-request-modal .cai-submit > * {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

#customer-ai-request-modal .cai-submit::before {
  left: 0 !important;
  width: 100% !important;
}

#customer-ai-request-modal .customer-ai-draft-touch-action,
#customer-ai-request-modal .cai-draft-drag-handle,
#customer-ai-request-modal .cai-draft-reorder-actions button {
  min-width: 44px !important;
  min-height: 44px !important;
}

#customer-ai-request-modal .customer-ai-draft-plan-toggle:focus-visible,
#customer-ai-request-modal .cai-draft-drag-handle:focus-visible,
#customer-ai-request-modal .cai-draft-reorder-actions button:focus-visible,
#customer-ai-request-modal .customer-ai-draft-touch-action:focus-visible {
  outline: 3px solid rgba(245, 158, 11, 0.65) !important;
  outline-offset: 2px;
}

@media (min-width: 1101px) {
  #customer-ai-request-modal.cai-drafts-mode .customer-ai-drafts-scroll {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 821px) and (max-width: 1100px) {
  #customer-ai-request-modal .cai-head {
    height: auto !important;
    min-height: 0 !important;
    align-content: flex-start !important;
  }

  #customer-ai-request-modal.cai-drafts-mode .customer-ai-studio-grid {
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) !important;
  }

  #customer-ai-request-modal.cai-drafts-mode .customer-ai-drafts-scroll {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 820px) {
  #customer-ai-request-modal {
    padding: max(10px, env(safe-area-inset-top)) max(9px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(9px, env(safe-area-inset-left)) !important;
    overflow: hidden !important;
  }

  #customer-ai-request-modal .customer-ai-request-modal-content {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  #customer-ai-request-modal.cai-drafts-mode .customer-ai-drafts-scroll {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: visible !important;
  }

  #customer-ai-request-modal .cai-draft-drag-handle {
    display: none !important;
  }

  #customer-ai-request-modal .cai-draft-reorder-actions {
    display: inline-flex !important;
  }

  #customer-ai-request-modal .customer-ai-draft-footer {
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }

  #customer-ai-request-modal.cai-drafts-mode .customer-ai-draft-footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 80 !important;
    margin-top: 16px !important;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
  }

  #customer-ai-request-modal.cai-drafts-mode #customer-ai-draft-preview {
    display: contents !important;
    height: auto !important;
    overflow: visible !important;
  }
}

/* Honor Pad 10 modal scroll contract v1 */
html body #customer-ai-request-modal .customer-task-modal-close,
html body #customer-request-modal .customer-task-modal-close,
html body #customer-card-modal .customer-card-modal-dialog > button[aria-label],
html body #customer-automation-modal .customer-task-modal-close,
html body .customer-work-calendar-close,
html body .manual-contract-close,
html body .representative-close-btn,
html body #lead-modal-overlay .modal-content > button[aria-label],
html body #security-modal-overlay .modal-content > button[aria-label],
html body #subscriber-create-modal .modal-content > button[aria-label],
html body #sub-edit-modal .modal-content > button[aria-label],
html body #sub-action-modal .modal-content > button[aria-label],
html body #confirm-modal-overlay .modal-content > button[aria-label],
html body #admin-brand-subscription-modal button[aria-label],
html body #admin-brand-subscription-modal button[style*="position:absolute"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
}

@media (min-width: 821px) {
  html body #customer-ai-request-modal,
  html body #customer-request-modal {
    align-items: center !important;
    justify-content: center !important;
    padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)) !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
  }

  html body #customer-ai-request-modal .customer-ai-studio-dialog,
  html body #customer-request-modal .customer-ai-studio-dialog {
    height: min(900px, calc(100dvh - 32px)) !important;
    max-height: calc(100dvh - 32px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body #customer-ai-request-modal .customer-ai-request-modal-content,
  html body #customer-request-modal .customer-request-modal-form-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-gutter: stable !important;
    touch-action: pan-y !important;
  }

  html body #customer-ai-request-modal .customer-ai-studio-form,
  html body #customer-request-modal .customer-request-form,
  html body #customer-request-modal .modal-grid-form {
    min-height: 0 !important;
  }
}

/* Talep Asistanı entry composer v2 */
html body #customer-ai-request-modal .cai-entry-shell {
  max-width: 720px !important;
  gap: 14px !important;
  padding: 24px clamp(16px, 3vw, 28px) calc(28px + env(safe-area-inset-bottom)) !important;
}

html body #customer-ai-request-modal .cai-textarea-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 1px solid #e3d8cb !important;
  border-radius: 20px !important;
  background: #fffdfa !important;
  box-shadow: 0 10px 28px rgba(23, 32, 51, 0.07) !important;
  overflow: hidden !important;
  animation: none !important;
}

html body #customer-ai-request-modal .cai-textarea-wrap:focus-within {
  border-color: #f59e0b !important;
  background: #fffdfa !important;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.13), 0 14px 32px rgba(23, 32, 51, 0.1) !important;
}

html body #customer-ai-request-modal .cai-textarea-label {
  display: block !important;
  padding: 16px 18px 6px !important;
  color: #172033 !important;
  font-size: 0.82rem !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

html body #customer-ai-request-modal .cai-textarea {
  width: 100% !important;
  min-height: 174px !important;
  max-height: 300px !important;
  padding: 8px 18px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fffdfa !important;
  color: #172033 !important;
  font-size: 1rem !important;
  font-weight: 550 !important;
  line-height: 1.58 !important;
  box-shadow: none !important;
  resize: vertical !important;
}

html body #customer-ai-request-modal .cai-textarea::placeholder {
  color: #667085 !important;
  font-weight: 550 !important;
  opacity: 1 !important;
}

html body #customer-ai-request-modal .cai-textarea-footer {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 44px !important;
  padding: 10px 16px 13px !important;
  border-top: 1px solid #f0e9e1 !important;
  background: #fffaf4 !important;
  box-sizing: border-box !important;
}

html body #customer-ai-request-modal .cai-textarea-help {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: #667085 !important;
  font-size: 0.74rem !important;
  font-weight: 650 !important;
  line-height: 1.45 !important;
}

html body #customer-ai-request-modal .cai-char-counter {
  flex: 0 0 auto !important;
  color: #9a6700 !important;
  font-size: 0.72rem !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  white-space: nowrap !important;
}

html body #customer-ai-request-modal .compact-attachments {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-width: 0 !important;
  margin: -2px 0 0 !important;
  padding: 0 !important;
}

html body #customer-ai-request-modal #customer-ai-attachment-toggle {
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border: 1px solid #d8cabb !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #344054 !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 10px rgba(23, 32, 51, 0.04) !important;
}

html body #customer-ai-request-modal #customer-ai-attachment-toggle:hover,
html body #customer-ai-request-modal #customer-ai-attachment-toggle:focus-visible {
  border-color: #f59e0b !important;
  background: #fffaf4 !important;
  color: #92400e !important;
}

html body #customer-ai-request-modal .cai-suggestions {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 0 !important;
}

html body #customer-ai-request-modal .cai-suggestions::before {
  width: 100% !important;
  content: "Hızlı başlangıç" !important;
  color: #8b95a7 !important;
  font-size: 0.68rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

html body #customer-ai-request-modal .cai-chip {
  min-height: 44px !important;
  padding: 0 13px !important;
  border-color: #e4dbd1 !important;
  border-radius: 12px !important;
  color: #475467 !important;
  font-size: 0.76rem !important;
  font-weight: 750 !important;
  touch-action: manipulation !important;
}

html body #customer-ai-request-modal .cai-chip:hover,
html body #customer-ai-request-modal .cai-chip:focus-visible {
  border-color: #f59e0b !important;
  background: #fff8ed !important;
  color: #92400e !important;
}

html body #customer-ai-request-modal .cai-explanation {
  display: grid !important;
  gap: 5px !important;
  padding: 13px 16px !important;
  border: 1px solid #ead7bd !important;
  border-radius: 14px !important;
  background: #fff8ed !important;
  color: #667085 !important;
  font-size: 0.76rem !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

html body #customer-ai-request-modal .cai-explanation strong {
  color: #92400e !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
}

html body #customer-ai-request-modal .cai-submit {
  min-height: 56px !important;
  margin-top: 2px !important;
  border-radius: 16px !important;
  font-size: 0.98rem !important;
  touch-action: manipulation !important;
}

@media (max-width: 520px) {
  html body #customer-ai-request-modal .cai-entry-shell {
    gap: 16px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  html body #customer-ai-request-modal .cai-textarea {
    min-height: 164px !important;
    font-size: 0.98rem !important;
  }

  html body #customer-ai-request-modal .cai-textarea-footer {
    gap: 8px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  html body #customer-ai-request-modal .cai-suggestions {
    overflow: visible !important;
  }

  html body #customer-ai-request-modal .cai-chip {
    flex: 1 1 calc(50% - 8px) !important;
    justify-content: center !important;
    min-width: 0 !important;
  }
}

@media (min-width: 521px) {
  html body #customer-ai-request-modal .cai-entry-shell {
    padding-top: 16px !important;
  }

  html body #customer-ai-request-modal .cai-textarea {
    min-height: 120px !important;
    max-height: 220px !important;
  }
}

/* Talep Asistanı: always-visible entry CTA */
html body #customer-ai-request-modal:not(.cai-drafts-mode) .customer-ai-request-modal-content {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html body #customer-ai-request-modal:not(.cai-drafts-mode) .customer-ai-studio-form {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: auto !important;
}

html body #customer-ai-request-modal:not(.cai-drafts-mode) .cai-entry-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
  -webkit-overflow-scrolling: touch !important;
}

html body #customer-ai-request-modal:not(.cai-drafts-mode) .cai-entry-footer {
  position: relative !important;
  z-index: 5 !important;
  flex: 0 0 auto !important;
  padding: 12px max(16px, 3vw) max(14px, env(safe-area-inset-bottom)) !important;
  border-top: 1px solid #eadfd3 !important;
  background: rgba(255, 250, 242, 0.97) !important;
  box-shadow: 0 -10px 24px rgba(23, 32, 51, 0.08) !important;
  backdrop-filter: blur(8px) !important;
}

html body #customer-ai-request-modal:not(.cai-drafts-mode) .cai-entry-footer .cai-submit {
  width: 100% !important;
  min-height: 54px !important;
  margin: 0 !important;
}

@media (max-width: 520px) {
  html body #customer-ai-request-modal:not(.cai-drafts-mode) .cai-entry-footer {
    padding: 10px 14px max(12px, env(safe-area-inset-bottom)) !important;
  }
}

/* AI entry fixed tablet composition v1 */
@media (min-width: 521px) {
  html body #customer-ai-request-modal:not(.cai-drafts-mode) .cai-entry-scroll {
    overflow-y: hidden !important;
    overflow-x: hidden !important;
  }

  html body #customer-ai-request-modal .cai-suggestions {
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }

  html body #customer-ai-request-modal .cai-suggestions::before {
    display: none !important;
  }

  html body #customer-ai-request-modal .cai-chip {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 0.69rem !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 521px) and (max-width: 820px) {
  html body #customer-ai-request-modal .cai-entry-shell {
    gap: 8px !important;
    padding-top: 10px !important;
    padding-bottom: 12px !important;
  }

  html body #customer-ai-request-modal .cai-textarea {
    min-height: 110px !important;
    max-height: 170px !important;
  }

  html body #customer-ai-request-modal .cai-explanation {
    gap: 3px !important;
    padding: 8px 12px !important;
    font-size: 0.68rem !important;
    line-height: 1.3 !important;
  }

  html body #customer-ai-request-modal .cai-explanation strong {
    font-size: 0.72rem !important;
  }
}

@media (max-width: 520px) {
  html body #customer-ai-request-modal .cai-head {
    padding: 12px 16px 10px !important;
    row-gap: 4px !important;
  }

  html body #customer-ai-request-modal .cai-head-top {
    padding-right: 48px !important;
  }

  html body #customer-ai-request-modal .cai-mode-switch {
    gap: 2px !important;
    padding: 2px !important;
  }

  html body #customer-ai-request-modal .cai-mode-btn {
    padding: 5px 7px !important;
    font-size: 0.62rem !important;
  }

  html body #customer-ai-request-modal .cai-flow-steps {
    margin-top: 8px !important;
    padding-top: 8px !important;
  }

  html body #customer-ai-request-modal .cai-mode-switch {
    width: auto !important;
    margin-left: 0 !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
  }

  html body #customer-ai-request-modal .cai-mode-btn {
    padding: 6px 8px !important;
    font-size: 0.64rem !important;
  }
}

/* AI spacing compression v1 */
@media (min-width: 521px) and (max-width: 820px) {
  html body #customer-ai-request-modal .cai-head-top {
    position: relative !important;
    padding-right: 0 !important;
  }

  html body #customer-ai-request-modal .cai-head-left {
    min-width: 0 !important;
    padding-right: 190px !important;
  }

  html body #customer-ai-request-modal .cai-mode-switch {
    position: absolute !important;
    top: 0 !important;
    right: 60px !important;
  }

  html body #customer-ai-request-modal .cai-head {
    gap: 8px !important;
  }
}

@media (min-width: 821px) {
  html body #customer-ai-request-modal:not(.cai-drafts-mode) .cai-entry-shell {
    gap: 8px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  html body #customer-ai-request-modal:not(.cai-drafts-mode) .cai-textarea {
    min-height: 120px !important;
    max-height: 150px !important;
  }

  html body #customer-ai-request-modal:not(.cai-drafts-mode) .cai-textarea-footer {
    min-height: 44px !important;
    padding-top: 7px !important;
    padding-bottom: 8px !important;
  }

  html body #customer-ai-request-modal:not(.cai-drafts-mode) .cai-explanation {
    gap: 3px !important;
    padding: 9px 12px !important;
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
  }

  html body #customer-ai-request-modal:not(.cai-drafts-mode) .cai-explanation strong {
    font-size: 0.74rem !important;
  }

  html body #customer-ai-request-modal:not(.cai-drafts-mode) .cai-entry-footer {
    padding-top: 8px !important;
    padding-bottom: 10px !important;
  }

  html body #customer-ai-request-modal:not(.cai-drafts-mode) .cai-entry-footer .cai-submit {
    min-height: 50px !important;
  }
}

html body #customer-ai-request-modal .customer-ai-draft-card {
  gap: 8px !important;
}

html body #customer-ai-request-modal .cai-draft-field {
  gap: 2px !important;
}

html body #customer-ai-request-modal .cai-draft-field > div {
  margin-bottom: 0 !important;
}

html body #customer-ai-request-modal .customer-ai-draft-plan {
  gap: 8px !important;
  padding-top: 8px !important;
}

/* AI horizontal overflow cleanup v1 */
html body #customer-ai-request-modal .cai-chip > span:last-child {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 820px) {
  html body #customer-ai-request-modal .customer-ai-draft-plan-toggle {
    min-width: 0 !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  html body #customer-ai-request-modal .customer-ai-draft-plan__label,
  html body #customer-ai-request-modal .customer-ai-draft-plan__count,
  html body #customer-ai-request-modal .customer-ai-draft-plan__hint {
    min-width: 0 !important;
    font-size: 0.62rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body #customer-ai-request-modal .customer-ai-draft-plan__label {
    flex: 1 1 auto !important;
  }

  html body #customer-ai-request-modal .customer-ai-draft-plan__count {
    flex: 0 0 auto !important;
  }

  html body #customer-ai-request-modal .customer-ai-draft-plan__hint {
    flex: 0 1 82px !important;
  }

  html body #customer-ai-request-modal .customer-ai-draft-plan__icon,
  html body #customer-ai-request-modal .customer-ai-create-selected-btn {
    min-width: 0 !important;
  }

  html body #customer-ai-request-modal .customer-ai-create-selected-btn {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* AI entry content-fit v1 */
html body #customer-ai-request-modal:not(.cai-drafts-mode) .customer-ai-studio-dialog {
  height: auto !important;
  max-height: calc(100dvh - 32px) !important;
  overflow: hidden !important;
}

html body #customer-ai-request-modal:not(.cai-drafts-mode) .customer-ai-request-modal-content {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html body #customer-ai-request-modal:not(.cai-drafts-mode) .customer-ai-studio-form {
  flex: 0 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
}

html body #customer-ai-request-modal:not(.cai-drafts-mode) .cai-entry-scroll {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* AI entry short viewport compression v1 */
@media (min-width: 821px) and (max-height: 820px) {
  html body #customer-ai-request-modal:not(.cai-drafts-mode) .cai-entry-shell {
    gap: 6px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  html body #customer-ai-request-modal:not(.cai-drafts-mode) .cai-textarea {
    min-height: 110px !important;
    max-height: 140px !important;
  }

  html body #customer-ai-request-modal:not(.cai-drafts-mode) .cai-textarea-footer {
    min-height: 38px !important;
    padding-top: 4px !important;
    padding-bottom: 6px !important;
  }

  html body #customer-ai-request-modal:not(.cai-drafts-mode) .cai-explanation {
    gap: 2px !important;
    padding: 7px 10px !important;
    line-height: 1.25 !important;
  }

  html body #customer-ai-request-modal:not(.cai-drafts-mode) .cai-entry-footer {
    padding-top: 6px !important;
    padding-bottom: 8px !important;
  }

  html body #customer-ai-request-modal:not(.cai-drafts-mode) .cai-entry-footer .cai-submit {
    min-height: 46px !important;
  }
}

/* AI draft content-fit v1 */
@media (min-width: 821px) {
  html body #customer-ai-request-modal.cai-drafts-mode .customer-ai-studio-dialog {
    height: auto !important;
    max-height: calc(100dvh - 32px) !important;
    overflow: hidden !important;
  }

  html body #customer-ai-request-modal.cai-drafts-mode .customer-ai-request-modal-content,
  html body #customer-ai-request-modal.cai-drafts-mode .customer-ai-studio-form,
  html body #customer-ai-request-modal.cai-drafts-mode .customer-ai-studio-grid,
  html body #customer-ai-request-modal.cai-drafts-mode #customer-ai-draft-preview {
    height: auto !important;
    min-height: 0 !important;
  }

  html body #customer-ai-request-modal.cai-drafts-mode .customer-ai-request-modal-content {
    flex: 0 1 auto !important;
    overflow: hidden !important;
  }

  html body #customer-ai-request-modal.cai-drafts-mode .customer-ai-studio-form {
    flex: 0 1 auto !important;
    overflow: visible !important;
  }

  html body #customer-ai-request-modal.cai-drafts-mode .customer-ai-studio-grid {
    align-items: start !important;
    overflow: visible !important;
  }

  html body #customer-ai-request-modal.cai-drafts-mode .customer-ai-context-panel,
  html body #customer-ai-request-modal.cai-drafts-mode .customer-ai-drafts-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body #customer-ai-request-modal.cai-drafts-mode #customer-ai-draft-preview {
    flex: 0 1 auto !important;
    overflow: visible !important;
  }

  html body #customer-ai-request-modal.cai-drafts-mode #customer-ai-draft-preview > div[style*="flex:1"] {
    flex: 0 1 auto !important;
    min-height: 0 !important;
  }

  html body #customer-ai-request-modal.cai-drafts-mode .customer-ai-drafts-scroll {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    height: max-content !important;
    max-height: calc(100dvh - 420px) !important;
    align-items: start !important;
    align-content: start !important;
    overflow-y: auto !important;
  }

  html body #customer-ai-request-modal.cai-drafts-mode .customer-ai-drafts-scroll:has(> .customer-ai-draft-card:only-child) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body #customer-ai-request-modal.cai-drafts-mode .customer-ai-draft-footer {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    flex: 0 0 auto !important;
    margin-top: 10px !important;
  }
}

/* Subscriber responsive workspace: the admin rail is hidden, so it must not reserve width. */
@media (min-width: 761px) and (max-width: 1839px) {
  body.subscriber-logged-in .main-content,
  body.subscriber-logged-in .main-content.no-left-sidebar,
  body.subscriber-logged-in .main-content.no-right-sidebar {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.subscriber-logged-in .panels-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Tablet landscape calendar header: keep copy, controls, and close action on one row. */
@media (min-width: 768px) and (max-width: 1023px) {
  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-dialog-header {
    grid-template-columns: minmax(0, 1fr) auto 44px !important;
    grid-template-areas: "copy controls close" !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px 24px 14px !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-close {
    position: static !important;
    grid-area: close !important;
    justify-self: end !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-controls {
    grid-area: controls !important;
    display: flex !important;
    align-items: center !important;
    justify-self: end !important;
    width: auto !important;
  }

  body.subscriber-logged-in .customer-work-calendar-dialog--calendar-v2 .customer-work-calendar-month-nav {
    min-width: 204px !important;
    width: 204px !important;
  }
}