/* ═══════════════════════════════════════════════════════════════
   dictio-roadmap.css  — v2
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables ── */
.sdr-wrap {
  --sdr-bg:          #F7F8FA;
  --sdr-surface:     #FFFFFF;
  --sdr-surface-2:   #F2F4F7;
  --sdr-border:      #E4E7EC;
  --sdr-border-mid:  #CBD2DC;
  --sdr-text:        #111827;
  --sdr-text-2:      #374151;
  --sdr-muted:       #6B7280;
  --sdr-faint:       #9CA3AF;
  --sdr-done:        #16A34A;
  --sdr-done-bg:     #F0FDF4;
  --sdr-done-bdr:    #BBF7D0;
  --sdr-learn:       #3B82F6;
  --sdr-learn-bg:    #EFF6FF;
  --sdr-learn-bdr:   #BFDBFE;
  --sdr-brand:       #4F46E5;
  --sdr-brand-light: #EEF2FF;
  --sdr-brand-mid:   #C7D2FE;
  --sdr-phase-f:     #15803D;
  --sdr-phase-c:     #1D4ED8;
  --sdr-phase-a:     #7C3AED;
  --sdr-node-r:      10px;
  --sdr-sheet-r:     20px;
}

.sdr-wrap {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sdr-text);
  background: var(--sdr-bg);
  -webkit-font-smoothing: antialiased;
  position: relative; /* sheet positioning anchor */
}

/* ── Section label ── */
.sdr-section { margin-bottom: 0; }
.sdr-section-label {
  font-size: 9px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sdr-faint);
  padding: 10px 14px 0;
}

/* ══ SECTION 1: GOAL SELECTOR ══ */
.sdr-section--selector {
  background: var(--sdr-surface);
  border-bottom: 1px solid var(--sdr-border);
  padding: 4px 0 10px;
}
.sdr-compact-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px 0;
  overflow-x: auto; scrollbar-width: none;
}
.sdr-compact-bar::-webkit-scrollbar { display: none; }
.sdr-compact-pills { display: flex; gap: 6px; }
.sdr-compact-pill {
  flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; gap: 5px !important;
  padding: 6px 14px !important; border-radius: 20px !important;
  border: 1.5px solid var(--sdr-border) !important; background: var(--sdr-surface) !important;
  font-size: 12px !important; font-weight: 500 !important; color: var(--sdr-muted) !important;
  cursor: pointer !important; transition: all .15s !important; white-space: nowrap !important;
  text-transform: none !important; letter-spacing: 0 !important; line-height: 1.4 !important;
  box-shadow: none !important; outline: none !important; margin: 0 !important;
}
.sdr-compact-pill:hover { border-color: var(--sdr-brand-mid) !important; color: var(--sdr-brand) !important; background: var(--sdr-surface) !important; }
.sdr-compact-pill--active { background: var(--sdr-brand) !important; border-color: var(--sdr-brand) !important; color: #fff !important; }
.sdr-star { font-size: 11px; color: #FDE68A; }
.sdr-compact-pill:not(.sdr-compact-pill--active) .sdr-star { color: #F59E0B; }

.sdr-btn-show-all {
  flex-shrink: 0 !important; margin-left: auto !important; font-size: 11px !important;
  color: var(--sdr-brand) !important; font-weight: 500 !important;
  background: none !important; border: none !important; cursor: pointer !important;
  white-space: nowrap !important; padding: 4px 0 !important;
  text-transform: none !important; letter-spacing: 0 !important;
  box-shadow: none !important; outline: none !important;
}
.sdr-btn-show-all:hover { text-decoration: underline !important; }

/* Full selector */
.sdr-full-selector { padding: 12px 14px; }
.sdr-full-selector-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 12px;
}
.sdr-full-selector-title { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.sdr-full-selector-sub   { font-size: 12px; color: var(--sdr-muted); }
.sdr-btn-collapse {
  font-size: 12px !important; color: var(--sdr-muted) !important;
  background: none !important; border: none !important;
  cursor: pointer !important; white-space: nowrap !important;
  padding: 4px 0 !important; flex-shrink: 0 !important;
  text-transform: none !important; letter-spacing: 0 !important;
  box-shadow: none !important; outline: none !important;
}
.sdr-fs-group { margin-bottom: 12px; }
.sdr-fs-group-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--sdr-muted);
  margin-bottom: 8px;
}
.sdr-fs-group-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sdr-border-mid); }
.sdr-fs-group-dot--mine { background: var(--sdr-brand); }
.sdr-fs-group-label--mine { color: var(--sdr-brand); }
.sdr-fs-edu-note {
  font-size: 11px; color: var(--sdr-muted); background: var(--sdr-surface-2);
  border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; line-height: 1.5;
}
.sdr-fs-edu-note a { color: var(--sdr-brand); }
.sdr-fs-domain-group { margin-bottom: 10px; }
.sdr-fs-domain-label { font-size: 10px; font-weight: 700; color: var(--sdr-faint); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.sdr-fs-pill-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sdr-fs-pill {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  padding: 5px 12px !important; border-radius: 20px !important;
  border: 1.5px solid var(--sdr-border-mid) !important; background: var(--sdr-surface-2) !important;
  font-size: 12px !important; font-weight: 500 !important; color: var(--sdr-text-2) !important;
  cursor: pointer !important; transition: all .15s !important;
  text-transform: none !important; letter-spacing: 0 !important; line-height: 1.4 !important;
  box-shadow: none !important; outline: none !important; margin: 0 !important;
}
.sdr-fs-pill:hover { border-color: var(--sdr-brand-mid) !important; color: var(--sdr-brand) !important; background: var(--sdr-brand-light) !important; }
.sdr-fs-pill--mine { background: var(--sdr-brand-light) !important; border-color: var(--sdr-brand-mid) !important; color: var(--sdr-brand) !important; }
.sdr-fs-pill-check { font-size: 10px; color: var(--sdr-brand); }

/* ══ SECTION 2: CANVAS ══ */
.sdr-section--canvas {
  background: var(--sdr-bg);
  padding: 10px 14px 16px;
  border-bottom: 1px solid var(--sdr-border);
}

.sdr-canvas-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px; flex-wrap: wrap;
}
.sdr-canvas-goal-name { font-size: 17px; font-weight: 700; color: var(--sdr-text); }

.sdr-phase-filter { display: flex; gap: 5px; flex-wrap: wrap; }
.sdr-phase-btn {
  padding: 4px 12px !important; border-radius: 20px !important;
  border: 1.5px solid var(--sdr-border) !important; background: var(--sdr-surface) !important;
  font-size: 11px !important; font-weight: 500 !important; color: var(--sdr-muted) !important;
  cursor: pointer !important; transition: all .15s !important; white-space: nowrap !important;
  text-transform: none !important; letter-spacing: 0 !important; line-height: 1.4 !important;
  box-shadow: none !important; outline: none !important; margin: 0 !important;
}
.sdr-phase-btn--active { background: var(--sdr-brand) !important; border-color: var(--sdr-brand) !important; color: #fff !important; }
.sdr-phase-btn:hover:not(.sdr-phase-btn--active) { border-color: var(--sdr-brand-mid) !important; color: var(--sdr-brand) !important; }

/* Legend */
.sdr-legend {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 4px;
}
.sdr-legend--relevance {
  margin-bottom: 10px;
}
.sdr-legend-border-label { font-size: 11px; color: var(--sdr-faint); font-weight: 500; }
.sdr-legend-item { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--sdr-muted); }
.sdr-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.sdr-dot--verified { background: #22C55E; }
.sdr-dot--claimed  { background: #86EFAC; border: 1.5px solid #22C55E; }
.sdr-dot--learning { background: #3B82F6; }
.sdr-dot--none     { background: #E2E8F0; }
.sdr-rel-bar { width: 3px; height: 14px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.sdr-rel-bar--core       { background: var(--sdr-brand); }
.sdr-rel-bar--supporting { background: #F59E0B; }
.sdr-rel-bar--adjacent   { background: #CBD5E1; }

/* Not-enrolled banner */
.sdr-canvas-not-enrolled {
  background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 8px;
  padding: 10px 12px; margin-bottom: 10px;
}
.sdr-not-enrolled-text { font-size: 12px; color: #92400E; margin-bottom: 4px; }
.sdr-btn-enroll-hint { font-size: 12px; color: var(--sdr-brand); font-weight: 500; }

/* Loading */
.sdr-loading { text-align: center; padding: 32px 0; }
.sdr-spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--sdr-border); border-top-color: var(--sdr-brand);
  animation: sdr-spin .7s linear infinite; margin: 0 auto 10px;
}
@keyframes sdr-spin { to { transform: rotate(360deg); } }
.sdr-loading p { font-size: 13px; color: var(--sdr-muted); }

/* ── Roadmap canvas (node grid) ── */
.sdr-roadmap-canvas { padding-top: 4px; }

.sdr-phase-group { margin-bottom: 16px; }
.sdr-phase-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; display: inline-block; margin-bottom: 8px;
}
.sdr-phase-badge--foundation { background: #DCFCE7; color: var(--sdr-phase-f); }
.sdr-phase-badge--core       { background: #DBEAFE; color: var(--sdr-phase-c); }
.sdr-phase-badge--advanced   { background: #EDE9FE; color: var(--sdr-phase-a); }

.sdr-sub-label {
  font-size: 10px; font-weight: 600; color: var(--sdr-faint);
  text-transform: uppercase; letter-spacing: .06em;
  margin: 6px 0 6px; display: flex; align-items: center; gap: 6px;
}
.sdr-sub-label::after { content: ''; flex: 1; height: 1px; background: var(--sdr-border); }

.sdr-node-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }

/* ── Node card ── */
.sdr-node {
  background: var(--sdr-surface); border: 1.5px solid var(--sdr-border);
  border-radius: var(--sdr-node-r); padding: 10px 11px 8px;
  cursor: pointer; position: relative; overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .1s;
  user-select: none; -webkit-tap-highlight-color: transparent;
}

/* Left accent — relevance */
.sdr-node::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: var(--sdr-node-r) 0 0 var(--sdr-node-r);
}
.sdr-node[data-rel="core"]::before       { background: var(--sdr-brand); }
.sdr-node[data-rel="supporting"]::before { background: #F59E0B; }
.sdr-node[data-rel="adjacent"]::before   { background: #CBD5E1; }

/* Bottom status strip — truthful, no fake numbers */
.sdr-node::after {
  content: ''; position: absolute; left: 3px; right: 0; bottom: 0; height: 2px;
}
.sdr-node[data-status="done_verified"]::after  { background: #22C55E; }
.sdr-node[data-status="done_claimed"]::after   { background: #86EFAC; }
.sdr-node[data-status="done_learnomy"]::after  { background: #22C55E; }
.sdr-node[data-status="learning"]::after       { background: #3B82F6; }

/* Card backgrounds per status */
.sdr-node[data-status="done_verified"],
.sdr-node[data-status="done_learnomy"] { background: var(--sdr-done-bg); border-color: var(--sdr-done-bdr); }
.sdr-node[data-status="done_claimed"]  { background: #F0FDF4; border-color: #DCFCE7; }
.sdr-node[data-status="learning"]      { background: var(--sdr-learn-bg); border-color: var(--sdr-learn-bdr); }
.sdr-node[data-status="not_started"]   { opacity: .9; }

.sdr-node.sdr-node--locked { opacity: .5; cursor: not-allowed; }
.sdr-node.sdr-node--hidden { display: none; }

.sdr-node.sdr-node--active {
  border-color: var(--sdr-brand) !important;
  box-shadow: 0 0 0 3px var(--sdr-brand-mid);
}
.sdr-node:hover:not(.sdr-node--locked):not(.sdr-node--active) {
  border-color: var(--sdr-brand-mid);
  box-shadow: 0 2px 8px rgba(79,70,229,.1);
}
.sdr-node:active:not(.sdr-node--locked) { transform: scale(.98); }

.sdr-node-head { display: flex; align-items: flex-start; gap: 5px; margin-bottom: 4px; }
.sdr-node-id   { font-size: 9px; font-weight: 700; color: var(--sdr-faint); min-width: 18px; margin-top: 2px; flex-shrink: 0; }
.sdr-node-name { font-size: 12px; font-weight: 600; color: var(--sdr-text); line-height: 1.35; flex: 1; }
.sdr-node[data-status="done_verified"] .sdr-node-name,
.sdr-node[data-status="done_learnomy"] .sdr-node-name { color: #166534; }
.sdr-node[data-status="done_claimed"] .sdr-node-name  { color: #15803D; }
.sdr-node[data-status="learning"] .sdr-node-name      { color: #1D4ED8; }
.sdr-node.sdr-node--locked .sdr-node-name             { color: var(--sdr-muted); }

.sdr-node-sdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
.sdr-node[data-status="done_verified"] .sdr-node-sdot,
.sdr-node[data-status="done_learnomy"] .sdr-node-sdot { background: #22C55E; }
.sdr-node[data-status="done_claimed"] .sdr-node-sdot  { background: #86EFAC; border: 1.5px solid #22C55E; }
.sdr-node[data-status="learning"] .sdr-node-sdot      { background: #3B82F6; }
.sdr-node[data-status="not_started"] .sdr-node-sdot   { background: #E2E8F0; }
.sdr-node.sdr-node--locked .sdr-node-sdot             { background: #D1D5DB; }

.sdr-node-foot { display: flex; align-items: center; justify-content: space-between; min-height: 14px; }
.sdr-node-req  {
  font-size: 9px; padding: 1px 5px; border-radius: 4px;
  background: #FEF9C3; color: #854D0E; font-weight: 600;
}
.sdr-node-lock { font-size: 10px; color: var(--sdr-faint); }

/* Progress summary */
.sdr-progress-wrap { margin-top: 0; margin-bottom: 12px; margin-left: 0; margin-right: 0; }
.sdr-prog-card {
  display: flex !important; gap: 0 !important; align-items: stretch !important;
  background: #EEF2FF !important;
  border: 0.5px solid #C7D2FE !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.sdr-prog-left {
  flex-shrink: 0 !important;
  padding: 16px 24px !important;
  min-width: 160px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  border-right: 0.5px solid #C7D2FE !important;
  background: #E8EDFF !important;
}
.sdr-prog-pct {
  font-size: 48px !important; font-weight: 300 !important;
  color: #3730A3 !important; line-height: 1 !important;
  letter-spacing: -2px !important;
  display: block !important;
}
.sdr-prog-pct-label {
  font-size: 11px !important; color: #6366f1 !important;
  margin-bottom: 12px !important; margin-top: 4px !important;
  text-transform: uppercase !important; letter-spacing: .5px !important;
  display: block !important;
}
.sdr-prog-bar-wrap {
  height: 4px !important; background: #C7D2FE !important;
  border-radius: 2px !important; overflow: hidden !important; width: 100% !important;
}
.sdr-progress-fill {
  height: 4px !important; background: #4F46E5 !important;
  border-radius: 2px !important; transition: width .5s ease !important;
}
.sdr-prog-right {
  flex: 1 !important;
  padding: 16px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.sdr-prog-fraction {
  font-size: 32px !important; font-weight: 300 !important;
  color: #4F46E5 !important; line-height: 1 !important;
  margin-bottom: 12px !important; letter-spacing: -1px !important;
  display: block !important;
}
.sdr-prog-total {
  font-size: 20px !important; color: #818CF8 !important;
  font-weight: 300 !important;
}
.sdr-prog-chips-row {
  display: flex !important; gap: 6px !important; flex-wrap: wrap !important;
}
.sdr-prog-chip {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  font-size: 11px !important; padding: 4px 10px !important;
  border-radius: 20px !important; white-space: nowrap !important;
}
.sdr-prog-chip--green  { background: #DCFCE7 !important; color: #166534 !important; }
.sdr-prog-chip--purple { background: #EDE9FE !important; color: #5B21B6 !important; }
.sdr-prog-chip--gray   { background: #E2E8F0 !important; color: #475569 !important; }
.sdr-chip-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; flex-shrink: 0 !important; background: #94A3B8 !important; }
.sdr-prog-phase-note { font-size: 10px !important; color: #818CF8 !important; margin-top: 6px !important; }

/* ══ BOTTOM SHEET / SIDE DRAWER ══ */
.sdr-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  z-index: 1000; opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.sdr-backdrop.sdr-backdrop--visible { opacity: 1; pointer-events: auto; }

.sdr-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001;
  background: var(--sdr-surface);
  border-radius: var(--sdr-sheet-r) var(--sdr-sheet-r) 0 0;
  max-height: 82vh; display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,.72,0,1);
  will-change: transform;
}
.sdr-sheet.sdr-sheet--open { transform: translateY(0); }

/* Desktop: side drawer */
@media (min-width: 768px) {
  .sdr-backdrop {
    position: fixed; inset: 0;
    z-index: 1000;
  }
  .sdr-sheet {
    position: fixed; left: auto; right: 0; bottom: 0; top: 56px;
    border-radius: 0; max-height: none;
    width: 360px; transform: translateX(100%);
    transition: transform .28s cubic-bezier(.32,.72,0,1);
    box-shadow: -6px 0 24px rgba(0,0,0,.1);
    z-index: 1001;
  }
  .sdr-sheet.sdr-sheet--open { transform: translateX(0); }
  .sdr-sheet-handle { display: none; }
}

.sdr-sheet-handle { display: flex; justify-content: center; padding: 10px 0 4px; cursor: grab; flex-shrink: 0; }
.sdr-sheet-handle span { width: 36px; height: 4px; background: var(--sdr-border-mid); border-radius: 4px; }

/* Sheet header */
.sdr-sheet-header {
  flex-shrink: 0; padding: 6px 16px 14px;
  border-bottom: 1px solid var(--sdr-border);
  background: var(--sdr-surface); position: relative;
}
@media (min-width: 768px) { .sdr-sheet-header { padding-top: 18px; } }

.sdr-sheet-close {
  position: absolute !important; top: 8px !important; right: 14px !important;
  width: 28px !important; height: 28px !important; border-radius: 50% !important;
  border: none !important; background: var(--sdr-surface-2) !important;
  color: var(--sdr-muted) !important; font-size: 14px !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: background .15s !important; padding: 0 !important;
  text-transform: none !important; line-height: 1 !important;
  box-shadow: none !important; outline: none !important;
}
.sdr-sheet-close:hover { background: var(--sdr-border) !important; }

.sdr-sheet-meta { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.sdr-sheet-phase {
  font-size: 10px; font-weight: 700; padding: 2px 7px;
  border-radius: 4px; letter-spacing: .04em;
}
.sdr-sheet-phase--foundation { background: #DCFCE7; color: var(--sdr-phase-f); }
.sdr-sheet-phase--core       { background: #DBEAFE; color: var(--sdr-phase-c); }
.sdr-sheet-phase--advanced   { background: #EDE9FE; color: var(--sdr-phase-a); }
.sdr-sheet-rel { font-size: 10px; color: var(--sdr-faint); display: flex; align-items: center; gap: 3px; }
.sdr-sheet-rel-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.sdr-sheet-name { font-size: 18px; font-weight: 700; color: var(--sdr-text); padding-right: 36px; line-height: 1.3; margin-bottom: 8px; }

.sdr-status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; border: 1.5px solid;
}
.sdr-status-pill--verified { background: #F0FDF4; color: #16A34A; border-color: #BBF7D0; }
.sdr-status-pill--claimed  { background: #F0FDF4; color: #15803D; border-color: #DCFCE7; }
.sdr-status-pill--learnomy { background: #F0FDF4; color: #16A34A; border-color: #BBF7D0; }
.sdr-status-pill--learning { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }
.sdr-status-pill--none     { background: var(--sdr-surface-2); color: var(--sdr-muted); border-color: var(--sdr-border); }
.sdr-status-dot { width: 7px; height: 7px; border-radius: 50%; }

/* Sheet empty state */
.sdr-sheet-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 24px; text-align: center;
}
.sdr-sheet-empty-icon  { font-size: 36px; margin-bottom: 12px; opacity: .5; }
.sdr-sheet-empty-title { font-size: 14px; font-weight: 600; color: var(--sdr-text-2); margin-bottom: 6px; }
.sdr-sheet-empty-desc  { font-size: 12px; color: var(--sdr-muted); line-height: 1.6; }

/* Sheet body */
.sdr-sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* Sheet sections */
.sdr-sheet-sec { padding: 14px 16px; border-bottom: 1px solid var(--sdr-border); }
.sdr-sheet-sec:last-child { border-bottom: none; padding-bottom: 32px; }
.sdr-sheet-sec-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--sdr-faint); margin-bottom: 10px;
}

/* Evidence list */
.sdr-ev-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.sdr-ev-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 10px; background: var(--sdr-bg);
  border-left: 3px solid var(--sdr-border);
}
.sdr-ev-item--verified { border-left-color: #22C55E; }
.sdr-ev-item--done     { border-left-color: var(--sdr-brand); }
.sdr-ev-item--learning { border-left-color: #3B82F6; }
.sdr-ev-icon  { font-size: 16px; line-height: 1; flex-shrink: 0; margin-top: 1px; }
.sdr-ev-body  { flex: 1; min-width: 0; }
.sdr-ev-title { font-size: 13px; font-weight: 600; color: var(--sdr-text); margin-bottom: 2px; line-height: 1.4; }
.sdr-ev-title a { color: var(--sdr-brand); text-decoration: none; }
.sdr-ev-title a:hover { text-decoration: underline; }
.sdr-ev-meta  { font-size: 11px; color: var(--sdr-muted); }
.sdr-ev-tag {
  flex-shrink: 0; font-size: 10px; padding: 2px 7px;
  border-radius: 10px; font-weight: 500; white-space: nowrap; margin-top: 1px;
}
.sdr-ev-tag--verified { background: #DCFCE7; color: #166534; }
.sdr-ev-tag--done     { background: var(--sdr-brand-light); color: var(--sdr-brand); }
.sdr-ev-tag--learning { background: #EFF6FF; color: #1D4ED8; }
.sdr-ev-empty { font-size: 13px; color: var(--sdr-muted); font-style: italic; margin-bottom: 10px; }

.sdr-add-evidence { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sdr-add-link { font-size: 12px; color: var(--sdr-brand); font-weight: 500; text-decoration: none; }
.sdr-add-link:hover { text-decoration: underline; }
.sdr-add-sep  { color: var(--sdr-border-mid); }

/* Prereqs */
.sdr-prereq-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sdr-prereq-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px; border-radius: 20px; font-size: 12px; font-weight: 500;
  background: #FEF9C3; border: 1px solid #FDE68A; color: #854D0E;
}
.sdr-prereq-tag--done { background: var(--sdr-done-bg); border-color: var(--sdr-done-bdr); color: #166534; }

/* Resources */
.sdr-res-group-lbl {
  font-size: 10px; font-weight: 700; color: var(--sdr-faint);
  text-transform: uppercase; letter-spacing: .06em; margin: 12px 0 6px;
}
.sdr-res-group-lbl:first-child { margin-top: 0; }
.sdr-res-list { display: flex; flex-direction: column; gap: 7px; }
.sdr-res-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--sdr-bg);
  border: 1px solid var(--sdr-border); border-radius: 10px;
  text-decoration: none; color: inherit;
  transition: border-color .15s, background .15s;
}
.sdr-res-item:hover { border-color: var(--sdr-brand-mid); background: var(--sdr-brand-light); }
.sdr-res-badge {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; flex-shrink: 0; letter-spacing: -.5px;
}
.sdr-res-badge--internal { background: #EDE9FE; color: #5B21B6; }
.sdr-res-badge--udemy    { background: #FFF1E6; color: #A32B00; }
.sdr-res-badge--coursera { background: #EFF6FF; color: #1D4ED8; }
.sdr-res-badge--other    { background: var(--sdr-surface-2); color: var(--sdr-muted); }
.sdr-res-body { flex: 1; min-width: 0; }
.sdr-res-title { font-size: 13px; font-weight: 600; color: var(--sdr-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.sdr-res-meta  { font-size: 11px; color: var(--sdr-muted); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.sdr-res-price { font-size: 12px; font-weight: 700; color: var(--sdr-text-2); white-space: nowrap; flex-shrink: 0; }
.sdr-res-price--free { color: var(--sdr-done); }
.sdr-res-empty { font-size: 13px; color: var(--sdr-muted); font-style: italic; }

/* Kurikulum (statis) */
.sdr-curr-list { display: flex; flex-direction: column; }
.sdr-curr-item { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--sdr-border); }
.sdr-curr-item:last-child { border-bottom: none; }
.sdr-curr-num   { font-size: 10px; font-weight: 700; color: var(--sdr-faint); min-width: 18px; flex-shrink: 0; margin-top: 2px; }
.sdr-curr-label { font-size: 13px; color: var(--sdr-text-2); flex: 1; line-height: 1.4; }

/* Empty state (no goal) */
.sdr-empty-state { padding: 48px 24px; text-align: center; }
.sdr-empty-icon  { font-size: 48px; margin-bottom: 12px; }
.sdr-empty-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.sdr-empty-desc  { font-size: 13px; color: var(--sdr-muted); line-height: 1.6; margin-bottom: 16px; max-width: 400px; margin-left: auto; margin-right: auto; }
.sdr-btn-primary {
  display: inline-block !important; padding: 10px 24px !important;
  background: var(--sdr-brand) !important; color: #fff !important;
  border-radius: 8px !important; font-size: 14px !important; font-weight: 600 !important;
  text-decoration: none !important; transition: background .15s !important;
  border: none !important; cursor: pointer !important;
  text-transform: none !important; letter-spacing: 0 !important;
  box-shadow: none !important; line-height: 1.4 !important;
}
.sdr-btn-primary:hover { background: #4338CA !important; color: #fff !important; }
.sdr-no-access { padding: 32px 24px; text-align: center; color: var(--sdr-muted); }

/* ══════════════════════════════════════════════════════════════
   SOFT SKILL ROADMAP
   ══════════════════════════════════════════════════════════════ */

/* Tab switcher Hard / Soft */
.sdr-canvas-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  margin-bottom: 8px !important;
}
.sdr-canvas-goal-name {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: var(--sdr-text) !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.sdr-skill-tabs {
  display: flex !important;
  gap: 0 !important;
  border: 0.5px solid var(--sdr-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
.sdr-skill-tab {
  padding: 6px 16px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--sdr-muted) !important;
  background: var(--sdr-node-bg) !important;
  border: none !important;
  cursor: pointer !important;
  transition: all .15s !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.sdr-skill-tab:not(:last-child) { border-right: 0.5px solid var(--sdr-border) !important; }
.sdr-skill-tab--active {
  background: #4F46E5 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}
.sdr-skill-tab--active:hover {
  background: #4338CA !important;
  color: #ffffff !important;
}
.sdr-phase-filter-wrap {
  display: flex !important;
  justify-content: flex-end !important;
  margin-bottom: 8px !important;
  flex-shrink: 0 !important;
}

/* Behavioral Snapshot */
.sdr-snap {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  background: var(--sdr-node-bg);
  border: 0.5px solid var(--sdr-border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 14px;
}
.sdr-snap-radar-wrap { flex-shrink: 0; }
.sdr-snap-bars { flex: 1; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.sdr-snap-title {
  font-size: 10px !important; font-weight: 600 !important; color: var(--sdr-muted) !important;
  text-transform: uppercase !important; letter-spacing: .6px !important; margin-bottom: 6px !important;
}
.sdr-snap-row { display: flex; align-items: center; gap: 10px; }
.sdr-snap-label { font-size: 12px !important; color: var(--sdr-text) !important; width: 110px; flex-shrink: 0; }
.sdr-snap-bar-bg { flex: 1; height: 6px; background: var(--sdr-border); border-radius: 3px; overflow: hidden; min-width: 0; }
.sdr-snap-bar-fill { height: 100%; background: #6366f1; border-radius: 3px; }
.sdr-snap-pct { font-size: 12px !important; color: #6366f1 !important; font-weight: 600 !important; width: 38px; text-align: right; flex-shrink: 0; }

/* Legend soft skill */
.sdr-soft-legend {
  display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px;
  font-size: 11px;
}
.sdr-soft-legend--rel {
  padding-top: 8px;
  border-top: 0.5px solid var(--sdr-border);
  margin-bottom: 14px;
}
.sdr-soft-leg-item { display: flex; align-items: center; gap: 5px; color: var(--sdr-muted); }
.sdr-dot--strong  { background: #378ADD; }
.sdr-dot--claimed { background: #7F77DD; }

/* Section */
.sdr-soft-section { margin-bottom: 16px; }
.sdr-soft-section-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px; padding-bottom: 8px;
  border-bottom: 0.5px solid var(--sdr-border);
}
.sdr-soft-badge {
  font-size: 10px; font-weight: 500; padding: 3px 9px;
  border-radius: 10px; letter-spacing: .3px; white-space: nowrap;
}
.sdr-soft-badge--l1 { background: #E1F5EE; color: #0F6E56; }
.sdr-soft-badge--l2 { background: #EEEDFE; color: #3C3489; }
.sdr-soft-badge--l3 { background: #FAEEDA; color: #633806; }
.sdr-soft-section-title { font-size: 13px; font-weight: 500; color: var(--sdr-text); }
.sdr-soft-section-count { font-size: 12px; color: var(--sdr-muted); margin-left: auto; white-space: nowrap; }

/* Skill rows */
.sdr-soft-skill-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.sdr-soft-drawer--fullrow {
  grid-column: 1 / -1;
}
.sdr-soft-skill-row {
  display: flex !important; align-items: center !important; gap: 10px !important;
  padding: 10px 14px !important;
  background: var(--sdr-sheet-bg) !important;
  border-top: 0.5px solid var(--sdr-border) !important;
  border-right: 0.5px solid var(--sdr-border) !important;
  border-bottom: 0.5px solid var(--sdr-border) !important;
  border-left: 3px solid #CBD5E1 !important;
  border-radius: 0 8px 8px 0 !important;
  cursor: pointer !important;
  transition: background .15s !important;
  min-width: 0;
}
.sdr-soft-skill-row:hover { background: var(--sdr-node-bg) !important; }
.sdr-soft-skill-row--core       { border-left-color: #D85A30 !important; }
.sdr-soft-skill-row--supporting { border-left-color: #F59E0B !important; }
.sdr-soft-skill-row--adjacent   { border-left-color: #CBD5E1 !important; }
.sdr-soft-skill-row--has-progress {
  background: #F0FDF4 !important;
  border-top-color: #BBF7D0 !important;
  border-right-color: #BBF7D0 !important;
  border-bottom-color: #BBF7D0 !important;
}
.sdr-soft-skill-row--has-progress .sdr-soft-skill-name {
  color: #15803d !important;
}
.sdr-soft-skill-row--has-progress.sdr-soft-skill-row--core       { border-left-color: #D85A30 !important; }
.sdr-soft-skill-row--has-progress.sdr-soft-skill-row--supporting { border-left-color: #F59E0B !important; }
.sdr-soft-skill-row--has-progress.sdr-soft-skill-row--adjacent   { border-left-color: #CBD5E1 !important; }
.sdr-soft-skill-row--active {
  background: rgba(99, 102, 241, .07) !important;
  border-top-color: rgba(99, 102, 241, .3) !important;
  border-right-color: rgba(99, 102, 241, .3) !important;
  border-bottom-color: rgba(99, 102, 241, .3) !important;
}
.sdr-soft-skill-row--active.sdr-soft-skill-row--core       { border-left-color: #D85A30 !important; }
.sdr-soft-skill-row--active.sdr-soft-skill-row--supporting { border-left-color: #F59E0B !important; }
.sdr-soft-skill-row--active.sdr-soft-skill-row--adjacent   { border-left-color: #CBD5E1 !important; }
.sdr-soft-skill-name { flex: 1 !important; font-size: 13px !important; color: var(--sdr-text) !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdr-soft-count { font-size: 11px !important; color: var(--sdr-muted) !important; white-space: nowrap; flex-shrink: 0; }
.sdr-soft-count--has { color: #16a34a !important; font-weight: 600 !important; }
.sdr-soft-chevron { font-size: 13px !important; color: var(--sdr-muted) !important; flex-shrink: 0; }

/* Inline drawer */
.sdr-soft-drawer {
  display: none;
  background: #F0FAFA;
  border: 0.5px solid #A8D5C8;
  border-radius: 12px;
  padding: 16px 18px;
  margin-top: 4px;
}
.sdr-soft-drawer--open { display: block; }

/* Drawer content */
.sdr-sd-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.sdr-sd-name { font-size: 15px !important; font-weight: 500 !important; color: #0F5044 !important; }
.sdr-sd-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 11px; color: #3D8B7A; }
.sdr-sd-close {
  background: none !important; border: none !important; cursor: pointer !important;
  color: #3D8B7A !important; font-size: 16px !important; line-height: 1 !important; flex-shrink: 0 !important;
}
.sdr-sd-section { margin-bottom: 13px; }
.sdr-sd-section-title {
  font-size: 10px !important; font-weight: 600 !important; color: #2D7A6A !important;
  text-transform: uppercase !important; letter-spacing: .5px !important; margin-bottom: 7px !important;
}
.sdr-sd-desc { font-size: 12px !important; color: #0F5044 !important; line-height: 1.6 !important; }
.sdr-sd-ctx-chip {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  background: #fff !important; border: 0.5px solid #A8D5C8 !important;
  border-radius: 6px !important; padding: 5px 10px !important; font-size: 12px !important; color: #2D7A6A !important;
}
.sdr-sd-ev-row {
  display: flex !important; align-items: center !important; gap: 8px !important;
  padding: 7px 10px !important; background: #fff !important;
  border: 0.5px solid #A8D5C8 !important; border-radius: 8px !important; margin-bottom: 5px !important;
}
.sdr-sd-ev-icon {
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 14px;
}
.sdr-sd-ev-icon--work       { background: #E1F5EE; }
.sdr-sd-ev-icon--org        { background: #EEEDFE; }
.sdr-sd-ev-icon--committee  { background: #E6F1FB; }
.sdr-sd-ev-icon--volunteer  { background: #EAF3DE; }
.sdr-sd-ev-icon--freelance  { background: #FAEEDA; }
.sdr-sd-ev-icon--competition{ background: #FAECE7; }
.sdr-sd-ev-name { font-size: 12px !important; font-weight: 500 !important; color: #0F5044 !important; }
.sdr-sd-ev-meta { font-size: 11px !important; color: #3D8B7A !important; }
.sdr-sd-empty {
  padding: 10px !important; text-align: center !important; font-size: 12px !important; color: #3D8B7A !important;
  background: #fff !important; border: 0.5px dashed #A8D5C8 !important; border-radius: 8px !important;
}
.sdr-sd-cta {
  display: inline-block !important; margin-top: 10px !important; font-size: 12px !important;
  color: #2D7A6A !important; text-decoration: none !important; font-weight: 500 !important;
}
.sdr-sd-cta:hover { text-decoration: underline !important; }

/* ── Mobile responsive ── */
@media (max-width: 600px) {
  .sdr-snap {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
  }
  .sdr-snap-bars { width: 100%; }
  .sdr-snap-label { width: 90px !important; font-size: 11px !important; }
  .sdr-snap-pct { width: 32px !important; }
  .sdr-soft-skill-list {
    grid-template-columns: 1fr !important;
  }
  .sdr-canvas-toolbar-bottom { flex-direction: column !important; align-items: flex-start !important; }

  /* ── Fix: canvas toolbar mobile — judul & tab tidak tumpang tindih ── */
  .sdr-canvas-toolbar {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .sdr-canvas-goal-name {
    width: 100% !important;
    flex: none !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
  }
  .sdr-skill-tabs {
    flex-shrink: 0 !important;
    order: 2 !important;
  }
  .sdr-phase-filter-wrap {
    order: 3 !important;
    width: 100% !important;
    justify-content: flex-start !important;
    margin-bottom: 4px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .sdr-phase-filter-wrap::-webkit-scrollbar { display: none !important; }
  .sdr-phase-filter {
    flex-wrap: nowrap !important;
  }
}

/* Hide hard skill sheet saat tab soft skill aktif */
.sdr-sheet--soft { display: none !important; }

/* Soft skill node status — pakai data-status seperti hard skill */
.sdr-soft-skill-row[data-status="done_claimed"],
.sdr-soft-skill-row[data-status="done_verified"] {
  background: #F0FDF4 !important;
  border-top-color: #BBF7D0 !important;
  border-right-color: #BBF7D0 !important;
  border-bottom-color: #BBF7D0 !important;
}
.sdr-soft-skill-row[data-status="done_claimed"] .sdr-soft-skill-name,
.sdr-soft-skill-row[data-status="done_verified"] .sdr-soft-skill-name {
  color: #15803D !important;
}
.sdr-soft-skill-row[data-status="done_claimed"] .sdr-soft-count,
.sdr-soft-skill-row[data-status="done_verified"] .sdr-soft-count {
  color: #16a34a !important;
}
/* Border kiri tetap berdasarkan relevance */
.sdr-soft-skill-row[data-relevance="core"]      { border-left-color: #D85A30 !important; }
.sdr-soft-skill-row[data-relevance="supporting"] { border-left-color: #F59E0B !important; }
.sdr-soft-skill-row[data-relevance="adjacent"]   { border-left-color: #CBD5E1 !important; }

/* Phase filter dalam toolbar */
.sdr-phase-filter-wrap { flex-shrink: 0 !important; margin-bottom: 0 !important; }

/* ════════════════════════════════════════════════════════════════
   GUEST HERO
   ════════════════════════════════════════════════════════════════ */

.sdr-guest-hero {
    display: grid !important;
    grid-template-columns: 1fr 340px !important;
    gap: 40px !important;
    align-items: center !important;
    padding: 40px 0 32px !important;
    border-bottom: 1px solid #EAE6DD !important;
    margin-bottom: 24px !important;
}

.sdr-guest-eyebrow {
    font-size: .68rem !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: #C8851A !important;
    margin-bottom: 12px !important;
}

.sdr-guest-hero-title {
    font-family: 'DM Serif Display', serif !important;
    font-size: 2.4rem !important;
    font-weight: 400 !important;
    line-height: 1.12 !important;
    color: #0F2140 !important;
    margin: 0 0 16px !important;
    letter-spacing: -.3px !important;
}

.sdr-guest-hero-body {
    font-size: .88rem !important;
    color: #44484E !important;
    line-height: 1.65 !important;
    margin: 0 0 28px !important;
    max-width: 44ch !important;
}

.sdr-guest-hero-actions {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}

.sdr-guest-btn-explore {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Sora', sans-serif !important;
    font-size: .8rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: #1B3A6B !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    cursor: pointer !important;
    transition: background 150ms ease !important;
}

.sdr-guest-btn-explore:hover { background: #24508F !important; }

.sdr-guest-btn-login {
    font-size: .78rem !important;
    font-weight: 600 !important;
    color: #44484E !important;
    text-decoration: none !important;
    border-bottom: 1px solid #DDD8CF !important;
    padding-bottom: 1px !important;
    transition: color 150ms, border-color 150ms !important;
}

.sdr-guest-btn-login:hover {
    color: #1B3A6B !important;
    border-color: #1B3A6B !important;
}

/* Stats grid kanan */
.sdr-guest-hero-right {
    background: #fff !important;
    border: 1px solid #EAE6DD !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.sdr-guest-stats {
    display: flex !important;
    flex-direction: column !important;
}

.sdr-guest-stat-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 18px !important;
    border-bottom: 1px solid #F5F4F1 !important;
    transition: background 150ms !important;
}

.sdr-guest-stat-item:last-child { border-bottom: none !important; }
.sdr-guest-stat-item:hover { background: #F9F8F6 !important; }

.sdr-guest-stat-icon {
    font-size: 1.1rem !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #F5F4F1 !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
}

.sdr-guest-stat-domain {
    font-size: .73rem !important;
    font-weight: 600 !important;
    color: #1A1C1E !important;
    line-height: 1.3 !important;
}

.sdr-guest-stat-count {
    font-size: .65rem !important;
    color: #8A9099 !important;
    margin-top: 1px !important;
}

/* ════════════════════════════════════════════════════════════════
   CAREER PICKER DRAWER
   ════════════════════════════════════════════════════════════════ */

.sdr-guest-picker-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1100 !important;
    background: rgba(15,33,64,.5) !important;
    backdrop-filter: blur(2px) !important;
    display: none !important;
}

.sdr-guest-picker-overlay[aria-hidden="false"] { display: block !important; }

.sdr-guest-picker {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 480px !important;
    max-width: 95vw !important;
    z-index: 1101 !important;
    background: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateX(100%) !important;
    transition: transform .25s ease !important;
    box-shadow: -8px 0 32px rgba(15,33,64,.12) !important;
}

.sdr-guest-picker[aria-hidden="false"] { transform: translateX(0) !important; }

.sdr-guest-picker-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    padding: 24px 24px 16px !important;
    border-bottom: 1px solid #EAE6DD !important;
    flex-shrink: 0 !important;
}

.sdr-guest-picker-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #1A1C1E !important;
    margin-bottom: 3px !important;
}

.sdr-guest-picker-sub {
    font-size: .72rem !important;
    color: #8A9099 !important;
}

.sdr-guest-picker-close {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #F5F4F1 !important;
    border: none !important;
    border-radius: 6px !important;
    color: #44484E !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: background 150ms !important;
}

.sdr-guest-picker-close:hover { background: #EAE6DD !important; }

.sdr-guest-picker-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 16px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.sdr-guest-picker-domain { }

.sdr-guest-picker-domain-label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: .65rem !important;
    font-weight: 700 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    color: #8A9099 !important;
    margin-bottom: 10px !important;
}

.sdr-guest-picker-domain-count {
    font-size: .62rem !important;
    color: #B8BCC4 !important;
    font-weight: 500 !important;
    margin-left: auto !important;
}

.sdr-guest-picker-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

/* Reuse sdr-compact-pill */
.sdr-guest-picker-pills .sdr-compact-pill {
    font-size: .76rem !important;
    padding: 7px 14px !important;
}

.sdr-guest-picker-footer {
    padding: 16px 24px !important;
    border-top: 1px solid #EAE6DD !important;
    background: #F9F8F6 !important;
    flex-shrink: 0 !important;
}

.sdr-guest-picker-register {
    font-size: .75rem !important;
    font-weight: 600 !important;
    color: #1B3A6B !important;
    text-decoration: none !important;
}

.sdr-guest-picker-register:hover { text-decoration: underline !important; }

/* ════════════════════════════════════════════════════════════════
   ACTIVE GOAL BAR & CTA BAR
   ════════════════════════════════════════════════════════════════ */

.sdr-guest-active-goal {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    background: #F9F8F6 !important;
    border: 1px solid #EAE6DD !important;
    border-radius: 8px !important;
    margin-bottom: 16px !important;
}

.sdr-guest-active-label {
    font-size: .72rem !important;
    color: #8A9099 !important;
    flex-shrink: 0 !important;
}

.sdr-guest-active-name {
    font-size: .82rem !important;
    font-weight: 700 !important;
    color: #1B3A6B !important;
    flex: 1 !important;
}

.sdr-guest-change-btn {
    font-size: .7rem !important;
    font-weight: 600 !important;
    color: #24508F !important;
    background: none !important;
    border: 1px solid rgba(27,58,107,.2) !important;
    border-radius: 5px !important;
    padding: 4px 12px !important;
    cursor: pointer !important;
    transition: all 150ms !important;
    flex-shrink: 0 !important;
}

.sdr-guest-change-btn:hover {
    background: #E4ECF7 !important;
    border-color: #1B3A6B !important;
}

/* CTA sticky bar */
.sdr-guest-cta-bar {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
    margin: 0 -24px !important;
    padding: 0 24px !important;
    opacity: 0 !important;
    transform: translateY(10px) !important;
    pointer-events: none !important;
    transition: opacity .3s ease, transform .3s ease !important;
}

.sdr-guest-cta-bar--visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

.sdr-guest-cta-bar-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    background: #0F2140 !important;
    border-radius: 10px 10px 0 0 !important;
    padding: 14px 20px !important;
    box-shadow: 0 -4px 20px rgba(15,33,64,.15) !important;
}

.sdr-guest-cta-bar-inner strong {
    display: block !important;
    font-size: .8rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 2px !important;
}

.sdr-guest-cta-bar-inner span {
    font-size: .72rem !important;
    color: rgba(255,255,255,.55) !important;
}

.sdr-guest-cta-bar-btn {
    display: inline-block !important;
    font-size: .75rem !important;
    font-weight: 700 !important;
    color: #0F2140 !important;
    background: #C8851A !important;
    border-radius: 6px !important;
    padding: 10px 20px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: background 150ms !important;
}

.sdr-guest-cta-bar-btn:hover { background: #A86E14 !important; color: #fff !important; }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE GUEST
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
    .sdr-guest-hero { grid-template-columns: 1fr !important; gap: 24px !important; padding: 28px 0 20px !important; }
    .sdr-guest-hero-right { display: none !important; }
    .sdr-guest-hero-title { font-size: 1.8rem !important; }
    .sdr-guest-cta-bar { margin: 0 -16px !important; padding: 0 16px !important; }
}

@media (max-width: 480px) {
    .sdr-guest-picker { width: 100% !important; top: auto !important; height: 85vh !important; border-radius: 16px 16px 0 0 !important; transform: translateY(100%) !important; }
    .sdr-guest-picker[aria-hidden="false"] { transform: translateY(0) !important; }
    .sdr-guest-cta-bar-inner { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
    .sdr-guest-cta-bar-btn { width: 100% !important; text-align: center !important; }
}

/* ════════════════════════════════════════════════════════════════
   DESKTOP SCALE-UP — canvas font sizes
   Semua ukuran di bawah ini override canvas yang mobile-first
   ════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {

    /* Canvas toolbar */
    .sdr-canvas-goal-name { font-size: 22px !important; }

    .sdr-skill-tab {
        font-size: 13px !important;
        padding: 6px 16px !important;
    }

    .sdr-phase-btn {
        font-size: 12px !important;
        padding: 5px 14px !important;
    }

    /* Legend */
    .sdr-legend-item { font-size: 13px !important; }
    .sdr-legend-border-label { font-size: 13px !important; }
    .sdr-rel-bar { height: 12px !important; }

    /* Phase badge */
    .sdr-phase-badge {
        font-size: 12px !important;
        padding: 4px 12px !important;
        margin-bottom: 12px !important;
    }

    /* Sub label (KONSEP / PLATFORM) */
    .sdr-sub-label {
        font-size: 12px !important;
        margin: 12px 0 8px !important;
    }

    /* Node grid — lebih lebar di desktop */
    .sdr-node-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    /* Node card */
    .sdr-node {
        padding: 12px 14px 10px !important;
    }

    .sdr-node-id {
        font-size: 11px !important;
        min-width: 22px !important;
    }

    .sdr-node-name {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    /* Node footer (req tags, dots) */
    .sdr-node-footer { margin-top: 8px !important; }

    .sdr-req-tags { gap: 4px !important; margin-top: 6px !important; }

    .sdr-req-tag {
        font-size: 11px !important;
        padding: 2px 7px !important;
    }

    /* Not enrolled notice */
    .sdr-not-enrolled-text { font-size: 14px !important; }
    .sdr-btn-enroll-hint   { font-size: 13px !important; }

    /* Active goal bar */
    .sdr-guest-active-label { font-size: 13px !important; }
    .sdr-guest-active-name  { font-size: 14px !important; }
    .sdr-guest-change-btn   { font-size: 12px !important; padding: 5px 14px !important; }

    /* CTA bar */
    .sdr-guest-cta-bar-inner strong { font-size: 14px !important; }
    .sdr-guest-cta-bar-inner span   { font-size: 13px !important; }
    .sdr-guest-cta-bar-btn          { font-size: 13px !important; padding: 11px 24px !important; }

    /* Not enrolled banner */
    .sdr-canvas-not-enrolled {
        padding: 12px 16px !important;
        font-size: 13px !important;
    }

    /* Compact pills */
    .sdr-compact-pill {
        font-size: 13px !important;
        padding: 7px 16px !important;
    }
}