/* RPL It Theme for Narrative OS */
/* Narrative OS structural CSS with RPL It Australia brand colors */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* RPL It brand tokens (from https://rplit.com.au/) */
  --rplit-primary-blue: #2D4A8F;
  --rplit-dark-blue:    #012951;
  --rplit-primary-red:  #E32251;
  --rplit-red-hover:    #C01F46;
  --rplit-darkest-navy: #000F1D;
  --rplit-navy-alt:     #00172E;
  --rplit-light-gray:   #F5F5F7;
  --rplit-border:       #DCDDE8;
  --rplit-text:         #292F29;
  --rplit-muted:        #5F6B85;
  --rplit-white:        #ffffff;

  /* Surfaces */
  --nos-bg:           #F5F5F7;
  --nos-bg-hover:     #eef0f5;
  --nos-surface:      #ffffff;
  --nos-surface-1:    #ffffff;
  --nos-surface-2:    #F5F5F7;
  --nos-surface-3:    #eef0f5;
  --nos-light:        #F5F5F7;

  /* Borders */
  --nos-border:       #DCDDE8;
  --nos-border-light: #c7c9d8;

  /* Text */
  --nos-text:         #292F29;
  --nos-text-muted:   #5F6B85;
  --nos-text-dim:     #7a8499;
  --nos-muted:        #5F6B85;

  /* Primary / accent */
  --nos-primary:       #2D4A8F;
  --nos-primary-dark:  #012951;
  --nos-primary-light: rgba(45, 74, 143, 0.10);
  --nos-accent:        #E32251;
  --nos-accent-hover:  #C01F46;
  --nos-accent-muted:  rgba(227, 34, 81, 0.12);

  /* Status */
  --nos-published:    #10b981;
  --nos-published-bg: rgba(16, 185, 129, 0.12);
  --nos-todo:         #ef4444;
  --nos-todo-bg:      rgba(239, 68, 68, 0.10);
  --nos-draft:        #5F6B85;
  --nos-draft-bg:     rgba(95, 107, 133, 0.12);
  --nos-error:        #ef4444;

  /* KPI icon colors (kept from Narrative OS for universal UX) */
  --nos-kpi-users:    #818cf8;
  --nos-kpi-sessions: #34d399;
  --nos-kpi-duration: #f87171;
  --nos-kpi-events:   #a78bfa;

  /* Legacy mapping (keeps old var references working) */
  --wdr-navy:       #2D4A8F;
  --wdr-dark-blue:  #012951;
  --wdr-light-blue: #2D4A8F;
  --wdr-gray:       #5F6B85;
  --wdr-light-gray: #F5F5F7;
  --wdr-white:      #ffffff;
  --wdr-accent:     #E32251;
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  color: var(--nos-text);
  background: var(--nos-bg);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--nos-accent-hover); text-decoration: none; }
a:hover { color: var(--nos-accent-hover); text-decoration: underline; }

/* ============================================================
   LEGACY HEADER (old views)
   ============================================================ */
.header {
  background: var(--nos-surface-1);
  padding: 20px 30px;
  border-bottom: 1px solid var(--nos-border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  position: relative;
}

.header-logos {
  position: absolute;
  top: 20px;
  right: 30px;
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 10;
}

.header-logo { object-fit: contain; }

.breadcrumb {
  color: var(--nos-text-muted);
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 500;
}

.breadcrumb a {
  color: var(--nos-text);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--nos-accent-hover);
  text-decoration: underline;
}

#page-title {
  color: var(--nos-text);
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

/* ============================================================
   LEGACY NAV (old views)
   ============================================================ */
.main-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--nos-border);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  color: var(--nos-text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.2s ease;
  background: transparent;
  border: 1px solid transparent;
}

.nav-link:hover {
  background: var(--nos-surface-2);
  color: var(--nos-text);
  border-color: var(--nos-border);
  text-decoration: none;
}

.nav-link.active {
  background: var(--nos-accent);
  color: #fff;
  border-color: var(--nos-accent);
}

.nav-link i { font-size: 14px; }

/* ============================================================
   MAIN CONTENT AREA (old views)
   ============================================================ */
.persona-overview {
  padding: 30px;
  max-width: 1400px;
  margin: 0 auto;
}

/* ============================================================
   CARDS / SURFACES (old views, reskinned dark)
   ============================================================ */
.persona-details-report {
  background: var(--nos-surface-1);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  overflow: hidden;
  margin-bottom: 24px;
  border: 1px solid var(--nos-border);
}

.persona-header {
  background: linear-gradient(135deg, var(--nos-accent) 0%, #C01F46 100%);
  padding: 30px;
  border-bottom: 1px solid var(--nos-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.persona-header-info { flex: 1; }

.persona-image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.3);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.persona-image:hover { transform: scale(1.05); }

.persona-archetype-name {
  color: #fff;
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0;
}

.persona-individual-name {
  color: rgba(255,255,255,0.85);
  font-size: 1.125rem;
  font-weight: 500;
  margin: 4px 0 0 0;
}

/* ============================================================
   ACCORDION (old views, reskinned dark)
   ============================================================ */
.accordion { background: var(--nos-surface-1); }

.accordion-header {
  background: var(--nos-surface-1);
  border: none;
  border-bottom: 1px solid var(--nos-border);
  padding: 20px 30px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--nos-text);
  text-align: left;
  width: 100%;
  transition: all 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-header:hover {
  background: var(--nos-surface-2);
  color: var(--nos-accent-hover);
}

.accordion-header.active {
  background: var(--nos-surface-2);
  color: #fff;
}

.accordion-header.active .category-kpis .kpi-metric,
.accordion-header.active .category-kpis .kpi-metric i,
.accordion-header.active .kubaa-stage-kpis .kpi-metric,
.accordion-header.active .kubaa-stage-kpis .kpi-metric i {
  color: var(--nos-text);
}

.accordion-header::after {
  content: '+';
  color: var(--nos-accent);
  font-size: 1.5rem;
  font-weight: 600;
}

.accordion-header.active::after {
  content: '−';
  color: var(--nos-text);
}

.accordion-header .section-progress { margin-left: auto; margin-right: 50px; min-width: 220px; flex-shrink: 0; }
.accordion-header .section-progress-bar { width: 120px; }
.accordion-header .section-progress-text { font-size: 0.8rem; min-width: 70px; }

.category-title-section { flex: 1; font-weight: 600; font-size: 1.125rem; }
.category-metrics-section { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.category-kpis .kpi-display { gap: 16px; }

.category-progress { display: flex; align-items: center; gap: 8px; margin-right: 30px; min-width: 180px; flex-shrink: 0; }
.category-progress .progress-bar { width: 100px; height: 6px; }
.category-progress .progress-text { font-size: 0.75rem; min-width: 50px; }

.accordion-header .category-progress { margin-left: auto; margin-right: 30px; min-width: 140px; flex-shrink: 0; }
.accordion-header .category-progress .progress-bar { width: 80px; height: 4px; }
.accordion-header .category-progress .progress-text { font-size: 0.7rem; min-width: 40px; color: var(--nos-text-muted); }

.accordion-content {
  display: none;
  padding: 30px;
  background: var(--nos-surface-1);
  border-bottom: 1px solid var(--nos-border);
}

.accordion-content.show { display: block; }

/* ============================================================
   PROGRESS BARS (reskinned)
   ============================================================ */
.section-progress { display: flex; align-items: center; gap: 12px; margin-left: auto; margin-right: 30px; min-width: 280px; }
.section-progress-bar { width: 160px; height: 8px; background: var(--nos-surface-3); border-radius: 4px; overflow: hidden; flex-shrink: 0; }
.progress-bar { width: 120px; height: 6px; background: var(--nos-surface-3); border-radius: 3px; overflow: hidden; position: relative; }
.progress-bar .progress-fill { height: 100%; background: linear-gradient(90deg, var(--nos-accent), var(--nos-accent-hover)); border-radius: 3px; transition: width 0.3s ease; min-width: 2px; }
.section-progress-bar .progress-fill { height: 100%; background: linear-gradient(90deg, var(--nos-accent), var(--nos-accent-hover)); transition: width 0.3s ease; min-width: 2px; }
.section-progress-text { font-size: 0.9rem; font-weight: 600; color: var(--nos-text); white-space: nowrap; min-width: 80px; text-align: right; }
.progress-text { font-size: 0.8rem; font-weight: 500; color: var(--nos-text-muted); white-space: nowrap; min-width: 35px; }

.section-header-with-progress { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.section-header-with-progress .section-title { margin-bottom: 0; flex: 1; }
.section-title-with-progress { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 2px solid var(--nos-accent); margin-bottom: 20px; }
.section-title-with-progress .section-title { margin: 0 !important; padding: 0 0 15px 0; border-bottom: none !important; }
.section-progress-inline { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  letter-spacing: 0.025em;
}

.btn-primary {
  background: var(--nos-accent);
  color: #fff;
  border: 1px solid var(--nos-accent);
}

.btn-primary:hover {
  background: var(--nos-accent-hover);
  border-color: var(--nos-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(227,34,81,0.3);
}

.btn-success {
  background: var(--nos-published);
  color: #fff;
  border: 1px solid var(--nos-published);
}

.btn-success:hover {
  background: #059669;
  border-color: #059669;
  transform: translateY(-1px);
}

.btn-avalanche {
  background: rgba(45, 74, 143, 0.12);
  color: #2D4A8F;
  border: 1px solid rgba(45, 74, 143, 0.25);
}
.btn-avalanche:hover {
  background: rgba(45, 74, 143, 0.2);
  border-color: rgba(45, 74, 143, 0.4);
}
.btn-avalanche:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn-avalanche i {
  font-size: 0.8em;
}

.btn-secondary {
  background: var(--nos-surface-2);
  color: var(--nos-text-muted);
  border: 1px solid var(--nos-border);
}

.btn-secondary:hover {
  background: var(--nos-surface-3);
  border-color: var(--nos-border-light);
  color: var(--nos-text);
}

/* ============================================================
   STATUS BADGES
   ============================================================ */
.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-todo { background: var(--nos-todo-bg); color: var(--nos-todo); border: 1px solid rgba(239,68,68,0.25); }
.status-published { background: var(--nos-published-bg); color: var(--nos-published); border: 1px solid rgba(16,185,129,0.25); }
.status-in_progress { background: rgba(227,34,81,0.12); color: var(--nos-accent-hover); border: 1px solid rgba(227,34,81,0.25); }

/* ============================================================
   KPI METRICS
   ============================================================ */
.kpi-display { display: flex; align-items: center; gap: 12px; }
.content-item-kpis { display: flex; align-items: center; gap: 12px; margin-right: 8px; }

.kpi-display-sm .kpi-metric { font-size: 0.75rem; }
.kpi-display-sm .kpi-metric i { font-size: 0.8rem; }
.kpi-display-md .kpi-metric { font-size: 0.85rem; }
.kpi-display-md .kpi-metric i { font-size: 0.9rem; }
.kpi-display-lg .kpi-metric { font-size: 1rem; }
.kpi-display-lg .kpi-metric i { font-size: 1.1rem; }

.kpi-metric { display: flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 500; color: var(--nos-text); line-height: 1; }
.kpi-metric i { font-size: 0.8rem; margin-right: 2px; }
.kpi-metric.kpi-users i { color: var(--nos-kpi-users); }
.kpi-metric.kpi-sessions i { color: var(--nos-kpi-sessions); }
.kpi-metric.kpi-duration i { color: var(--nos-kpi-duration); }
.kpi-metric.kpi-events i { color: var(--nos-kpi-events); }
.kpi-metric.kpi-avg-events i { color: var(--nos-kpi-duration); }
.kpi-metric.kpi-empty { opacity: 0.5; }
.kpi-metric.kpi-empty i { color: var(--nos-text-dim); }

/* Problem-level & persona-level KPI layouts */
.section-metrics-and-progress { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.problem-level-kpis { flex-shrink: 0; }
.problem-level-kpis .kpi-display { gap: 20px; }
.problem-single-line { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.problem-title-and-description { flex: 1; min-width: 0; }
.problem-title-and-description h3 { margin: 0 0 4px 0; font-size: 1rem; font-weight: 600; line-height: 1.2; }
.problem-title-and-description p { margin: 0; font-size: 0.85rem; color: var(--nos-text-muted); line-height: 1.3; }
.problem-metrics-and-progress { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.problem-kpis { flex-shrink: 0; }
.problem-kpis .kpi-display { gap: 12px; }
.problem-progress { flex-shrink: 0; }

.kubaa-stage-metrics-and-progress { display: flex; align-items: center; margin-left: auto; gap: 20px; flex-shrink: 0; }
.kubaa-stage-kpis { flex-shrink: 0; }
.kubaa-stage-kpis .kpi-display { gap: 12px; }
.kubaa-stage-title-section { flex-shrink: 0; }

.persona-header-kpis {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.1);
  min-width: 420px;
}

.persona-kpi-header-title { color: #fff; font-size: 1rem; font-weight: 600; margin: 0; text-align: center; letter-spacing: 0.5px; opacity: 0.9; }
.persona-kpi-header-display { background: rgba(255,255,255,0.08); border-radius: 8px; padding: 12px 20px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); }
.persona-kpi-header-display .kpi-display { gap: 24px; }
.persona-kpi-header-display .kpi-metric { color: #fff; font-weight: 600; }
.persona-kpi-header-display .kpi-metric i { color: var(--nos-accent-hover); }

/* ============================================================
   CONTENT ITEMS (old views, reskinned)
   ============================================================ */
.info-section {
  background: var(--nos-surface-2);
  padding: 20px;
  border-radius: 6px;
  border-left: 4px solid var(--nos-accent);
}

.info-section.content-item {
  background: var(--nos-surface-1);
  border: 1px solid var(--nos-border);
  border-radius: 6px;
  margin-bottom: 2px;
  padding: 0;
  transition: all 0.2s ease;
  border-left: 1px solid var(--nos-border);
  cursor: pointer;
}

.info-section.content-item:hover {
  background: var(--nos-surface-2);
  border-color: var(--nos-border-light);
}

.content-item .content-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  min-height: 48px;
  transition: background 0.2s ease;
}

.content-item .content-item-header:hover { background: rgba(227,34,81,0.04); }

.content-item-title-section { display: flex; align-items: center; gap: 12px; flex: 1; margin-right: 16px; }
.content-item-title-section h3 { color: var(--nos-text-muted); font-size: 1rem; font-weight: 500; margin: 0; line-height: 1.4; }
.content-item-actions { display: flex; align-items: center; gap: 12px; }

.status-badge.status-published { background: var(--nos-published-bg); color: var(--nos-published); }
.status-badge.status-todo { background: var(--nos-draft-bg); color: var(--nos-text-muted); }

.info-section h3 { color: var(--nos-text); font-size: 1rem; font-weight: 500; margin-bottom: 12px; }
.info-section p { color: var(--nos-text-muted); line-height: 1.6; margin-bottom: 0; }
.info-section ul { list-style-type: disc; margin-left: 20px; color: var(--nos-text-muted); line-height: 1.6; }
.info-section ul li { margin-bottom: 5px; }
.info-section strong { color: var(--nos-text); font-weight: 600; }

/* ============================================================
   CONTENT ITEM ROW (old views)
   ============================================================ */
.content-item-row {
  background: var(--nos-surface-1);
  border: 1px solid var(--nos-border);
  border-radius: 6px;
  margin-bottom: 2px;
  transition: all 0.2s ease;
  overflow: hidden;
  position: relative;
}

.content-item-row:hover {
  background: var(--nos-surface-2);
  border-color: var(--nos-border-light);
}

.content-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s ease;
  width: 100%;
  min-height: 48px;
}

.item-info { display: flex; align-items: center; gap: 12px; flex: 1; margin-right: 16px; }
.item-title { color: var(--nos-text); font-size: 0.875rem; font-weight: 500; margin: 0; line-height: 1.4; }
.item-brief { background: var(--nos-surface-3); color: var(--nos-text-muted); padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 500; white-space: nowrap; }
.item-status { font-size: 0.75rem; padding: 4px 8px; border-radius: 4px; font-weight: 500; margin-right: 12px; }
.item-status.published { background: var(--nos-published-bg); color: var(--nos-published); }
.item-status.todo { background: var(--nos-draft-bg); color: var(--nos-text-muted); }

.content-details { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; margin-top: 0; }
.content-details.expanded { max-height: 1000px; margin-top: 0; }

.content-brief, .seo-considerations, .published-url-section {
  margin: 15px 20px;
  padding: 15px;
  background: var(--nos-surface-2);
  border-radius: 6px;
  border-left: 3px solid var(--nos-accent);
}

.content-brief h4, .seo-considerations h4 { color: var(--nos-text); font-size: 0.9rem; font-weight: 600; margin-bottom: 8px; }
.content-brief p, .seo-considerations p { color: var(--nos-text-muted); font-size: 1rem; line-height: 1.5; margin: 0; }
.published-url-section strong { color: var(--nos-text); font-size: 0.9rem; font-weight: 600; margin-bottom: 8px; display: block; }
.published-url-section p { color: var(--nos-text-muted); font-size: 1rem; line-height: 1.5; margin: 0; }
.published-url-section .published-url-link { color: var(--nos-accent-hover); }
.published-url-section .published-url-link:hover { color: var(--nos-accent); text-decoration: underline; }

.content-actions { margin: 15px 20px; display: flex; gap: 12px; justify-content: flex-start; }

/* ============================================================
   CONTENT TYPE ACCORDION
   ============================================================ */
.content-type-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 12px 16px;
  background: var(--nos-surface-2);
  border: 1px solid var(--nos-border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.content-type-header-row:hover { background: var(--nos-surface-3); border-color: var(--nos-border-light); }
.content-type-title-section { display: flex; align-items: baseline; gap: 12px; }
.content-type-header { margin: 0; font-size: 1rem; font-weight: 600; color: var(--nos-text); line-height: 1.2; }
.content-type-count { font-size: 0.8rem; color: var(--nos-text-muted); font-weight: 400; }
.content-type-actions { display: flex; align-items: center; gap: 16px; }
.content-type-kpis .kpi-display { gap: 16px; }
.accordion-toggle { color: var(--nos-text-muted); font-size: 0.9rem; transition: color 0.2s ease; }
.content-type-header-row:hover .accordion-toggle { color: var(--nos-accent-hover); }
.content-type-items { padding: 0 16px 16px; border: 1px solid var(--nos-border); border-top: none; border-radius: 0 0 6px 6px; margin-top: -1px; background: var(--nos-surface-1); }

/* ============================================================
   PERSONA SECTIONS
   ============================================================ */
.persona-section { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--nos-border); }
.persona-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.section-title { color: var(--nos-text); font-size: 1.3rem; font-weight: 600; margin-bottom: 20px; padding: 0 0 8px 20px; border-bottom: 1px solid rgba(227,34,81,0.4); }
.persona-section .section-title { font-size: 1.5rem; padding: 0 0 10px 20px; border-bottom: 2px solid var(--nos-accent); }
.persona-info-grid { display: grid; grid-template-columns: 1fr; gap: 20px; padding-left: 20px; }

.problem-card-clickable { grid-column: 1 / -1; transition: all 0.3s ease; cursor: pointer; }
.problem-card-clickable:hover { background: rgba(227,34,81,0.06); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(227,34,81,0.15); }

.content-types-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; margin-bottom: 30px; }

/* ============================================================
   MODALS (reskinned)
   ============================================================ */
.modal { display: none; position: fixed; z-index: 1000; padding-top: 60px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.85); }

.publish-url-modal, .ai-content-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,15,29,0.85);
  backdrop-filter: blur(4px);
}

.modal .modal-content { margin: auto; display: block; width: 90%; max-width: 800px; position: relative; }
.modal-image { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
.close { position: absolute; top: -50px; right: 0; color: var(--nos-accent); font-size: 35px; font-weight: bold; cursor: pointer; }
.close:hover { color: var(--nos-text); }
.modal-caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: var(--nos-text); padding: 20px 0; font-size: 1.1rem; font-weight: 500; }

.publish-url-modal-content, .ai-content-modal-content {
  background: var(--nos-surface-1);
  margin: 5% auto;
  padding: 0;
  border: 1px solid var(--nos-accent);
  border-radius: 8px;
  width: 90%;
  max-width: 800px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal-header, .publish-url-modal-header {
  padding: 24px 30px;
  border-bottom: 1px solid var(--nos-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--nos-surface-2);
  color: var(--nos-text);
  border-radius: 8px 8px 0 0;
}

.ai-content-modal-header {
  background: var(--nos-surface-2);
  padding: 20px 25px;
  border-bottom: 1px solid var(--nos-accent);
  border-radius: 8px 8px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title, .publish-url-modal-title { font-size: 1.25rem; font-weight: 600; margin: 0; }
.ai-content-modal-title { color: var(--nos-text); font-size: 1.5rem; font-weight: 700; margin: 0; }

.close, .publish-url-modal-close {
  background: none; border: none; font-size: 24px; color: var(--nos-text-muted); cursor: pointer;
  padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 4px; transition: background 0.2s ease;
}

.ai-content-modal-close { color: var(--nos-accent); font-size: 28px; font-weight: bold; cursor: pointer; background: none; border: none; padding: 0; line-height: 1; }
.close:hover, .publish-url-modal-close:hover { background: rgba(255,255,255,0.1); }
.ai-content-modal-close:hover { color: var(--nos-text); }

.modal-body, .publish-url-modal-body { padding: 30px; }
.ai-content-modal-body { padding: 25px; overflow-y: auto; flex-grow: 1; }

.ai-content-display {
  background: var(--nos-surface-2);
  border: 1px solid var(--nos-border);
  border-radius: 8px;
  padding: 20px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--nos-text);
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 20px;
}

.ai-content-display h1 { color: var(--nos-text); font-size: 1.8rem; font-weight: 700; margin: 0 0 20px 0; border-bottom: 2px solid var(--nos-accent); padding-bottom: 10px; }
.ai-content-display h2 { color: var(--nos-text); font-size: 1.4rem; font-weight: 600; margin: 25px 0 15px 0; }
.ai-content-display h3 { color: var(--nos-text); font-size: 1.2rem; font-weight: 600; margin: 20px 0 10px 0; }
.ai-content-display p { margin: 0 0 15px 0; color: var(--nos-text-muted); }
.ai-content-display strong { color: var(--nos-text); font-weight: 600; }
.ai-content-display em { color: var(--nos-accent-hover); font-style: italic; }
.ai-content-display code { background: var(--nos-accent-muted); color: var(--nos-accent-hover); padding: 2px 6px; border-radius: 4px; font-family: 'Consolas', monospace; font-size: 0.85rem; }
.ai-content-display pre { background: var(--nos-surface-3); border: 1px solid var(--nos-border); border-radius: 6px; padding: 15px; margin: 15px 0; overflow-x: auto; }
.ai-content-display pre code { background: none; color: var(--nos-text); padding: 0; font-size: 0.9rem; }
.ai-content-actions { display: flex; gap: 12px; justify-content: flex-end; padding-top: 15px; border-top: 1px solid var(--nos-border); }

/* Form inputs */
.url-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--nos-border);
  border-radius: 6px;
  font-size: 16px;
  background: var(--nos-surface-2);
  color: var(--nos-text);
  transition: border-color 0.2s ease;
}

.url-input:focus {
  outline: none;
  border-color: var(--nos-accent);
  box-shadow: 0 0 0 3px rgba(227,34,81,0.15);
}

/* ============================================================
   JTBD VIEW (old views)
   ============================================================ */
.jtbd-list-container { max-width: 1200px; margin: 0 auto; padding: 30px; background: var(--nos-surface-1); }
.jtbd-section { margin-bottom: 40px; padding: 30px; background: var(--nos-surface-2); border-radius: 12px; border: 1px solid var(--nos-border); }
.jtbd-section-title { color: var(--nos-text); font-size: 1.8rem; font-weight: 700; margin-bottom: 32px; padding-bottom: 16px; border-bottom: 3px solid var(--nos-accent); text-transform: uppercase; letter-spacing: 0.5px; }
.jtbd-category-title { color: var(--nos-text); font-weight: 600; font-size: 1.3rem; padding: 12px 20px; border-radius: 8px; background: var(--nos-surface-3); margin-bottom: 16px; border-left: 6px solid var(--nos-accent); }
.jtbd-subcategory-title { color: var(--nos-text-muted); font-weight: 500; font-size: 1.05rem; padding: 10px 16px; border-radius: 6px; background: rgba(227,34,81,0.06); margin-bottom: 12px; margin-left: 24px; border-left: 4px solid var(--nos-accent-hover); }

.inactive-jtbd {
  opacity: 0.8;
  background: var(--nos-surface-1);
  border: 1px solid var(--nos-border);
  border-radius: 8px;
  margin-bottom: 12px;
  margin-left: 40px;
  padding: 16px 20px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.inactive-jtbd:hover { opacity: 1; border-color: var(--nos-accent); box-shadow: 0 6px 16px rgba(227,34,81,0.15); transform: translateY(-1px); }

.stage-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--nos-border); transition: background 0.3s ease; border-radius: 4px; }
.stage-row:last-child { border-bottom: none; }
.stage-row:hover { background: rgba(227,34,81,0.06); }
.stage-name { color: var(--nos-text); font-weight: 500; font-size: 0.95rem; }
.stage-count { background: linear-gradient(135deg, var(--nos-accent), var(--nos-accent-hover)); color: #fff; padding: 4px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: 600; min-width: 24px; text-align: center; }

.persona-jtbd-card {
  background: linear-gradient(135deg, var(--nos-accent) 0%, #C01F46 100%);
  border: 1px solid var(--nos-accent);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  position: relative;
}

.persona-info-display { display: flex; align-items: center; gap: 20px; padding-bottom: 16px; }
.persona-photo { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,0.3); }
.jtbd-quote { font-style: italic; color: rgba(255,255,255,0.9); font-size: 1.1rem; line-height: 1.4; margin: 20px 0 0 0; }
.persona-jtbd-card-link { text-decoration: none; color: inherit; display: block; transition: transform 0.2s ease; }
.persona-jtbd-card-link:hover { transform: translateY(-2px); }

/* ============================================================
   KUBAA ACCORDION VISUAL HIERARCHY
   ============================================================ */
.kubaa-stage-content { background-color: var(--nos-surface-2); border-left: 3px solid var(--nos-border); margin-left: 8px; }
.kubaa-categories-container { background-color: transparent; }
.kubaa-category-content { background-color: var(--nos-surface-1); border: 1px solid var(--nos-border); border-radius: 6px; margin: 8px 0; padding: 16px; }
.category-description-section { background-color: var(--nos-surface-2); border-radius: 4px; padding: 12px; margin-bottom: 16px; border-left: 2px solid var(--nos-accent); }
.category-description-section h3 { color: var(--nos-accent-hover); font-size: 0.875rem; font-weight: 600; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.025em; }
.content-types-container { background-color: var(--nos-surface-1); border-radius: 4px; padding: 8px 0; }
.content-type-section { border-bottom: 1px solid var(--nos-border); margin-bottom: 8px; padding-bottom: 8px; }
.content-type-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

/* ============================================================
   RESPONSIVE (legacy)
   ============================================================ */
@media (max-width: 768px) {
  .header { padding: 16px 20px; }
  #page-title { font-size: 1.75rem; }
  .persona-overview { padding: 20px; }
  .persona-info-grid { grid-template-columns: 1fr; }
  .accordion-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .section-progress { align-self: flex-end; }
}


/* ============================================================
   ╔═══════════════════════════════════════════════════════════╗
   ║  WORKSPACE — NEW VIEWS (Phase 1+)                        ║
   ╚═══════════════════════════════════════════════════════════╝
   ============================================================ */

/* ============================================================
   V2 HEADER
   ============================================================ */
.nos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: var(--nos-surface-1);
  border-bottom: 1px solid var(--nos-border);
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* RPL It logo in header */
.nos-header-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  height: 100%;
}

.nos-header-logo-img {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1);  /* White logo on dark blue header */
  object-fit: contain;
}

.nos-header-logo-img:hover {
  opacity: 0.85;
}

.nos-header-app-name {
  font-size: 1.15rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.02em;
  margin-left: 0.75rem;
  white-space: nowrap;
}

.nos-header-app-name span {
  font-weight: 300;
  opacity: 0.85;
}

.nos-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--nos-text);
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nos-header-title span {
  color: var(--nos-accent-hover);
}

.nos-header-user {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nos-header-email {
  color: var(--nos-text-muted);
  font-size: 0.8rem;
}

.nos-header-logout {
  background: transparent;
  border: 1px solid var(--nos-border);
  color: var(--nos-text-muted);
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nos-header-logout:hover {
  border-color: var(--nos-border-light);
  color: var(--nos-text);
  background: var(--nos-surface-2);
  text-decoration: none;
}

/* ============================================================
   V2 NAV
   ============================================================ */
.nos-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 24px;
  background: var(--nos-bg);
  border-bottom: 1px solid var(--nos-border);
}

.nos-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  color: var(--nos-text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 5px;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

.nos-nav-link:hover {
  color: var(--nos-text);
  background: var(--nos-surface-1);
  text-decoration: none;
}

.nos-nav-link.active {
  color: var(--nos-accent-hover);
  background: var(--nos-accent-muted);
  border-color: rgba(227,34,81,0.2);
}

.nos-nav-link i { font-size: 0.85rem; }

.nos-nav-separator {
  width: 1px;
  height: 20px;
  background: var(--nos-border);
  margin: 0 8px;
}

.nos-nav-problem-select {
  background: var(--nos-surface-1);
  border: 1px solid var(--nos-border);
  color: var(--nos-text);
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.nos-nav-problem-select:focus {
  outline: none;
  border-color: var(--nos-accent);
}

.nos-nav-problem-select option {
  background: var(--nos-surface-1);
  color: var(--nos-text);
}

/* ============================================================
   WORKSPACE LAYOUT
   ============================================================ */
.nos-workspace {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 24px;
}

.nos-workspace-header {
  margin-bottom: 32px;
}

.nos-workspace-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--nos-text);
  margin: 0 0 8px 0;
}

.nos-workspace-subtitle {
  color: var(--nos-text-muted);
  font-size: 0.9rem;
  margin: 0;
}

/* ============================================================
   CORE PROBLEM CARDS
   ============================================================ */
.nos-problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 16px;
}

.nos-problem-card {
  background: var(--nos-surface-1);
  border: 1px solid var(--nos-border);
  border-radius: 8px;
  padding: 24px;
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}

.nos-problem-card:hover {
  border-color: var(--nos-accent);
  box-shadow: 0 4px 16px rgba(227,34,81,0.12);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}

.nos-problem-card-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--nos-text);
  margin: 0 0 8px 0;
}

.nos-problem-card-desc {
  color: var(--nos-text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0 0 16px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nos-problem-card-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.nos-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--nos-text-muted);
}

.nos-stat-value {
  font-weight: 600;
  color: var(--nos-text);
}

.nos-stat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.nos-stat-dot--published { background: var(--nos-published); }
.nos-stat-dot--todo { background: var(--nos-todo); }
.nos-stat-dot--draft { background: var(--nos-draft); }

.nos-problem-card-kpis {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--nos-border);
}

/* ============================================================
   PROBLEM HEADER
   ============================================================ */
.nos-problem-header {
  margin-bottom: 24px;
}

.nos-problem-header-top {
  margin-bottom: 12px;
}

.nos-back-link {
  color: var(--nos-text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s;
}
.nos-back-link:hover {
  color: var(--nos-accent-hover);
  text-decoration: none;
}

.nos-problem-header-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--nos-text);
  margin: 0 0 8px 0;
}

.nos-problem-header-desc {
  color: var(--nos-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  max-width: 800px;
}

/* ============================================================
   PERSONA CONTEXT BAR
   ============================================================ */
.nos-persona-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--nos-surface-1);
  border: 1px solid var(--nos-border);
  border-radius: 8px;
  margin-bottom: 20px;
}

.nos-persona-bar-photo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.nos-persona-bar-photo--placeholder {
  background: var(--nos-surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nos-text-dim);
  font-size: 0.9rem;
}

.nos-persona-bar-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nos-persona-bar-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--nos-text);
}
.nos-persona-bar-role {
  font-size: 0.75rem;
  color: var(--nos-text-dim);
}

/* ============================================================
   STATS BAR (progress + KPIs)
   ============================================================ */
.nos-stats-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 20px;
  background: var(--nos-surface-1);
  border: 1px solid var(--nos-border);
  border-radius: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.nos-stats-bar-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 200px;
}

.nos-progress-bar {
  width: 120px;
  height: 6px;
  background: var(--nos-surface-3);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
.nos-progress-bar-fill {
  height: 100%;
  background: var(--nos-published);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.nos-progress-label {
  font-size: 0.8rem;
  color: var(--nos-text-muted);
}
.nos-progress-label strong {
  color: var(--nos-text);
}

.nos-stats-bar-kpis {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.nos-kpi-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: var(--nos-text-muted);
  background: var(--nos-surface-2);
  padding: 4px 10px;
  border-radius: 4px;
}
.nos-kpi-chip i {
  font-size: 0.7rem;
}

/* ============================================================
   UNASSIGNED BANNER
   ============================================================ */
.nos-unassigned-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--nos-todo-bg);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 8px;
  margin-bottom: 20px;
  color: var(--nos-todo);
  font-size: 0.85rem;
}
.nos-unassigned-banner strong {
  color: var(--nos-text);
}

/* ============================================================
   CATEGORY SECTIONS
   ============================================================ */
.nos-category-section {
  margin-bottom: 32px;
}

.nos-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--nos-border);
}

.nos-category-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--nos-text);
  margin: 0;
}

.nos-category-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ============================================================
   U-STAGE ASSET CARDS
   ============================================================ */
.nos-asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}

.nos-asset-card {
  background: var(--nos-surface-1);
  border: 1px solid var(--nos-border);
  border-radius: 8px;
  padding: 16px 20px;
  transition: all 0.2s ease;
  cursor: default;
}
.nos-asset-card:hover {
  border-color: var(--nos-border-light);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.nos-asset-card--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.nos-asset-card--link:hover {
  border-color: var(--nos-accent);
  box-shadow: 0 4px 16px rgba(227,34,81,0.15);
  transform: translateY(-1px);
  text-decoration: none;
  color: inherit;
}

.nos-asset-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.nos-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.nos-status-dot--published { background: var(--nos-published); }
.nos-status-dot--todo { background: var(--nos-todo); }
.nos-status-dot--draft { background: var(--nos-draft); }

.nos-asset-card-type {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--nos-text-dim);
}

.nos-asset-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--nos-text);
  margin: 0 0 6px 0;
  line-height: 1.4;
}

.nos-asset-card-desc {
  font-size: 0.8rem;
  color: var(--nos-text-muted);
  line-height: 1.5;
  margin: 0 0 12px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nos-asset-card-url {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--nos-accent);
  margin-bottom: 12px;
  overflow: hidden;
}
.nos-asset-card-url i {
  flex-shrink: 0;
  font-size: 0.65rem;
}

.nos-asset-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--nos-border);
  flex-wrap: wrap;
}

.nos-asset-card-cluster {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--nos-text-muted);
}
.nos-asset-card-cluster i {
  color: var(--nos-text-dim);
  font-size: 0.7rem;
}
.nos-asset-card-cluster strong {
  color: var(--nos-text);
}

.nos-text-published {
  color: var(--nos-published);
}

.nos-asset-card-kpis {
  display: flex;
  gap: 10px;
}

.nos-kpi-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--nos-text-muted);
}
.nos-kpi-mini i {
  font-size: 0.65rem;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.nos-empty {
  text-align: center;
  padding: 64px 24px;
  color: var(--nos-text-muted);
}

.nos-empty-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.4;
}

.nos-empty-text {
  font-size: 1rem;
  margin: 0 0 16px 0;
}

.nos-expand-cluster {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 0;
  margin-top: 8px;
  border-top: 1px solid var(--nos-border);
}
.nos-expand-cluster-hint {
  font-size: 0.78rem;
  color: var(--nos-text-dim);
}

.btn-expand-cluster {
  background: rgba(45, 74, 143, 0.12);
  color: #2D4A8F;
  border: 1px solid rgba(45, 74, 143, 0.25);
  padding: 8px 16px;
  font-size: 0.8rem;
}
.btn-expand-cluster:hover {
  background: rgba(45, 74, 143, 0.2);
  border-color: rgba(45, 74, 143, 0.4);
}
.btn-expand-cluster:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn-expand-cluster i {
  font-size: 0.8em;
}

.btn-generate-cluster {
  background: rgba(45, 74, 143, 0.12);
  color: #2D4A8F;
  border: 1px solid rgba(45, 74, 143, 0.25);
  padding: 10px 20px;
  font-size: 0.85rem;
}
.btn-generate-cluster:hover {
  background: rgba(45, 74, 143, 0.2);
  border-color: rgba(45, 74, 143, 0.4);
}
.btn-generate-cluster:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn-generate-cluster i {
  font-size: 0.85em;
}

/* ============================================================
   ASSET DETAIL HEADER
   ============================================================ */
.nos-asset-detail-header {
  margin-bottom: 20px;
}

.nos-asset-detail-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.nos-asset-detail-type,
.nos-asset-detail-category {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--nos-text-dim);
  background: var(--nos-surface-2);
  padding: 3px 10px;
  border-radius: 4px;
}

.nos-asset-detail-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--nos-text);
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.nos-asset-detail-desc {
  color: var(--nos-text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
  max-width: 800px;
}

/* ============================================================
   ASSET INFO BAR
   ============================================================ */
.nos-asset-info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: var(--nos-surface-1);
  border: 1px solid var(--nos-border);
  border-radius: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.nos-asset-info-url {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--nos-text-dim);
  min-width: 0;
}
.nos-asset-info-url i { flex-shrink: 0; }
.nos-asset-info-url a {
  color: var(--nos-accent-hover);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nos-asset-info-kpis {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.nos-asset-info-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ============================================================
   ASSET BRIEF BAR
   ============================================================ */
.nos-asset-brief-bar {
  padding: 16px 20px;
  background: var(--nos-surface-1);
  border: 1px solid var(--nos-border);
  border-radius: 8px;
  margin-bottom: 24px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.nos-detail-section {
  font-size: 0.85rem;
  line-height: 1.5;
}
.nos-detail-section strong {
  color: var(--nos-text);
  font-weight: 600;
  margin-right: 6px;
}
.nos-detail-section p {
  color: var(--nos-text-muted);
  margin: 4px 0 0 0;
}

/* ============================================================
   K-STAGE CLUSTER SECTION
   ============================================================ */
.nos-cluster-section {
  margin-top: 8px;
}

.nos-cluster-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.nos-cluster-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--nos-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nos-cluster-title i {
  color: var(--nos-accent);
  font-size: 1rem;
}

.nos-cluster-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.nos-stat--warn {
  color: var(--nos-todo) !important;
}
.nos-stat--warn strong {
  color: var(--nos-todo);
}

/* ============================================================
   FILTER CHIPS
   ============================================================ */
.nos-filter-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--nos-border);
}

.nos-chip {
  padding: 5px 14px;
  border-radius: 16px;
  font-size: 0.78rem;
  font-weight: 500;
  border: 1px solid var(--nos-border);
  background: var(--nos-surface-1);
  color: var(--nos-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.nos-chip:hover {
  border-color: var(--nos-accent);
  color: var(--nos-text);
  background: var(--nos-surface-2);
}
.nos-chip--active {
  background: var(--nos-accent-muted);
  border-color: var(--nos-accent);
  color: var(--nos-accent-hover);
}

/* ============================================================
   CLUSTER GROUP
   ============================================================ */
.nos-cluster-group {
  margin-bottom: 24px;
}

.nos-cluster-group-header {
  margin-bottom: 8px;
}

.nos-cluster-group-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--nos-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nos-cluster-group-title i {
  font-size: 0.8rem;
}

.nos-cluster-count {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--nos-text-dim);
  background: var(--nos-surface-2);
  padding: 2px 8px;
  border-radius: 10px;
}

.nos-cluster-group--unassigned {
  border-top: 1px solid var(--nos-border);
  padding-top: 20px;
}

/* ============================================================
   CLUSTER TABLE
   ============================================================ */
.nos-cluster-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.nos-cluster-table thead th {
  text-align: left;
  padding: 8px 12px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--nos-text-dim);
  border-bottom: 1px solid var(--nos-border);
}

.nos-cluster-row {
  transition: background 0.15s ease;
  cursor: pointer;
}
.nos-cluster-row:hover {
  background: var(--nos-surface-1);
}

.nos-cluster-row td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(220, 221, 232, 0.5);
  vertical-align: middle;
}

.nos-col-status { width: 32px; text-align: center; }
.nos-col-title { min-width: 200px; }
.nos-col-category { width: 160px; }
.nos-col-keyword { width: 160px; }
.nos-col-kpis { width: 120px; }
.nos-col-actions { width: 220px; text-align: right; }

.nos-cluster-item-title {
  font-weight: 500;
  color: var(--nos-text);
  line-height: 1.4;
}

.nos-cluster-item-type {
  display: inline-block;
  font-size: 0.7rem;
  color: var(--nos-text-dim);
  margin-top: 2px;
}

.nos-cluster-item-url {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--nos-accent);
  margin-top: 4px;
}
.nos-cluster-item-url i {
  font-size: 0.6rem;
}
.nos-cluster-item-url:hover {
  color: var(--nos-accent-hover);
}

/* ============================================================
   CATEGORY + KEYWORD TAGS
   ============================================================ */
.nos-category-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--nos-text-muted);
  background: var(--nos-surface-2);
  padding: 3px 10px;
  border-radius: 4px;
  white-space: nowrap;
}

.nos-keyword-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--nos-accent-hover);
  background: var(--nos-accent-muted);
  padding: 3px 10px;
  border-radius: 4px;
}
.nos-keyword-tag--secondary {
  color: var(--nos-text-muted);
  background: var(--nos-surface-2);
}
.nos-keyword-tag--empty {
  color: var(--nos-text-dim);
  background: transparent;
}

/* ============================================================
   CLUSTER ACTIONS (compact buttons)
   ============================================================ */
.nos-cluster-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.btn-sm {
  padding: 5px 10px;
  font-size: 0.75rem;
  border-radius: 4px;
}
.btn-sm .btn-icon {
  font-size: 0.7rem;
}

.nos-cluster-kpis {
  display: flex;
  gap: 8px;
}

/* ============================================================
   CLUSTER DETAIL ROW (expandable)
   ============================================================ */
.nos-cluster-detail-row td {
  padding: 0;
  border-bottom: 1px solid var(--nos-border);
}

.nos-cluster-detail {
  padding: 16px 20px;
  background: var(--nos-surface-1);
  border-left: 3px solid var(--nos-accent);
  margin: 4px 12px 4px 32px;
  border-radius: 0 6px 6px 0;
}

.nos-cluster-detail .nos-detail-section {
  margin-bottom: 10px;
}
.nos-cluster-detail .nos-detail-section:last-child {
  margin-bottom: 0;
}

.nos-cluster-empty {
  padding: 24px;
  text-align: center;
  color: var(--nos-text-dim);
  font-size: 0.85rem;
}

.nos-text-dim {
  color: var(--nos-text-dim);
}

/* ============================================================
   TARGET ASSIGNER DROPDOWN
   ============================================================ */
.nos-target-assigner {
  background: var(--nos-surface-1);
  border: 1px solid var(--nos-accent);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  width: 300px;
  max-height: 320px;
  overflow-y: auto;
}

.nos-target-assigner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--nos-border);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--nos-text);
}

.nos-target-assigner-close {
  background: none;
  border: none;
  color: var(--nos-text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
}
.nos-target-assigner-close:hover {
  color: var(--nos-text);
}

.nos-target-assigner-options {
  padding: 6px;
}

.nos-target-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--nos-text);
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s;
}
.nos-target-option:hover {
  background: var(--nos-surface-2);
}

.nos-target-option--current {
  background: var(--nos-accent-muted);
  border: 1px solid rgba(227, 34, 81, 0.2);
}

.nos-target-badge {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--nos-accent-hover);
  background: var(--nos-accent-muted);
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: auto;
}

/* ============================================================
   SPINNER (for button loading states)
   ============================================================ */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

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

/* ===================================================================
   PIPELINE VIEW (Phase 4 — Downstream B→A→A)
   Reuses: nos-category-section, nos-category-header, nos-category-name,
           nos-category-meta, nos-empty, nos-problem-header, nos-persona-bar,
           nos-stats-bar, nos-stat, nos-kpi-mini
   =================================================================== */

/* Subcategory header (within a stage section when multiple categories exist) */
.nos-pipeline-subcategory {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--nos-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 16px 0 8px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nos-pipeline-subcategory:first-child {
  margin-top: 0;
}
.nos-pipeline-subcategory-count {
  font-size: 0.78rem;
  font-weight: 400;
  color: rgba(255,255,255,0.35);
  text-transform: none;
  letter-spacing: 0;
}

/* Pipeline item rows */
.nos-pipeline-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}
.nos-pipeline-items:last-child {
  margin-bottom: 0;
}
.nos-pipeline-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--nos-surface-2);
  border: 1px solid transparent;
  border-radius: 6px;
  transition: border-color 0.15s, background 0.15s;
}
.nos-pipeline-item:hover {
  border-color: var(--nos-border);
  background: var(--nos-bg);
}
.nos-pipeline-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nos-pipeline-item-title {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--nos-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nos-pipeline-item-type {
  font-size: 0.78rem;
  color: var(--nos-text-dim);
  background: var(--nos-surface-1);
  padding: 1px 7px;
  border-radius: 3px;
  flex-shrink: 0;
}
.nos-pipeline-item-url {
  font-size: 0.75rem;
  color: var(--nos-accent);
  opacity: 0.7;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.nos-pipeline-item-url:hover {
  opacity: 1;
}
.nos-pipeline-item-kpis {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.nos-pipeline-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Dim stat variant */
.nos-stat--dim {
  color: rgba(255,255,255,0.35);
  font-size: 0.82rem;
}

/* url-input-label + help for dark theme */
.url-input-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--nos-text);
  margin-bottom: 8px;
}
.url-input-help {
  font-size: 0.8rem;
  color: var(--nos-text-dim);
  margin-top: 8px;
}
.publish-url-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* ============================================================
   RESPONSIVE — WORKSPACE VIEWS (768px breakpoint)
   ============================================================ */
@media (max-width: 768px) {
  .nos-workspace {
    padding: 20px 16px;
  }

  .nos-workspace-title {
    font-size: 1.25rem;
  }

  /* Header + Nav */
  .nos-header {
    padding: 10px 16px;
    height: 48px;
  }
  .nos-header-email {
    display: none;
  }
  .nos-nav {
    padding: 6px 16px;
    gap: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nos-nav::-webkit-scrollbar { display: none; }
  .nos-nav-link {
    padding: 5px 10px;
    font-size: 0.8rem;
    white-space: nowrap;
  }
  .nos-nav-separator {
    margin: 0 4px;
  }
  .nos-nav-problem-select {
    font-size: 0.8rem;
    max-width: 180px;
  }

  /* Problem Grid */
  .nos-problem-grid {
    grid-template-columns: 1fr;
  }

  .nos-problem-card {
    padding: 16px;
  }

  /* Problem Header */
  .nos-problem-header-title {
    font-size: 1.25rem;
  }

  /* Stats Bar */
  .nos-stats-bar {
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px;
  }
  .nos-stats-bar-kpis {
    width: 100%;
    justify-content: flex-start;
  }

  /* Asset Grid */
  .nos-asset-grid {
    grid-template-columns: 1fr;
  }

  /* Asset Detail Header */
  .nos-asset-detail-title {
    font-size: 1.2rem;
  }
  .nos-asset-info-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .nos-asset-info-actions {
    width: 100%;
    justify-content: flex-start;
  }

  /* Cluster Table */
  .nos-cluster-table {
    display: block;
  }
  .nos-cluster-table thead {
    display: none;
  }
  .nos-cluster-table tbody {
    display: block;
  }
  .nos-cluster-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid var(--nos-border);
  }
  .nos-cluster-row td {
    padding: 0;
    border-bottom: none;
  }
  .nos-col-status { width: auto; }
  .nos-col-title { width: 100%; min-width: 0; order: -1; }
  .nos-col-category,
  .nos-col-keyword { width: auto; }
  .nos-col-kpis { display: none; }
  .nos-col-actions {
    width: 100%;
    text-align: left;
  }

  /* Filter Chips */
  .nos-filter-chips {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    padding-bottom: 8px;
  }
  .nos-filter-chips::-webkit-scrollbar { display: none; }

  /* Pipeline Items */
  .nos-pipeline-item {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }
  .nos-pipeline-item-info {
    width: 100%;
    flex-wrap: wrap;
  }
  .nos-pipeline-item-kpis {
    display: none;
  }
  .nos-pipeline-item-actions {
    width: 100%;
    justify-content: flex-start;
  }

  /* Persona Bar */
  .nos-persona-bar {
    padding: 10px 12px;
  }
}

/* ============================================================
   FOCUS STATES (accessibility)
   ============================================================ */
.nos-nav-link:focus-visible,
.nos-problem-card:focus-visible,
.nos-asset-card--link:focus-visible,
.nos-chip:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--nos-accent-hover);
  outline-offset: 2px;
}

.nos-nav-problem-select:focus-visible {
  outline: 2px solid var(--nos-accent-hover);
  outline-offset: 1px;
}

/* ============================================================
   DISABLED BUTTON STATE (global)
   ============================================================ */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ============================================================
   ERROR VIEW
   ============================================================ */
.nos-error {
  text-align: center;
  padding: 80px 24px;
  color: var(--nos-text-muted);
}
.nos-error-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  color: var(--nos-error);
  opacity: 0.6;
}
.nos-error-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--nos-text);
  margin: 0 0 8px;
}
.nos-error-message {
  font-size: 0.9rem;
  margin: 0 0 24px;
}
.nos-error-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--nos-accent-hover);
  text-decoration: none;
  font-size: 0.9rem;
}
.nos-error-back:hover {
  text-decoration: underline;
}

/* ============================================================
   LOADING SKELETON (for future use)
   ============================================================ */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.nos-skeleton {
  background: linear-gradient(90deg, var(--nos-surface-2) 25%, var(--nos-surface-3) 50%, var(--nos-surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

/* ============================================================
   AVALANCHE MODAL
   ============================================================ */

.avalanche-modal {
  display: none;
  position: fixed;
  z-index: 1100;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
}

.avalanche-modal-content {
  background: var(--nos-surface-1);
  border: 1px solid var(--nos-border);
  border-radius: 12px;
  width: 100%;
  max-width: 820px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  animation: modalSlideIn 0.25s ease;
}

.avalanche-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--nos-border);
}

.avalanche-modal-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avalanche-modal-icon { font-size: 1.3rem; }

.avalanche-modal-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--nos-text);
  margin: 0;
}

.avalanche-modal-close {
  background: none;
  border: none;
  color: var(--nos-text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.avalanche-modal-close:hover { color: var(--nos-text); }

/* States */
.avalanche-state { padding: 24px; }

/* Parent info */
.avalanche-parent-info { margin-bottom: 16px; }
.avalanche-parent-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nos-text-muted);
  margin-bottom: 4px;
}
.avalanche-parent-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--nos-text);
}

/* Fresh state */
.avalanche-fresh-meta { margin-bottom: 16px; }
.avalanche-meta-chip {
  display: inline-block;
  background: var(--nos-surface-2);
  color: var(--nos-text-muted);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.8rem;
}

.avalanche-field-row { margin-bottom: 16px; }
.avalanche-field-label {
  display: block;
  font-size: 0.8rem;
  color: var(--nos-text-muted);
  margin-bottom: 6px;
  font-weight: 500;
}
.avalanche-seed-input {
  width: 100%;
  background: var(--nos-surface-2);
  border: 1px solid var(--nos-border);
  border-radius: 6px;
  color: var(--nos-text);
  padding: 8px 12px;
  font-size: 0.95rem;
}
.avalanche-seed-input:focus {
  outline: none;
  border-color: #2D4A8F;
}
.avalanche-field-hint {
  font-size: 0.78rem;
  color: var(--nos-text-muted);
  margin-top: 4px;
  margin-bottom: 0;
}

.avalanche-cost-note {
  font-size: 0.82rem;
  color: var(--nos-text-muted);
  background: var(--nos-surface-2);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 20px;
  line-height: 1.5;
}

.avalanche-fresh-actions { text-align: right; }
.avalanche-run-btn { min-width: 160px; }

/* Running state */
.avalanche-running-body { text-align: center; padding: 16px 0; }
.avalanche-spinner-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}
.avalanche-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--nos-border);
  border-top-color: #2D4A8F;
  border-radius: 50%;
  animation: avalancheSpin 0.8s linear infinite;
}
@keyframes avalancheSpin { to { transform: rotate(360deg); } }
.avalanche-running-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--nos-text);
}
.avalanche-running-seed {
  font-size: 0.85rem;
  color: var(--nos-text-muted);
  margin-bottom: 12px;
}
.avalanche-running-note {
  font-size: 0.82rem;
  color: var(--nos-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Results state */
.avalanche-results-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  font-size: 0.88rem;
  color: var(--nos-text-muted);
}
.avalanche-summary-count { font-weight: 700; color: var(--nos-text); }
.avalanche-summary-sep { color: var(--nos-border); }
.avalanche-tier-chip { font-size: 0.8rem; }

.avalanche-results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.avalanche-filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.avalanche-select {
  background: var(--nos-surface-2);
  border: 1px solid var(--nos-border);
  border-radius: 6px;
  color: var(--nos-text);
  padding: 5px 10px;
  font-size: 0.82rem;
  cursor: pointer;
}
.avalanche-select-recommended {
  background: rgba(56,189,248,0.1);
  border: 1px solid rgba(56,189,248,0.25);
  color: #2D4A8F;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
}
.avalanche-select-recommended:hover {
  background: rgba(56,189,248,0.2);
}

/* Keyword table */
.avalanche-table-wrap {
  max-height: 380px;
  overflow-y: auto;
  border: 1px solid var(--nos-border);
  border-radius: 8px;
  margin-bottom: 16px;
}
.avalanche-kw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
}
.avalanche-kw-table thead th {
  position: sticky;
  top: 0;
  background: var(--nos-surface-2);
  color: var(--nos-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--nos-border);
  white-space: nowrap;
}
.avalanche-kw-row td {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
  color: var(--nos-text);
}
.avalanche-kw-row:hover td { background: var(--nos-surface-2); }
.avalanche-kw-row:last-child td { border-bottom: none; }

.avalanche-col-check  { width: 32px; }
.avalanche-col-vol    { width: 44px; text-align: right; color: var(--nos-text-muted); }
.avalanche-col-ait    { width: 44px; text-align: right; color: var(--nos-text-muted); }
.avalanche-col-kgr    { width: 52px; text-align: right; color: var(--nos-text-muted); }
.avalanche-col-tier   { width: 48px; text-align: center; }
.avalanche-col-rel    { width: 36px; text-align: center; }
.avalanche-col-title-text {
  font-size: 0.78rem;
  color: var(--nos-text-muted);
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.avalanche-kw-text { font-weight: 500; }
.avalanche-cannib-icon { color: var(--nos-todo); margin-left: 4px; cursor: help; }

.avalanche-expand-btn {
  background: none;
  border: none;
  color: var(--nos-text-muted);
  cursor: pointer;
  padding: 0 4px;
  font-size: 0.9rem;
  line-height: 1;
  margin-left: 4px;
  vertical-align: middle;
}
.avalanche-expand-btn:hover { color: var(--nos-text); }

.avalanche-detail-row td {
  background: var(--nos-surface-2);
  padding: 10px 16px;
  border-bottom: 1px solid var(--nos-border);
}
.avalanche-kw-detail { display: flex; flex-direction: column; gap: 6px; }
.avalanche-kw-detail-angle,
.avalanche-kw-detail-cluster { font-size: 0.83rem; color: var(--nos-text-muted); }
.avalanche-kw-detail-angle strong,
.avalanche-kw-detail-cluster strong { color: var(--nos-text); }

.avalanche-warning-chip {
  display: inline-block;
  background: var(--nos-todo-bg);
  color: var(--nos-todo);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.78rem;
}
.avalanche-warning-chip--red {
  background: rgba(239,68,68,0.12);
  color: #f87171;
  border-color: rgba(239,68,68,0.3);
}

.avalanche-tier-badge { font-size: 1rem; }
.avalanche-rel-badge  { font-weight: 700; font-size: 0.85rem; }

/* Results footer */
.avalanche-results-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.avalanche-pace-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.avalanche-pace-row .avalanche-field-label { margin: 0; }
.avalanche-schedule-preview {
  font-size: 0.8rem;
  color: var(--nos-text-muted);
}
.avalanche-approve-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.avalanche-selected-count {
  font-size: 0.85rem;
  color: var(--nos-text-muted);
  white-space: nowrap;
}
.avalanche-approve-btn { min-width: 220px; }
.avalanche-export-btn  { padding: 6px 10px; }

/* Campaign state */
.avalanche-campaign-meta {
  font-size: 0.85rem;
  color: var(--nos-text-muted);
  margin-bottom: 16px;
}
.avalanche-campaign-progress { margin-bottom: 20px; }
.avalanche-progress-bar-wrap {
  height: 8px;
  background: var(--nos-surface-2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}
.avalanche-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #2D4A8F, #22c55e);
  border-radius: 4px;
  transition: width 0.4s ease;
}
.avalanche-progress-label {
  font-size: 0.82rem;
  color: var(--nos-text-muted);
}
.avalanche-campaign-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Button states for Avalanche button in tables */
.btn-avalanche--active {
  background: rgba(34,197,94,0.12) !important;
  color: #22c55e !important;
  border-color: rgba(34,197,94,0.3) !important;
}

.avalanche-error-msg {
  color: #f87171;
  font-size: 0.9rem;
  text-align: center;
  padding: 16px 0;
}

/* ── Avalanche campaign performance panel ─────────────────────────────────── */
.avalanche-perf-panel {
  background: var(--nos-surface-2);
  border: 1px solid var(--nos-border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.avalanche-perf-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--nos-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.avalanche-perf-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.85rem;
}
.avalanche-perf-row:last-child { border-bottom: none; }
.avalanche-perf-label { color: var(--nos-text-muted); }
.avalanche-perf-val   { font-weight: 600; color: var(--nos-text); }

/* ── Avalanche Orchestrator: Streaming Running State ──────────────────────── */
.avalanche-stream-progress {
  margin-bottom: 16px;
}
.avalanche-stream-phase {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--nos-text);
  margin-bottom: 8px;
}
.avalanche-stream-stats {
  font-size: 0.82rem;
  color: var(--nos-text-muted);
  margin-top: 6px;
}

/* Decision panel */
.avalanche-decision-panel {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
  animation: decisionFadeIn 0.3s ease;
}
@keyframes decisionFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.avalanche-decision-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.avalanche-decision-prompt {
  font-size: 0.9rem;
  color: var(--nos-text);
  line-height: 1.5;
  flex: 1;
}
.avalanche-decision-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-self: center;
}

/* Agent log */
.avalanche-log-details {
  margin-bottom: 16px;
}
.avalanche-log-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--nos-text-muted);
  cursor: pointer;
  user-select: none;
  padding: 6px 0;
}
.avalanche-log-toggle:hover { color: var(--nos-text); }
.avalanche-log-count {
  font-size: 0.75rem;
  background: var(--nos-surface-2);
  border-radius: 10px;
  padding: 1px 8px;
}
.avalanche-log-panel {
  max-height: 200px;
  overflow-y: auto;
  background: var(--nos-surface-2);
  border: 1px solid var(--nos-border);
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 6px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--nos-text-muted);
}
.avalanche-log-line {
  white-space: pre-wrap;
  word-break: break-word;
}
.avalanche-log-line + .avalanche-log-line {
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding-top: 2px;
  margin-top: 2px;
}

/* Running footer */
.avalanche-running-footer {
  text-align: center;
  padding-top: 8px;
  border-top: 1px solid var(--nos-border);
}

/* Avalanche Generating State */
.avalanche-gen-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
  color: var(--nos-text-muted);
  border-radius: 4px;
}
.avalanche-gen-item.avalanche-gen-active {
  background: var(--nos-bg-hover);
  color: var(--nos-text);
  font-weight: 500;
}
.avalanche-gen-icon {
  flex-shrink: 0;
  width: 1.2em;
  text-align: center;
}
.avalanche-gen-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avalanche-circuit-break {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  margin: 1rem 0;
  background: rgba(255, 80, 80, 0.08);
  border: 1px solid rgba(255, 80, 80, 0.25);
  border-radius: 8px;
  text-align: center;
}
.avalanche-circuit-break .avalanche-decision-actions {
  display: flex;
  gap: 0.5rem;
}

/* ============================================================
   RPL IT BRAND OVERRIDES
   Keep after copied Narrative OS structural CSS so the RPL It
   theme inherits every .nos-* workspace selector while using the
   RPL It visual identity.
   ============================================================ */
h1, h2, h3, h4, h5, h6,
#page-title,
.nos-header-title,
.nos-workspace-title,
.nos-problem-card-name,
.nos-problem-header-title,
.nos-category-name,
.nos-asset-card-title,
.nos-asset-detail-title,
.section-title,
.jtbd-section-title,
.jtbd-category-title,
.persona-archetype-name,
.persona-individual-name {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.header {
  background: var(--nos-primary-dark);
  border-bottom-color: var(--nos-primary);
  box-shadow: 0 1px 3px rgba(1, 41, 81, 0.18);
}

.header-logo {
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.breadcrumb,
.breadcrumb a,
#page-title {
  color: var(--rplit-white);
}

.breadcrumb a:hover {
  color: rgba(255, 255, 255, 0.85);
}

.main-nav {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

.nav-link {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.05);
}

.nav-link:hover {
  color: var(--rplit-white);
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
}

.nav-link.active {
  background: var(--nos-accent);
  color: var(--rplit-white);
  border-color: var(--nos-accent);
}

.nos-header {
  background: var(--nos-primary-dark);
  border-bottom-color: var(--nos-primary);
}

.nos-header-title,
.nos-header-title span {
  color: var(--rplit-white);
}

.nos-header-email {
  color: rgba(255, 255, 255, 0.75);
}

.nos-header-logout {
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.85);
}

.nos-header-logout:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--rplit-white);
  border-color: rgba(255, 255, 255, 0.4);
}

.persona-header,
.persona-jtbd-card {
  background: linear-gradient(135deg, var(--nos-primary-dark) 0%, var(--nos-primary) 100%);
}