.comp-dashboard-container {
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
      animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      min-width: 0;
    }
    
    .comp-stats-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: var(--space-sm);
    }
    
    .comp-glass-card {
      background: var(--bg-secondary);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      padding: var(--space-md);
      box-shadow: var(--shadow-sm);
      transition: transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition-slow);
      position: relative;
      overflow: hidden;
    }
    
    .comp-glass-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.01));
      pointer-events: none;
    }
    
    [data-theme="light"] .comp-glass-card::before {
      background: linear-gradient(90deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.01));
    }
    
    .comp-glass-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg), 0 12px 30px rgba(var(--brand-rgb), 0.08);
      border-color: rgba(255, 255, 255, 0.16);
    }

    [data-theme="dark"] .comp-glass-card:hover {
      box-shadow: var(--shadow-lg), 0 12px 40px rgba(var(--brand-rgb), 0.03);
    }
    
    .comp-rate-card {
      background: linear-gradient(135deg, #2E8555 0%, #2E8555 100%);
      color: #FFFFFF !important;
      border: none;
      box-shadow: 0 10px 30px rgba(46, 133, 85, 0.25);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: var(--space-md);
      position: relative;
      overflow: hidden;
    }
    
    .comp-rate-card::after {
      content: '';
      position: absolute;
      top: -50%; left: -50%; width: 200%; height: 200%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
      opacity: 0;
      transition: opacity 0.5s ease;
      pointer-events: none;
    }
    
    .comp-rate-card:hover::after {
      opacity: 1;
    }
    
    .comp-rate-card:hover {
      box-shadow: 0 15px 45px rgba(46, 133, 85, 0.4);
      transform: translateY(-5px);
    }
    
    .comp-metric-label {
      font-size: var(--font-xs);
      font-weight: 600;
      color: var(--text-muted);
      text-transform: none;
      letter-spacing: 0;
      line-height: 1.4;
    }

    .comp-rate-title {
      font-size: var(--font-xs);
      font-weight: 600;
      letter-spacing: 0;
      text-transform: none;
      opacity: 0.9;
      margin-bottom: var(--space-xs);
      color: #FFFFFF !important;
    }
    
    .comp-rate-value {
      font-size: 54px;
      font-weight: 900;
      line-height: 0.95;
      letter-spacing: -2px;
      margin-bottom: var(--space-xs);
      color: #FFFFFF !important;
      text-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .comp-rate-subtitle {
      font-size: 11px;
      font-weight: 700;
      opacity: 0.85;
      color: #FFFFFF !important;
    }
    
    .comp-donut-wrapper {
      display: flex;
      align-items: center;
      gap: var(--space-md);
      justify-content: space-between;
      margin-top: 4px;
    }
    
    .comp-donut-legend {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 10px;
      color: var(--text-secondary);
      flex: 1;
      padding-left: 8px;
    }
    
    .comp-legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: normal;
      line-height: 1.35;
      cursor: pointer;
      transition: color var(--transition-fast), transform var(--transition-fast);
      font-weight: 600;
    }
    
    .comp-legend-item:hover {
      color: var(--text-primary);
      transform: translateX(3px);
    }

    .comp-legend-item:focus-visible,
    .comp-donut-canvas:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
      border-radius: var(--radius-sm);
    }
    
    .comp-legend-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
      box-shadow: 0 0 6px currentColor;
    }
    
    .comp-priority-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: var(--space-md);
    }
    
    .comp-priority-card {
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-md);
      border: 1px solid var(--border-color);
      transition: all var(--transition-base);
    }
    
    .comp-priority-card.critical { border: 1.5px solid var(--crimson-alert); }
    .comp-priority-card.high { border: 1.5px solid var(--danger); }
    .comp-priority-card.medium { border: 1.5px solid var(--accent-orange); }
    .comp-priority-card.low { border: 1.5px solid var(--success); }

    .comp-priority-card.critical:hover { border-color: var(--crimson-alert); box-shadow: 0 6px 20px rgba(var(--crimson-rgb), 0.12); transform: translateY(-3px); }
    .comp-priority-card.high:hover { border-color: var(--danger); box-shadow: 0 6px 20px rgba(185, 28, 28, 0.12); transform: translateY(-3px); }
    .comp-priority-card.medium:hover { border-color: var(--accent-orange); box-shadow: 0 6px 20px rgba(var(--brand-rgb), 0.12); transform: translateY(-3px); }
    .comp-priority-card.low:hover { border-color: var(--success); box-shadow: 0 6px 20px rgba(46, 133, 85, 0.12); transform: translateY(-3px); }

    .comp-priority-info {
      flex: 1;
      min-width: 0;
    }

    .comp-priority-chart {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .comp-priority-title {
      font-size: var(--font-xs);
      color: var(--text-muted);
      font-weight: 600;
      text-transform: none;
      letter-spacing: 0;
      margin-bottom: 4px;
    }
    
    .comp-priority-value {
      font-size: var(--font-3xl);
      font-weight: 800;
      color: var(--text-primary);
      line-height: 1;
      margin-bottom: var(--space-xs);
      letter-spacing: -0.5px;
    }
    
    .comp-priority-desc {
      font-size: 11px;
      color: var(--text-secondary);
      font-weight: 500;
    }
    
    .comp-charts-row {
      display: grid;
      grid-template-columns: 1.55fr 1.45fr;
      gap: var(--space-md);
    }
    
    @media (max-width: 1024px) {
      .comp-charts-row {
        grid-template-columns: 1fr;
      }
    }
    
    .comp-circle-indicator-wrapper {
      position: relative;
      width: 68px;
      height: 68px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .comp-circle-svg {
      transform: rotate(-90deg);
      width: 68px;
      height: 68px;
    }
    
    .comp-circle-bg {
      fill: none;
      stroke: rgba(255, 255, 255, 0.04);
      stroke-width: 5.5;
    }
    
    [data-theme="light"] .comp-circle-bg {
      stroke: rgba(0, 0, 0, 0.03);
    }
    
    .comp-circle-progress {
      fill: none;
      stroke-width: 5.5;
      stroke-linecap: round;
      stroke-dasharray: 169.64;
      stroke-dashoffset: 169.64;
      transition: stroke-dashoffset 1s cubic-bezier(0.16, 1, 0.3, 1);
      filter: drop-shadow(0 0 3px currentColor);
    }
    
    .comp-circle-value {
      position: absolute;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: -0.25px;
    }
 
    /* Floating Tooltip */
    .comp-tooltip {
      position: absolute;
      background: rgba(10, 14, 39, 0.85);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: var(--radius-md);
      padding: 12px 16px;
      color: #ffffff;
      font-size: 11px;
      font-family: var(--font-family);
      pointer-events: none;
      z-index: 10000;
      box-shadow: var(--shadow-lg), 0 10px 30px rgba(0, 0, 0, 0.35);
      opacity: 0;
      transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
      transform: translate(-50%, -100%) translateY(-10px);
    }
 
    [data-theme="light"] .comp-tooltip {
      background: rgba(255, 255, 255, 0.92);
      border-color: rgba(0, 0, 0, 0.08);
      color: #0A0E27;
      box-shadow: var(--shadow-lg), 0 10px 30px rgba(0, 0, 0, 0.08);
    }
 
    .comp-tooltip.show {
      opacity: 1;
      transform: translate(-50%, -100%) translateY(-6px);
    }
 
    .comp-timeframe-selector {
      display: flex;
      background: var(--bg-input);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-sm);
      padding: 3px;
      gap: 2px;
      position: relative;
    }
 
    .comp-timeframe-btn {
      background: transparent;
      border: none;
      padding: 5px 12px;
      border-radius: 6px;
      font-size: 10px;
      font-weight: 700;
      color: var(--text-muted);
      transition: all var(--transition-fast);
      cursor: pointer;
    }
 
    .comp-timeframe-btn.active {
      background: var(--primary);
      color: #ffffff !important;
      box-shadow: 0 2px 8px rgba(var(--brand-rgb), 0.3);
    }
 
    .comp-timeframe-btn:hover:not(.active) {
      color: var(--text-primary);
      background: rgba(255, 255, 255, 0.04);
    }
    
    [data-theme="light"] .comp-timeframe-btn:hover:not(.active) {
      background: rgba(0, 0, 0, 0.02);
    }
 
    .compliance-filters {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: var(--space-sm);
      align-items: center;
    }

    .comp-page-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--space-md);
      margin-bottom: 0;
    }

    .comp-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-sm);
    }

    .comp-filter-select {
      font-size: var(--font-xs);
      padding: 4px 8px;
      min-width: 120px;
      max-width: 160px;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-sm);
      background: var(--bg-input, var(--bg-secondary));
      color: var(--text-primary);
      cursor: pointer;
    }

    .comp-filter-select--wide {
      max-width: none;
      width: 100%;
      margin-bottom: var(--space-xs);
    }

    .comp-filter-advanced-wrap {
      position: relative;
    }

    .comp-filter-advanced-wrap .pract-disclosure {
      margin-bottom: 0;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-sm);
      background: var(--bg-secondary);
    }

    .comp-filter-advanced-wrap .pract-disclosure__trigger {
      padding: 4px 10px;
      font-size: var(--font-xs);
      font-weight: 600;
      white-space: nowrap;
    }

    .comp-filter-advanced-wrap .pract-disclosure__body {
      position: absolute;
      top: calc(100% + 4px);
      right: 0;
      z-index: 50;
      min-width: 220px;
      padding: var(--space-sm);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      background: var(--bg-primary);
      box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
    }

    .comp-filter-advanced-wrap .pract-disclosure:not(.is-open) .pract-disclosure__body {
      display: none;
    }

    .comp-filter-chips-row {
      margin: var(--space-xs) 0 var(--space-sm);
    }

    .comp-filter-chips-row:empty,
    .comp-filter-chips-row [data-empty="1"] {
      margin: 0;
    }
 
    @media (max-width: 768px) {
      .compliance-filters {
        grid-template-columns: 1fr;
      }

      .comp-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
      }

      .comp-page-header .page-desc {
        max-width: 100%;
      }

      .comp-toolbar {
        width: 100%;
        justify-content: flex-start;
      }

      .comp-filter-select {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
      }

      .comp-filter-advanced-wrap {
        flex: 1 1 auto;
        min-width: 0;
      }

      .comp-dashboard-container {
        gap: var(--space-sm);
      }
    }
    
    /* Premium Table Transitions & Indication Line */
    .table tbody tr {
      position: relative;
      transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    }
    
    .table tbody tr:hover {
      background-color: var(--bg-card-hover) !important;
      transform: translateX(6px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    }

    [data-theme="dark"] .table tbody tr:hover {
      box-shadow: 0 4px 16px rgba(255, 255, 255, 0.01);
    }

    .table tbody tr td:first-child {
      position: relative;
    }
    
    .table tbody tr td:first-child::before {
      content: '';
      position: absolute;
      left: 0;
      top: 15%;
      height: 70%;
      width: 3px;
      background: var(--primary);
      border-radius: 0 4px 4px 0;
      opacity: 0;
      transition: opacity var(--transition-fast);
      pointer-events: none;
    }
    
    .table tbody tr:hover td:first-child::before {
      opacity: 1;
    }
    
    /* Detailed Compliance Page Styles */
    .comp-detail-container {
      display: flex;
      flex-direction: column;
      gap: var(--space-lg);
      animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .comp-detail-card {
      background: var(--bg-secondary);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      padding: var(--space-lg);
      box-shadow: var(--shadow-md);
      position: relative;
    }
    
    .comp-detail-header-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: var(--space-md);
      border-bottom: 1px solid var(--border-color);
      padding-bottom: var(--space-md);
      margin-bottom: var(--space-md);
    }
    
    .comp-detail-title {
      font-size: 1.15rem;
      font-weight: 700;
      line-height: 1.5;
      color: var(--text-primary);
    }
    
    .comp-detail-body-row {
      display: grid;
      grid-template-columns: 180px 1fr;
      gap: var(--space-lg);
    }
    
    @media (max-width: 768px) {
      .comp-detail-body-row {
        grid-template-columns: 1fr;
      }
    }
    
    .comp-detail-status-box {
      border-radius: var(--radius-md);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: var(--space-md);
      text-align: center;
      box-shadow: var(--shadow-sm);
      transition: all var(--transition-base);
    }
    
    .comp-detail-status-box.not-comply {
      background: linear-gradient(135deg, rgba(185, 28, 28, 0.08) 0%, rgba(185, 28, 28, 0.02) 100%);
      border: 1.5px solid rgba(185, 28, 28, 0.25);
      color: var(--danger);
      box-shadow: 0 4px 20px rgba(185, 28, 28, 0.1);
    }
    
    .comp-detail-status-box.comply {
      background: linear-gradient(135deg, rgba(46, 133, 85, 0.08) 0%, rgba(46, 133, 85, 0.02) 100%);
      border: 1.5px solid rgba(46, 133, 85, 0.25);
      color: var(--success);
      box-shadow: 0 4px 20px rgba(46, 133, 85, 0.1);
    }
    
    .comp-detail-status-icon {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background: rgba(185, 28, 28, 0.15);
      color: var(--danger);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: var(--space-sm);
      box-shadow: 0 0 12px rgba(185, 28, 28, 0.2);
    }
    
    .comp-detail-status-box.comply .comp-detail-status-icon {
      background: rgba(46, 133, 85, 0.15);
      color: var(--success);
      box-shadow: 0 0 12px rgba(46, 133, 85, 0.2);
    }
    
    .comp-detail-status-label {
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      opacity: 0.6;
      margin-bottom: 2px;
      color: var(--text-muted);
    }
    
    .comp-detail-status-text {
      font-size: 1.25rem;
      font-weight: 800;
      letter-spacing: -0.5px;
    }
    
    .comp-detail-fields-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px var(--space-md);
    }
    
    @media (max-width: 900px) {
      .comp-detail-fields-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    
    @media (max-width: 600px) {
      .comp-detail-fields-grid {
        grid-template-columns: 1fr;
      }
    }
    
    .comp-detail-field-item {
      padding: 10px 12px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      transition: border-color var(--transition-fast);
    }
    
    .comp-detail-field-item:hover {
      border-color: rgba(255, 255, 255, 0.15);
    }
    
    [data-theme="light"] .comp-detail-field-item {
      background: rgba(0, 0, 0, 0.01);
    }
    
    [data-theme="light"] .comp-detail-field-item:hover {
      border-color: rgba(var(--brand-rgb), 0.25);
      background: rgba(var(--brand-rgb), 0.02);
    }
    
    .comp-detail-field-label {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      color: var(--text-muted);
      letter-spacing: 0.5px;
      margin-bottom: 4px;
    }
    
    .comp-detail-field-value {
      font-size: var(--font-sm);
      font-weight: 600;
      color: var(--text-primary);
    }
    
    /* Stepper Styling */
    .comp-stepper-wrapper {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      padding: var(--space-lg);
      box-shadow: var(--shadow-sm);
    }
    
    .comp-stepper-title {
      font-size: var(--font-sm);
      font-weight: 800;
      color: var(--text-primary);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: var(--space-md);
    }
    
    .comp-stepper-track-container {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--space-md) var(--space-xl);
      margin-bottom: var(--space-xs);
    }
    
    .comp-stepper-line-bg {
      position: absolute;
      top: 50%;
      left: var(--space-xl);
      right: var(--space-xl);
      height: 3px;
      background: rgba(255, 255, 255, 0.05);
      z-index: 1;
      transform: translateY(-50%);
    }
    
    .comp-stepper-line-fill {
      position: absolute;
      top: 50%;
      left: var(--space-xl);
      height: 3px;
      background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
      z-index: 2;
      transform: translateY(-50%);
      transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .comp-stepper-step {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 3;
      cursor: pointer;
    }
    
    .comp-stepper-circle {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--bg-secondary);
      border: 2px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      font-weight: 700;
      transition: all var(--transition-slow);
      box-shadow: 0 0 0 4px var(--bg-secondary);
    }
    
    .comp-stepper-step.active .comp-stepper-circle {
      border-color: var(--primary);
      color: var(--primary-light);
      background: rgba(var(--brand-rgb), 0.1);
      box-shadow: 0 0 15px rgba(var(--brand-rgb), 0.4), 0 0 0 4px var(--bg-secondary);
    }
    
    .comp-stepper-step.completed .comp-stepper-circle {
      border-color: var(--success);
      color: var(--success);
      background: rgba(46, 133, 85, 0.1);
      box-shadow: 0 0 15px rgba(46, 133, 85, 0.3), 0 0 0 4px var(--bg-secondary);
    }
    
    .comp-stepper-label {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-muted);
      margin-top: 8px;
      transition: color var(--transition-fast);
    }
    
    .comp-stepper-step.active .comp-stepper-label {
      color: var(--primary-light);
    }
    
    .comp-stepper-step.completed .comp-stepper-label {
      color: var(--text-primary);
    }
    
    .comp-stepper-date {
      font-size: 10px;
      color: var(--text-muted);
      margin-top: 2px;
    }
    
    /* Checklist Tree CSS */
    .comp-checklist-wrapper {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      padding: var(--space-lg);
      box-shadow: var(--shadow-sm);
    }
    
    .comp-checklist-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-md);
    }
    
    .comp-checklist-progress-text {
      font-size: var(--font-sm);
      font-weight: 800;
      color: var(--primary-light);
    }
    
    .comp-checklist-items-tree {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
      margin-top: var(--space-md);
    }
    
    .comp-checklist-item-row {
      display: flex;
      align-items: flex-start;
      gap: var(--space-md);
      padding: var(--space-md);
      background: rgba(255, 255, 255, 0.01);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      transition: all var(--transition-fast);
      position: relative;
    }
    
    .comp-checklist-item-row:hover {
      background: rgba(255, 255, 255, 0.03);
      border-color: rgba(255, 255, 255, 0.15);
      transform: translateX(4px);
    }
    
    .comp-checklist-item-row.checked {
      background: rgba(46, 133, 85, 0.02);
      border-color: rgba(46, 133, 85, 0.15);
    }
    
    /* Custom Checkbox Design */
    .comp-custom-checkbox {
      position: relative;
      width: 20px;
      height: 20px;
      border: 2px solid var(--border-color);
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all var(--transition-fast);
      background: var(--bg-secondary);
      flex-shrink: 0;
      margin-top: 2px;
    }
    
    .comp-checklist-item-row:hover .comp-custom-checkbox {
      border-color: var(--primary-light);
    }
    
    .comp-checklist-item-row.checked .comp-custom-checkbox {
      border-color: var(--success);
      background: var(--success);
      color: #0A0E27;
      box-shadow: 0 0 8px rgba(46, 133, 85, 0.4);
    }
    
    .comp-custom-checkbox svg {
      opacity: 0;
      transform: scale(0.6);
      transition: all var(--transition-fast);
    }
    
    .comp-checklist-item-row.checked .comp-custom-checkbox svg {
      opacity: 1;
      transform: scale(1);
    }
    
    .comp-checklist-item-content {
      flex: 1;
      font-size: var(--font-sm);
      font-weight: 500;
      color: var(--text-secondary);
      line-height: 1.5;
      text-align: left;
    }
    
    .comp-checklist-item-row.checked .comp-checklist-item-content {
      color: var(--text-muted);
      text-decoration: line-through rgba(255, 255, 255, 0.2);
    }
    
    .comp-checklist-item-meta {
      display: flex;
      align-items: center;
      gap: var(--space-md);
      margin-top: var(--space-xs);
      font-size: 11px;
      color: var(--text-muted);
    }
    
    .comp-meta-pic {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    
    .comp-meta-tag {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    /* Light Theme Checklist overrides */
    [data-theme="light"] .comp-checklist-item-row {
      background: #FFFFFF;
      border-color: #E2E8F0;
    }
    [data-theme="light"] .comp-checklist-item-row:hover {
      background: #F8FAFC;
      border-color: var(--primary);
    }
    [data-theme="light"] .comp-checklist-item-row.checked {
      background: rgba(0, 200, 83, 0.04);
      border-color: rgba(0, 200, 83, 0.2);
    }
    [data-theme="light"] .comp-checklist-item-row.checked .comp-checklist-item-content {
      color: var(--text-muted);
      text-decoration: line-through rgba(0, 0, 0, 0.15);
    }
    [data-theme="light"] .comp-custom-checkbox {
      border-color: #CBD5E1;
      background: #FFFFFF;
    }
    [data-theme="light"] .comp-checklist-item-row.checked .comp-custom-checkbox {
      background: var(--success);
      border-color: var(--success);
      color: #FFFFFF;
    }

    /* Legal foundation card */
    .comp-foundation-card {
      padding: var(--space-lg);
    }

    .comp-foundation-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: var(--space-md);
      margin-bottom: var(--space-md);
    }

    .comp-foundation-title {
      font-size: var(--font-md);
      font-weight: 800;
      margin: 0 0 4px;
      color: var(--text-primary);
      font-family: var(--font-display);
    }

    .comp-foundation-subtitle {
      font-size: var(--font-xs);
      color: var(--text-muted);
      margin: 0;
    }

    .comp-foundation-mismatch {
      padding: var(--space-sm) var(--space-md);
      margin-bottom: var(--space-md);
      border-radius: var(--radius-md);
      border: 1px solid rgba(185, 28, 28, 0.35);
      background: rgba(185, 28, 28, 0.06);
      font-size: var(--font-sm);
      color: var(--text-primary);
    }

    .comp-foundation-items {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
    }

    .comp-foundation-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--space-sm);
      padding: 10px 12px;
      border-radius: var(--radius-md);
      border: 1px solid var(--border-color);
      background: var(--bg-secondary);
    }

    .comp-foundation-item-main {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .comp-foundation-item-label {
      font-size: var(--font-sm);
      font-weight: 700;
      color: var(--text-primary);
    }

    .comp-foundation-item-basis {
      font-size: 10px;
      color: var(--text-muted);
    }

    .comp-foundation-item-detail {
      font-size: var(--font-xs);
      color: var(--text-secondary);
    }

    .comp-foundation-status {
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 4px 8px;
      border-radius: 999px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .comp-foundation-status-missing {
      color: #B91C1C;
      background: rgba(185, 28, 28, 0.1);
      border: 1px solid rgba(185, 28, 28, 0.25);
    }

    .comp-foundation-status-uploaded {
      color: #D97706;
      background: rgba(217, 119, 6, 0.1);
      border: 1px solid rgba(217, 119, 6, 0.25);
    }

    .comp-foundation-status-verified {
      color: #2E8555;
      background: rgba(46, 133, 85, 0.1);
      border: 1px solid rgba(46, 133, 85, 0.25);
    }

    /* Obligation detail — regulation card & checklist sources */
    .comp-regulation-card {
      margin-bottom: var(--space-lg);
      padding: var(--space-lg);
      border-radius: var(--radius-lg);
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: linear-gradient(135deg, rgba(0, 115, 230, 0.06), rgba(46, 133, 85, 0.04));
    }

    .comp-regulation-card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: var(--space-md);
      margin-bottom: var(--space-sm);
    }

    .comp-regulation-card-label {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 4px;
    }

    .comp-regulation-card-number {
      font-size: var(--font-md);
      font-weight: 800;
      color: var(--primary-light);
      margin: 0 0 4px;
    }

    .comp-regulation-card-title {
      font-size: var(--font-sm);
      color: var(--text-secondary);
      margin: 0;
      line-height: 1.5;
    }

    .comp-regulation-status {
      font-size: 11px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(46, 133, 85, 0.12);
      color: #2E8555;
      white-space: nowrap;
    }

    .comp-regulation-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      font-size: 11px;
      color: var(--text-muted);
      margin-bottom: var(--space-sm);
    }

    .comp-regulation-meta span {
      padding: 2px 8px;
      border-radius: var(--radius-sm);
      background: rgba(255, 255, 255, 0.04);
    }

    .comp-regulation-abstract {
      font-size: var(--font-sm);
      color: var(--text-secondary);
      line-height: 1.6;
      margin: 0 0 var(--space-md);
    }

    .comp-regulation-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .comp-foundation-strip {
      margin-bottom: var(--space-lg);
      padding: var(--space-md) var(--space-lg);
      border-radius: var(--radius-lg);
      border: 1px solid rgba(255, 255, 255, 0.06);
      background: var(--bg-glass);
    }

    .comp-foundation-strip-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--space-md);
      margin-bottom: var(--space-sm);
    }

    .comp-foundation-strip-title {
      font-size: var(--font-sm);
      font-weight: 800;
      color: var(--text-primary);
    }

    .comp-foundation-strip-sub {
      font-size: 11px;
      color: var(--text-muted);
    }

    .comp-foundation-strip-items {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .comp-foundation-strip-item {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: var(--radius-md);
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      font-size: 11px;
    }

    .comp-foundation-strip-label {
      color: var(--text-secondary);
    }

    .comp-foundation-strip-badge {
      font-weight: 700;
      text-transform: capitalize;
    }

    .comp-checklist-source {
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 2px 6px;
      border-radius: 4px;
      white-space: nowrap;
    }

    .comp-checklist-source-regulation {
      color: var(--trust-blue);
      background: rgba(var(--trust-blue-rgb), 0.12);
    }

    .comp-checklist-source-legal_document {
      color: #D97706;
      background: rgba(217, 119, 6, 0.12);
    }

    .comp-checklist-source-compliance_run {
      color: var(--primary);
      background: rgba(var(--brand-rgb), 0.12);
    }

/* ==============================
   Gap Analysis (Tier 2)
   ============================== */

.gap-analysis-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  overflow-x: auto;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Summary Cards */
.gap-summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
}

.gap-stat-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
}

.gap-stat-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

.gap-stat-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Empty State */
.gap-empty-state,
.opinion-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  gap: var(--space-md);
}

.gap-empty-icon,
.opinion-empty-icon {
  font-size: 48px;
  opacity: 0.5;
}

.gap-empty-state h3,
.opinion-empty-state h3 {
  font-size: 18px;
  color: var(--text-primary);
  margin: 0;
}

.gap-empty-state p,
.opinion-empty-state p {
  color: var(--text-muted);
  max-width: 400px;
  margin: 0;
}

.gap-token-estimate,
.opinion-token-estimate {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-glass);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
}

.gap-loading,
.opinion-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  color: var(--text-muted);
  gap: var(--space-sm);
}

.gap-error,
.opinion-error {
  padding: var(--space-md);
  color: var(--danger);
  background: rgba(239, 68, 68, 0.1);
  border-radius: var(--radius-md);
  text-align: center;
}

/* Regulatory Coverage */
.gap-coverage-section,
.gap-remediation-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

.gap-section-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 var(--space-md) 0;
  color: var(--text-primary);
}

.gap-regulation-item {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  overflow: hidden;
}

.gap-reg-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.gap-reg-header:hover {
  background: var(--bg-glass);
}

.gap-reg-number {
  font-weight: 600;
  font-size: 13px;
  color: var(--accent-primary);
  min-width: 100px;
}

.gap-reg-title {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary);
}

.gap-coverage-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 500;
}

.gap-coverage-badge.fully_compliant { background: rgba(34, 197, 94, 0.15); color: var(--success); }
.gap-coverage-badge.partially_compliant { background: rgba(234, 179, 8, 0.15); color: var(--warning); }
.gap-coverage-badge.non_compliant { background: rgba(239, 68, 68, 0.15); color: var(--danger); }

.gap-expand-icon {
  color: var(--text-muted);
  font-size: 10px;
  transition: transform 0.2s;
}

.gap-regulation-item.expanded .gap-expand-icon {
  transform: rotate(180deg);
}

.gap-reg-articles {
  display: none;
  padding: 0 var(--space-md) var(--space-md);
  border-top: 1px solid var(--border-color);
}

.gap-regulation-item.expanded .gap-reg-articles {
  display: block;
}

.gap-article-item {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-color);
}

.gap-article-item:last-child { border-bottom: none; }

.gap-article-ref {
  font-weight: 500;
  font-size: 12px;
  color: var(--text-primary);
}

.gap-article-status {
  font-size: 11px;
  margin-left: var(--space-sm);
  padding: 1px 6px;
  border-radius: 8px;
}

.gap-article-status.fully_met { background: rgba(34, 197, 94, 0.15); color: var(--success); }
.gap-article-status.partially_met { background: rgba(234, 179, 8, 0.15); color: var(--warning); }
.gap-article-status.not_met { background: rgba(239, 68, 68, 0.15); color: var(--danger); }

.gap-article-gap {
  font-size: 12px;
  color: var(--danger);
  margin: 4px 0 0 0;
  padding: 6px 8px;
  background: rgba(239, 68, 68, 0.08);
  border-radius: 4px;
}

.gap-article-text {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 0 0;
  line-height: 1.5;
}

/* Remediation Timeline */
.remediation-timeline {
  position: relative;
  padding-left: 32px;
}

.remediation-timeline::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-color);
}

.remediation-phase {
  position: relative;
  margin-bottom: var(--space-md);
}

.remediation-phase-marker {
  position: absolute;
  left: -32px;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  z-index: 1;
}

.remediation-phase-content {
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.remediation-phase-header {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.remediation-phase-timeline {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-primary);
  background: rgba(255, 122, 34, 0.1);
  padding: 2px 8px;
  border-radius: 12px;
}

.remediation-phase-focus {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.remediation-actions {
  margin: 0;
  padding-left: 18px;
}

.remediation-actions li {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  line-height: 1.5;
}

/* ==============================
   Legal Opinion (Tier 3)
   ============================== */

.legal-opinion-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  overflow-x: auto;
  overflow-wrap: break-word;
  word-break: break-word;
}

#legal-opinion-content {
  overflow-x: auto;
  overflow-wrap: break-word;
  word-break: break-word;
}

.opinion-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--border-color);
}

.opinion-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.opinion-header-left h3 {
  margin: 0;
  font-size: 18px;
  color: var(--text-primary);
}

.opinion-header-right {
  display: flex;
  align-items: center;
}

.opinion-status-badge {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.opinion-status-badge.draft { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.opinion-status-badge.review { background: rgba(234, 179, 8, 0.15); color: #eab308; }
.opinion-status-badge.approved { background: rgba(34, 197, 94, 0.15); color: var(--success); }
.opinion-status-badge.rejected { background: rgba(239, 68, 68, 0.15); color: var(--danger); }

.opinion-scope-tag {
  font-size: 11px;
  background: var(--bg-glass);
  padding: 2px 8px;
  border-radius: 6px;
  color: var(--text-muted);
}

.opinion-citation-count {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
}

.opinion-risk-rating {
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: 600;
}

.opinion-risk-rating.low { background: rgba(34, 197, 94, 0.15); color: var(--success); }
.opinion-risk-rating.medium { background: rgba(234, 179, 8, 0.15); color: var(--warning); }
.opinion-risk-rating.high { background: rgba(249, 115, 22, 0.15); color: #f97316; }
.opinion-risk-rating.critical { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

/* Opinion Sections */
.opinion-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.opinion-section {
  padding: var(--space-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.opinion-section-heading {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-sm) 0;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-color);
}

.opinion-section-content {
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-primary);
  white-space: pre-wrap;
}

.opinion-section-citations {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.opinion-citation {
  font-size: 11px;
  background: rgba(255, 122, 34, 0.1);
  color: var(--accent-primary);
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
}

.opinion-citation:hover {
  background: rgba(255, 122, 34, 0.2);
}

.opinion-modified-tag {
  font-size: 10px;
  background: rgba(234, 179, 8, 0.2);
  color: #eab308;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: var(--space-sm);
  vertical-align: middle;
}

/* Certification Block */
.certification-block {
  background: var(--bg-secondary);
  border: 2px solid var(--success);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: relative;
}

.certification-block h4 {
  font-size: 16px;
  color: var(--success);
  margin: 0 0 var(--space-md) 0;
}

.certification-details p {
  font-size: 13px;
  color: var(--text-primary);
  margin: 0 0 6px 0;
  line-height: 1.6;
}

.certification-verified-badge {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: var(--success);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
}

/* Opinion Actions */
.opinion-actions {
  display: flex;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-color);
  justify-content: center;
}

.opinion-pending-note {
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
  margin: 0;
}

/* Scope Selector */
.opinion-scope-selector {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.opinion-scope-selector label {
  font-size: 13px;
  color: var(--text-muted);
}

.opinion-scope-selector select {
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 13px;
}

/* Inline Form Validation (used by all pages) */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--space-md);
}

.form-group label {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.form-group .form-input {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--font-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group .form-input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(255, 122, 34, 0.1);
}

.form-group.has-error .form-input {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-group .form-error {
  font-size: var(--font-xs);
  color: var(--danger);
  margin-top: 2px;
}

.live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Responsive */
@media (max-width: 700px) {
  .opinion-header {
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  .gap-summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Review Tier Tabs */
.review-tier-tab {
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.review-tier-tab:hover {
  color: var(--text-primary);
}

.review-tier-tab.active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}

.review-tier-tab .tier-badge {
  font-size: 10px;
  background: var(--bg-glass);
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: middle;
}

/* ================================================================
   Yuridis Normatif — Gap Analysis Sections
   ================================================================ */

/* --- Section Title --- */
.yn-section { margin-bottom: var(--space-xl); }

.yn-section-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  font-size: var(--font-md);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--border-default);
}

.yn-section-icon { font-size: 18px; }

.yn-subtitle {
  font-size: var(--font-xs);
  font-weight: 400;
  color: var(--text-muted);
  margin-left: auto;
}

/* --- Methodology Banner --- */
.yn-methodology-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  background: linear-gradient(135deg, rgba(var(--brand-rgb), 0.06), rgba(var(--brand-rgb), 0.02));
  border: 1px solid rgba(var(--brand-rgb), 0.15);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.yn-methodology-icon { font-size: 28px; line-height: 1; }

.yn-methodology-body { flex: 1; }

.yn-methodology-title {
  font-size: var(--font-md);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-xs);
}

.yn-methodology-desc {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--space-xs);
  line-height: 1.6;
}

.yn-methodology-limits {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin: var(--space-xs) 0 0;
}

/* --- Hierarchy Tree --- */
.yn-hierarchy-tree {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.yn-hierarchy-level {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.yn-level-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  padding: var(--space-sm) var(--space-xs);
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  text-align: center;
  flex-shrink: 0;
}

.yn-level-badge.level-0 { background: rgba(147, 51, 234, 0.12); border: 1px solid rgba(147, 51, 234, 0.3); }
.yn-level-badge.level-1 { background: rgba(59, 130, 246, 0.12); border: 1px solid rgba(59, 130, 246, 0.3); }
.yn-level-badge.level-2 { background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.3); }
.yn-level-badge.level-3 { background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.3); }
.yn-level-badge.level-4 { background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.3); }
.yn-level-badge.level-5 { background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.3); }

.yn-level-rank {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.yn-level-label {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
  max-width: 60px;
  word-break: break-word;
}

.yn-level-regs {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}

.yn-reg-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
}

.yn-reg-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
  flex-wrap: wrap;
}

.yn-reg-number {
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--accent-primary);
  background: rgba(var(--brand-rgb), 0.08);
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.yn-reg-title-text {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.yn-reg-card-body {
  font-size: var(--font-xs);
  color: var(--text-secondary);
  line-height: 1.5;
}

.yn-reg-relevance,
.yn-reg-relation { margin: var(--space-xs) 0 0; }

.yn-reg-articles { margin-top: var(--space-sm); }

.yn-article-tag {
  display: inline-block;
  font-size: 10px;
  background: rgba(var(--brand-rgb), 0.08);
  color: var(--accent-primary);
  padding: 1px 6px;
  border-radius: 4px;
  margin: 2px;
}

/* --- Legal Principles Grid --- */
.yn-principles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}

.yn-principle-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--accent-primary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.yn-principle-name {
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.yn-principle-application,
.yn-principle-impact {
  font-size: var(--font-xs);
  color: var(--text-secondary);
  line-height: 1.55;
  margin-top: var(--space-xs);
}

/* --- Synchronization Analysis --- */
.yn-sync-subsection { margin-bottom: var(--space-lg); }

.yn-sync-subtitle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.yn-sync-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  text-transform: uppercase;
}

.yn-sync-badge.vertical { background: rgba(147, 51, 234, 0.15); color: #9333ea; }
.yn-sync-badge.horizontal { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.yn-sync-badge.gap { background: rgba(239, 68, 68, 0.12); color: #ef4444; }

.yn-sync-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.yn-sync-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
}

.yn-sync-item.inconsistent,
.yn-sync-item.conflicting { border-left: 3px solid var(--danger); }

.yn-sync-item.partially_inconsistent,
.yn-sync-item.overlapping { border-left: 3px solid var(--warning); }

.yn-sync-item.consistent,
.yn-sync-item.harmonious { border-left: 3px solid var(--success); }

.yn-sync-item.gap { border-left: 3px dashed var(--danger); }

.yn-sync-item-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-xs);
}

.yn-sync-finding-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.yn-sync-finding-badge.consistent,
.yn-sync-finding-badge.harmonious { background: rgba(34, 197, 94, 0.15); color: var(--success); }

.yn-sync-finding-badge.inconsistent,
.yn-sync-finding-badge.conflicting { background: rgba(239, 68, 68, 0.15); color: var(--danger); }

.yn-sync-finding-badge.overlapping,
.yn-sync-finding-badge.partially_inconsistent { background: rgba(234, 179, 8, 0.15); color: var(--warning); }

.yn-sync-finding-badge.gap { background: rgba(239, 68, 68, 0.1); color: var(--danger); }

.yn-sync-regs { font-size: var(--font-xs); color: var(--text-secondary); }

.yn-sync-detail {
  font-size: var(--font-xs);
  color: var(--text-secondary);
  line-height: 1.55;
  margin: var(--space-xs) 0 0;
}

.yn-sync-resolution {
  font-size: var(--font-xs);
  color: var(--success);
  margin: var(--space-xs) 0 0;
}

.yn-sync-risk {
  font-size: var(--font-xs);
  color: var(--danger);
  margin: var(--space-xs) 0 0;
}

/* --- Hierarchy Tags (per article) --- */
.yn-hierarchy-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
}

.yn-tag-uu { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.yn-tag-pp { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.yn-tag-perpres { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.yn-tag-permen { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.yn-tag-kepmen { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
.yn-tag-perda { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.yn-tag-perkada { background: rgba(139, 92, 246, 0.12); color: #7c3aed; }
.yn-tag-uud { background: rgba(147, 51, 234, 0.15); color: #9333ea; }

/* --- Enhanced Gap Article Rows --- */
.gap-article-header-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.gap-article-severity {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
}

.severity-critical { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.severity-high { background: rgba(249, 115, 22, 0.15); color: #f97316; }
.severity-medium { background: rgba(234, 179, 8, 0.15); color: #ca8a04; }
.severity-low { background: rgba(34, 197, 94, 0.12); color: #16a34a; }

.gap-article-chain {
  font-size: var(--font-xs);
  color: var(--accent-primary);
  margin: var(--space-xs) 0 0;
}

.gap-article-conflict {
  font-size: var(--font-xs);
  color: var(--danger);
  margin: var(--space-xs) 0 0;
  background: rgba(239, 68, 68, 0.06);
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
}

/* --- Remediation Enhancements --- */
.remediation-priority-regs {
  font-size: var(--font-xs);
  color: var(--text-secondary);
  margin-top: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.remediation-outcome {
  font-size: var(--font-xs);
  color: var(--success);
  margin: var(--space-xs) 0 0;
}

/* --- Loading State --- */
.yn-loading-spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-default);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: yn-spin 0.7s linear infinite;
}

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

.yn-loading-sub {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

/* --- responsive --- */
@media (max-width: 768px) {
  .yn-hierarchy-level {
    flex-direction: column;
  }

  .yn-level-badge {
    flex-direction: row;
    min-width: auto;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
  }

  .yn-level-label { max-width: none; }

  .yn-principles-grid {
    grid-template-columns: 1fr;
  }

  .yn-methodology-banner {
    flex-direction: column;
  }

  .gap-reg-left {
    flex-wrap: wrap;
  }
}

/* Extra-small mobile — 375px and below */
@media (max-width: 400px) {
  .yn-methodology-banner {
    flex-direction: column;
    padding: var(--space-md);
    gap: var(--space-sm);
  }

  .yn-methodology-body {
    font-size: var(--font-xs);
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
  }

  .yn-methodology-title {
    font-size: var(--font-sm);
  }

  .yn-methodology-desc,
  .yn-methodology-limits {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .yn-hierarchy-tree {
    gap: var(--space-sm);
  }

  .yn-hierarchy-level {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .yn-level-badge {
    flex-direction: row;
    min-width: auto;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    align-self: flex-start;
  }

  .yn-level-label {
    max-width: none;
  }

  .yn-level-regs {
    gap: var(--space-xs);
    min-width: 0;
  }

  .yn-reg-card {
    padding: var(--space-sm);
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .yn-reg-card-header {
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .yn-reg-title-text {
    font-size: var(--font-xs);
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .yn-sync-section {
    overflow-x: hidden;
  }

  .yn-sync-subsection {
    margin-bottom: var(--space-md);
  }

  .yn-sync-item {
    padding: var(--space-sm);
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .yn-sync-item-header {
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .yn-sync-detail,
  .yn-sync-resolution,
  .yn-sync-risk {
    font-size: 11px;
  }

  .yn-principles-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .yn-principle-card {
    padding: var(--space-sm);
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .yn-sync-regs {
    font-size: 11px;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Ensure gap analysis and legal opinion content don't overflow */
  .gap-analysis-container {
    overflow-x: auto;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .legal-opinion-container {
    overflow-x: auto;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .gap-reg-header {
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .remediation-phase-content {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* ==============================
   Lawyer Review Modal (P0 UX Fixes)
   ============================== */

.opinion-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  animation: opinionModalFadeIn 0.2s ease;
}

@keyframes opinionModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.opinion-modal {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
  animation: opinionModalSlideUp 0.25s ease;
}

@keyframes opinionModalSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.opinion-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  background: var(--bg-primary);
  z-index: 1;
}

.opinion-modal-header h3 {
  margin: 0;
  font-size: 16px;
}

.opinion-modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 20px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}

.opinion-modal-close:hover { background: var(--bg-glass); color: var(--text-primary); }

.opinion-modal-body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.opinion-edit-sections-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.opinion-edit-section {
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.2s;
}

.opinion-edit-section.modified {
  border-color: var(--warning);
  border-left: 4px solid var(--warning);
}

.opinion-edit-section-heading {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.opinion-edit-section textarea {
  width: 100%;
  min-height: 120px;
  padding: var(--space-md);
  border: none;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.7;
  resize: vertical;
  font-family: inherit;
}

.opinion-edit-section textarea:focus {
  outline: none;
  background: var(--bg-secondary);
}

.opinion-edit-notes {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.opinion-edit-notes label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.opinion-edit-notes textarea {
  width: 100%;
  min-height: 80px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 13px;
  resize: vertical;
  font-family: inherit;
}

/* Certification Form */
.certification-form {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.certification-form h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 var(--space-md) 0;
  color: var(--text-primary);
}

.certification-form-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.cert-form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cert-form-group label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cert-form-group input {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 13px;
}

.cert-form-group input:focus {
  outline: none;
  border-color: var(--accent-primary);
}

/* Certification Preview */
.cert-preview {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.cert-preview-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-sm);
}

.cert-preview-content p {
  font-size: 13px;
  color: var(--text-primary);
  margin: 0 0 4px 0;
  line-height: 1.6;
}

.cert-preview-empty {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}

/* Modal Footer / Actions */
.opinion-modal-footer {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border-color);
  position: sticky;
  bottom: 0;
  background: var(--bg-primary);
  z-index: 1;
}

.opinion-modal-footer .btn { flex: 1; }

/* Print Styles */
@media print {
  body * { visibility: hidden; }
  .legal-opinion-container,
  .legal-opinion-container * { visibility: visible; }
  .legal-opinion-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 40px;
  }
  .opinion-status-badge,
  .opinion-scope-tag,
  .opinion-actions,
  .opinion-header-right { display: none; }
  .opinion-section { page-break-inside: avoid; }
  .certification-block { border: 2px solid #000; }
}

/* Toast notification */
.opinion-toast-flash {
  animation: opinionToastFadeIn 0.3s ease;
}

@keyframes opinionToastFadeIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Responsive */
@media (max-width: 700px) {
  .opinion-modal { max-width: 100%; max-height: 100vh; border-radius: 0; }
  .certification-form-fields { grid-template-columns: 1fr; }
  .opinion-modal-footer { flex-direction: column; }
}

/* ==============================
   Tier Progress Stepper
   ============================== */

.tier-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
}

.tier-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 0 8px;
  transition: opacity 0.2s;
}

.tier-step:hover { opacity: 0.8; }

.tier-step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  border: 2px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-muted);
  transition: all 0.3s;
}

.tier-step.completed .tier-step-number {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.tier-step.active .tier-step-number {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  box-shadow: 0 0 0 4px rgba(255, 122, 34, 0.15);
  animation: tierPulse 2s infinite;
}

@keyframes tierPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 122, 34, 0.15); }
  50% { box-shadow: 0 0 0 8px rgba(255, 122, 34, 0.05); }
}

.tier-step-label {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  text-align: center;
}

.tier-step.completed .tier-step-label { color: var(--success); }
.tier-step.active .tier-step-label { color: var(--accent-primary); }

.tier-step-connector {
  width: 40px;
  height: 2px;
  background: var(--border-color);
  margin: 0 4px 20px 4px;
  transition: background 0.3s;
}

.tier-step-connector.completed {
  background: var(--success);
}

@media (max-width: 600px) {
  .tier-stepper { gap: 4px; padding: var(--space-sm); }
  .tier-step { padding: 0 4px; }
  .tier-step-label { font-size: 10px; }
  .tier-step-connector { width: 20px; }
}

/* ==============================
   Next-Step Prompts (Cross-Tab Awareness)
   ============================== */

.gap-next-step,
.opinion-next-step {
  margin-top: var(--space-lg);
}

.gap-next-step-content,
.opinion-next-step-content {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: linear-gradient(135deg, rgba(255, 122, 34, 0.08), rgba(255, 122, 34, 0.03));
  border: 1px solid rgba(255, 122, 34, 0.25);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.gap-next-step-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.gap-next-step-content > div,
.opinion-next-step-content > div {
  flex: 1;
}

.gap-next-step-content strong,
.opinion-next-step-content strong {
  display: block;
  font-size: 14px;
  color: var(--accent-primary);
  margin-bottom: 4px;
}

.gap-next-step-content p,
.opinion-next-step-content p {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .gap-next-step-content,
  .opinion-next-step-content {
    flex-direction: column;
    text-align: center;
  }
}

/* ==============================
   Error States with Retry
   ============================== */

.gap-error,
.opinion-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xl);
  color: var(--danger);
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-md);
  text-align: center;
}

.gap-error p,
.opinion-error p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

/* ==============================
   Scope Description
   ============================== */

.opinion-scope-description {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 420px;
  padding: 8px 12px;
  background: var(--bg-glass);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--accent-primary);
}

/* ==============================
   Skeleton Loading
   ============================== */

.skeleton-pulse {
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

@keyframes skeletonPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}

.skeleton-line {
  background: var(--border-color);
  border-radius: 4px;
}

/* Compliance shimmer skeleton — used inside widget cells before data loads */
.comp-skeleton-pulse {
  animation: compShimmer 1.5s ease-in-out infinite;
  background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-glass) 50%, var(--bg-secondary) 75%);
  background-size: 200% 100%;
  border-radius: var(--radius-md);
  min-height: 60px;
  width: 100%;
}

@keyframes compShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Recovery pill — subtle amber indicator, replaces error banner */
.comp-recovery-pill {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(217, 119, 6, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(217, 119, 6, 0.35);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--warning);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  animation: compPillIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
  cursor: default;
}

.comp-recovery-pill--hidden {
  display: none !important;
}

@keyframes compPillIn {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.comp-recovery-pill__spinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(217, 119, 6, 0.3);
  border-top-color: var(--warning);
  border-radius: 50%;
  animation: compPillSpin 0.6s linear infinite;
}

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

/* ==============================
   Enterprise Opinions Table
   ============================== */

.ent-opinions-table {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ent-opinions-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 0.7fr 1fr 0.5fr;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-color);
}

.ent-opinion-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 0.7fr 1fr 0.5fr;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: 12px;
  color: var(--text-primary);
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background 0.15s;
}

.ent-opinion-row:hover { background: var(--bg-glass); }

@media (max-width: 700px) {
  .ent-opinions-header { display: none; }
  .ent-opinion-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-sm);
  }
  .ent-opinion-row > * {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .ent-opinion-row > *::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: var(--font-xs);
    color: var(--text-muted);
  }
}

/* ============================================
   Landing - Pricing Section
   ============================================ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  max-width: 1100px;
  margin: 0 auto;
}

.pricing-card {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}

.pricing-card.featured {
  border-color: var(--accent-primary);
  transform: scale(1.03);
  box-shadow: 0 8px 32px rgba(255, 122, 34, 0.15);
}

.pricing-badge {
  background: var(--accent-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: var(--space-sm);
}

.pricing-tier { font-size: var(--font-xl); font-weight: 700; margin-bottom: var(--space-sm); }
.pricing-price { font-size: var(--font-4xl); font-weight: 800; color: var(--accent-primary); }
.pricing-price span { font-size: var(--font-sm); color: var(--text-muted); font-weight: 400; }
.pricing-features { list-style: none; padding: 0; margin: var(--space-lg) 0; text-align: left; }
.pricing-features li { padding: 8px 0; font-size: var(--font-sm); border-bottom: 1px solid var(--border-color); }
.pricing-features li::before { content: '✓ '; color: var(--success); font-weight: 700; }

@media (max-width: 700px) {
  .pricing-card.featured { transform: none; }
  .nav-hamburger { display: block !important; }
  .nav-links:not(.open) { display: none; }
  .nav-links.open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-card); padding: var(--space-md); gap: var(--space-sm); border-bottom: 1px solid var(--border-color); z-index: 100; }
}

/* ---- Review unified workflow (upload + KBLI context) ---- */
.review-page-stack {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.review-page-stack > #audit-workflow-progress {
  margin-bottom: 0;
}

.review-page-stack .card,
.review-page-stack .review-unified-card,
.review-page-stack .pract-disclosure {
  width: 100%;
  box-sizing: border-box;
}

.review-unified-workflow {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
}

.review-unified-card {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.review-unified-card__title {
  margin-bottom: 0;
}

.review-unified-tabs {
  display: flex;
  width: 100%;
}

.review-unified-tabs .tab {
  flex: 1;
  text-align: center;
}

.review-unified-mode-desc {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin: calc(-1 * var(--space-sm)) 0 0;
  line-height: 1.45;
}

.review-unified-upload__icon {
  margin-bottom: 8px;
  color: var(--primary);
}

.review-unified-upload__title {
  font-size: var(--font-md);
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text-primary);
}

.review-unified-upload__hint,
.review-unified-upload__formats {
  margin: 0 0 4px;
  font-size: var(--font-xs);
  color: var(--text-muted);
  line-height: 1.4;
}

.review-unified-divider {
  height: 1px;
  background: var(--border-color);
  margin: var(--space-xs) 0;
}

.review-unified-kbli {
  min-height: 48px;
}

.review-unified-analysis {
  margin-top: 0;
  margin-bottom: 0;
}

.review-unified-run {
  margin-top: var(--space-xs);
}

.review-results-section {
  margin: 0;
  width: 100%;
}

.upload-zone--compact {
  min-height: auto;
  padding: 10px 14px;
  cursor: default;
}

.upload-zone--compact:hover {
  border-color: var(--border-color);
  background: var(--bg-input);
}

.upload-compact-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
}

.upload-compact-bar__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.upload-compact-bar__name {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upload-compact-bar__status {
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.upload-compact-bar__replace {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .review-unified-card {
    padding: var(--space-md);
  }

  .upload-compact-bar {
    flex-wrap: wrap;
  }
}

/* B2B trial conversion banner (H-7 window) */
.comp-trial-conversion-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  margin-bottom: var(--space-sm);
}

.comp-trial-conversion-banner--ending {
  background: rgba(217, 119, 6, 0.1);
  border: 1px solid rgba(217, 119, 6, 0.35);
  color: var(--text-primary);
}

.comp-trial-conversion-banner--expired {
  background: rgba(185, 28, 28, 0.08);
  border: 1px solid rgba(185, 28, 28, 0.35);
  color: var(--text-primary);
}

.comp-trial-conversion-banner__content {
  flex: 1 1 240px;
  min-width: 0;
}

.comp-trial-conversion-banner__content p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  line-height: 1.45;
}

.comp-trial-conversion-banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.comp-trial-conversion-banner__requested {
  font-size: var(--font-xs);
  color: var(--text-muted);
  font-weight: 500;
}

/* Mobile layout — full-width content, no cramped widgets */
@media (max-width: 768px) {
  .comp-dashboard-container {
    gap: var(--space-sm);
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .dashboard-grid--compliance,
  #dashboard-grid.dashboard-grid--compliance {
    grid-template-columns: 1fr !important;
    --grid-cols: 1;
    gap: var(--space-sm) !important;
  }

  .dashboard-grid--compliance .dashboard-widget {
    min-width: 0;
    width: 100%;
  }

  .dashboard-grid--compliance .widget-content {
    padding: 10px 12px;
    min-height: auto;
  }

  .dashboard-grid--compliance .widget-priority-stat {
    flex-wrap: wrap;
    gap: 8px;
  }

  .dashboard-grid--compliance .widget-priority-stat__body {
    flex: 1 1 120px;
    min-width: 0;
  }

  .dashboard-grid--compliance .widget-priority-stat__rate {
    font-size: 18px;
  }

  .dashboard-grid--compliance .widget-title {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.25;
  }

  .comp-stats-row {
    grid-template-columns: 1fr;
  }

  .comp-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .comp-toolbar .btn {
    width: 100%;
    justify-content: center;
  }

  .comp-filter-select,
  .comp-filter-advanced-wrap {
    width: 100%;
    max-width: none;
    flex: 1 1 100%;
  }
}

/* Dashboard widget mobile — reset grid placement + UX order */
@media (max-width: 768px) {
  .dashboard-grid--compliance,
  #dashboard-grid.dashboard-grid--compliance {
    display: grid !important;
    grid-auto-flow: row dense;
  }

  .dashboard-grid--compliance .dashboard-widget {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-width: 0;
    width: 100%;
  }

  #widget-critical-priority { order: 1; }
  #widget-high-priority { order: 2; }
  #widget-medium-priority { order: 3; }
  #widget-compliance-kpi { order: 4; }
  #widget-obligation-table { order: 5; }
  #widget-not-comply-score { order: 6; }
  #widget-low-priority { order: 7; }
  #widget-rac-status { order: 8; }
  #widget-trend-overview { order: 9; }
  #widget-division-success { order: 10; }
  #widget-sector-heatmap { order: 11; }
  #widget-legal-foundation { order: 12; }
  #widget-permit-summary { order: 13; }

  .dashboard-grid--compliance .dashboard-widget--chart {
    min-height: 220px;
  }

  .dashboard-grid--compliance #widget-obligation-table {
    min-height: 280px;
  }

  .dashboard-grid--compliance #widget-sector-heatmap .widget-content,
  .dashboard-grid--compliance #widget-division-success .widget-content {
    min-height: 200px;
  }

  .comp-division-chart-wrap {
    width: 100%;
    min-height: 200px;
  }
}


/* Backfill import modal — file input spacing */
.comp-backfill-file-input {
  margin-top: var(--space-xs);
  padding: 10px 14px;
  cursor: pointer;
}

/* ── Dashboard revamp: competitor-style charts & KPI ── */
.widget-kpi-hero--rate-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 148px;
  padding: 20px 16px;
  border-radius: var(--radius-lg);
  text-align: center;
  color: #fff;
}
.widget-kpi-hero--rate-card.widget-kpi-hero--good {
  background: linear-gradient(145deg, #2E8555 0%, #236B44 100%);
  box-shadow: 0 8px 24px rgba(46, 133, 85, 0.25);
}
.widget-kpi-hero--rate-card.widget-kpi-hero--warn {
  background: linear-gradient(145deg, #D97706 0%, #B45309 100%);
}
.widget-kpi-hero--rate-card.widget-kpi-hero--bad {
  background: linear-gradient(145deg, #B91C1C 0%, #991B1B 100%);
}
.widget-kpi-hero__rate-card-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.9;
}
.widget-kpi-hero__rate-card-value {
  font-size: clamp(2.5rem, 6vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
}
.widget-kpi-hero__rate-card-sub {
  font-size: 12px;
  opacity: 0.92;
}

.comp-donut-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  width: 100%;
  min-height: 140px;
}
.comp-donut-card__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.comp-donut-card__metric {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}
.comp-donut-card__canvas {
  width: 110px !important;
  height: 110px !important;
}
.comp-donut-legend {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.comp-donut-legend__title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.comp-donut-legend__item {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 6px;
  align-items: center;
  font-size: 10px;
  line-height: 1.3;
}
.comp-donut-legend__swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.comp-donut-legend__label {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comp-donut-legend__value {
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap;
}

.widget-priority-stat--bordered {
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  min-height: 118px;
}
.widget-priority-stat--high { border-color: #B91C1C; }
.widget-priority-stat--medium { border-color: #D97706; }
.widget-priority-stat--low { border-color: #2E8555; }
.widget-priority-stat--critical { border-color: #7F1D1D; }

.comp-chart-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  height: 100%;
  min-height: 280px;
}
.comp-chart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 4px;
}
.comp-timeframe-group {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: var(--bg-glass);
  border: 1px solid var(--border-subtle);
}
.comp-timeframe-btn {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.comp-timeframe-btn.active {
  background: var(--brand-primary, #0F2B46);
  color: #fff;
}
.comp-chart-toolbar__secondary {
  display: flex;
  gap: 4px;
}
.comp-chart-range-btn {
  min-height: auto !important;
  padding: 4px 10px !important;
  font-size: 10px !important;
}
.comp-trend-chart-wrap,
.comp-division-chart-wrap {
  flex: 1;
  min-height: 260px;
  width: 100%;
}
.comp-trend-chart-canvas,
.comp-division-chart-canvas {
  display: block;
  width: 100%;
  height: 280px;
}

.comp-chart-tooltip__title {
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding-bottom: 4px;
  margin-bottom: 6px;
}
.comp-chart-tooltip__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 11px;
  margin-bottom: 3px;
}
.comp-chart-tooltip__row--total {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed rgba(255,255,255,0.1);
}

.dashboard-grid--compliance #widget-compliance-kpi .widget-content {
  padding: 8px;
}
.dashboard-grid--compliance #widget-trend-overview,
.dashboard-grid--compliance #widget-division-success {
  min-height: 320px;
}

@media (max-width: 768px) {
  #widget-compliance-score { order: 1; }
  #widget-compliance-kpi { order: 2; }
  #widget-not-comply-score { order: 3; }
  #widget-high-priority { order: 4; }
  #widget-medium-priority { order: 5; }
  #widget-low-priority { order: 6; }
  #widget-trend-overview { order: 7; }
  #widget-division-success { order: 8; }
  #widget-obligation-table { order: 9; }
  .comp-donut-card {
    grid-template-columns: 1fr;
  }
}

/* ── Compliance dashboard widget headers ── */
.dashboard-grid--compliance .widget-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  font-weight: 700;
}

/* ── P0: Unified compliance hero card (competitor ATM) ── */
#widget-compliance-hero .widget-header { display: none; }
#widget-compliance-hero .widget-content {
  padding: 0;
  min-height: 280px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

#widget-compliance-hero .widget-content > .comp-hero-card {
  width: 100%;
  flex: 1;
  min-width: 0;
}


/* Hero + view toggle — dark surfaces (no #fff fallback) */
html[data-theme="dark"] .comp-hero-card,
html:not([data-theme="light"]) .comp-hero-card {
  background: var(--bg-tertiary, #0d1f33);
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .comp-hero-card__footer,
html:not([data-theme="light"]) .comp-hero-card__footer {
  background: rgba(255, 255, 255, 0.05);
}
html[data-theme="dark"] .comp-view-toggle,
html:not([data-theme="light"]) .comp-view-toggle {
  background: var(--bg-tertiary, #0d1f33);
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="light"] .comp-hero-card,
html[data-theme="light"] .comp-view-toggle {
  background: var(--brand-white, #fff);
}

#widget-compliance-hero.dashboard-widget--hero {
  min-height: 300px;
}

.comp-hero-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-width: 0;
  background: var(--bg-surface, var(--bg-card, var(--bg-tertiary, #0d1f33)));
  border: 1px solid var(--border-subtle, var(--border-color));
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-sizing: border-box;
  color: var(--text-primary);
}

.comp-hero-card__header {
  padding: 16px 18px 8px;
  border-bottom: 1px solid var(--border-subtle);
  width: 100%;
  box-sizing: border-box;
}
.comp-hero-card__title-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}
.comp-hero-card__pct-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--text-primary) 10%, transparent);
  color: var(--primary-light, var(--primary));
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}
.comp-hero-card__title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.comp-hero-card__subtitle {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
}

.comp-hero-card__body {
  display: grid;
  grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
  gap: 16px 24px;
  padding: 14px 18px 16px;
  flex: 1;
  align-items: start;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.comp-hero-card__bars-col {
  min-width: 0;
}
.comp-hero-card__donut-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}
.comp-hero-card__donut {
  width: 130px !important;
  height: 130px !important;
}
.comp-hero-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  justify-content: center;
}
.comp-hero-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--text-secondary);
}
.comp-hero-legend__swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.comp-hero-card__bars-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.comp-hero-card__bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.comp-hero-card__bars-empty {
  margin: 0;
  padding: 12px 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}
.comp-hero-reg-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-glass) 70%, transparent);
  cursor: default;
}
.comp-hero-reg-row[role="button"] {
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.comp-hero-reg-row[role="button"]:hover {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border-color));
  background: var(--bg-card);
}
.comp-hero-reg-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.comp-hero-reg-row__number {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}
.comp-hero-reg-row__pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  flex-shrink: 0;
}
.comp-hero-reg-row__title {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.comp-hero-reg-row__track {
  height: 8px;
  background: var(--bg-glass);
  border-radius: 999px;
  overflow: hidden;
}
.comp-hero-reg-row__fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s ease;
}
.comp-hero-reg-row__meta {
  font-size: 10px;
  color: var(--text-muted);
}
.comp-hero-bar-row {
  display: grid;
  grid-template-columns: minmax(88px, 110px) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.comp-hero-bar-row__label {
  font-size: 12px;
  font-weight: 700;
}
.comp-hero-bar-row__track {
  position: relative;
  height: 10px;
  background: var(--bg-glass);
  border-radius: 999px;
  overflow: hidden;
  width: 100%;
  min-width: 0;
}
.comp-hero-bar-row__fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s ease;
}
.comp-hero-bar-row__value {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
.comp-hero-bar-row__pct {
  color: var(--text-muted);
  font-weight: 500;
}

.comp-hero-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
  border-top: 1px solid var(--border-subtle, var(--border-color));
  width: 100%;
  box-sizing: border-box;
}
.comp-hero-card__banner {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.comp-hero-card__banner strong {
  color: var(--text-primary);
}
.comp-hero-card__cta {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 768px) {
  #widget-compliance-hero { order: 1; }
  #widget-trend-overview { order: 2; }
  #widget-division-success { order: 3; }
  #widget-obligation-table { order: 4; }
  .comp-hero-card__body {
    grid-template-columns: 1fr;
  }
  .comp-hero-card__footer {
    flex-direction: column;
    align-items: stretch;
  }
  .comp-hero-card__cta {
    width: 100%;
    justify-content: center;
  }
}


/* ── P1: Page tabs (Monitor / Kerangka Regulasi) ── */
.comp-page-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 var(--space-md);
  border-bottom: 1px solid var(--border-subtle);
}
.comp-page-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  margin-bottom: -1px;
}
.comp-page-tab--active {
  color: var(--brand-primary, #0F2B46);
  border-bottom-color: var(--brand-accent, #FF7B22);
}
.comp-monitor-toolbar-row {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 var(--space-sm);
}
.comp-view-toggle {
  display: inline-flex;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-surface, var(--bg-card, var(--bg-tertiary, #0d1f33)));
}
.comp-view-toggle__btn {
  appearance: none;
  border: none;
  background: transparent;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
}
.comp-view-toggle__btn--active {
  background: color-mix(in srgb, var(--text-primary) 10%, transparent);
  color: var(--text-primary);
}

/* ── P1: Side cards (Patuh / Belum patuh) ── */
#widget-compliance-score .widget-content,
#widget-not-comply-score .widget-content {
  padding: 10px 12px;
  min-height: 260px;
}
#widget-compliance-score .comp-donut-card,
#widget-not-comply-score .comp-donut-card {
  height: 100%;
}
.comp-donut-legend__item--click {
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 4px;
}
.comp-donut-legend__item--click:hover {
  background: rgba(15, 43, 70, 0.06);
}

/* ── P1: Kerangka Regulasi panel ── */
.comp-framework-shell {
  margin-top: var(--space-sm);
}
.comp-framework-panel__desc {
  margin: 0 0 var(--space-md);
  font-size: 13px;
  color: var(--text-muted);
}
.comp-framework-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.comp-framework-card {
  background: var(--bg-surface, var(--bg-card, var(--bg-tertiary, #0d1f33)));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.comp-framework-card:hover {
  border-color: rgba(255, 123, 34, 0.35);
  box-shadow: 0 4px 14px rgba(15, 43, 70, 0.08);
}
.comp-framework-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.comp-framework-card__number {
  font-size: 11px;
  font-weight: 800;
  color: var(--brand-primary, #0F2B46);
}
.comp-framework-card__rate {
  font-size: 14px;
  font-weight: 800;
}
.comp-framework-card--good .comp-framework-card__rate { color: #2E8555; }
.comp-framework-card--warn .comp-framework-card__rate { color: #D97706; }
.comp-framework-card--bad .comp-framework-card__rate { color: #B91C1C; }
.comp-framework-card__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.comp-framework-card__meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.comp-framework-card__bar {
  height: 6px;
  background: var(--bg-glass);
  border-radius: 999px;
  overflow: hidden;
}
.comp-framework-card__bar-fill {
  height: 100%;
  background: var(--brand-accent, #FF7B22);
  border-radius: 999px;
}

.comp-framework-summary {
  font-size: 15px;
  font-weight: 800;
  color: var(--brand-primary, #0F2B46);
  margin: 0 0 var(--space-sm);
}
.comp-framework-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--space-md);
}
.comp-framework-sector {
  margin-bottom: var(--space-lg);
}
.comp-framework-sector__title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.comp-framework-card__badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.comp-framework-card__badge--ok {
  background: rgba(46, 133, 85, 0.12);
  color: #2E8555;
}
.comp-framework-card__badge--open {
  background: rgba(185, 28, 28, 0.08);
  color: #B91C1C;
}
#comp-framework-rac .comp-glass-card {
  margin-bottom: var(--space-md);
}

.comp-framework-empty {
  padding: 32px;
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-md);
}

@media (max-width: 768px) {
  #widget-compliance-score { order: 1; }
  #widget-compliance-hero { order: 2; }
  #widget-not-comply-score { order: 3; }
  #widget-trend-overview { order: 4; }
  #widget-division-success { order: 5; }
  #widget-obligation-table { order: 6; }
  .comp-page-tabs { overflow-x: auto; }
  .comp-monitor-toolbar-row { justify-content: stretch; }
  .comp-view-toggle { width: 100%; }
  .comp-view-toggle__btn { flex: 1; text-align: center; }
}

.comp-hero-legend__text { font-weight: 600; }
.comp-hero-legend__meta {
  color: var(--text-muted);
  font-size: 9px;
  margin-left: 2px;
}
.comp-chart-tooltip__swatch {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.comp-division-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: center;
  margin-top: 8px;
  font-size: 10px;
  color: var(--text-secondary);
}
.comp-division-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.comp-division-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.comp-donut-legend__item[title] { cursor: help; }
.comp-hero-legend__item[title] { cursor: help; }

/* Headless stat widgets (donut shows its own label) */
.dashboard-widget--headless .widget-content {
  padding-top: 8px;
}

#widget-compliance-score.dashboard-widget--headless {
  min-height: 0;
}

#widget-compliance-score.dashboard-widget--headless .widget-content {
  padding: 4px 8px 8px;
}

#widget-not-comply-score.dashboard-widget--headless .widget-content {
  padding: 4px 8px 8px;
}


/* Review — defer extraction until AI analysis */
.review-ai-defer-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-md);
  background: rgba(var(--brand-rgb), 0.06);
  border: 1px solid rgba(var(--brand-rgb), 0.15);
  font-size: var(--font-xs);
  color: var(--text-secondary);
  line-height: 1.55;
}
.review-ai-defer-hint p { margin: 0; }
.review-ai-defer-hint--compact { margin-top: var(--space-sm); }

.nib-extraction-summary {
  margin-top: var(--space-lg);
  padding: 14px;
  border-radius: var(--radius-md);
  background: rgba(34, 197, 94, 0.06);
  border: 1px solid rgba(34, 197, 94, 0.2);
}
.nib-extraction-summary__title {
  font-weight: 700;
  font-size: var(--font-sm);
  margin-bottom: 10px;
}
.nib-extraction-summary__section {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.nib-summary-row {
  display: grid;
  grid-template-columns: minmax(120px, 38%) 1fr;
  gap: 8px 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  font-size: var(--font-xs);
}
.nib-summary-row__label { color: var(--text-muted); }
.nib-summary-row__value { color: var(--text-primary); font-weight: 600; }
.nib-summary-kbli {
  font-size: var(--font-xs);
  padding: 6px 0;
}
.nib-summary-empty {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin: 0;
}