/* ═══════════════════════════════════════════════════════════════
   SOULSYNC EXTENDED FEATURES — CSS for all 17 new features
   ═══════════════════════════════════════════════════════════════ */

/* ─── PWA Install Banner ─────────────────────────────────────── */
.ssd-pwa-banner{position:fixed;bottom:0;left:0;right:0;z-index:500;background:linear-gradient(135deg,rgba(12,12,18,0.98),rgba(20,15,30,0.98));backdrop-filter:blur(20px);border-top:1px solid rgba(224,165,38,0.15);padding:16px 20px;display:flex;align-items:center;gap:14px;transform:translateY(100%);transition:transform 0.4s cubic-bezier(.4,0,.2,1);font-family:var(--ssd-font)}
.ssd-pwa-banner.show{transform:translateY(0)}
.ssd-pwa-banner .pwa-icon{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#FC5C7C,#E0A526);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.ssd-pwa-banner .pwa-text{flex:1;min-width:0}
.ssd-pwa-banner .pwa-title{font-weight:700;font-size:14px;color:#E8E8ED}
.ssd-pwa-banner .pwa-desc{font-size:12px;color:rgba(255,255,255,0.5);margin-top:2px}
.ssd-pwa-banner .pwa-install{padding:10px 20px;border-radius:10px;border:none;background:linear-gradient(135deg,#FC5C7C,#E0A526);color:#fff;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}
.ssd-pwa-banner .pwa-close{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,0.1);background:transparent;color:rgba(255,255,255,0.5);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}

/* ─── Verification Badges ────────────────────────────────────── */
.ssd-verify-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.ssd-verify-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;font-size:10px;font-weight:600;font-family:var(--ssd-font);letter-spacing:0.3px}
.ssd-verify-badge.photo{background:rgba(34,197,94,0.1);color:#22C55E;border:1px solid rgba(34,197,94,0.15)}
.ssd-verify-badge.phone{background:rgba(59,130,246,0.1);color:#3B82F6;border:1px solid rgba(59,130,246,0.15)}
.ssd-verify-badge.video{background:rgba(167,139,250,0.1);color:#A78BFA;border:1px solid rgba(167,139,250,0.15)}
.ssd-verify-badge.id{background:rgba(224,165,38,0.1);color:#E0A526;border:1px solid rgba(224,165,38,0.15)}

/* ─── Verification Modal ─────────────────────────────────────── */
.ssd-verify-modal{position:fixed;inset:0;z-index:400;background:rgba(6,6,11,0.92);backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity 0.3s}
.ssd-verify-modal.open{opacity:1;pointer-events:all}
.ssd-verify-modal .vm-card{max-width:480px;width:100%;max-height:90vh;overflow-y:auto;border-radius:20px;background:rgba(12,12,18,0.97);border:1px solid rgba(255,255,255,0.06);padding:28px}
.ssd-verify-modal .vm-title{font-family:var(--ssd-font);font-size:22px;font-weight:800;text-align:center;background:linear-gradient(135deg,#FC5C7C,#E0A526);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:6px}
.ssd-verify-modal .vm-sub{text-align:center;font-size:13px;color:rgba(255,255,255,0.5);margin-bottom:24px}
.ssd-verify-option{display:flex;align-items:center;gap:14px;padding:16px;border-radius:14px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);cursor:pointer;transition:all 0.2s;margin-bottom:10px}
.ssd-verify-option:hover{background:rgba(255,255,255,0.05);border-color:rgba(224,165,38,0.2)}
.ssd-verify-option .vo-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.ssd-verify-option .vo-icon.selfie{background:rgba(34,197,94,0.1)}
.ssd-verify-option .vo-icon.phone{background:rgba(59,130,246,0.1)}
.ssd-verify-option .vo-icon.video{background:rgba(167,139,250,0.1)}
.ssd-verify-option .vo-info{flex:1}
.ssd-verify-option .vo-name{font-weight:700;font-size:14px;color:#E8E8ED}
.ssd-verify-option .vo-desc{font-size:12px;color:rgba(255,255,255,0.4);margin-top:2px}
.ssd-verify-option .vo-status{font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px}
.vo-status.done{background:rgba(34,197,94,0.15);color:#22C55E}
.vo-status.pending{background:rgba(224,165,38,0.15);color:#E0A526}

/* ─── Match Expiry Timer ─────────────────────────────────────── */
.ssd-expiry-bar{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;background:rgba(252,92,124,0.06);border:1px solid rgba(252,92,124,0.1);margin-bottom:12px;font-family:var(--ssd-font)}
.ssd-expiry-bar .expiry-icon{font-size:16px}
.ssd-expiry-bar .expiry-text{flex:1;font-size:12px;color:rgba(255,255,255,0.6)}
.ssd-expiry-bar .expiry-time{font-size:13px;font-weight:700;color:#FC5C7C;font-variant-numeric:tabular-nums}
.ssd-expiry-bar.golden{background:rgba(224,165,38,0.08);border-color:rgba(224,165,38,0.15)}
.ssd-expiry-bar.golden .expiry-time{color:#E0A526}
.ssd-expiry-bar.expired{opacity:0.5}

/* ─── Progressive Reveal ─────────────────────────────────────── */
.ssd-reveal-stages{display:flex;gap:4px;padding:10px 0}
.ssd-reveal-stage{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,0.06);position:relative;overflow:hidden}
.ssd-reveal-stage.unlocked{background:linear-gradient(90deg,#FC5C7C,#E0A526)}
.ssd-reveal-stage.current{background:rgba(224,165,38,0.3);animation:revealPulse 2s infinite}
@keyframes revealPulse{0%,100%{opacity:0.5}50%{opacity:1}}
.ssd-reveal-lock{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:8px}
.ssd-blurred-photo{filter:blur(20px);transition:filter 0.8s ease}
.ssd-blurred-photo.revealed{filter:blur(0)}
.ssd-reveal-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(6,6,11,0.7);backdrop-filter:blur(8px);border-radius:inherit;z-index:2}
.ssd-reveal-overlay .ro-lock{font-size:36px;margin-bottom:8px}
.ssd-reveal-overlay .ro-text{font-size:13px;font-weight:600;color:rgba(255,255,255,0.7);text-align:center;max-width:200px}
.ssd-reveal-overlay .ro-action{margin-top:12px;padding:8px 20px;border-radius:8px;border:none;background:linear-gradient(135deg,#FC5C7C,#E0A526);color:#fff;font-weight:700;font-size:12px;cursor:pointer}

/* ─── Trust Score ────────────────────────────────────────────── */
.ssd-trust-score{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;font-size:11px;font-weight:700;font-family:var(--ssd-font)}
.ssd-trust-score.high{background:rgba(34,197,94,0.1);color:#22C55E}
.ssd-trust-score.medium{background:rgba(224,165,38,0.1);color:#E0A526}
.ssd-trust-score.low{background:rgba(252,92,124,0.1);color:#FC5C7C}
.ssd-trust-badges{display:flex;gap:4px;margin-top:4px}
.ssd-trust-badge{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06)}

/* ─── Voice Bio ──────────────────────────────────────────────── */
.ssd-voice-bio{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:rgba(167,139,250,0.06);border:1px solid rgba(167,139,250,0.1);cursor:pointer;transition:all 0.2s}
.ssd-voice-bio:hover{background:rgba(167,139,250,0.1)}
.ssd-voice-bio .vb-play{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#A78BFA,#7C5CFC);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;transition:transform 0.2s}
.ssd-voice-bio .vb-play:hover{transform:scale(1.1)}
.ssd-voice-bio .vb-waveform{flex:1;height:24px;display:flex;align-items:center;gap:2px}
.ssd-voice-bio .vb-bar{width:3px;border-radius:2px;background:rgba(167,139,250,0.4);transition:height 0.1s}
.ssd-voice-bio .vb-bar.active{background:#A78BFA}
.ssd-voice-bio .vb-duration{font-size:11px;color:rgba(255,255,255,0.4);font-variant-numeric:tabular-nums;flex-shrink:0}
.ssd-voice-record{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px}
.ssd-voice-record .vr-btn{width:64px;height:64px;border-radius:50%;border:3px solid #FC5C7C;background:transparent;color:#FC5C7C;font-size:24px;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center}
.ssd-voice-record .vr-btn.recording{background:rgba(252,92,124,0.2);animation:recordPulse 1.5s infinite}
@keyframes recordPulse{0%,100%{box-shadow:0 0 0 0 rgba(252,92,124,0.4)}50%{box-shadow:0 0 0 12px rgba(252,92,124,0)}}
.ssd-voice-record .vr-timer{font-size:18px;font-weight:700;color:#E8E8ED;font-variant-numeric:tabular-nums}
.ssd-voice-record .vr-prompt{font-size:13px;color:rgba(255,255,255,0.5);text-align:center;max-width:280px;line-height:1.5}

/* ─── Muhurat Matcher ────────────────────────────────────────── */
.ssd-muhurat-card{padding:14px;border-radius:14px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);margin-bottom:10px;cursor:pointer;transition:all 0.2s;font-family:var(--ssd-font)}
.ssd-muhurat-card:hover{background:rgba(255,255,255,0.04);border-color:rgba(224,165,38,0.15)}
.ssd-muhurat-card.best{border-color:rgba(34,197,94,0.2);background:rgba(34,197,94,0.03)}
.ssd-muhurat-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ssd-muhurat-date{font-weight:700;font-size:14px;color:#E8E8ED}
.ssd-muhurat-score{padding:4px 10px;border-radius:6px;font-size:12px;font-weight:700}
.ssd-muhurat-score.excellent{background:rgba(34,197,94,0.15);color:#22C55E}
.ssd-muhurat-score.good{background:rgba(224,165,38,0.15);color:#E0A526}
.ssd-muhurat-score.caution{background:rgba(252,92,124,0.15);color:#FC5C7C}
.ssd-muhurat-details{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:rgba(255,255,255,0.5);margin-bottom:8px}
.ssd-muhurat-details span{display:flex;align-items:center;gap:4px}
.ssd-muhurat-suggestion{font-size:12px;color:rgba(255,255,255,0.6);line-height:1.5;padding:8px 12px;border-radius:8px;background:rgba(255,255,255,0.02)}
.ssd-muhurat-warning{margin-top:8px;font-size:11px;color:#FC5C7C;display:flex;align-items:center;gap:4px}
.ssd-muhurat-accept{margin-top:10px;width:100%;padding:10px;border-radius:10px;border:none;background:linear-gradient(135deg,#22C55E,#16A34A);color:#fff;font-weight:700;font-size:13px;cursor:pointer;transition:opacity 0.2s}

/* ─── Compatibility Lab ──────────────────────────────────────── */
.ssd-lab-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:10px 0}
.ssd-lab-card{padding:16px;border-radius:14px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);cursor:pointer;transition:all 0.2s;text-align:center}
.ssd-lab-card:hover{background:rgba(255,255,255,0.05);transform:translateY(-2px)}
.ssd-lab-card.locked{opacity:0.4;cursor:not-allowed}
.ssd-lab-card .lab-icon{font-size:28px;margin-bottom:8px}
.ssd-lab-card .lab-title{font-size:13px;font-weight:700;color:#E8E8ED;margin-bottom:4px}
.ssd-lab-card .lab-lock{font-size:10px;color:rgba(255,255,255,0.3)}
.ssd-lab-timeline{display:flex;flex-direction:column;gap:0;padding:16px 0}
.ssd-lab-timeline-item{display:flex;gap:12px;position:relative;padding:12px 0;padding-left:24px}
.ssd-lab-timeline-item::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;background:rgba(255,255,255,0.06)}
.ssd-lab-timeline-item::after{content:attr(data-mood);position:absolute;left:0;top:14px;font-size:12px}
.ssd-lab-timeline-item .tl-month{font-size:12px;font-weight:700;color:#E0A526;min-width:70px}
.ssd-lab-timeline-item .tl-event{font-size:12px;color:rgba(255,255,255,0.6);flex:1}
.ssd-lab-timeline-item .tl-tip{font-size:11px;color:rgba(255,255,255,0.35);font-style:italic}

/* ─── Cosmic Counselor ───────────────────────────────────────── */
.ssd-counselor-card{padding:16px;border-radius:16px;background:linear-gradient(135deg,rgba(124,92,252,0.06),rgba(167,139,250,0.04));border:1px solid rgba(167,139,250,0.1);font-family:var(--ssd-font)}
.ssd-counselor-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ssd-counselor-header .ch-icon{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#7C5CFC,#A78BFA);display:flex;align-items:center;justify-content:center;font-size:18px}
.ssd-counselor-header .ch-title{font-weight:800;font-size:15px;color:#E8E8ED}
.ssd-counselor-header .ch-sub{font-size:11px;color:rgba(255,255,255,0.4)}
.ssd-counselor-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.ssd-counselor-metric{text-align:center;padding:10px 6px;border-radius:10px;background:rgba(255,255,255,0.03)}
.ssd-counselor-metric .cm-val{font-size:22px;font-weight:800;background:linear-gradient(135deg,#FC5C7C,#E0A526);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.ssd-counselor-metric .cm-label{font-size:10px;color:rgba(255,255,255,0.4);margin-top:2px}
.ssd-counselor-nudge{padding:12px;border-radius:10px;background:rgba(255,255,255,0.03);font-size:13px;color:rgba(255,255,255,0.7);line-height:1.5;border-left:3px solid #A78BFA}
.ssd-counselor-forecast{margin-top:12px;padding:10px 12px;border-radius:10px;background:rgba(224,165,38,0.04);border:1px solid rgba(224,165,38,0.08);font-size:12px;color:rgba(255,255,255,0.5);line-height:1.5}

/* ─── Emotion Sync ───────────────────────────────────────────── */
.ssd-mood-selector{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0}
.ssd-mood-btn{padding:8px 14px;border-radius:20px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);color:rgba(255,255,255,0.6);font-size:12px;font-weight:600;cursor:pointer;transition:all 0.2s;font-family:var(--ssd-font)}
.ssd-mood-btn:hover{background:rgba(255,255,255,0.06)}
.ssd-mood-btn.active{background:linear-gradient(135deg,rgba(252,92,124,0.15),rgba(224,165,38,0.1));border-color:rgba(252,92,124,0.3);color:#E8E8ED}
.ssd-sync-indicator{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,0.03);margin-top:10px}
.ssd-sync-indicator .si-dots{display:flex;gap:3px}
.ssd-sync-indicator .si-dot{width:8px;height:8px;border-radius:50%}
.ssd-sync-indicator .si-dot.synced{background:#22C55E;animation:syncPulse 2s infinite}
.ssd-sync-indicator .si-dot.partial{background:#E0A526}
.ssd-sync-indicator .si-dot.off{background:rgba(255,255,255,0.1)}
@keyframes syncPulse{0%,100%{opacity:0.6}50%{opacity:1}}
.ssd-sync-indicator .si-text{font-size:12px;color:rgba(255,255,255,0.6);flex:1}
.ssd-sync-indicator .si-score{font-size:14px;font-weight:800;color:#22C55E}

/* ─── Ancestor Intelligence ──────────────────────────────────── */
.ssd-ancestor-card{padding:16px;border-radius:16px;background:linear-gradient(135deg,rgba(224,165,38,0.04),rgba(168,85,247,0.03));border:1px solid rgba(224,165,38,0.08);font-family:var(--ssd-font);margin-bottom:12px}
.ssd-ancestor-pattern{padding:12px;border-radius:10px;background:rgba(255,255,255,0.02);margin-bottom:8px;border-left:3px solid}
.ssd-ancestor-pattern.high{border-left-color:#FC5C7C}
.ssd-ancestor-pattern.medium{border-left-color:#E0A526}
.ssd-ancestor-pattern.low{border-left-color:#22C55E}
.ssd-ancestor-pattern .ap-name{font-weight:700;font-size:13px;color:#E8E8ED;margin-bottom:4px}
.ssd-ancestor-pattern .ap-desc{font-size:12px;color:rgba(255,255,255,0.5);line-height:1.5}

/* ─── Family Layer ───────────────────────────────────────────── */
.ssd-family-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.ssd-family-card{padding:14px;border-radius:14px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);text-align:center}
.ssd-family-card .fc-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#FC5C7C,#E0A526);display:flex;align-items:center;justify-content:center;font-size:20px;margin:0 auto 8px}
.ssd-family-card .fc-name{font-weight:700;font-size:13px;color:#E8E8ED}
.ssd-family-card .fc-role{font-size:11px;color:rgba(255,255,255,0.4);margin-top:2px}
.ssd-family-card .fc-reaction{margin-top:8px;font-size:18px}
.ssd-family-invite-btn{width:100%;padding:12px;border-radius:12px;border:2px dashed rgba(255,255,255,0.08);background:transparent;color:rgba(255,255,255,0.4);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;font-family:var(--ssd-font)}
.ssd-family-invite-btn:hover{border-color:rgba(224,165,38,0.2);color:rgba(255,255,255,0.6)}

/* ─── Cosmic Map ─────────────────────────────────────────────── */
.ssd-cosmic-map-wrap{position:relative;width:100%;height:400px;border-radius:16px;overflow:hidden;background:rgba(6,6,11,0.95);border:1px solid rgba(255,255,255,0.06)}
.ssd-cosmic-map-canvas{width:100%;height:100%}
.ssd-map-stats{position:absolute;top:12px;left:12px;display:flex;gap:8px;flex-wrap:wrap}
.ssd-map-stat{padding:6px 12px;border-radius:8px;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);font-size:11px;font-weight:600;color:rgba(255,255,255,0.7);font-family:var(--ssd-font)}
.ssd-map-stat .ms-val{color:#E0A526;font-weight:800}
.ssd-map-legend{position:absolute;bottom:12px;right:12px;display:flex;gap:10px;font-size:10px;color:rgba(255,255,255,0.4);font-family:var(--ssd-font)}
.ssd-map-legend span::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}
.ssd-map-legend .ml-match::before{background:#FC5C7C}
.ssd-map-legend .ml-connect::before{background:#22C55E}
.ssd-map-legend .ml-msg::before{background:#E0A526}

/* ─── Destiny Quest ──────────────────────────────────────────── */
.ssd-quest-wrap{padding:20px}
.ssd-quest-progress{display:flex;gap:4px;margin-bottom:20px}
.ssd-quest-dot{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,0.06);transition:background 0.3s}
.ssd-quest-dot.done{background:linear-gradient(90deg,#FC5C7C,#E0A526)}
.ssd-quest-dot.current{background:rgba(224,165,38,0.4);animation:revealPulse 2s infinite}
.ssd-quest-stage{text-align:center;padding:20px}
.ssd-quest-stage .qs-icon{font-size:48px;margin-bottom:12px}
.ssd-quest-stage .qs-title{font-size:20px;font-weight:800;color:#E8E8ED;font-family:var(--ssd-font);margin-bottom:6px}
.ssd-quest-stage .qs-desc{font-size:13px;color:rgba(255,255,255,0.5);margin-bottom:20px}
.ssd-quest-constellation{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ssd-quest-constellation .qc-item{padding:20px 10px;border-radius:14px;border:2px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);cursor:pointer;text-align:center;transition:all 0.2s}
.ssd-quest-constellation .qc-item:hover{border-color:rgba(224,165,38,0.2);transform:translateY(-2px)}
.ssd-quest-constellation .qc-item.selected{border-color:#E0A526;background:rgba(224,165,38,0.06)}
.ssd-quest-constellation .qc-symbol{font-size:32px;margin-bottom:6px}
.ssd-quest-constellation .qc-name{font-size:12px;font-weight:700;color:#E8E8ED}
.ssd-quest-reward{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;background:rgba(34,197,94,0.06);border:1px solid rgba(34,197,94,0.1);margin-top:16px;font-size:12px;color:#22C55E;font-weight:600}

/* ─── Feature Tab Panels ─────────────────────────────────────── */
.ssd-feature-panel{display:none;padding:16px;animation:ssdFadeIn 0.3s ease}
.ssd-feature-panel.active{display:block}
@keyframes ssdFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.ssd-section-title{font-family:var(--ssd-font);font-size:17px;font-weight:800;color:#E8E8ED;margin-bottom:4px}
.ssd-section-sub{font-size:12px;color:rgba(255,255,255,0.4);margin-bottom:16px}
.ssd-feature-tabs{display:flex;gap:6px;overflow-x:auto;padding:8px 0;margin-bottom:16px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ssd-feature-tabs::-webkit-scrollbar{display:none}
.ssd-feature-tab{padding:8px 16px;border-radius:20px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.03);color:rgba(255,255,255,0.5);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all 0.2s;font-family:var(--ssd-font)}
.ssd-feature-tab:hover{background:rgba(255,255,255,0.06)}
.ssd-feature-tab.active{background:linear-gradient(135deg,rgba(252,92,124,0.15),rgba(224,165,38,0.1));border-color:rgba(252,92,124,0.2);color:#E8E8ED}

/* ─── Video Call UI ──────────────────────────────────────────── */
.ssd-video-overlay{position:fixed;inset:0;z-index:500;background:#06060B;display:none;flex-direction:column}
.ssd-video-overlay.active{display:flex}
.ssd-video-main{flex:1;position:relative;background:#0a0a12}
.ssd-video-main video{width:100%;height:100%;object-fit:cover}
.ssd-video-self{position:absolute;top:16px;right:16px;width:120px;height:160px;border-radius:12px;overflow:hidden;border:2px solid rgba(255,255,255,0.1);background:#1a1a2e}
.ssd-video-self video{width:100%;height:100%;object-fit:cover}
.ssd-video-controls{display:flex;align-items:center;justify-content:center;gap:16px;padding:20px;background:rgba(6,6,11,0.9);backdrop-filter:blur(10px)}
.ssd-video-btn{width:52px;height:52px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;transition:all 0.2s}
.ssd-video-btn.mute{background:rgba(255,255,255,0.1);color:#fff}
.ssd-video-btn.cam{background:rgba(255,255,255,0.1);color:#fff}
.ssd-video-btn.end{background:#FC5C7C;color:#fff;width:60px;height:60px;font-size:24px}
.ssd-video-btn:hover{transform:scale(1.08)}
.ssd-video-info{position:absolute;top:16px;left:16px;display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:12px;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px)}
.ssd-video-info .vi-name{font-weight:700;font-size:14px;color:#E8E8ED}
.ssd-video-info .vi-timer{font-size:12px;color:rgba(255,255,255,0.5);font-variant-numeric:tabular-nums}

/* ─── Responsive ─────────────────────────────────────────────── */
@media(max-width:600px){
  .ssd-lab-grid{grid-template-columns:1fr}
  .ssd-counselor-metrics{grid-template-columns:repeat(3,1fr)}
  .ssd-quest-constellation{grid-template-columns:repeat(2,1fr)}
  .ssd-family-grid{grid-template-columns:repeat(2,1fr)}
  .ssd-video-self{width:80px;height:110px}
}