/* ════════════════════════════════════════════════════════════════
   Career Readiness — CSS v2
   File: dictio-readiness.css
   Prefix: dcr-
   Layout: Editorial / laporan analitik premium
   BuddyPress-safe: font, button, dan elemen kritis pakai !important
   ════════════════════════════════════════════════════════════════ */

/* ── ROOT TOKENS ─────────────────────────────────────────────── */
.dcr-wrap {
    --dcr-ink:        #1A1A1A;
    --dcr-ink-2:      #555555;
    --dcr-ink-3:      #888888;
    --dcr-ink-4:      #bbbbbb;
    --dcr-ink-5:      #cccccc;
    --dcr-border:     #EBEBEB;
    --dcr-border-lt:  #F2F2F0;
    --dcr-surface:    #ffffff;
    --dcr-surface-2:  #FAFAF8;
    --dcr-page:       #F5F5F3;

    --dcr-red:        #E8A09A;
    --dcr-red-bg:     #FDF4F3;
    --dcr-red-border: #E8C0BC;
    --dcr-red-text:   #8B3A35;

    --dcr-green:      #8EC4A0;
    --dcr-green-bg:   #F2FAF6;
    --dcr-green-border:#A8D4B8;
    --dcr-green-text: #2A6B50;

    --dcr-amber:      #C4A882;
    --dcr-amber-bg:   #FDF8F0;
    --dcr-amber-border:#D4B87A;
    --dcr-amber-text: #7A5A00;

    --dcr-purple:     #C9B8E8;
    --dcr-purple-bg:  #F7F2FF;
    --dcr-purple-text:#5B3B9E;

    --dcr-blue:       #B8CCE8;
    --dcr-blue-bg:    #F2F6FD;
    --dcr-blue-text:  #2A4A7A;

    --dcr-radius:     12px;
    --dcr-radius-sm:  8px;
    --dcr-radius-xs:  4px;
    --dcr-tr:         160ms ease;
}

/* ── WRAP ────────────────────────────────────────────────────── */
.dcr-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    padding-bottom: 48px !important;
    background: var(--dcr-page) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ── PANEL SHARED ────────────────────────────────────────────── */
.dcr-panel {
    background: var(--dcr-surface) !important;
}

/* ═══════════════════════════════════════════════════════════════
   STALE BANNER — ada perubahan data, belum dihitung ulang
   ═══════════════════════════════════════════════════════════════ */
.dcr-stale-banner {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 20px !important;
    background: #FFFBF0 !important;
    border: 1px solid #F5D97A !important;
    border-radius: var(--dcr-radius) !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
}
.dcr-stale-ico {
    font-size: 22px !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}
.dcr-stale-body {
    flex: 1 !important;
    min-width: 200px !important;
}
.dcr-stale-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #7A5500 !important;
    margin: 0 0 3px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-stale-desc {
    font-size: 12px !important;
    color: #9A6D00 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-stale-btn {
    flex-shrink: 0 !important;
    padding: 8px 18px !important;
    background: #E6A800 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    transition: background 0.15s !important;
    white-space: nowrap !important;
}
.dcr-stale-btn:hover {
    background: #CC9600 !important;
}
.dcr-stale-btn:disabled {
    background: #D4A800 !important;
    opacity: 0.7 !important;
    cursor: not-allowed !important;
}

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATES
   ═══════════════════════════════════════════════════════════════ */
.dcr-empty-wrap {
    text-align: center !important;
    padding: 64px 32px !important;
    background: var(--dcr-surface) !important;
    border: 0.5px solid var(--dcr-border) !important;
    border-radius: var(--dcr-radius) !important;
}
.dcr-empty-ico {
    font-size: 40px !important;
    margin-bottom: 16px !important;
    display: block !important;
}
.dcr-empty-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--dcr-ink) !important;
    margin: 0 0 10px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-empty-desc {
    font-size: 13px !important;
    color: var(--dcr-ink-3) !important;
    max-width: 400px !important;
    margin: 0 auto 24px !important;
    line-height: 1.6 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-empty-actions {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

/* ═══════════════════════════════════════════════════════════════
   NAV — Goal tabs + Track switcher
   ═══════════════════════════════════════════════════════════════ */
.dcr-header {
    background: var(--dcr-surface) !important;
    padding: 14px 22px !important;
}
.dcr-selector-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}
.dcr-goal-tabs {
    display: flex !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
    flex: 1 !important;
}
.dcr-goal-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 5px 13px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border: 0.5px solid var(--dcr-border) !important;
    color: var(--dcr-ink-3) !important;
    text-decoration: none !important;
    transition: all var(--dcr-tr) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    background: transparent !important;
}
.dcr-goal-tab:hover {
    border-color: var(--dcr-ink-3) !important;
    color: var(--dcr-ink) !important;
}
.dcr-goal-tab--active {
    background: var(--dcr-ink) !important;
    border-color: var(--dcr-ink) !important;
    color: #fff !important;
}
.dcr-primary-badge {
    font-size: 10px !important;
    opacity: .7 !important;
}

.dcr-track-tabs {
    display: flex !important;
    gap: 2px !important;
    background: var(--dcr-page) !important;
    border-radius: 9px !important;
    padding: 3px !important;
}
.dcr-track-tab {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1px !important;
    padding: 5px 13px !important;
    border-radius: 7px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--dcr-ink-3) !important;
    text-decoration: none !important;
    transition: all var(--dcr-tr) !important;
    border: none !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    background: transparent !important;
    line-height: 1.4 !important;
}
.dcr-track-tab:hover {
    color: var(--dcr-ink) !important;
}
.dcr-track-tab--active {
    background: var(--dcr-surface) !important;
    color: var(--dcr-ink) !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.07) !important;
}
.dcr-track-score {
    font-size: 10px !important;
    color: var(--dcr-ink-4) !important;
    font-weight: 600 !important;
}
.dcr-track-tab--active .dcr-track-score {
    color: var(--dcr-ink-3) !important;
}

/* ═══════════════════════════════════════════════════════════════
   HERO — Score besar + tabel 6 dimensi
   ═══════════════════════════════════════════════════════════════ */
.dcr-score-main {
    display: grid !important;
    grid-template-columns: 192px 1fr !important;
    border-top: 0.5px solid var(--dcr-border) !important;
    background: var(--dcr-surface) !important;
}

/* Kolom kiri — skor */
.dcr-score-left {
    padding: 24px 20px !important;
    border-right: 0.5px solid var(--dcr-border) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
.dcr-score-cap {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: var(--dcr-ink-4) !important;
    margin-bottom: 2px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-score-num-wrap {
    display: flex !important;
    align-items: baseline !important;
    gap: 2px !important;
    line-height: 1 !important;
}
.dcr-circle-num {
    font-size: 64px !important;
    font-weight: 800 !important;
    color: var(--dcr-ink) !important;
    letter-spacing: -3px !important;
    line-height: 1 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-circle-pct {
    font-size: 24px !important;
    font-weight: 400 !important;
    color: var(--dcr-ink-5) !important;
    letter-spacing: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Band badge */
.dcr-band-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    width: fit-content !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-band-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}
.dcr-band--early {
    background: var(--dcr-red-bg) !important;
    border: 0.5px solid var(--dcr-red-border) !important;
    color: var(--dcr-red-text) !important;
}
.dcr-band--early .dcr-band-dot   { background: var(--dcr-red) !important; }
.dcr-band--developing {
    background: var(--dcr-amber-bg) !important;
    border: 0.5px solid var(--dcr-amber-border) !important;
    color: var(--dcr-amber-text) !important;
}
.dcr-band--developing .dcr-band-dot { background: var(--dcr-amber) !important; }
.dcr-band--ready {
    background: var(--dcr-green-bg) !important;
    border: 0.5px solid var(--dcr-green-border) !important;
    color: var(--dcr-green-text) !important;
}
.dcr-band--ready .dcr-band-dot    { background: var(--dcr-green) !important; }
.dcr-band--advanced {
    background: var(--dcr-purple-bg) !important;
    border: 0.5px solid var(--dcr-purple) !important;
    color: var(--dcr-purple-text) !important;
}
.dcr-band--advanced .dcr-band-dot { background: var(--dcr-purple) !important; }

/* Goal info di bawah band */
.dcr-goal-block {
    border-top: 0.5px solid var(--dcr-border) !important;
    padding-top: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}
.dcr-goal-name {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--dcr-ink) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-goal-cluster,
.dcr-track-active,
.dcr-generated {
    font-size: 11px !important;
    color: var(--dcr-ink-4) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Kolom kanan — 6 dimensi + track compare */
.dcr-score-right {
    padding: 22px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* Dim rows */
.dcr-dim-bars {
    display: flex !important;
    flex-direction: column !important;
}
.dcr-dim-bar-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 0 !important;
    border-bottom: 0.5px solid var(--dcr-border-lt) !important;
}
.dcr-dim-bar-row:last-child {
    border-bottom: none !important;
}
.dcr-dim-bar-ico {
    width: 20px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    font-size: 13px !important;
    color: var(--dcr-ink-4) !important;
}
.dcr-dim-bar-label {
    font-size: 12px !important;
    color: var(--dcr-ink-2) !important;
    min-width: 142px !important;
    flex-shrink: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-dim-bar-weight {
    font-size: 10px !important;
    color: var(--dcr-ink-5) !important;
    min-width: 42px !important;
    text-align: right !important;
    flex-shrink: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-dim-bar-track {
    flex: 1 !important;
    height: 5px !important;
    background: var(--dcr-border-lt) !important;
    border-radius: 3px !important;
    overflow: hidden !important;
}
.dcr-dim-bar-fill {
    height: 100% !important;
    border-radius: 3px !important;
    transition: width 0.7s ease !important;
}
.dcr-bar--early      { background: var(--dcr-red) !important; }
.dcr-bar--developing { background: var(--dcr-amber) !important; }
.dcr-bar--ready      { background: var(--dcr-green) !important; }
.dcr-bar--advanced   { background: var(--dcr-green) !important; }
.dcr-dim-bar-val {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--dcr-ink) !important;
    min-width: 30px !important;
    text-align: right !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Track comparison strip */
.dcr-track-compare {
    border-top: 0.5px solid var(--dcr-border) !important;
    padding-top: 10px !important;
    margin-top: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}
.dcr-tc-head {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    color: var(--dcr-ink-4) !important;
    white-space: nowrap !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-tc-bars {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}
.dcr-tc-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.dcr-tc-label {
    font-size: 11px !important;
    color: var(--dcr-ink-2) !important;
    min-width: 84px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-tc-bar-wrap {
    flex: 1 !important;
    height: 4px !important;
    background: var(--dcr-border) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
}
.dcr-tc-bar {
    height: 100% !important;
    border-radius: 2px !important;
    background: var(--dcr-amber) !important;
    transition: width 0.7s ease !important;
}
.dcr-tc--best .dcr-tc-bar {
    background: var(--dcr-green) !important;
}
.dcr-tc-val {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--dcr-ink) !important;
    min-width: 28px !important;
    text-align: right !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-tc-best-tag {
    font-size: 9px !important;
    font-weight: 700 !important;
    background: var(--dcr-green-bg) !important;
    color: var(--dcr-green-text) !important;
    border: 0.5px solid var(--dcr-green-border) !important;
    padding: 1px 5px !important;
    border-radius: 3px !important;
    letter-spacing: .02em !important;
}

/* ═══════════════════════════════════════════════════════════════
   EARLY WARNINGS
   ═══════════════════════════════════════════════════════════════ */
.dcr-warnings {
    background: var(--dcr-surface) !important;
    padding: 16px 22px !important;
    border-top: 0.5px solid var(--dcr-border) !important;
}
.dcr-warn-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
}
.dcr-warn-title {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    color: var(--dcr-ink-3) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-warn-count {
    font-size: 11px !important;
    color: var(--dcr-ink-4) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-warn-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.dcr-warn-item {
    display: flex !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: var(--dcr-radius-sm) !important;
    border: 0.5px solid var(--dcr-border) !important;
}
.dcr-warn-critical { background: var(--dcr-red-bg) !important; border-color: var(--dcr-red-border) !important; }
.dcr-warn-warning  { background: var(--dcr-amber-bg) !important; border-color: var(--dcr-amber-border) !important; }
.dcr-warn-info     { background: var(--dcr-blue-bg) !important; border-color: var(--dcr-blue) !important; }
.dcr-warn-ico      { font-size: 14px !important; flex-shrink: 0 !important; margin-top: 1px !important; }
.dcr-warn-body     { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.dcr-warn-title-item {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--dcr-ink) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-warn-rec {
    font-size: 11.5px !important;
    color: var(--dcr-ink-2) !important;
    line-height: 1.4 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADER — shared
   ═══════════════════════════════════════════════════════════════ */
.dcr-section {
    background: var(--dcr-surface) !important;
}
.dcr-section-head {
    background: var(--dcr-surface-2) !important;
    padding: 10px 22px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-top: 0.5px solid var(--dcr-border) !important;
    border-bottom: 0.5px solid var(--dcr-border) !important;
}
.dcr-section-title {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    color: var(--dcr-ink-3) !important;
    margin: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-section-desc {
    font-size: 11px !important;
    color: var(--dcr-ink-5) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-section-ico { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   SECTION 1 — 6 DIMENSI sudah di-remove dari render loop
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   SECTION 2 — BREAKDOWN DETAIL
   ═══════════════════════════════════════════════════════════════ */
.dcr-breakdown-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    padding: 0 !important;
}

/* Setiap dimensi — card di grid 2 kolom */
.dcr-bd-card {
    padding: 20px 24px !important;
    background: var(--dcr-surface) !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 0.5px solid var(--dcr-border-lt) !important;
    border-right: 0.5px solid var(--dcr-border-lt) !important;
}
/* Kolom kanan tidak ada border kanan */
.dcr-bd-card:nth-child(2n) {
    border-right: none !important;
}
/* Dua baris terakhir (D5 dan D6) tidak ada border bawah */
.dcr-bd-card:nth-last-child(-n+2) {
    border-bottom: none !important;
}
/* Tapi kalau D6 sendirian di baris terakhir, D5 masih perlu border bawah */
.dcr-bd-card:nth-last-child(1):nth-child(2n+1) {
    border-bottom: none !important;
}
.dcr-bd-card:nth-last-child(2):nth-child(2n+1) {
    border-bottom: none !important;
}
.dcr-bd-card:nth-last-child(2):nth-child(2n) {
    border-bottom: none !important;
}

/* Header baris: icon + nama + score pill */
.dcr-bd-card-head {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 10px !important;
}
.dcr-bd-ico {
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px !important;
    border: 0.5px solid var(--dcr-border) !important;
    background: var(--dcr-surface-2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: 13px !important;
    color: var(--dcr-ink-3) !important;
}
.dcr-bd-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--dcr-ink) !important;
    flex: 1 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-bd-score {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: -.3px !important;
    flex-shrink: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-bd-score::before {
    content: '' !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
}
.dcr-score-early    { background: var(--dcr-red-bg) !important; border: 0.5px solid var(--dcr-red-border) !important; color: var(--dcr-red-text) !important; }
.dcr-score-early::before    { background: var(--dcr-red) !important; }
.dcr-score-developing { background: var(--dcr-amber-bg) !important; border: 0.5px solid var(--dcr-amber-border) !important; color: var(--dcr-amber-text) !important; }
.dcr-score-developing::before { background: var(--dcr-amber) !important; }
.dcr-score-ready    { background: var(--dcr-green-bg) !important; border: 0.5px solid var(--dcr-green-border) !important; color: var(--dcr-green-text) !important; }
.dcr-score-ready::before    { background: var(--dcr-green) !important; }
.dcr-score-advanced { background: var(--dcr-green-bg) !important; border: 0.5px solid var(--dcr-green-border) !important; color: var(--dcr-green-text) !important; }
.dcr-score-advanced::before { background: var(--dcr-green) !important; }

/* Progress bar tipis */
.dcr-bd-bar-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
    padding-left: 0 !important;
}
.dcr-bd-bar-outer {
    flex: 1 !important;
    height: 3px !important;
    background: var(--dcr-border-lt) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
}
.dcr-bd-bar-inner {
    height: 100% !important;
    border-radius: 2px !important;
    transition: width 0.7s ease !important;
}
.dcr-bd-weight {
    font-size: 10px !important;
    color: var(--dcr-ink-5) !important;
    flex-shrink: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Stat chips */
.dcr-bd-body {
    padding-left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
.dcr-bd-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}
.dcr-stat-pill {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    background: var(--dcr-surface-2) !important;
    border: 0.5px solid var(--dcr-border-lt) !important;
    border-radius: var(--dcr-radius-sm) !important;
    padding: 9px 14px !important;
    min-width: 68px !important;
}
.dcr-stat-val {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--dcr-ink) !important;
    letter-spacing: -.4px !important;
    line-height: 1 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-stat-lbl {
    font-size: 10px !important;
    color: var(--dcr-ink-4) !important;
    letter-spacing: .02em !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Tag groups dengan label */
.dcr-bd-tag-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding-left: 0 !important;
}
.dcr-bd-tag-group-label {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: var(--dcr-ink-4) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-bd-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}
.dcr-tag {
    font-size: 10.5px !important;
    padding: 2px 8px !important;
    border-radius: var(--dcr-radius-xs) !important;
    border: 0.5px solid var(--dcr-border) !important;
    color: var(--dcr-ink-2) !important;
    background: transparent !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-tag--missing  {
    border-color: var(--dcr-red-border) !important;
    color: var(--dcr-red-text) !important;
    background: var(--dcr-red-bg) !important;
}
.dcr-tag--ok {
    border-color: var(--dcr-green-border) !important;
    color: var(--dcr-green-text) !important;
    background: var(--dcr-green-bg) !important;
}
.dcr-tag--progress {
    border-color: var(--dcr-blue) !important;
    color: var(--dcr-blue-text) !important;
    background: var(--dcr-blue-bg) !important;
}
.dcr-tag--constraint {
    border-color: var(--dcr-purple) !important;
    color: var(--dcr-purple-text) !important;
    background: var(--dcr-purple-bg) !important;
}
.dcr-bd-note {
    font-size: 11.5px !important;
    color: var(--dcr-ink-3) !important;
    font-style: italic !important;
    line-height: 1.5 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-bd-best {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--dcr-amber-text) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-bd-blocker {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 11.5px !important;
}
.dcr-blocker-skill { color: var(--dcr-ink) !important; font-weight: 600 !important; }
.dcr-blocker-blocks { color: var(--dcr-ink-3) !important; }

/* ═══════════════════════════════════════════════════════════════
   SECTION 3 — INSIGHT MENDALAM
   ═══════════════════════════════════════════════════════════════ */
.dcr-section--insight { padding: 0 !important; }
.dcr-insight-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    background: var(--dcr-surface) !important;
}
.dcr-insight-card {
    padding: 20px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}
.dcr-insight-card:first-child {
    border-right: 0.5px solid var(--dcr-border) !important;
}
.dcr-insight-card-title {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: var(--dcr-ink-4) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Triangulasi */
.dcr-tri-type {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--dcr-ink) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-tri-bars {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
}
.dcr-tri-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.dcr-tri-label {
    font-size: 11px !important;
    color: var(--dcr-ink-2) !important;
    min-width: 118px !important;
    flex-shrink: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-tri-bar-wrap {
    flex: 1 !important;
    height: 4px !important;
    background: var(--dcr-border-lt) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
}
.dcr-tri-bar--efficacy { height: 100% !important; border-radius: 2px !important; background: var(--dcr-amber) !important; }
.dcr-tri-bar--actual   { height: 100% !important; border-radius: 2px !important; background: var(--dcr-ink) !important; }
.dcr-tri-val {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--dcr-ink) !important;
    min-width: 28px !important;
    text-align: right !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-gap-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 9px !important;
    border-radius: var(--dcr-radius-xs) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-gap--over  { background: var(--dcr-red-bg) !important; color: var(--dcr-red-text) !important; border: 0.5px solid var(--dcr-red-border) !important; }
.dcr-gap--under { background: var(--dcr-blue-bg) !important; color: var(--dcr-blue-text) !important; border: 0.5px solid var(--dcr-blue) !important; }
.dcr-tri-insight {
    font-size: 11.5px !important;
    color: var(--dcr-ink-2) !important;
    line-height: 1.6 !important;
    font-style: italic !important;
    border-left: 2px solid var(--dcr-red-border) !important;
    padding-left: 10px !important;
    border-radius: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Goal Fit Index */
.dcr-fit-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 11px !important;
    border-radius: var(--dcr-radius-xs) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    width: fit-content !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-fit--ideal    { background: var(--dcr-green-bg) !important; border: 0.5px solid var(--dcr-green-border) !important; color: var(--dcr-green-text) !important; }
.dcr-fit--aligned  { background: var(--dcr-amber-bg) !important; border: 0.5px solid var(--dcr-amber-border) !important; color: var(--dcr-amber-text) !important; }
.dcr-fit--capable  { background: var(--dcr-blue-bg) !important; border: 0.5px solid var(--dcr-blue) !important; color: var(--dcr-blue-text) !important; }
.dcr-fit--needs    { background: var(--dcr-red-bg) !important; border: 0.5px solid var(--dcr-red-border) !important; color: var(--dcr-red-text) !important; }
.dcr-fit--unknown  { background: var(--dcr-surface-2) !important; border: 0.5px solid var(--dcr-border) !important; color: var(--dcr-ink-3) !important; }

.dcr-fit-scores {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}
.dcr-fit-score-item { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.dcr-fit-score-val {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: var(--dcr-ink) !important;
    letter-spacing: -1px !important;
    line-height: 1 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-fit-score-lbl {
    font-size: 9.5px !important;
    color: var(--dcr-ink-4) !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-fit-x { display: none !important; }
.dcr-burnout {
    font-size: 12px !important;
    color: var(--dcr-ink) !important;
    font-weight: 600 !important;
    padding: 7px 10px !important;
    background: var(--dcr-surface-2) !important;
    border-radius: var(--dcr-radius-sm) !important;
    border: 0.5px solid var(--dcr-border) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-fit-insight { display: none !important; }
.dcr-fit-alt-head {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
    color: var(--dcr-ink-4) !important;
    margin-top: 2px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-fit-alt {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 5px 0 !important;
    border-bottom: 0.5px solid var(--dcr-border-lt) !important;
    background: transparent !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}
.dcr-fit-alt:last-child { border-bottom: none !important; }
.dcr-fit-alt-name {
    font-size: 11.5px !important;
    color: var(--dcr-ink) !important;
    font-weight: 500 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-fit-alt-score {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: var(--dcr-green-text) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 4 — RENCANA AKSI & PROYEKSI
   ═══════════════════════════════════════════════════════════════ */
.dcr-action-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    background: var(--dcr-surface) !important;
    border-top: 0.5px solid var(--dcr-border) !important;
}
.dcr-action-card {
    padding: 20px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    background: var(--dcr-surface) !important;
    border-radius: 0 !important;
    border: none !important;
    border-right: 0.5px solid var(--dcr-border) !important;
}
.dcr-action-card:nth-child(2n) {
    border-right: none !important;
}
.dcr-action-card--constraint {
    background: var(--dcr-purple-bg) !important;
    border-right: none !important;
}
.dcr-action-card-title {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: var(--dcr-ink-4) !important;
    padding-bottom: 10px !important;
    border-bottom: 0.5px solid var(--dcr-border-lt) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Timeline */
.dcr-timeline-main {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
}
.dcr-tl-current, .dcr-tl-target {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
.dcr-tl-num {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: var(--dcr-ink) !important;
    letter-spacing: -1.5px !important;
    line-height: 1 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-tl-target .dcr-tl-num {
    color: var(--dcr-ink-5) !important;
}
.dcr-tl-lbl {
    font-size: 10px !important;
    color: var(--dcr-ink-4) !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-tl-arrow {
    font-size: 18px !important;
    color: var(--dcr-border) !important;
    align-self: center !important;
}
.dcr-tl-estimate {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-tl-estimate > span:first-child {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--dcr-ink) !important;
}
.dcr-tl-feasible {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    border-radius: var(--dcr-radius-xs) !important;
}
.dcr-feasible--yes { background: var(--dcr-green-bg) !important; color: var(--dcr-green-text) !important; border: 0.5px solid var(--dcr-green-border) !important; }
.dcr-feasible--no  { background: var(--dcr-amber-bg) !important; color: var(--dcr-amber-text) !important; border: 0.5px solid var(--dcr-amber-border) !important; }
.dcr-tl-actions { display: flex !important; flex-direction: column !important; gap: 5px !important; }
.dcr-tl-action-item {
    font-size: 11.5px !important;
    color: var(--dcr-ink-2) !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 7px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-tl-action-item::before {
    content: '' !important;
    width: 3px !important;
    height: 3px !important;
    border-radius: 50% !important;
    background: var(--dcr-amber) !important;
    flex-shrink: 0 !important;
    margin-top: 5px !important;
    display: inline-block !important;
}

/* History mini chart */
.dcr-history-chart { border-top: 0.5px solid var(--dcr-border) !important; padding-top: 10px !important; }
.dcr-hc-label {
    font-size: 10px !important;
    color: var(--dcr-ink-4) !important;
    margin-bottom: 6px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-hc-bars { display: flex !important; align-items: flex-end !important; gap: 3px !important; height: 36px !important; }
.dcr-hc-bar-wrap { flex: 1 !important; height: 100% !important; display: flex !important; align-items: flex-end !important; }
.dcr-hc-bar { width: 100% !important; background: var(--dcr-amber) !important; border-radius: 2px 2px 0 0 !important; opacity: .6 !important; min-height: 3px !important; transition: height .4s ease !important; }

/* Critical gaps */
.dcr-gap-item { border-bottom: 0.5px solid var(--dcr-border-lt) !important; padding-bottom: 8px !important; }
.dcr-gap-item:last-child { border: none !important; padding: 0 !important; }
.dcr-gap-head { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 3px !important; }
.dcr-gap-title {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--dcr-ink) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-gap-score {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--dcr-ink) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-gap-bar-wrap {
    height: 3px !important;
    background: var(--dcr-border-lt) !important;
    border-radius: 2px !important;
    margin-bottom: 4px !important;
    overflow: hidden !important;
}
.dcr-gap-bar-fill {
    height: 100% !important;
    border-radius: 2px !important;
    background: var(--dcr-red) !important;
}
.dcr-gap-action {
    font-size: 11px !important;
    color: var(--dcr-ink-2) !important;
    line-height: 1.4 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Strengths */
.dcr-strength-item { border-bottom: 0.5px solid var(--dcr-border-lt) !important; padding-bottom: 8px !important; }
.dcr-strength-item:last-child { border: none !important; padding: 0 !important; }
.dcr-strength-head { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 2px !important; }
.dcr-strength-title {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--dcr-ink) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-strength-score {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--dcr-ink) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-strength-note {
    font-size: 11px !important;
    color: var(--dcr-ink-4) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Cohort */
.dcr-cohort-percentile { display: flex !important; align-items: baseline !important; gap: 4px !important; }
.dcr-cohort-pct {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: var(--dcr-ink) !important;
    letter-spacing: -1px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-cohort-pct-lbl {
    font-size: 11px !important;
    color: var(--dcr-ink-4) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-cohort-note {
    font-size: 11.5px !important;
    color: var(--dcr-ink-2) !important;
    line-height: 1.5 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-vs-item { display: flex !important; justify-content: space-between !important; font-size: 11.5px !important; padding: 4px 0 !important; border-bottom: 0.5px solid var(--dcr-border-lt) !important; }
.dcr-vs-item:last-child { border: none !important; }
.dcr-vs-lbl { color: var(--dcr-ink-2) !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dcr-vs-val { font-weight: 700 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dcr-vs--pos { color: var(--dcr-green-text) !important; }
.dcr-vs--neg { color: var(--dcr-red-text) !important; }

/* Constraint */
.dcr-constraint-note {
    font-size: 11.5px !important;
    color: var(--dcr-purple-text) !important;
    line-height: 1.5 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER — Narasi + Recalc
   ═══════════════════════════════════════════════════════════════ */
.dcr-footer-section {
    background: var(--dcr-surface) !important;
    padding: 20px 22px !important;
    border-top: 0.5px solid var(--dcr-border) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}
.dcr-narrative {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.dcr-narrative-head {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: var(--dcr-ink-4) !important;
    margin-bottom: 12px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-narrative p {
    font-size: 13px !important;
    color: var(--dcr-ink-2) !important;
    line-height: 1.8 !important;
    margin: 0 !important;
    border-top: 0.5px solid var(--dcr-border) !important;
    padding-top: 14px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-narrative p strong {
    color: var(--dcr-ink) !important;
    font-weight: 700 !important;
}
.dcr-footer-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding-top: 12px !important;
    border-top: 0.5px solid var(--dcr-border) !important;
    flex-wrap: wrap !important;
    background: transparent !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
}
.dcr-footer-meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 11px !important;
    color: var(--dcr-ink-4) !important;
    flex-wrap: wrap !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-footer-dot { color: var(--dcr-border) !important; }

/* ═══════════════════════════════════════════════════════════════
   BUTTONS — !important di semua properti, BuddyPress-safe
   ═══════════════════════════════════════════════════════════════ */
.dcr-btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 16px !important;
    background: var(--dcr-ink) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border: 0.5px solid var(--dcr-ink) !important;
    border-radius: var(--dcr-radius-sm) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all var(--dcr-tr) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
}
.dcr-btn-primary:hover {
    background: #333 !important;
    color: #ffffff !important;
    border-color: #333 !important;
    text-decoration: none !important;
}
.dcr-btn-ghost {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    background: var(--dcr-surface-2) !important;
    color: var(--dcr-ink) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    border: 0.5px solid var(--dcr-border) !important;
    border-radius: var(--dcr-radius-sm) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all var(--dcr-tr) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
}
.dcr-btn-ghost:hover {
    background: var(--dcr-surface) !important;
    border-color: var(--dcr-ink-3) !important;
    color: var(--dcr-ink) !important;
    text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .dcr-score-main          { grid-template-columns: 1fr !important; }
    .dcr-score-left          { border-right: none !important; border-bottom: 0.5px solid var(--dcr-border) !important; }
    .dcr-insight-grid        { grid-template-columns: 1fr !important; }
    .dcr-insight-card:first-child { border-right: none !important; border-bottom: 0.5px solid var(--dcr-border) !important; }
    .dcr-action-grid         { grid-template-columns: 1fr !important; }
    .dcr-action-card         { border-right: none !important; border-bottom: 0.5px solid var(--dcr-border-lt) !important; }
    .dcr-action-card:last-child { border-bottom: none !important; }
}

@media (max-width: 640px) {
    .dcr-selector-bar        { flex-direction: column !important; align-items: flex-start !important; }
    .dcr-track-tabs          { flex-wrap: wrap !important; }
    .dcr-score-num-wrap .dcr-circle-num { font-size: 52px !important; }
    .dcr-breakdown-grid      { grid-template-columns: 1fr !important; }
    .dcr-bd-card             { border-right: none !important; }
    .dcr-bd-card:nth-last-child(-n+2) { border-bottom: 0.5px solid var(--dcr-border-lt) !important; }
    .dcr-bd-card:last-child  { border-bottom: none !important; }
    .dcr-fit-scores          { grid-template-columns: 1fr 1fr !important; }
    .dcr-footer-bar          { flex-direction: column !important; align-items: flex-start !important; }
}

/* ══════════════════════════════════════════════════════════
   TRACK COMPARISON CARDS (header)
   ══════════════════════════════════════════════════════════ */
.dcr-tc-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 0.5px solid var(--dcr-border);
}
.dcr-tc-card {
    padding: 10px 12px;
    border: 0.5px solid var(--dcr-border);
    border-radius: 8px;
    background: var(--dcr-surface-2);
    text-align: center;
}
.dcr-tc-card--best {
    border-color: #9FE1CB;
    background: #E1F5EE;
}
.dcr-tc-card-name { font-size: 10px; color: var(--dcr-ink-3); margin-bottom: 3px; }
.dcr-tc-card-val  { font-size: 20px; font-weight: 500; }
.dcr-tc-card-tag  { font-size: 10px; color: #0F6E56; display: block; margin-top: 2px; }
.dcr-tc-val--early    { color: #993C1D; }
.dcr-tc-val--developing { color: #854F0B; }
.dcr-tc-val--ready    { color: #0F6E56; }
.dcr-tc-val--advanced { color: #3C3489; }

/* ══════════════════════════════════════════════════════════
   SECTION SHELLS (icon + head)
   ══════════════════════════════════════════════════════════ */
.dcr-sec-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.dcr-sec-ico {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
}
.dcr-ico--amber  { background: #FAEEDA; color: #633806; }
.dcr-ico--teal   { background: #E1F5EE; color: #0F6E56; }
.dcr-ico--purple { background: #EEEDFE; color: #3C3489; }
.dcr-ico--blue   { background: #E6F1FB; color: #0C447C; }
.dcr-ico--coral  { background: #FAECE7; color: #712B13; }
.dcr-sec-title { font-size: 14px; font-weight: 500; color: var(--dcr-ink-1); }
.dcr-sec-desc  { font-size: 12px; color: var(--dcr-ink-3); margin-top: 1px; }

/* ══════════════════════════════════════════════════════════
   NARASI (serif callout)
   ══════════════════════════════════════════════════════════ */
.dcr-narasi {
    font-size: 13px;
    color: var(--dcr-ink-2);
    line-height: 1.7;
    padding: 12px 14px;
    background: var(--dcr-surface-2);
    border-radius: 8px;
    border-left: 2px solid #EF9F27;
    margin-bottom: 14px;
}
.dcr-narasi--blue   { border-left-color: #85B7EB; }
.dcr-narasi--amber  { border-left-color: #EF9F27; background: #FAEEDA; color: #412402; }
.dcr-narasi em      { font-style: italic; }

/* ══════════════════════════════════════════════════════════
   3-COL INSIGHT GRID
   ══════════════════════════════════════════════════════════ */
.dcr-3col {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}
.dcr-insight { padding: 11px 13px; border-radius: 8px; }
.dcr-ins--teal  { background: #E1F5EE; border: 0.5px solid #9FE1CB; }
.dcr-ins--amber { background: #FAEEDA; border: 0.5px solid #FAC775; }
.dcr-ins--coral { background: #FAECE7; border: 0.5px solid #F5C4B3; }
.dcr-ins-label {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.dcr-ins--teal  .dcr-ins-label { color: #0F6E56; }
.dcr-ins--amber .dcr-ins-label { color: #633806; }
.dcr-ins--coral .dcr-ins-label { color: #712B13; }
.dcr-ins-text { font-size: 12px; line-height: 1.5; }
.dcr-ins--teal  .dcr-ins-text { color: #085041; }
.dcr-ins--amber .dcr-ins-text { color: #412402; }
.dcr-ins--coral .dcr-ins-text { color: #4A1B0C; }

/* ══════════════════════════════════════════════════════════
   PHASE CHIPS
   ══════════════════════════════════════════════════════════ */
.dcr-phase-row { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.dcr-phase-chip {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 4px;
    background: var(--dcr-surface-2);
    border: 0.5px solid var(--dcr-border);
    color: var(--dcr-ink-3);
}
.dcr-phase--has { background: #E1F5EE; color: #0F6E56; border-color: #9FE1CB; }

/* ══════════════════════════════════════════════════════════
   QUICK WINS LIST
   ══════════════════════════════════════════════════════════ */
.dcr-wins-label { font-size: 12px; color: var(--dcr-ink-3); margin-bottom: 8px; }
.dcr-win-list   { display: flex; flex-direction: column; }
.dcr-win-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 0.5px solid var(--dcr-border);
}
.dcr-win-row:last-child { border-bottom: none; }
.dcr-win-dot    { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dcr-dot--done    { background: #5DCAA5; }
.dcr-dot--partial { background: #EF9F27; }
.dcr-dot--missing { background: #D3D1C7; }
.dcr-win-name  { flex: 1; font-size: 13px; color: var(--dcr-ink-1); }
.dcr-win-tag {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 5px;
    font-weight: 500;
}
.dcr-wtag--teal  { background: #E1F5EE; color: #0F6E56; }
.dcr-wtag--amber { background: #FAEEDA; color: #633806; }
.dcr-win-phase { font-size: 11px; color: var(--dcr-ink-3); width: 68px; flex-shrink: 0; }
.dcr-win-delta {
    font-size: 12px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
    background: #E6F1FB;
    color: #0C447C;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Blocker */
.dcr-blocker {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    background: #FCEBEB;
    border: 0.5px solid #F7C1C1;
    border-radius: 8px;
    margin-top: 10px;
    font-size: 12px;
    color: #791F1F;
}
.dcr-blocker i { font-size: 16px; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════
   TIMELINE INFOGRAFIS
   ══════════════════════════════════════════════════════════ */
.dcr-timeline-wrap { position: relative; padding: 4px 0; }
.dcr-tl-line {
    position: absolute;
    left: 19px;
    top: 28px;
    bottom: 28px;
    width: 1px;
    background: var(--dcr-border);
}
.dcr-tl-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
    position: relative;
}
.dcr-tl-item:last-child { margin-bottom: 0; }
.dcr-tl-node {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    position: relative;
    z-index: 1;
}
.dcr-tl-node--current { background: #FAEEDA; border: 1.5px solid #EF9F27; color: #633806; }
.dcr-tl-node--target1 { background: #E1F5EE; border: 1.5px solid #9FE1CB; color: #0F6E56; }
.dcr-tl-node--target2 { background: #EEEDFE; border: 1.5px solid #AFA9EC; color: #3C3489; }
.dcr-tl-node--grad    { background: var(--dcr-surface-2); border: 1.5px solid var(--dcr-border); color: var(--dcr-ink-3); }
.dcr-tl-body { flex: 1; padding-top: 8px; }
.dcr-tl-title { font-size: 13px; font-weight: 500; color: var(--dcr-ink-1); }
.dcr-tl-sub   { font-size: 12px; color: var(--dcr-ink-2); margin-top: 3px; line-height: 1.5; }
.dcr-tl-badges { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.dcr-tl-badge { font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 4px; }
.dcr-tl-badge--slow   { background: #FAEEDA; color: #633806; }
.dcr-tl-badge--fast   { background: #E1F5EE; color: #0F6E56; }
.dcr-tl-badge--purple { background: #EEEDFE; color: #3C3489; }

/* ══════════════════════════════════════════════════════════
   GOAL FIT 2×2
   ══════════════════════════════════════════════════════════ */
.dcr-gf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}
.dcr-gf-cell {
    padding: 11px 13px;
    border: 0.5px solid var(--dcr-border);
    border-radius: 8px;
    background: var(--dcr-surface-2);
}
.dcr-gf--active { border-color: #9FE1CB; background: #E1F5EE; }
.dcr-gf-qlabel { font-size: 10px; color: var(--dcr-ink-3); margin-bottom: 3px; }
.dcr-gf-qname  { font-size: 13px; font-weight: 500; color: var(--dcr-ink-1); }
.dcr-gf--active .dcr-gf-qname { color: #085041; }
.dcr-gf-qdesc  { font-size: 11px; color: var(--dcr-ink-2); margin-top: 3px; line-height: 1.4; }

/* Triangulasi bars */
.dcr-tri-label { font-size: 12px; color: var(--dcr-ink-3); margin-bottom: 10px; }
.dcr-tri-row   { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.dcr-tri-lbl   { font-size: 12px; color: var(--dcr-ink-2); width: 120px; flex-shrink: 0; }
.dcr-tri-bg    { flex: 1; height: 7px; background: var(--dcr-border); border-radius: 4px; overflow: hidden; }
.dcr-tri-fill  { height: 100%; border-radius: 4px; transition: width .6s ease; }
.dcr-tri--purple { background: #AFA9EC; }
.dcr-tri--teal   { background: #5DCAA5; }
.dcr-tri--amber  { background: #EF9F27; }
.dcr-tri-val   { font-size: 12px; font-weight: 500; width: 34px; text-align: right; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════
   CAREER MATCH
   ══════════════════════════════════════════════════════════ */
.dcr-cm-list { display: flex; flex-direction: column; }
.dcr-cm-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 0.5px solid var(--dcr-border);
}
.dcr-cm-row:last-child { border-bottom: none; }
.dcr-cm-row--active .dcr-cm-name { color: #0F6E56; font-weight: 500; }
.dcr-cm-rank   { font-size: 11px; color: var(--dcr-ink-3); width: 18px; flex-shrink: 0; }
.dcr-cm-info   { flex: 1; min-width: 0; }
.dcr-cm-name   { font-size: 13px; color: var(--dcr-ink-1); }
.dcr-cm-domain { font-size: 11px; color: var(--dcr-ink-3); margin-top: 1px; }
.dcr-cm-star   { font-size: 10px; color: #BA7517; margin-left: 4px; }
.dcr-cm-bar-bg { width: 100px; height: 5px; background: var(--dcr-border); border-radius: 3px; overflow: hidden; flex-shrink: 0; }
.dcr-cm-bar-fill { height: 100%; border-radius: 3px; transition: width .6s ease; }
.dcr-cm-pct    { font-size: 12px; font-weight: 500; width: 34px; text-align: right; flex-shrink: 0; color: var(--dcr-ink-1); }

/* Callout */
.dcr-callout { padding: 12px 14px; border-radius: 8px; font-size: 12px; line-height: 1.6; }
.dcr-callout--amber { background: #FAEEDA; border: 0.5px solid #FAC775; color: #412402; }
.dcr-callout--teal  { background: #E1F5EE; border: 0.5px solid #9FE1CB; color: #04342C; }

/* ══════════════════════════════════════════════════════════
   STRENGTH & GAP PILLS
   ══════════════════════════════════════════════════════════ */
.dcr-pill-label { font-size: 12px; color: var(--dcr-ink-2); margin-bottom: 7px; }
.dcr-pill-wrap  { display: flex; flex-wrap: wrap; gap: 6px; }
.dcr-pill       { font-size: 11px; padding: 4px 10px; border-radius: 20px; border: 0.5px solid var(--dcr-border); }
.dcr-pill--str  { background: #E1F5EE; color: #0F6E56; border-color: #9FE1CB; }
.dcr-pill--gap  { background: #FCEBEB; color: #A32D2D; border-color: #F09595; }

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADER — style Career Intelligence (#3A4F5C background)
   ═══════════════════════════════════════════════════════════════ */
.dcr-section-head {
    background: #3A4F5C !important;
    padding: 11px 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-top: none !important;
    border-bottom: none !important;
}
.dcr-section-title {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.85) !important;
    margin: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-section-desc {
    font-size: 11px !important;
    color: rgba(255,255,255,0.5) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    margin: 0 !important;
}
.dcr-section-score {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,0.95) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    /* inline style color dari PHP akan override ini untuk tab score berwarna */
}

/* ── Section tabs (per goal inside each section) ─────────────── */
.dcr-sec-tabs {
    display: flex !important;
    border-bottom: 0.5px solid var(--dcr-border) !important;
    overflow-x: auto !important;
    background: var(--dcr-surface-2) !important;
}
.dcr-sec-tab {
    padding: 9px 16px !important;
    font-size: 12px !important;
    color: var(--dcr-ink-3) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    border-bottom: 2px solid transparent !important;
    border-right: 0.5px solid var(--dcr-border) !important;
    flex-shrink: 0 !important;
    user-select: none !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-sec-tab:hover { background: var(--dcr-surface-2) !important; color: var(--dcr-ink) !important; }
.dcr-sec-tab.dcr-sec-tab--active {
    color: var(--dcr-ink) !important;
    font-weight: 500 !important;
    border-bottom: 2px solid var(--dcr-ink) !important;
    background: var(--dcr-surface) !important;
}
.dcr-sec-tab-score {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    margin-left: 5px !important;
}
.dcr-sec-content { display: none !important; }
.dcr-sec-content.dcr-sec-content--active { display: block !important; }

/* ── Hero header — 3 goal columns ────────────────────────────── */
.dcr-hero-goals {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    border-bottom: 0.5px solid var(--dcr-border) !important;
}
.dcr-hero-goal {
    padding: 16px 20px !important;
    cursor: pointer !important;
    border-right: 0.5px solid var(--dcr-border) !important;
    border-bottom: 2px solid transparent !important;
    transition: background var(--dcr-tr) !important;
}
.dcr-hero-goal:last-child { border-right: none !important; }
.dcr-hero-goal:hover { background: var(--dcr-surface-2) !important; }
.dcr-hero-goal--active {
    border-bottom: 2px solid var(--dcr-ink) !important;
}
.dcr-hero-goal--inactive { opacity: .65 !important; }
.dcr-hero-goal-label {
    font-size: 10px !important;
    color: var(--dcr-ink-3) !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    margin-bottom: 6px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-hero-score-num {
    font-size: 34px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-hero-score-pct {
    font-size: 16px !important;
    color: var(--dcr-ink-3) !important;
}

/* ── Pillar cards ─────────────────────────────────────────────── */
.dcr-pillars {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
}
.dcr-pillar {
    padding: 10px 12px !important;
    border-radius: var(--dcr-radius-sm) !important;
    border: 0.5px solid var(--dcr-border) !important;
    background: var(--dcr-surface-2) !important;
}
.dcr-pillar-val {
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-pillar-lbl {
    font-size: 10px !important;
    color: var(--dcr-ink-3) !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    margin-top: 3px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-pillar-sub {
    font-size: 10px !important;
    color: var(--dcr-ink-4) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ── Dim bars (D1-D6) ─────────────────────────────────────────── */
.dcr-dim-list { border-top: 0.5px solid var(--dcr-border) !important; padding-top: 12px !important; }
.dcr-dim-row {
    display: grid !important;
    grid-template-columns: 20px 1fr 40px 36px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 0 !important;
    border-bottom: 0.5px solid var(--dcr-border-lt) !important;
}
.dcr-dim-row:last-child { border-bottom: none !important; }
.dcr-dim-ic { font-size: 14px !important; color: var(--dcr-ink-4) !important; }
.dcr-dim-center {
    display: grid !important;
    grid-template-columns: 1fr 40px !important;
    align-items: center !important;
    gap: 6px !important;
}
.dcr-dim-lbl { font-size: 12px !important; color: var(--dcr-ink-2) !important; margin-bottom: 3px !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dcr-dim-wt  { font-size: 10px !important; color: var(--dcr-ink-4) !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dcr-dim-bar { height: 5px !important; background: var(--dcr-surface-2) !important; border-radius: 3px !important; overflow: hidden !important; border: 0.5px solid var(--dcr-border-lt) !important; }
.dcr-dim-fill { height: 100% !important; border-radius: 3px !important; }
.dcr-dim-val { font-size: 14px !important; font-weight: 500 !important; text-align: right !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }

/* ── Track comparison ─────────────────────────────────────────── */
.dcr-tc-row {
    display: flex !important;
    gap: 8px !important;
    padding-top: 14px !important;
    margin-top: 14px !important;
    border-top: 0.5px solid var(--dcr-border) !important;
}
.dcr-tc-card {
    flex: 1 !important;
    text-align: center !important;
    padding: 10px 8px !important;
    border-radius: var(--dcr-radius-sm) !important;
    border: 0.5px solid var(--dcr-border) !important;
}
.dcr-tc-card--best { border: 1.5px solid var(--dcr-green) !important; background: var(--dcr-green-bg) !important; }
.dcr-tc-name { font-size: 10px !important; color: var(--dcr-ink-3) !important; text-transform: uppercase !important; letter-spacing: .05em !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dcr-tc-val  { font-size: 18px !important; font-weight: 500 !important; margin: 2px 0 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dcr-tc-tag  { font-size: 10px !important; color: var(--dcr-green-text) !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }

/* ── Grid layouts ─────────────────────────────────────────────── */
.dcr-g2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
.dcr-g3 { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 8px !important; }
.dcr-g4 { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 8px !important; }

/* ── KPI card ─────────────────────────────────────────────────── */
.dcr-kpi { background: var(--dcr-surface-2) !important; border-radius: var(--dcr-radius-sm) !important; padding: 10px 12px !important; }
.dcr-kpi-v { font-size: 20px !important; font-weight: 500 !important; line-height: 1 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dcr-kpi-l { font-size: 10px !important; color: var(--dcr-ink-3) !important; text-transform: uppercase !important; letter-spacing: .05em !important; margin-top: 3px !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }

/* ═══════════════════════════════════════════════════════════════
   MOMENTUM (D5+D6) — stat strip layout
   ═══════════════════════════════════════════════════════════════ */

/* Sub-header D5 / D6 di dalam panel */
.dcr-mom-subhead {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 13px 20px 10px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-mom-subhead + .dcr-mom-subhead {
    border-top: 0.5px solid var(--dcr-border) !important;
    margin-top: 10px !important;
}
.dcr-mom-sublabel {
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    color: var(--dcr-ink-4) !important;
}
.dcr-mom-subscore {
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Stat strip: 4 angka dalam 1 baris (ganti dcr-g2 2×2 lama) */
.dcr-stat-strip {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    border-top: 0.5px solid var(--dcr-border-lt) !important;
    border-bottom: 0.5px solid var(--dcr-border-lt) !important;
}
.dcr-stat-cell {
    padding: 12px 8px !important;
    text-align: center !important;
    border-right: 0.5px solid var(--dcr-border-lt) !important;
}
.dcr-stat-cell:last-child { border-right: none !important; }
.dcr-stat-num {
    font-size: 26px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: #1A1A1A !important;
    letter-spacing: -1px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-stat-lbl {
    font-size: 8.5px !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    color: var(--dcr-ink-4) !important;
    margin-top: 4px !important;
    line-height: 1.3 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Sparkline area */
.dcr-sparkline-wrap {
    padding: 10px 20px 0 !important;
    background: var(--dcr-surface-2) !important;
    border-bottom: 0.5px solid var(--dcr-border-lt) !important;
}
.dcr-sparkline-label {
    font-size: 8.5px !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    color: var(--dcr-ink-4) !important;
    margin-bottom: 6px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-sparkline-bars {
    display: flex !important;
    align-items: flex-end !important;
    gap: 3px !important;
    height: 36px !important;
}
.dcr-sparkline-bar {
    flex: 1 !important;
    border-radius: 2px 2px 0 0 !important;
    background: var(--dcr-amber) !important;
    opacity: .45 !important;
    min-height: 3px !important;
    transition: height .4s ease !important;
}
.dcr-sparkline-bar--peak {
    opacity: 1 !important;
    background: var(--dcr-green) !important;
}
.dcr-sparkline-months {
    display: flex !important;
    justify-content: space-between !important;
    padding: 5px 0 8px !important;
}
.dcr-sparkline-month {
    font-size: 9px !important;
    color: var(--dcr-ink-4) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-sparkline-month--latest {
    color: var(--dcr-green-text) !important;
    font-weight: 600 !important;
}

/* Achievement hero card (ganti dcr-ach-card yang kecil) */
.dcr-ach-hero {
    margin: 0 20px 12px !important;
    padding: 14px 16px !important;
    background: var(--dcr-amber-bg) !important;
    border: 0.5px solid var(--dcr-amber-border) !important;
    border-radius: var(--dcr-radius-sm) !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}
.dcr-ach-hero-trophy {
    font-size: 30px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}
.dcr-ach-hero-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--dcr-amber-text) !important;
    line-height: 1.2 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-ach-hero-sub {
    font-size: 10.5px !important;
    color: var(--dcr-amber) !important;
    margin-top: 3px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Micro stats: kompetisi / publikasi / penghargaan */
.dcr-micro-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    padding: 0 20px 12px !important;
}
.dcr-micro-cell {
    background: var(--dcr-surface-2) !important;
    border: 0.5px solid var(--dcr-border) !important;
    border-radius: var(--dcr-radius-sm) !important;
    padding: 9px 10px !important;
    text-align: center !important;
}
.dcr-micro-num {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--dcr-ink) !important;
    letter-spacing: -.5px !important;
    line-height: 1 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-micro-lbl {
    font-size: 8.5px !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    color: var(--dcr-ink-4) !important;
    margin-top: 3px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Trend row */
.dcr-tren-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 9px 20px 13px !important;
    border-top: 0.5px solid var(--dcr-border-lt) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dcr-tren-label {
    font-size: 10.5px !important;
    color: var(--dcr-ink-3) !important;
}
.dcr-tren-val {
    font-size: 12px !important;
    font-weight: 700 !important;
}
.dcr-tren-mini {
    margin-left: auto !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 2px !important;
    height: 16px !important;
}
.dcr-tren-mini-bar {
    width: 4px !important;
    border-radius: 1px !important;
    background: var(--dcr-amber) !important;
}
.dcr-tren-mini-bar--up {
    background: var(--dcr-green) !important;
}

/* ── Bar rows ─────────────────────────────────────────────────── */
.dcr-bar { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 7px !important; }
.dcr-bar-lbl { font-size: 12px !important; color: var(--dcr-ink-2) !important; flex-shrink: 0 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dcr-bar-track { flex: 1 !important; height: 6px !important; background: var(--dcr-surface-2) !important; border-radius: 3px !important; overflow: hidden !important; border: 0.5px solid var(--dcr-border-lt) !important; }
.dcr-bar-fill { height: 100% !important; border-radius: 3px !important; }
.dcr-bar-val { font-size: 12px !important; font-weight: 500 !important; min-width: 34px !important; text-align: right !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }

/* ── Insight boxes ────────────────────────────────────────────── */
.dcr-ins { border-radius: var(--dcr-radius-sm) !important; padding: 12px 14px !important; font-size: 12px !important; line-height: 1.65 !important; margin-top: 8px !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dcr-ins--warn { background: var(--dcr-amber-bg) !important; color: var(--dcr-amber-text) !important; border: 0.5px solid var(--dcr-amber-border) !important; }
.dcr-ins--good { background: var(--dcr-green-bg) !important; color: var(--dcr-green-text) !important; border: 0.5px solid var(--dcr-green-border) !important; }
.dcr-ins--info { background: var(--dcr-surface-2) !important; color: var(--dcr-ink-2) !important; border: 0.5px solid var(--dcr-border) !important; }
.dcr-ins--blue { background: var(--dcr-blue-bg) !important; color: var(--dcr-blue-text) !important; border: 0.5px solid var(--dcr-blue) !important; }
.dcr-ins-head { font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .06em !important; margin-bottom: 4px !important; }

/* ── Chip skill status ────────────────────────────────────────── */
.dcr-chip { display: inline-flex !important; align-items: center !important; gap: 3px !important; padding: 3px 8px !important; border-radius: var(--dcr-radius-xs) !important; font-size: 11px !important; border: 0.5px solid !important; margin: 2px !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dcr-chip--ok   { background: var(--dcr-green-bg) !important; color: var(--dcr-green-text) !important; border-color: var(--dcr-green-border) !important; }
.dcr-chip--warn { background: var(--dcr-amber-bg) !important; color: var(--dcr-amber-text) !important; border-color: var(--dcr-amber-border) !important; }
.dcr-chip--miss { background: var(--dcr-red-bg) !important; color: var(--dcr-red-text) !important; border-color: var(--dcr-red-border) !important; }

/* ── Section padding ──────────────────────────────────────────── */
.dcr-sec-body { padding: 16px 20px !important; }
.dcr-sep { border: none !important; border-top: 0.5px solid var(--dcr-border) !important; margin: 12px 0 !important; }

/* ── Skill missing rows ───────────────────────────────────────── */
.dcr-skill-row { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 7px 0 !important; border-bottom: 0.5px solid var(--dcr-border-lt) !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dcr-skill-row:last-child { border-bottom: none !important; }
.dcr-skill-name { font-size: 12px !important; color: var(--dcr-ink-2) !important; }
.dcr-skill-delta { font-size: 11px !important; font-weight: 500 !important; }

/* ── Step list ────────────────────────────────────────────────── */
.dcr-step { display: flex !important; gap: 10px !important; margin-bottom: 12px !important; align-items: flex-start !important; }
.dcr-step-n { width: 20px !important; height: 20px !important; border-radius: 50% !important; background: var(--dcr-ink) !important; color: var(--dcr-surface) !important; font-size: 10px !important; font-weight: 500 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; margin-top: 1px !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dcr-step-h { font-size: 12px !important; font-weight: 500 !important; margin-bottom: 2px !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dcr-step-d { font-size: 12px !important; color: var(--dcr-ink-2) !important; line-height: 1.55 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dcr-step-g { display: inline-block !important; margin-top: 4px !important; font-size: 10px !important; background: var(--dcr-green-bg) !important; color: var(--dcr-green-text) !important; padding: 2px 7px !important; border-radius: 3px !important; border: 0.5px solid var(--dcr-green-border) !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }

/* ── Achievement card ─────────────────────────────────────────── */
.dcr-ach-card { display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px 12px !important; background: var(--dcr-surface-2) !important; border-radius: var(--dcr-radius-sm) !important; border: 0.5px solid var(--dcr-border) !important; margin-bottom: 8px !important; }
.dcr-ach-icon { font-size: 22px !important; flex-shrink: 0 !important; }
.dcr-ach-name { font-size: 12px !important; font-weight: 500 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dcr-ach-meta { font-size: 11px !important; color: var(--dcr-ink-3) !important; margin-top: 2px !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }

/* ── Projection ───────────────────────────────────────────────── */
.dcr-proj-bar { display: flex !important; border-radius: 5px !important; overflow: hidden !important; height: 8px !important; margin-bottom: 6px !important; }
.dcr-proj-labels { display: flex !important; justify-content: space-between !important; font-size: 10px !important; color: var(--dcr-ink-4) !important; margin-bottom: 10px !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dcr-proj-g2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-top: 8px !important; }
.dcr-proj-box { border-radius: var(--dcr-radius-sm) !important; padding: 12px !important; }
.dcr-proj-box--warn { background: var(--dcr-amber-bg) !important; border: 0.5px solid var(--dcr-amber-border) !important; }
.dcr-proj-box--good { background: var(--dcr-green-bg) !important; border: 0.5px solid var(--dcr-green-border) !important; }
.dcr-proj-h { font-size: 11px !important; font-weight: 500 !important; margin-bottom: 3px !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dcr-proj-v { font-size: 18px !important; font-weight: 500 !important; margin: 2px 0 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dcr-proj-sub { font-size: 11px !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }

/* ── Alt goal rows ────────────────────────────────────────────── */
.dcr-alt-row { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 7px 0 !important; border-bottom: 0.5px solid var(--dcr-border-lt) !important; }
.dcr-alt-row:last-child { border-bottom: none !important; }

/* ── Soft skill grid ──────────────────────────────────────────── */
.dcr-soft-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin: 10px 0 !important; }
.dcr-soft-item { padding: 10px !important; background: var(--dcr-surface-2) !important; border-radius: var(--dcr-radius-sm) !important; border: 0.5px solid var(--dcr-border) !important; }
.dcr-soft-n { font-size: 12px !important; font-weight: 500 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dcr-soft-s { font-size: 10px !important; color: var(--dcr-ink-3) !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dcr-soft-bar { height: 4px !important; background: var(--dcr-border) !important; border-radius: 2px !important; margin-top: 6px !important; overflow: hidden !important; }
.dcr-soft-fill { height: 100% !important; border-radius: 2px !important; background: var(--dcr-green) !important; }

/* ── Pattern blocks ───────────────────────────────────────────── */
.dcr-pattern { border: 0.5px solid var(--dcr-amber-border) !important; background: var(--dcr-amber-bg) !important; border-radius: var(--dcr-radius-sm) !important; padding: 14px !important; margin-bottom: 8px !important; }
.dcr-pattern--ok { border-color: var(--dcr-blue) !important; background: var(--dcr-blue-bg) !important; }
.dcr-pat-tag { font-size: 10px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--dcr-amber-text) !important; margin-bottom: 4px !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dcr-pat-tag--ok { color: var(--dcr-blue-text) !important; }
.dcr-pat-h { font-size: 13px !important; font-weight: 500 !important; margin-bottom: 4px !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dcr-pat-b { font-size: 12px !important; color: var(--dcr-ink-2) !important; line-height: 1.6 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }

/* ── Radar chart wrapper ──────────────────────────────────────── */
.dcr-radar-wrap {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    max-height: 240px !important;
}

/* ── Tri bars ─────────────────────────────────────────────────── */
.dcr-tri-row { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 8px !important; }
.dcr-tri-lbl { font-size: 12px !important; color: var(--dcr-ink-2) !important; min-width: 120px !important; flex-shrink: 0 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dcr-tri-track { flex: 1 !important; height: 8px !important; background: var(--dcr-surface-2) !important; border-radius: 4px !important; overflow: hidden !important; border: 0.5px solid var(--dcr-border) !important; }
.dcr-tri-fill { height: 100% !important; border-radius: 4px !important; }
.dcr-tri-val { font-size: 12px !important; font-weight: 500 !important; min-width: 38px !important; text-align: right !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }

/* ── Footer ───────────────────────────────────────────────────── */
.dcr-footer-meta { font-size: 11px !important; color: var(--dcr-ink-4) !important; display: flex !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 4px !important; padding: 12px 20px !important; border-top: 0.5px solid var(--dcr-border) !important; background: var(--dcr-surface) !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }

/* ── Color utilities ──────────────────────────────────────────── */
.dcr-c-red    { color: var(--dcr-red-text) !important; }
.dcr-c-amber  { color: var(--dcr-amber-text) !important; }
.dcr-c-green  { color: var(--dcr-green-text) !important; }
.dcr-c-blue   { color: var(--dcr-blue-text) !important; }
.dcr-c-muted  { color: var(--dcr-ink-3) !important; }
.dcr-bg-red   { background: #E24B4A !important; }
.dcr-bg-amber { background: #BA7517 !important; }
.dcr-bg-green { background: #1D9E75 !important; }
.dcr-bg-muted { background: var(--dcr-border) !important; }
.dcr-bg-purple{ background: #7F77DD !important; }

/* ── Responsive ───────────────────────────────────────────────── */
@media(max-width: 600px) {
    /* ── Hero: 3 goal cards jadi horizontal scroll strip ─────── */
    .dcr-hero-goals {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        border-bottom: none !important;
        gap: 0 !important;
    }
    .dcr-hero-goals::-webkit-scrollbar { display: none !important; }

    .dcr-hero-goal {
        flex: 0 0 auto !important;
        width: 44vw !important;
        min-width: 140px !important;
        max-width: 200px !important;
        padding: 14px 16px !important;
        border-right: 0.5px solid var(--dcr-border) !important;
        border-bottom: none !important;
        border-top: 0.5px solid var(--dcr-border) !important;
        position: relative !important;
    }
    .dcr-hero-goal:last-child { border-right: none !important; }

    /* Active goal: aksen garis atas, bukan bawah */
    .dcr-hero-goal--active {
        border-top: 2.5px solid var(--dcr-ink) !important;
        border-bottom: none !important;
        background: var(--dcr-surface) !important;
    }
    .dcr-hero-goal--inactive {
        background: var(--dcr-surface-2) !important;
        opacity: 1 !important; /* jangan dimute terlalu banyak di mobile */
    }
    .dcr-hero-goal--inactive .dcr-hero-score-num { opacity: .55 !important; }
    .dcr-hero-goal--inactive .dcr-hero-goal-label { opacity: .6 !important; }

    .dcr-hero-goal-label {
        font-size: 9px !important;
        margin-bottom: 4px !important;
    }
    .dcr-hero-score-num {
        font-size: 28px !important;
        font-weight: 600 !important;
    }
    .dcr-hero-score-pct { font-size: 13px !important; }

    /* ── Pillars: tetap 3 kolom tapi lebih compact ───────────── */
    .dcr-pillars {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        margin-bottom: 12px !important;
    }
    .dcr-pillar { padding: 8px 10px !important; }
    .dcr-pillar-val { font-size: 16px !important; }
    .dcr-pillar-lbl { font-size: 9px !important; letter-spacing: .03em !important; }
    .dcr-pillar-sub { font-size: 9px !important; }

    /* ── Grid layouts ─────────────────────────────────────────── */
    .dcr-g2 { grid-template-columns: 1fr !important; }
    .dcr-g3, .dcr-g4 { grid-template-columns: 1fr 1fr !important; }

    /* ── Dim rows ─────────────────────────────────────────────── */
    .dcr-dim-row { grid-template-columns: 18px 1fr 32px 30px !important; gap: 6px !important; }

    /* ── Soft skills ──────────────────────────────────────────── */
    .dcr-soft-grid { grid-template-columns: 1fr 1fr !important; }

    /* ── Proj boxes ───────────────────────────────────────────── */
    .dcr-proj-g2 { grid-template-columns: 1fr 1fr !important; }

    /* ── Spacing ──────────────────────────────────────────────── */
    .dcr-sec-body { padding: 14px 16px !important; }
    .dcr-section-head { padding: 10px 16px !important; }

    /* ── Section tabs: scroll horizontal, no wrap ─────────────── */
    .dcr-sec-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    .dcr-sec-tabs::-webkit-scrollbar { display: none !important; }
    .dcr-sec-tab { flex-shrink: 0 !important; }

    /* ── Band badge di hero goal ──────────────────────────────── */
    .dcr-band-badge {
        font-size: 10px !important;
        padding: 2px 7px !important;
    }

    /* ── Score main: stack vertikal ──────────────────────────── */
    .dcr-score-main { grid-template-columns: 1fr !important; }
    .dcr-score-left { border-right: none !important; border-bottom: 0.5px solid var(--dcr-border) !important; }

    /* ── Breakdown grid ───────────────────────────────────────── */
    .dcr-breakdown-grid { grid-template-columns: 1fr !important; }
    .dcr-bd-card { border-right: none !important; }
    .dcr-bd-card:nth-last-child(-n+2) { border-bottom: 0.5px solid var(--dcr-border-lt) !important; }
    .dcr-bd-card:last-child { border-bottom: none !important; }

    /* ── Insight + action grids ───────────────────────────────── */
    .dcr-insight-grid { grid-template-columns: 1fr !important; }
    .dcr-insight-card:first-child { border-right: none !important; border-bottom: 0.5px solid var(--dcr-border) !important; }
    .dcr-action-grid { grid-template-columns: 1fr !important; }
    .dcr-action-card { border-right: none !important; border-bottom: 0.5px solid var(--dcr-border-lt) !important; }
    .dcr-action-card:last-child { border-bottom: none !important; }

    /* ── Footer ───────────────────────────────────────────────── */
    .dcr-footer-bar { flex-direction: column !important; align-items: flex-start !important; }

    /* ── Stale banner ─────────────────────────────────────────── */
    .dcr-stale-banner { flex-wrap: wrap !important; }
    .dcr-stale-btn { width: 100% !important; text-align: center !important; justify-content: center !important; }

    /* ── Track comparison ─────────────────────────────────────── */
    .dcr-tc-cards { grid-template-columns: 1fr 1fr 1fr !important; gap: 6px !important; }
    .dcr-tc-card { padding: 8px 6px !important; }
    .dcr-tc-card-name { font-size: 9px !important; }
    .dcr-tc-card-val { font-size: 16px !important; }

    /* ── Momentum D5+D6 mobile ────────────────────────────────── */
    .dcr-stat-strip { grid-template-columns: repeat(4, 1fr) !important; }
    .dcr-stat-cell { padding: 10px 6px !important; }
    .dcr-stat-num { font-size: 22px !important; }
    .dcr-stat-lbl { font-size: 7.5px !important; }
    .dcr-micro-stats { grid-template-columns: repeat(3, 1fr) !important; padding: 0 14px 12px !important; }
    .dcr-micro-num { font-size: 16px !important; }
    .dcr-mom-subhead { padding: 12px 14px 9px !important; }
    .dcr-ach-hero { margin: 0 14px 10px !important; padding: 12px 14px !important; }
    .dcr-ach-hero-trophy { font-size: 26px !important; }
    .dcr-ach-hero-name { font-size: 13px !important; }
    .dcr-sparkline-wrap { padding: 10px 14px 0 !important; }
    .dcr-tren-row { padding: 9px 14px 12px !important; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE / DESKTOP VISIBILITY HELPERS
   ════════════════════════════════════════════════════════════════ */
.dcr-mobile-only  { display: none !important; }
.dcr-desktop-only { display: grid !important; }

@media (max-width: 600px) {
    .dcr-mobile-only  { display: block !important; }
    .dcr-desktop-only { display: none !important; }

    /* Hero goals: 2 kolom side by side */
    .dcr-hero-goals {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        border-bottom: 0.5px solid var(--dcr-border) !important;
    }
    .dcr-hg {
        padding: 14px 16px 12px !important;
        border-right: 0.5px solid var(--dcr-border) !important;
        text-decoration: none !important;
        display: block !important;
    }
    .dcr-hg:last-child { border-right: none !important; }
    .dcr-hg--active {
        background: var(--dcr-surface) !important;
        border-top: 2px solid var(--dcr-ink) !important;
    }
    .dcr-hg--inactive {
        background: var(--dcr-surface-2) !important;
        opacity: 0.85 !important;
    }
    .dcr-hg-label {
        font-size: 9px !important;
        letter-spacing: .07em !important;
        text-transform: uppercase !important;
        color: var(--dcr-ink-3) !important;
        margin-bottom: 5px !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    }
    .dcr-hg-score {
        font-size: 32px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        letter-spacing: -1px !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    }
    .dcr-hg-pct {
        font-size: 14px !important;
        font-weight: 400 !important;
        color: var(--dcr-ink-4) !important;
    }

    /* Track tabs mobile: tanpa skor, lebih compact */
    .dcr-track-score { display: none !important; }
    .dcr-track-tab { padding: 4px 10px !important; font-size: 10px !important; }

    /* Pillars mobile: border kanan antar kolom */
    .dcr-pillars {
        gap: 0 !important;
        border-radius: 0 !important;
    }
    .dcr-pillar {
        border-right: 0.5px solid var(--dcr-border) !important;
        border-radius: 0 !important;
        padding: 10px 12px !important;
    }
    .dcr-pillar:last-child { border-right: none !important; }
    .dcr-pillar-val { font-size: 18px !important; }
    .dcr-pillar-lbl { font-size: 9px !important; }
    .dcr-pillar-sub { font-size: 9px !important; }

    /* Dim rows mobile */
    .dcr-dim-bar-row {
        padding: 9px 16px !important;
        gap: 8px !important;
    }
    .dcr-dim-bar-label { min-width: 0 !important; flex: 1 !important; font-size: 11.5px !important; }
    .dcr-dim-bar-weight { font-size: 9px !important; min-width: 36px !important; }
    .dcr-dim-bar-val { font-size: 12px !important; min-width: 28px !important; }

    /* Track comparison mobile */
    .dcr-tc-section-head { padding: 8px 14px !important; }
    .dcr-tc-card { padding: 12px 14px !important; }
    .dcr-tc-val { font-size: 22px !important; }
    .dcr-tc-name { font-size: 9px !important; margin-bottom: 5px !important; }

    /* Selector bar mobile */
    .dcr-selector-bar { flex-direction: column !important; align-items: flex-start !important; }
    .dcr-header { padding: 10px 14px !important; }
}

/* Track comparison final override (semua ukuran layar) */
.dcr-tc-section { border-top: 0.5px solid var(--dcr-border) !important; background: var(--dcr-surface) !important; }
.dcr-tc-section-head { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 10px 20px !important; background: var(--dcr-surface-2) !important; border-bottom: 0.5px solid var(--dcr-border) !important; flex-wrap: wrap !important; gap: 4px !important; }
.dcr-tc-section-title { font-size: 10px !important; font-weight: 700 !important; letter-spacing: .09em !important; text-transform: uppercase !important; color: var(--dcr-ink-4) !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dcr-tc-section-best { font-size: 12px !important; font-weight: 600 !important; color: var(--dcr-green-text) !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dcr-tc-row { display: flex !important; gap: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important; align-items: stretch !important; }
.dcr-tc-card { flex: 1 !important; text-align: left !important; padding: 16px 20px !important; border-radius: 0 !important; border: none !important; border-right: 0.5px solid var(--dcr-border) !important; background: transparent !important; position: relative !important; }
.dcr-tc-card:last-child { border-right: none !important; }
.dcr-tc-card--best { border-top: 2px solid var(--dcr-green) !important; border-right: 0.5px solid var(--dcr-border) !important; border-bottom: none !important; border-left: none !important; background: transparent !important; }
.dcr-tc-card--best:last-child { border-right: none !important; }
.dcr-tc-name { font-size: 10px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--dcr-ink-4) !important; margin-bottom: 8px !important; text-align: left !important; display: block !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dcr-tc-val { font-size: 32px !important; font-weight: 500 !important; letter-spacing: -1.5px !important; line-height: 1 !important; text-align: left !important; margin: 0 !important; display: block !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dcr-tc-tag { font-size: 11px !important; font-weight: 600 !important; color: var(--dcr-green-text) !important; margin-top: 6px !important; text-align: left !important; display: block !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dcr-tc-current { font-size: 11px !important; color: var(--dcr-ink-4) !important; margin-top: 6px !important; text-align: left !important; display: block !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }