/* ════════════════════════════════════════════════════════════════
   Career Intelligence — CSS v2
   File: dictio-intelligence.css
   Prefix: dci-
   Konsisten dengan dictio-readiness.css v2
   BuddyPress-safe: font, button, elemen kritis pakai !important
   ════════════════════════════════════════════════════════════════ */

.dci-wrap {
    --dci-ink:          #1A1A1A;
    --dci-ink-2:        #555555;
    --dci-ink-3:        #888888;
    --dci-ink-4:        #bbbbbb;
    --dci-ink-5:        #cccccc;
    --dci-border:       #EBEBEB;
    --dci-border-lt:    #F2F2F0;
    --dci-surface:      #ffffff;
    --dci-surface-2:    #FAFAF8;
    --dci-page:         #F5F5F3;
    --dci-red:          #E8A09A;
    --dci-red-bg:       #FDF4F3;
    --dci-red-border:   #E8C0BC;
    --dci-red-text:     #8B3A35;
    --dci-green:        #8EC4A0;
    --dci-green-bg:     #F2FAF6;
    --dci-green-border: #A8D4B8;
    --dci-green-text:   #2A6B50;
    --dci-amber:        #C4A882;
    --dci-amber-bg:     #FDF8F0;
    --dci-amber-border: #D4B87A;
    --dci-amber-text:   #7A5A00;
    --dci-purple:       #C9B8E8;
    --dci-purple-bg:    #F7F2FF;
    --dci-purple-text:  #5B3B9E;
    --dci-blue:         #B8CCE8;
    --dci-blue-bg:      #F2F6FD;
    --dci-blue-text:    #2A4A7A;
    --dci-radius:       12px;
    --dci-radius-sm:    8px;
    --dci-radius-xs:    4px;
    --dci-tr:           160ms ease;
}

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

/* EMPTY STATE */
.dci-empty-wrap {
    text-align: center !important;
    padding: 64px 32px !important;
    background: var(--dci-surface) !important;
    border: 0.5px solid var(--dci-border) !important;
    border-radius: var(--dci-radius) !important;
}
.dci-empty-ico { font-size: 40px !important; margin-bottom: 16px !important; display: block !important; }
.dci-empty-title { font-size: 18px !important; font-weight: 700 !important; color: var(--dci-ink) !important; margin: 0 0 10px !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dci-empty-desc { font-size: 13px !important; color: var(--dci-ink-3) !important; max-width: 420px !important; margin: 0 auto 24px !important; line-height: 1.6 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dci-instrument-progress { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; max-width: 480px !important; margin: 0 auto 28px !important; }
.dci-inst-item { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 5px !important; padding: 12px 8px !important; border: 0.5px solid var(--dci-border) !important; border-radius: var(--dci-radius-sm) !important; background: var(--dci-surface-2) !important; }
.dci-inst--done { border-color: var(--dci-green-border) !important; background: var(--dci-green-bg) !important; }
.dci-inst-ico { font-size: 18px !important; }
.dci-inst-lbl { font-size: 11px !important; font-weight: 600 !important; color: var(--dci-ink) !important; text-align: center !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dci-inst-status { font-size: 10px !important; color: var(--dci-ink-4) !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dci-inst--done .dci-inst-status { color: var(--dci-green-text) !important; }

/* PROFILE HEADER */
.dci-profile-header { background: var(--dci-surface) !important; }
.dci-profile-head-top { padding: 20px 24px 16px !important; border-bottom: 0.5px solid var(--dci-border) !important; }
.dci-profile-title { font-size: 18px !important; font-weight: 800 !important; color: var(--dci-ink) !important; letter-spacing: -.4px !important; margin: 0 0 4px !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dci-profile-sub { font-size: 12px !important; color: var(--dci-ink-4) !important; margin: 0 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }

.dci-profile-metrics { display: grid !important; grid-template-columns: 200px 1fr 1fr !important; border-bottom: 0.5px solid var(--dci-border) !important; }
.dci-metric-card { padding: 20px 24px !important; display: flex !important; flex-direction: column !important; gap: 10px !important; border-right: 0.5px solid var(--dci-border) !important; background: var(--dci-surface) !important; border-radius: 0 !important; border-top: none !important; border-bottom: none !important; border-left: none !important; }
.dci-metric-card:last-child { border-right: none !important; }
.dci-metric-label { font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--dci-ink-4) !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dci-metric-value { font-size: 17px !important; font-weight: 800 !important; color: var(--dci-ink) !important; line-height: 1.2 !important; letter-spacing: -.3px !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dci-metric-sub { font-size: 11px !important; color: var(--dci-ink-3) !important; line-height: 1.5 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dci-holland-code { font-size: 52px !important; font-weight: 800 !important; color: var(--dci-ink) !important; letter-spacing: -2px !important; line-height: 1 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }

.dci-holland-bars { display: flex !important; flex-direction: column !important; gap: 6px !important; margin-top: 4px !important; }
.dci-hbar-row { display: flex !important; align-items: center !important; gap: 8px !important; }
.dci-hbar-dim { font-size: 11px !important; font-weight: 700 !important; color: var(--dci-ink-4) !important; width: 12px !important; flex-shrink: 0 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dci-hbar-dim--top { color: var(--dci-ink) !important; }
.dci-hbar-wrap { flex: 1 !important; height: 4px !important; background: var(--dci-border-lt) !important; border-radius: 2px !important; overflow: hidden !important; }
.dci-hbar-fill { height: 100% !important; border-radius: 2px !important; background: var(--dci-amber) !important; transition: width 0.6s ease !important; }
.dci-hbar--top { background: var(--dci-ink) !important; }
.dci-hbar-val { font-size: 10px !important; font-weight: 600 !important; color: var(--dci-ink-3) !important; min-width: 20px !important; text-align: right !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }

.dci-values-list { display: flex !important; flex-direction: column !important; gap: 5px !important; }
.dci-val-badge { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 5px 10px !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 600 !important; width: fit-content !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dci-val-badge--1 { background: var(--dci-purple-bg) !important; color: var(--dci-purple-text) !important; border: 0.5px solid var(--dci-purple) !important; }
.dci-val-badge--2 { background: var(--dci-blue-bg) !important; color: var(--dci-blue-text) !important; border: 0.5px solid var(--dci-blue) !important; }
.dci-val-badge--3 { background: var(--dci-green-bg) !important; color: var(--dci-green-text) !important; border: 0.5px solid var(--dci-green-border) !important; }

.dci-narrative { padding: 16px 24px !important; background: var(--dci-surface-2) !important; border-top: 0.5px solid var(--dci-border) !important; }
.dci-narrative p { font-size: 12.5px !important; color: var(--dci-ink-2) !important; line-height: 1.75 !important; margin: 0 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dci-narrative p strong { color: var(--dci-ink) !important; font-weight: 700 !important; }

/* SECTION HEADER */
.dci-section { background: var(--dci-surface) !important; }
.dci-section-head { background: var(--dci-mist-text) !important; padding: 11px 24px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; border-top: none !important; border-bottom: none !important; }
.dci-section-ico { display: none !important; }
.dci-section-title { font-size: 10px !important; font-weight: 700 !important; letter-spacing: .09em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.8) !important; margin: 0 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dci-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; }
.dci-section-note { padding: 10px 24px 14px !important; font-size: 11px !important; color: var(--dci-ink-4) !important; background: var(--dci-surface) !important; border-top: 0.5px solid var(--dci-border) !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; font-style: normal !important; margin: 0 !important; }
.dci-no-data { font-size: 13px !important; color: var(--dci-ink-3) !important; padding: 32px 24px !important; text-align: center !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }

/* CLUSTER GRID */
.dci-cluster-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; background: var(--dci-surface) !important; }
.dci-cluster-card { padding: 18px 20px !important; display: flex !important; flex-direction: column !important; gap: 8px !important; border-bottom: 0.5px solid var(--dci-border) !important; border-right: 0.5px solid var(--dci-border) !important; background: var(--dci-surface) !important; border-radius: 0 !important; border-top: none !important; border-left: none !important; }
.dci-cluster-card:nth-child(3n) { border-right: none !important; }
.dci-cluster-card:nth-last-child(-n+3) { border-bottom: none !important; }
.dci-cluster--top { background: var(--dci-surface-2) !important; }
.dci-cluster-rank { font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: .07em !important; text-transform: uppercase !important; color: var(--dci-ink-4) !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dci-cluster--top .dci-cluster-rank { color: var(--dci-amber-text) !important; }
.dci-cluster-body { display: flex !important; flex-direction: column !important; gap: 5px !important; }
.dci-cluster-name { font-size: 13px !important; font-weight: 700 !important; color: var(--dci-ink) !important; line-height: 1.3 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dci-cluster-domain { font-size: 11px !important; color: var(--dci-ink-3) !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }

.dci-match-score { display: flex !important; align-items: baseline !important; gap: 3px !important; margin-top: 2px !important; }
.dci-match-num { font-size: 22px !important; font-weight: 800 !important; letter-spacing: -.5px !important; line-height: 1 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dci-match-lbl { font-size: 11px !important; color: var(--dci-ink-3) !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dci-score--high .dci-match-num { color: var(--dci-green-text) !important; }
.dci-score--mid  .dci-match-num { color: var(--dci-amber-text) !important; }
.dci-score--low  .dci-match-num { color: var(--dci-red-text) !important; }

.dci-match-breakdown { display: flex !important; gap: 5px !important; flex-wrap: wrap !important; margin-top: 4px !important; }
.dci-bd-item { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 1px !important; padding: 4px 8px !important; border-radius: 5px !important; border: 0.5px solid var(--dci-border-lt) !important; background: var(--dci-surface-2) !important; min-width: 46px !important; }
.dci-bd-lbl { font-size: 9px !important; color: var(--dci-ink-4) !important; text-transform: uppercase !important; letter-spacing: .04em !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dci-bd-val { font-size: 12px !important; font-weight: 700 !important; color: var(--dci-ink) !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dci-bd--high { background: var(--dci-green-bg) !important; border-color: var(--dci-green-border) !important; }
.dci-bd--mid  { background: var(--dci-amber-bg) !important; border-color: var(--dci-amber-border) !important; }
.dci-bd--low  { background: var(--dci-red-bg) !important; border-color: var(--dci-red-border) !important; }
.dci-bd--high .dci-bd-val { color: var(--dci-green-text) !important; }
.dci-bd--mid  .dci-bd-val { color: var(--dci-amber-text) !important; }
.dci-bd--low  .dci-bd-val { color: var(--dci-red-text) !important; }

/* ALIGNMENT LIST */
.dci-alignment-list { display: flex !important; flex-direction: column !important; background: var(--dci-surface) !important; }
.dci-alignment-card { padding: 20px 24px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; border-bottom: 0.5px solid var(--dci-border) !important; background: var(--dci-surface) !important; border-radius: 0 !important; }
.dci-alignment-card:last-child { border-bottom: none !important; }

.dci-al-head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 16px !important; }
.dci-al-goal-info { display: flex !important; flex-direction: column !important; gap: 3px !important; }
.dci-al-goal-name { font-size: 14px !important; font-weight: 700 !important; color: var(--dci-ink) !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dci-al-cluster { font-size: 11px !important; color: var(--dci-ink-3) !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }

.dci-al-score-wrap { display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 3px !important; flex-shrink: 0 !important; }
.dci-al-score-num { font-size: 20px !important; font-weight: 800 !important; color: var(--dci-ink) !important; letter-spacing: -.5px !important; line-height: 1 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dci-al-score-lbl { font-size: 10px !important; font-weight: 600 !important; padding: 2px 8px !important; border-radius: var(--dci-radius-xs) !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dci-al--high .dci-al-score-lbl { background: var(--dci-green-bg) !important; color: var(--dci-green-text) !important; border: 0.5px solid var(--dci-green-border) !important; }
.dci-al--mid  .dci-al-score-lbl { background: var(--dci-amber-bg) !important; color: var(--dci-amber-text) !important; border: 0.5px solid var(--dci-amber-border) !important; }
.dci-al--low  .dci-al-score-lbl { background: var(--dci-red-bg) !important; color: var(--dci-red-text) !important; border: 0.5px solid var(--dci-red-border) !important; }

.dci-al-breakdown { display: flex !important; flex-direction: column !important; gap: 9px !important; }
.dci-dim-row { display: flex !important; align-items: center !important; gap: 10px !important; }
.dci-dim-info { display: flex !important; flex-direction: column !important; gap: 1px !important; min-width: 124px !important; flex-shrink: 0 !important; }
.dci-dim-lbl { font-size: 11.5px !important; font-weight: 500 !important; color: var(--dci-ink) !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dci-dim-weight { font-size: 10px !important; color: var(--dci-ink-4) !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dci-dim-bar-wrap { flex: 1 !important; height: 5px !important; background: var(--dci-border-lt) !important; border-radius: 3px !important; overflow: hidden !important; }
.dci-dim-bar { height: 100% !important; border-radius: 3px !important; transition: width 0.6s ease !important; }
.dci-dim--high.dci-dim-bar { background: var(--dci-green) !important; }
.dci-dim--mid.dci-dim-bar  { background: var(--dci-amber) !important; }
.dci-dim--low.dci-dim-bar  { background: var(--dci-red) !important; }
.dci-dim--high .dci-dim-bar { background: var(--dci-green) !important; }
.dci-dim--mid  .dci-dim-bar { background: var(--dci-amber) !important; }
.dci-dim--low  .dci-dim-bar { background: var(--dci-red) !important; }
.dci-dim-val { font-size: 12px !important; font-weight: 700 !important; color: var(--dci-ink) !important; min-width: 30px !important; text-align: right !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }

.dci-al-narrative { font-size: 12px !important; color: var(--dci-ink-2) !important; line-height: 1.6 !important; padding: 10px 12px !important; background: var(--dci-surface-2) !important; border-radius: var(--dci-radius-sm) !important; border: 0.5px solid var(--dci-border) !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dci-al-narrative strong { color: var(--dci-ink) !important; font-weight: 700 !important; }

.dci-tensions { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.dci-tensions-head { font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: .07em !important; text-transform: uppercase !important; color: var(--dci-amber-text) !important; margin-bottom: 2px !important; display: flex !important; align-items: center !important; gap: 5px !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dci-tension-item { padding: 8px 12px !important; border-radius: var(--dci-radius-sm) !important; background: var(--dci-amber-bg) !important; border: 0.5px solid var(--dci-amber-border) !important; }
.dci-tension-title { font-size: 11.5px !important; font-weight: 600 !important; color: var(--dci-amber-text) !important; margin-bottom: 2px !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dci-tension-desc { font-size: 11px !important; color: var(--dci-ink-2) !important; line-height: 1.4 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }

.dci-no-goals { text-align: center !important; padding: 32px 24px !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 12px !important; }
.dci-no-goals-ico { font-size: 28px !important; }
.dci-no-goals p { font-size: 13px !important; color: rgba(255,255,255,0.8) !important; margin: 0 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }

/* FOOTER */
.dci-footer { background: var(--dci-surface) !important; padding: 14px 24px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; border-top: 0.5px solid var(--dci-border) !important; flex-wrap: wrap !important; border-radius: 0 !important; border-left: none !important; border-right: none !important; border-bottom: none !important; }
.dci-footer-meta { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 11px !important; color: var(--dci-ink-4) !important; flex-wrap: wrap !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }
.dci-footer-dot { color: var(--dci-border) !important; }

/* BUTTONS */
.dci-btn-primary { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 8px 18px !important; background: var(--dci-ink) !important; color: #ffffff !important; font-size: 12px !important; font-weight: 600 !important; border: 0.5px solid var(--dci-ink) !important; border-radius: var(--dci-radius-sm) !important; cursor: pointer !important; text-decoration: none !important; transition: all var(--dci-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; }
.dci-btn-primary:hover { background: #333 !important; color: #ffffff !important; border-color: #333 !important; text-decoration: none !important; }
.dci-btn-ghost, .dci-refresh-btn { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 6px 14px !important; background: var(--dci-surface-2) !important; color: var(--dci-ink) !important; font-size: 11.5px !important; font-weight: 600 !important; border: 0.5px solid var(--dci-border) !important; border-radius: var(--dci-radius-sm) !important; cursor: pointer !important; text-decoration: none !important; transition: all var(--dci-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; }
.dci-btn-ghost:hover, .dci-refresh-btn:hover { border-color: var(--dci-ink-3) !important; color: var(--dci-ink) !important; text-decoration: none !important; }

/* RESPONSIVE */
@media (max-width: 900px) {
    .dci-profile-metrics { grid-template-columns: 1fr 1fr !important; }
    .dci-metric-card:first-child { grid-column: 1 / -1 !important; border-right: none !important; border-bottom: 0.5px solid var(--dci-border) !important; }
    .dci-cluster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .dci-cluster-card:nth-child(3n) { border-right: 0.5px solid var(--dci-border) !important; }
    .dci-cluster-card:nth-child(2n) { border-right: none !important; }
}
@media (max-width: 640px) {
    .dci-profile-metrics { grid-template-columns: 1fr !important; }
    .dci-metric-card { border-right: none !important; border-bottom: 0.5px solid var(--dci-border) !important; }
    .dci-metric-card:last-child { border-bottom: none !important; }
    .dci-cluster-grid { grid-template-columns: 1fr !important; }
    .dci-cluster-card { border-right: none !important; }
    .dci-cluster-card:nth-last-child(-n+3) { border-bottom: 0.5px solid var(--dci-border) !important; }
    .dci-cluster-card:last-child { border-bottom: none !important; }
    .dci-instrument-progress { grid-template-columns: repeat(2, 1fr) !important; }
    .dci-al-head { flex-direction: column !important; align-items: flex-start !important; }
    .dci-al-score-wrap { flex-direction: row !important; align-items: center !important; gap: 8px !important; }
    .dci-dim-info { min-width: 100px !important; }
    .dci-footer { flex-direction: column !important; align-items: flex-start !important; }
}

/* ════════════════════════════════════════════════════════════════
   Career Intelligence — CSS Patch (tambahan)
   Komponen baru: 4-panel header, tab system, bar rows, insight boxes
   ════════════════════════════════════════════════════════════════ */

/* ── Warna pastel baru ── */
.dci-wrap {
    --dci-sage:         #8BAF96;
    --dci-sage-bg:      #F0F5F1;
    --dci-sage-border:  #B8D4C0;
    --dci-sage-text:    #2D5A3D;
    --dci-sand:         #B8A882;
    --dci-sand-bg:      #FAF7F0;
    --dci-sand-border:  #D4C89A;
    --dci-sand-text:    #5A4A10;
    --dci-mist:         #9EAAB4;
    --dci-mist-bg:      #F2F5F7;
    --dci-mist-border:  #C4D0D8;
    --dci-mist-text:    #3A4F5C;
    --dci-rose:         #C4918A;
    --dci-rose-bg:      #FBF0EF;
    --dci-rose-border:  #DEB8B4;
    --dci-rose-text:    #7A3530;
}

/* ── 4-panel header grid ── */
.dci-header-panels {
    display: grid !important;
    grid-template-columns: 160px 1fr 1fr 1fr !important;
    border-bottom: 0.5px solid var(--dci-border) !important;
}
.dci-header-panel {
    padding: 14px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    border-right: 0.5px solid var(--dci-border) !important;
}
.dci-header-panel:last-child { border-right: none !important; }
.dci-panel-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--dci-ink) !important;
    line-height: 1.2 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dci-panel-sub {
    font-size: 10.5px !important;
    color: var(--dci-ink-3) !important;
    line-height: 1.4 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dci-panel-bars {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    margin-top: 2px !important;
}

/* ── Holland code besar ── */
.dci-holland-code-lg {
    font-size: 46px !important;
    font-weight: 800 !important;
    letter-spacing: -2px !important;
    line-height: 1 !important;
    color: var(--dci-mist-text) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ── Bar rows ── */
.dci-bar-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.dci-bar-dim {
    font-size: 10.5px !important;
    color: var(--dci-ink) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
}
.dci-bar-dim-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
}
.dci-bar-sub {
    font-size: 9.5px !important;
    color: var(--dci-ink-4) !important;
    font-weight: 400 !important;
}
.dci-bar-track {
    flex: 1 !important;
    height: 4px !important;
    background: var(--dci-border-lt) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
}
.dci-bar-fill {
    height: 100% !important;
    border-radius: 2px !important;
    transition: width 0.5s ease !important;
}
.dci-bar-fill.dci-bar--high { background: var(--dci-sage) !important; }
.dci-bar-fill.dci-bar--mid  { background: var(--dci-sand) !important; }
.dci-bar-fill.dci-bar--low  { background: var(--dci-rose) !important; }
.dci-bar-val {
    font-size: 10px !important;
    font-weight: 700 !important;
    min-width: 22px !important;
    text-align: right !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ── Tab system ── */
.dci-tab-bar {
    display: flex !important;
    border-bottom: 0.5px solid var(--dci-border) !important;
    background: var(--dci-surface-2) !important;
    padding: 0 20px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
}
.dci-tab-bar::-webkit-scrollbar { display: none !important; }
.dci-tab-btn {
    padding: 10px 16px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--dci-ink-3) !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    border-bottom: 3px solid transparent !important;
    margin-bottom: -0.5px !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    transition: color 120ms ease, background 120ms ease !important;
}
.dci-tab-btn:hover {
    color: var(--dci-ink) !important;
    background: var(--dci-border-lt) !important;
}
.dci-tab-btn.dci-tab--active {
    color: var(--dci-ink) !important;
    border-bottom-color: var(--dci-sage-text) !important;
    font-weight: 700 !important;
    background: var(--dci-surface) !important;
}
.dci-tab-score {
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dci-tab-score--high { background: var(--dci-sage-bg) !important; color: var(--dci-sage-text) !important; }
.dci-tab-score--mid  { background: var(--dci-sand-bg) !important; color: var(--dci-sand-text) !important; }
.dci-tab-score--low  { background: var(--dci-rose-bg) !important; color: var(--dci-rose-text) !important; }

/* ── Tab panels ── */
.dci-tab-panel {
    display: none !important;
    padding: 20px !important;
    flex-direction: column !important;
    gap: 16px !important;
    background: var(--dci-surface) !important;
}
.dci-tab-panel.dci-panel--active { display: flex !important; }

/* ── 2-kolom dan 3-kolom layout ── */
.dci-panel-2col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    align-items: start !important;
}
.dci-panel-3col {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 14px !important;
    border-top: 0.5px solid var(--dci-border) !important;
    padding-top: 16px !important;
}

/* ── Score besar ── */
.dci-score-big {
    font-size: 40px !important;
    font-weight: 800 !important;
    letter-spacing: -1px !important;
    line-height: 1 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ── Match bars block ── */
.dci-match-bars {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* ── Self-efficacy block ── */
.dci-se-block {
    border-top: 0.5px solid var(--dci-border) !important;
    padding-top: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-top: 4px !important;
}
.dci-se-label {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: var(--dci-ink-4) !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ── Insight boxes ── */
.dci-box-synth {
    background: var(--dci-sage-bg) !important;
    border: 0.5px solid var(--dci-sage-border) !important;
    border-radius: var(--dci-radius-sm) !important;
    padding: 12px 14px !important;
}
.dci-box-tension {
    background: var(--dci-sand-bg) !important;
    border: 0.5px solid var(--dci-sand-border) !important;
    border-radius: var(--dci-radius-sm) !important;
    padding: 12px 14px !important;
}
.dci-box-note {
    background: var(--dci-mist-bg) !important;
    border: 0.5px solid var(--dci-mist-border) !important;
    border-radius: var(--dci-radius-sm) !important;
    padding: 12px 14px !important;
}
.dci-box-label {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    margin-bottom: 7px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dci-box-synth .dci-box-label   { color: var(--dci-sage-text) !important; }
.dci-box-tension .dci-box-label { color: var(--dci-sand-text) !important; }
.dci-box-note .dci-box-label    { color: var(--dci-mist-text) !important; }
.dci-box-text {
    font-size: 12px !important;
    color: var(--dci-ink-2) !important;
    line-height: 1.7 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dci-box-text strong { color: var(--dci-ink) !important; font-weight: 600 !important; }
.dci-box-text em     { font-style: italic !important; }

/* ── Analisis kolom ── */
.dci-ana-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.dci-ana-label {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: var(--dci-ink-3) !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-bottom: 3px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dci-ana-text {
    font-size: 12px !important;
    color: var(--dci-ink-2) !important;
    line-height: 1.7 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dci-ana-text strong { color: var(--dci-ink) !important; font-weight: 600 !important; }

/* ── Goal header di tab ── */
.dci-goal-head {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 16px !important;
}
.dci-goal-name-lg {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--dci-ink) !important;
    margin-bottom: 2px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ── Pill score label ── */
.dci-pill-score {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 9px !important;
    border-radius: 20px !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.dci-pill--high { background: var(--dci-sage-bg) !important; color: var(--dci-sage-text) !important; border: 0.5px solid var(--dci-sage-border) !important; }
.dci-pill--mid  { background: var(--dci-sand-bg) !important; color: var(--dci-sand-text) !important; border: 0.5px solid var(--dci-sand-border) !important; }
.dci-pill--low  { background: var(--dci-rose-bg) !important; color: var(--dci-rose-text) !important; border: 0.5px solid var(--dci-rose-border) !important; }

/* ── JS Tab: fallback visibility ── */
.dci-tab-panel { display: none !important; }
.dci-tab-panel.dci-panel--active { display: flex !important; }

/* ── Responsive tambahan ── */
@media (max-width: 900px) {
    .dci-header-panels { grid-template-columns: 1fr 1fr !important; }
    .dci-header-panel:nth-child(2n) { border-right: none !important; }
    .dci-header-panel:nth-child(1),
    .dci-header-panel:nth-child(2) { border-bottom: 0.5px solid var(--dci-border) !important; }
    .dci-panel-2col { grid-template-columns: 1fr !important; }
    .dci-panel-3col { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
    .dci-header-panels { grid-template-columns: 1fr !important; }
    .dci-header-panel { border-right: none !important; border-bottom: 0.5px solid var(--dci-border) !important; }
    .dci-header-panel:last-child { border-bottom: none !important; }
    .dci-score-big { font-size: 30px !important; }
    .dci-panel-3col { grid-template-columns: 1fr !important; }
    .dci-goal-head { flex-direction: column !important; align-items: flex-start !important; }
}