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

  :root {
    --blue-50: #E6F1FB;
    --blue-100: #B5D4F4;
    --blue-200: #85B7EB;
    --blue-400: #378ADD;
    --blue-600: #185FA5;
    --blue-800: #0C447C;
    --blue-900: #042C53;
    --teal-50: #E1F5EE;
    --teal-400: #1D9E75;
    --teal-600: #0F6E56;
    --amber-50: #FAEEDA;
    --amber-400: #BA7517;
    --amber-600: #854F0B;
    --red-50: #FCEBEB;
    --red-400: #E24B4A;
    --green-50: #EAF3DE;
    --green-400: #639922;
    --gray-50: #F1EFE8;
    --gray-100: #D3D1C7;
    --gray-200: #B4B2A9;
    --gray-400: #888780;
    --gray-600: #5F5E5A;
    --gray-800: #444441;
    --bg: #F0F4FA;
    --surface: #FFFFFF;
    --sidebar-bg: #042C53;
    --sidebar-active: #185FA5;
    --text-primary: #0C1A2E;
    --text-secondary: #4A5568;
    --text-muted: #8896A5;
    --border: #D6E4F0;
    --font: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --radius: 10px;
    --radius-lg: 14px;
  }

  body { font-family: var(--font-body); background: var(--bg); color: var(--text-primary); min-height: 100vh; font-size: 14px; }

  /* LOGIN */
  #loginView { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #042C53 0%, #185FA5 60%, #378ADD 100%); }
  .login-card { background: var(--surface); border-radius: 20px; padding: 2.5rem; width: 100%; max-width: 400px; box-shadow: 0 24px 64px rgba(4,44,83,0.25); }
  .login-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 2rem; }
  .login-logo-icon { width: 44px; height: 44px; background: var(--blue-600); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 22px; }
  .login-logo-text h1 { font-family: var(--font); font-size: 18px; font-weight: 600; color: var(--blue-800); line-height: 1.2; }
  .login-logo-text p { font-size: 11px; color: var(--text-muted); letter-spacing: 0.04em; }
  .login-title { font-family: var(--font); font-size: 22px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
  .login-sub { font-size: 13px; color: var(--text-secondary); margin-bottom: 2rem; }
  .login-error { color: var(--red-400); font-size: 12px; margin-top: 8px; display: none; }

  /* FORM */
  .form-group { margin-bottom: 1rem; }
  .form-label { display: block; font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; letter-spacing: 0.02em; }
  .form-input { width: 100%; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: var(--radius); font-family: var(--font-body); font-size: 14px; color: var(--text-primary); background: var(--surface); outline: none; transition: border-color 0.15s; }
  .form-input:focus { border-color: var(--blue-400); box-shadow: 0 0 0 3px rgba(55,138,221,0.12); }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .form-row .form-group { margin-bottom: 0; }
  select.form-input { appearance: none; }

  /* BUTTONS */
  .btn-primary { width: 100%; padding: 11px; background: var(--blue-600); color: white; border: none; border-radius: var(--radius); font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s, transform 0.1s; margin-top: 0.5rem; }
  .btn-primary:hover { background: var(--blue-800); }
  .btn-primary:active { transform: scale(0.99); }
  .btn-primary:disabled { background: var(--gray-200); cursor: not-allowed; }
  .btn-secondary { padding: 9px 18px; background: transparent; border: 1.5px solid var(--border); border-radius: var(--radius); font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: background 0.12s; }
  .btn-secondary:hover { background: var(--gray-50); }
  .btn-submit { padding: 9px 22px; background: var(--blue-600); border: none; border-radius: var(--radius); font-family: var(--font); font-size: 13px; font-weight: 600; color: white; cursor: pointer; transition: background 0.12s; }
  .btn-submit:hover { background: var(--blue-800); }
  .btn-submit:disabled { background: var(--gray-200); cursor: not-allowed; }
  .btn-add { display: flex; align-items: center; gap: 6px; padding: 9px 16px; background: var(--blue-600); color: white; border: none; border-radius: var(--radius); font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.12s; white-space: nowrap; }
  .btn-add:hover { background: var(--blue-800); }
  .btn-add i { font-size: 16px; }
  .btn-close { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 20px; padding: 4px; border-radius: 6px; transition: color 0.12s, background 0.12s; }
  .btn-close:hover { color: var(--text-primary); background: var(--gray-50); }
  .btn-logout { background: none; border: none; color: rgba(255,255,255,0.4); cursor: pointer; padding: 4px; border-radius: 6px; transition: color 0.12s; font-size: 16px; }
  .btn-logout:hover { color: white; }

  /* APP SHELL */
  #appView { display: none; min-height: 100vh; }
  .app-layout { display: flex; min-height: 100vh; }

  /* SIDEBAR */
  .sidebar { width: 220px; min-height: 100vh; background: var(--sidebar-bg); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; transition: width 0.2s ease; overflow: hidden; }
  .sidebar.collapsed { width: 56px; }
  .sidebar.collapsed .sidebar-logo p,
  .sidebar.collapsed .nav-section-label,
  .sidebar.collapsed .nav-item span,
  .sidebar.collapsed .user-detail,
  .sidebar.collapsed .btn-logout { display: none; }
  .sidebar.collapsed .nav-item { justify-content: center; padding: 9px; }
  .sidebar.collapsed .sidebar-logo { padding: 1.25rem 0; display: flex; justify-content: center; }
  .sidebar.collapsed .sidebar-logo h2 { display: none; }
  .sidebar.collapsed .user-info { justify-content: center; padding: 8px 0; }
  .sidebar.collapsed .user-avatar { margin: 0; }
  .main-content { transition: margin-left 0.2s ease; }
  .main-content.expanded { margin-left: 56px; }
  .toggle-btn { background: none; border: none; color: rgba(255,255,255,0.65); cursor: pointer; font-size: 20px; padding: 4px; border-radius: 6px; transition: color 0.12s; flex-shrink: 0; }
  .toggle-btn:hover { color: white; }
  .sidebar-logo { padding: 1.5rem 1.25rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .sidebar-logo h2 { font-family: var(--font); font-size: 15px; font-weight: 600; color: white; line-height: 1.3; }
  .sidebar-logo p { font-size: 10px; color: rgba(255,255,255,0.45); letter-spacing: 0.06em; margin-top: 2px; }
  .sidebar-nav { flex: 1; padding: 1rem 0.75rem; display: flex; flex-direction: column; gap: 2px; }
  .nav-section-label { font-size: 10px; font-weight: 500; color: rgba(255,255,255,0.3); letter-spacing: 0.08em; padding: 0.75rem 0.5rem 0.25rem; }
  .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: rgba(255,255,255,0.65); font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.12s, color 0.12s; border: none; background: none; width: 100%; text-align: left; }
  .nav-item:hover { background: rgba(255,255,255,0.08); color: white; }
  .nav-item.active { background: var(--sidebar-active); color: white; }
  .nav-item i { font-size: 17px; flex-shrink: 0; }
  .sidebar-footer { padding: 1rem 0.75rem; border-top: 1px solid rgba(255,255,255,0.08); }
  .user-info { display: flex; align-items: center; gap: 10px; padding: 8px; }
  .user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--blue-400); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: white; flex-shrink: 0; }
  .user-detail { flex: 1; min-width: 0; }
  .user-name { font-size: 12px; font-weight: 500; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .user-role { font-size: 10px; color: rgba(255,255,255,0.4); }

  /* MAIN */
  .main-content { margin-left: 220px; flex: 1; padding: 1.75rem 2rem; min-height: 100vh; }
  .page-header { margin-bottom: 1.75rem; }
  .page-header h1 { font-family: var(--font); font-size: 20px; font-weight: 600; color: var(--text-primary); }
  .page-header p { font-size: 13px; color: var(--text-muted); margin-top: 3px; }

  /* STAT CARDS */
  .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 1.75rem; }
  .stat-card { background: var(--surface); border-radius: var(--radius-lg); padding: 1.25rem; border: 1px solid var(--border); position: relative; overflow: hidden; }
  .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
  .stat-card.blue::before { background: var(--blue-400); }
  .stat-card.teal::before { background: var(--teal-400); }
  .stat-card.amber::before { background: #EF9F27; }
  .stat-card.green::before { background: var(--green-400); }
  .stat-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 12px; }
  .stat-icon.blue { background: var(--blue-50); color: var(--blue-600); }
  .stat-icon.teal { background: var(--teal-50); color: var(--teal-600); }
  .stat-icon.amber { background: var(--amber-50); color: var(--amber-600); }
  .stat-icon.green { background: var(--green-50); color: var(--green-400); }
  .stat-value { font-family: var(--font); font-size: 28px; font-weight: 600; color: var(--text-primary); line-height: 1; margin-bottom: 4px; }
  .stat-label { font-size: 12px; color: var(--text-muted); }

  /* SECTION CARD */
  .section-card { background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--border); margin-bottom: 1.5rem; overflow: hidden; }
  .section-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
  .section-header h3 { font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--text-primary); }
  .badge { font-size: 11px; font-weight: 500; padding: 3px 8px; border-radius: 20px; }
  .badge-blue { background: var(--blue-50); color: var(--blue-800); }
  .badge-teal { background: var(--teal-50); color: var(--teal-600); }
  .badge-amber { background: var(--amber-50); color: var(--amber-600); }
  .badge-gray { background: var(--gray-50); color: var(--gray-600); }
  .badge-green { background: var(--green-50); color: var(--green-400); }
  .jadwal-list { padding: 0.5rem 0; }
  .jadwal-item { display: flex; align-items: center; gap: 14px; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--border); transition: background 0.1s; }
  .jadwal-item:last-child { border-bottom: none; }
  .jadwal-item:hover { background: #F7FAFF; }
  .empty-state { padding: 2.5rem; text-align: center; color: var(--text-muted); font-size: 13px; }
  .empty-state i { font-size: 36px; display: block; margin-bottom: 8px; color: var(--gray-100); }

  /* PASIEN TABLE */
  .toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 1.25rem; flex-wrap: wrap; }
  .search-box { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 8px 14px; flex: 1; min-width: 200px; max-width: 360px; }
  .search-box i { color: var(--text-muted); font-size: 16px; }
  .search-box input { border: none; outline: none; font-family: var(--font-body); font-size: 13px; color: var(--text-primary); background: transparent; width: 100%; }
  .search-box input::placeholder { color: var(--text-muted); }
  .table-wrap { background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: hidden; }
  table { width: 100%; border-collapse: collapse; }
  thead tr { background: #F7FAFF; border-bottom: 1px solid var(--border); }
  th { padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
  tbody tr { border-bottom: 1px solid var(--border); transition: background 0.1s; cursor: pointer; }
  tbody tr:last-child { border-bottom: none; }
  tbody tr:hover { background: #F7FAFF; }
  td { padding: 11px 14px; font-size: 13px; color: var(--text-primary); }
  .td-name { font-weight: 500; }
  .td-rm { font-family: var(--font); font-size: 12px; color: var(--blue-600); font-weight: 500; }
  .td-rm-empty { font-size: 11px; color: var(--text-muted); font-style: italic; }

  /* MODAL */
  .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(4,44,83,0.45); z-index: 200; align-items: center; justify-content: center; padding: 1rem; }
  .modal-overlay.open { display: flex; }
  .modal { background: var(--surface); border-radius: 16px; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 80px rgba(4,44,83,0.2); }
  .modal-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--surface); z-index: 1; }
  .modal-header h3 { font-family: var(--font); font-size: 15px; font-weight: 600; color: var(--text-primary); }
  .modal-body { padding: 1.5rem; }
  .modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }

  /* DETAIL PANEL */
  .detail-panel { display: none; position: fixed; top: 0; right: 0; bottom: 0; width: 380px; background: var(--surface); border-left: 1px solid var(--border); z-index: 150; flex-direction: column; box-shadow: -8px 0 32px rgba(4,44,83,0.08); }
  .detail-panel.open { display: flex; }
  .detail-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
  .detail-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--blue-50); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; color: var(--blue-600); flex-shrink: 0; }
  .detail-name { font-family: var(--font); font-size: 16px; font-weight: 600; color: var(--text-primary); }
  .detail-rm { font-size: 12px; color: var(--blue-600); font-weight: 500; margin-top: 2px; }
  .detail-body { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; }
  .detail-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border); gap: 12px; }
  .detail-row:last-child { border-bottom: none; }
  .detail-key { font-size: 12px; color: var(--text-muted); min-width: 110px; flex-shrink: 0; }
  .detail-val { font-size: 13px; color: var(--text-primary); text-align: right; font-weight: 500; }
  .detail-close { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 20px; padding: 4px; border-radius: 6px; }
  .detail-close:hover { color: var(--text-primary); }

  /* MISC */
  .loading-row td { padding: 2rem; text-align: center; color: var(--text-muted); font-size: 13px; }
  .spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--blue-400); border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; margin-right: 8px; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .toast { position: fixed; bottom: 1.5rem; right: 1.5rem; background: var(--blue-800); color: white; padding: 10px 18px; border-radius: var(--radius); font-size: 13px; font-weight: 500; z-index: 999; opacity: 0; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s; pointer-events: none; }
  .toast.show { opacity: 1; transform: translateY(0); }
  .toast.error { background: var(--red-400); }

  @media (max-width: 768px) {
    /* Sidebar — hidden by default on mobile */
    .sidebar { transform: translateX(-100%); transition: transform 0.25s ease; width: 240px; }
    .sidebar.mobile-open { transform: translateX(0); }
    .main-content { margin-left: 0 !important; padding: 1rem; }
    .main-content.expanded { margin-left: 0 !important; }

    /* Mobile overlay when sidebar open */
    .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(4,44,83,0.5); z-index: 99; }
    .sidebar-overlay.show { display: block; }

    /* Tables scroll horizontally */
    .table-wrap { overflow-x: auto; }
    table { min-width: 500px; }

    /* Grid → single column */
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .form-row { grid-template-columns: 1fr; }

    /* Modal full width */
    .modal { max-width: 100% !important; margin: 0.5rem; }
    .modal-overlay { padding: 0.5rem; align-items: flex-end; }

    /* On Treatment grid */
    #sesiPanel > div[style*="grid-template-columns:1fr 1fr"] { display: block !important; }
    #sesiPanel > div[style*="grid-template-columns:1fr 1fr"] > div { margin-bottom: 1.25rem; }

    /* Reservasi grid */
    div[style*="grid-template-columns:1fr 340px"] { display: block !important; }
    div[style*="grid-template-columns:1fr 340px"] > div { margin-bottom: 1.25rem; }

    /* Pipeline wrap */
    div[style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }

    /* Page header stack */
    .page-header { flex-direction: column; align-items: flex-start !important; gap: 10px; }
    .page-header > div:last-child { width: 100%; overflow-x: auto; }

    /* Hamburguer button visible */
    .toggle-btn { display: flex; }

    /* Toast bottom center */
    .toast { left: 1rem; right: 1rem; bottom: 1rem; text-align: center; }
  }

  @media (min-width: 769px) {
    .sidebar-overlay { display: none !important; }
  }


/* ── ON TREATMENT ── */
.ot-row { padding:14px 16px; border-bottom:1px solid var(--border); transition:background 0.1s; }
.ot-row:last-child { border-bottom:none; }
.ot-row:hover { background:#F7FAFF; }
.ot-row-header { display:flex; align-items:center; gap:12px; }
.ot-aksi { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; padding-left:52px; }
.ot-btn { padding:5px 12px; border-radius:6px; font-size:11px; font-weight:500; cursor:pointer; border:1.5px solid var(--border); background:var(--surface); color:var(--text-secondary); transition:all 0.12s; font-family:var(--font); display:inline-flex; align-items:center; gap:4px; }
.ot-btn:hover { background:var(--blue-50); border-color:var(--blue-200); color:var(--blue-600); }
.ot-btn.primary { background:var(--blue-600); color:white; border-color:var(--blue-600); }
.ot-btn.primary:hover { background:var(--blue-800); }
.ot-btn.success { background:var(--teal-400); color:white; border-color:var(--teal-400); }
.ot-btn.success:hover { background:var(--teal-600); }
.ot-btn.danger { color:var(--red-400); border-color:var(--red-400); }
.ot-btn.danger:hover { background:var(--red-50); }

/* ── RESERVASI AKSI ── */
.res-row { padding:14px 16px; border-bottom:1px solid var(--border); transition:background 0.1s; }
.res-row:last-child { border-bottom:none; }
.res-row:hover { background:#F7FAFF; }
.res-row-header { display:flex; align-items:center; gap:12px; }
.res-aksi { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; padding-left:52px; }
.res-aksi-btn { padding:5px 12px; border-radius:6px; font-size:11px; font-weight:500; cursor:pointer; border:1.5px solid var(--border); background:var(--surface); color:var(--text-secondary); transition:all 0.12s; font-family:var(--font); display:inline-flex; align-items:center; gap:4px; }
.res-aksi-btn:hover { background:var(--blue-50); border-color:var(--blue-200); color:var(--blue-600); }
.res-aksi-btn.primary { background:var(--blue-600); color:white; border-color:var(--blue-600); }
.res-aksi-btn.primary:hover { background:var(--blue-800); }
.res-aksi-btn.success { background:var(--teal-400); color:white; border-color:var(--teal-400); }
.res-aksi-btn.danger { color:var(--red-400); border-color:var(--red-400); }
.res-aksi-btn.danger:hover { background:var(--red-50); }

/* ── PIPELINE BAR (shared) ── */
.pipeline-bar { display:flex; align-items:stretch; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:1.75rem; }
.pipeline-step { flex:1; padding:12px 14px; text-align:center; border-right:1px solid var(--border); }
.pipeline-step:last-child { border-right:none; }
.pipeline-step-label { font-size:10px; font-weight:600; letter-spacing:0.06em; margin-bottom:4px; }
.pipeline-step-value { font-size:22px; font-weight:700; line-height:1; }
.pipeline-arrow { display:flex; align-items:center; color:var(--gray-200); font-size:20px; padding:0 2px; }

/* ── BILLING ROW ── */
.billing-row { display:flex; align-items:center; padding:14px 16px; border-bottom:1px solid var(--border); transition:background 0.1s; }
.billing-row:last-child { border-bottom:none; }
.billing-row:hover { background:#F7FAFF; }

/* ── PENGATURAN TABS ── */
.pg-tab { padding:10px 18px; border:none; background:transparent; font-family:var(--font); font-size:13px; font-weight:500; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all 0.15s; }
.pg-tab.active { color:var(--blue-600); border-bottom-color:var(--blue-600); }
.pg-tab:hover { color:var(--text-primary); }
.pg-aksi-btn { padding:4px 10px; border-radius:6px; font-size:11px; font-weight:500; cursor:pointer; border:1.5px solid var(--border); background:var(--surface); color:var(--text-secondary); font-family:var(--font); transition:all 0.12s; margin-right:4px; }
.pg-aksi-btn:hover { background:var(--blue-50); border-color:var(--blue-200); color:var(--blue-600); }
.pg-aksi-btn.danger { color:var(--red-400); border-color:var(--red-400); }
.pg-aksi-btn.danger:hover { background:var(--red-50); }

/* ── VIEW TOGGLE ── */
.view-toggle { padding:5px 12px; border:none; background:transparent; border-radius:7px; font-size:12px; font-weight:500; color:var(--text-secondary); cursor:pointer; transition:all 0.15s; font-family:var(--font); }
.view-toggle.active { background:var(--surface); color:var(--blue-600); box-shadow:0 1px 4px rgba(0,0,0,0.1); }
.cal-nav-btn { padding:6px 10px; border:1.5px solid var(--border); background:var(--surface); border-radius:var(--radius); cursor:pointer; color:var(--text-secondary); font-size:15px; transition:all 0.12s; display:flex; align-items:center; }
.cal-nav-btn:hover { background:var(--blue-50); color:var(--blue-600); border-color:var(--blue-200); }

/* ── PIPELINE BAR ── */
.pipeline-bar { display:flex; align-items:stretch; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:1.75rem; }
.pipeline-bar-item { flex:1; padding:12px 14px; text-align:center; border-right:1px solid var(--border); }
.pipeline-bar-item:last-child { border-right:none; }
.pipeline-bar-item.active { background:var(--blue-50); }
.pipeline-bar-item.teal { background:var(--teal-50); }
.pipeline-bar-item.green { background:var(--green-50); }
.pipeline-bar-item.amber { background:var(--amber-50); }
.pipeline-bar-sep { display:flex; align-items:center; color:var(--gray-200); font-size:18px; padding:0 2px; }
.pipeline-bar-label { font-size:10px; font-weight:600; letter-spacing:0.06em; color:var(--text-muted); margin-bottom:4px; }
.pipeline-bar-val { font-size:22px; font-weight:700; line-height:1; }