/* SDC Match - CLEAN LIGHT demo theme. Self-contained, no external fonts/CDNs.
 * Palette: SDC gold/amber + magenta/pink + purple accents on a light surface.
 * Designed for a CEO demo: airy, readable, WCAG-AA contrast, soft shadows. */
:root{
  --bg:#F6F7FB;            /* light page background */
  --bg-2:#FFFFFF;          /* card inner / lighter */
  --panel:#F1F2F8;         /* subtle panel fill */
  --panel-2:#FBFAFF;       /* faint tinted panel */
  --card:#FFFFFF;          /* white card surface */
  --card-hover:#FCFBFF;
  --line:#E4E6EF;          /* hairline borders */
  --line-soft:#ECEEF5;
  --text:#1A1A2E;          /* near-black ink */
  --text-2:#3a3d52;
  --muted:#646b82;         /* secondary text (AA on white) */
  --muted-2:#828aa3;       /* tertiary text */
  --accent:#D81B7E;        /* SDC magenta/pink */
  --accent-2:#8B3FD6;      /* purple */
  --accent-3:#0E9CC4;      /* teal (links/co-presence) */
  --gold:#C8881C;          /* SDC gold/amber (AA on white) */
  --gold-soft:#F5B942;     /* brighter gold for fills */
  --green:#0E9E6E;         /* online / positive (AA on white) */
  --strong:#0E9E6E;        /* strong band */
  --good:#2563EB;          /* good band */
  --radius:16px;
  --radius-sm:11px;
  --shadow:0 14px 38px rgba(26,26,46,.10);
  --shadow-sm:0 4px 14px rgba(26,26,46,.07);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(216,27,126,.07), transparent 60%),
    radial-gradient(1000px 560px at 92% 2%, rgba(139,63,214,.06), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:var(--accent-3);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px 80px}

/* ---------- Two-column layout: left sidebar (controls) + main content ---------- */
.layout{display:grid;grid-template-columns:288px minmax(0,1fr);gap:26px;align-items:start;padding-top:26px}
.sidebar{
  position:sticky;top:78px;align-self:start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:16px;display:flex;flex-direction:column;gap:18px;
}
.sidebar .side-block{display:flex;flex-direction:column;gap:10px}
.sidebar .side-title{font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.sidebar select{
  background:var(--card);color:var(--text);border:1px solid var(--line);
  border-radius:10px;padding:9px 11px;font-size:13px;width:100%;max-width:100%;
}
.sidebar select:focus{outline:none;border-color:var(--accent-2)}
.sidebar .side-foot{margin-top:2px;padding-top:14px;border-top:1px solid var(--line)}
.side-settings{display:inline-flex;width:100%;justify-content:center}
.content{min-width:0}
.content .section:first-child{margin-top:0}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.82));
  border-bottom:1px solid var(--line);
}
.topbar-inner{max-width:1180px;margin:0 auto;padding:13px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.wordmark{display:flex;align-items:center;gap:11px;font-weight:800;font-size:22px;letter-spacing:.2px}
.wordmark .brand-logo{height:40px;width:auto;display:block}
/* fallback heart tile (shown only if the logo image fails to load) */
.wordmark .heart{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 4px 14px rgba(216,27,126,.35);font-size:17px;color:#fff;
}
.wordmark .mk-sdc{color:var(--text)}
.wordmark .mk-match{background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.tagline{color:var(--muted);font-size:13.5px;margin-left:2px}
.topbar-spacer{flex:1}
.settings-link{
  font-size:13px;font-weight:600;color:var(--accent-2);border:1px solid var(--line);
  padding:7px 13px;border-radius:999px;background:var(--card);white-space:nowrap;
  transition:border-color .12s,background .12s,color .12s;
}
.settings-link:hover{border-color:var(--accent-2);background:var(--panel-2);text-decoration:none}
.engine-badge{
  font-size:11.5px;color:var(--muted);border:1px solid var(--line);
  padding:5px 11px;border-radius:999px;background:var(--card);white-space:nowrap;
}
.engine-badge b{color:var(--green)}

/* ---------- Section scaffolding ---------- */
.section{margin-top:30px}
/* Clear, intentional separation between "Your Profile" and "Your Matches":
   a hairline divider, extra breathing room, and a very faint zone tint so the
   matches area reads as its own panel. (No engine/markup change - pure CSS.) */
#matches-section{
  margin-top:38px;padding:26px 22px 8px;border-top:2px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(139,63,214,.035), rgba(255,255,255,0) 70%);
}
#matches-section > .section-head{margin-top:0}
@media (max-width:560px){ #matches-section{padding:20px 14px 6px} }
.section-head{display:flex;align-items:baseline;gap:12px;margin:0 0 14px;flex-wrap:wrap}
.section-head h2{font-size:17px;margin:0;letter-spacing:.2px;color:var(--text)}
.section-head .hint{color:var(--muted);font-size:13px}
.eyebrow{color:var(--accent);font-weight:700;font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase}

/* ---------- Scenario switcher ---------- */
.scenarios{display:grid;grid-template-columns:1fr;gap:10px}
.scn{
  text-align:left;cursor:pointer;color:var(--text);
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 15px;transition:transform .12s ease,border-color .12s ease,background .12s ease,box-shadow .12s ease;
  box-shadow:var(--shadow-sm);
}
.scn:hover{transform:translateY(-2px);border-color:var(--accent-2);background:var(--card-hover)}
.scn.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 10px 26px rgba(216,27,126,.16);background:var(--panel-2)}
.scn .scn-emoji{font-size:20px}
.scn .scn-title{font-weight:700;margin:7px 0 3px;font-size:14.5px;color:var(--text)}
.scn .scn-sub{color:var(--muted);font-size:12px;line-height:1.4}
.scn .scn-emoji{font-size:18px}

/* ---------- Avatar (synthetic portrait SVG) ---------- */
.avatar{
  border-radius:50%;display:grid;place-items:center;flex:none;overflow:hidden;
  box-shadow:inset 0 0 0 2px rgba(26,26,46,.06), var(--shadow-sm);background:#eef0f7;position:relative;
}
.avatar svg{display:block;width:100%;height:100%}
/* real profile photo fills the same circular slot as the SVG portrait */
.avatar img.av-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
/* wrapper holding the SVG portrait after a photo fails to load (keeps online dot) */
.avatar .av-fallback{display:block;width:100%;height:100%}
.avatar.lg{width:72px;height:72px}
.avatar.md{width:52px;height:52px}
.avatar.sm{width:40px;height:40px}
/* online dot */
.av-online{position:absolute;right:1px;bottom:1px;width:12px;height:12px;border-radius:50%;background:var(--green);border:2px solid var(--card);box-shadow:0 0 0 1px rgba(14,158,110,.3)}
.avatar.sm .av-online{width:10px;height:10px}

/* ---------- Viewer card ---------- */
.viewer-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}
.card{
  background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
}
.viewer-card{padding:20px}
.viewer-top{display:flex;gap:16px;align-items:flex-start}
.viewer-id h3{margin:0 0 2px;font-size:20px;color:var(--text)}
.viewer-id .vmeta{color:var(--muted);font-size:13.5px}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.chip{
  font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel);color:var(--text-2);white-space:nowrap;
}
.chip.accent{border-color:rgba(216,27,126,.35);color:#a3155f;background:rgba(216,27,126,.07)}
.chip.violet{border-color:rgba(139,63,214,.35);color:#6b29ab;background:rgba(139,63,214,.07)}
.chip.cyan{border-color:rgba(14,156,196,.35);color:#0a6f8c;background:rgba(14,156,196,.07)}
.chip.lifestyle{border-color:rgba(216,27,126,.30);color:#a3155f;background:rgba(216,27,126,.06);font-weight:600}
.lifestyle-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.kv-label{color:var(--muted-2);font-size:13px;margin-top:11px}
.bio{margin-top:13px;color:var(--text-2);font-size:13.5px;font-style:italic;border-left:2px solid var(--accent);padding-left:11px}
.kv{display:flex;gap:8px;font-size:13px;margin-top:9px}
.kv .k{color:var(--muted-2);min-width:96px}
.kv .v{color:var(--text)}

/* ---------- Readiness meter ---------- */
.readiness{padding:20px}
.readiness h3{margin:0 0 4px;font-size:15px;color:var(--text)}
.readiness .sub{color:var(--muted);font-size:12.5px;margin-bottom:14px}
.meter{height:12px;border-radius:999px;background:#EDEEF5;border:1px solid var(--line);overflow:hidden}
.meter > i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .5s cubic-bezier(.2,.7,.2,1)}
.meter-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:9px}
.meter-pct{font-size:24px;font-weight:800;color:var(--text)}
.meter-label{font-size:12px;color:var(--muted)}
.suggest{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.suggest .s{display:flex;align-items:center;gap:10px;font-size:13px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.suggest .s .gain{margin-left:auto;color:var(--green);font-weight:700;font-size:12.5px;white-space:nowrap}
.suggest .s .tick{color:var(--accent-2)}
.suggest .allset{color:var(--green);font-size:13px;display:flex;align-items:center;gap:8px}

/* ---------- Daily top picks ---------- */
.picks-strip{display:flex;gap:13px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x mandatory}
.pick{
  scroll-snap-align:start;flex:0 0 210px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:14px;cursor:pointer;transition:transform .12s,border-color .12s,box-shadow .12s;position:relative;box-shadow:var(--shadow-sm);
}
.pick:hover{transform:translateY(-2px);border-color:var(--accent-2)}
/* daily-pick pairing: you (left) ↔ score (middle) ↔ candidate (right) */
.pick-pair{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:4px}
.pick .pscore{font-weight:800;font-size:16px;line-height:1;text-align:center}
.pick .pname{font-weight:700;font-size:14px;margin:9px 0 2px;color:var(--text)}
.pick .pmeta{color:var(--muted);font-size:12px}
.pick .preason{color:var(--text-2);font-size:12px;margin-top:9px;line-height:1.4}
.pick .cop-mini{margin-top:8px}

/* ---------- Ranked matches grid ---------- */
.fairness{color:var(--muted);font-size:12.5px;background:var(--panel);border:1px dashed var(--line);border-radius:10px;padding:9px 12px;margin-bottom:14px}
.matches-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.match{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px;position:relative;transition:border-color .12s,transform .12s,box-shadow .12s;box-shadow:var(--shadow-sm);
}
.match:hover{border-color:var(--accent-2)}
.match.featured{border-color:rgba(200,136,28,.55);box-shadow:0 0 0 1px rgba(200,136,28,.22),var(--shadow-sm)}
.match-top{display:flex;gap:13px;align-items:flex-start}
/* match pairing header: you (left) ↔ score ring (middle) ↔ candidate (right) */
.match-pair{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:13px;position:relative}
.match-pair:after{content:"";position:absolute;left:18px;right:18px;top:26px;height:2px;background:linear-gradient(90deg,rgba(216,27,126,.18),rgba(139,63,214,.18));z-index:0}
.match-pair > *{position:relative;z-index:1}
.pair-side{display:flex;flex-direction:column;align-items:center;gap:5px}
.pair-side .avatar{background:#eef0f7}
.pair-cap{font-size:11px;color:var(--muted);font-weight:600;max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.pair-mid{display:flex;align-items:center;justify-content:center;padding:0 4px}
.pick-pair .pair-side{gap:4px}
.pick-pair .pair-cap{font-size:10.5px;max-width:64px}
.match-id{flex:1;min-width:0}
.match-id .mname{font-weight:700;font-size:15.5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;color:var(--text)}
.match-id .mmeta{color:var(--muted);font-size:12.5px;margin-top:2px}
.tag-featured{font-size:10px;font-weight:800;letter-spacing:.5px;color:#3d2a05;background:linear-gradient(90deg,var(--gold-soft),#ffd479);padding:2px 7px;border-radius:6px;text-transform:uppercase}

/* score ring */
.ring{position:relative;width:62px;height:62px;flex:none}
.ring svg{transform:rotate(-90deg)}
.ring .ring-num{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:16px}
.band-pill{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:2px 8px;border-radius:999px}
.band-strong{color:#fff;background:var(--strong)}
.band-good{color:#fff;background:var(--good)}

.dist{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted)}
.copres{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.cop{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  padding:4px 9px;border-radius:8px;border:1px solid transparent;
}
.cop.party{background:rgba(216,27,126,.09);border-color:rgba(216,27,126,.35);color:#a3155f}
.cop.travel{background:rgba(14,156,196,.08);border-color:rgba(14,156,196,.35);color:#0a6f8c}
.cop.webinar{background:rgba(139,63,214,.08);border-color:rgba(139,63,214,.35);color:#6b29ab}
.copbadge-inline{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#0a6f8c;background:rgba(14,156,196,.09);border:1px solid rgba(14,156,196,.3);padding:1px 7px;border-radius:6px}

.reasons{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:7px}
.reasons li{display:flex;gap:9px;font-size:13px;color:var(--text-2)}
.reasons li .dot{color:var(--accent);flex:none;line-height:1.4}
.match-foot{display:flex;align-items:center;gap:12px;margin-top:13px;flex-wrap:wrap}
.trust{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.trust .shield{color:var(--green)}
.receipts-btn{
  margin-left:auto;font-size:12px;color:var(--accent-2);background:transparent;border:1px solid var(--line);
  border-radius:8px;padding:5px 11px;cursor:pointer;transition:border-color .12s,color .12s,background .12s;
}
.receipts-btn:hover{border-color:var(--accent-2);background:var(--panel-2)}
.receipts{margin-top:13px;border-top:1px dashed var(--line);padding-top:12px;display:none}
.receipts.open{display:block}
.receipts h5{margin:0 0 9px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.factor{margin-bottom:9px}
.factor-row{display:flex;justify-content:space-between;font-size:12px;margin-bottom:3px}
.factor-row .fname{color:var(--text)}
.factor-row .fcontrib{color:var(--muted)}
.factor-row .fcontrib b{color:var(--text)}
.fbar{height:6px;border-radius:999px;background:#EDEEF5;border:1px solid var(--line);overflow:hidden}
.fbar > i{display:block;height:100%;background:linear-gradient(90deg,var(--accent-2),var(--accent))}
.factor .fdetail{color:var(--muted-2);font-size:11px;margin-top:3px}
.receipts .math-note{font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.5}
.receipts .math-note code{background:var(--panel);padding:1px 6px;border-radius:5px;color:var(--accent-2)}

/* ---------- Generic buttons (used on settings too) ---------- */
.btn{cursor:pointer;border-radius:10px;padding:9px 15px;font-size:13px;font-weight:600;border:1px solid var(--line);background:var(--card);color:var(--text);transition:border-color .12s,background .12s}
.btn:hover{border-color:var(--accent-2)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent;color:#fff}
.btn.primary:hover{filter:brightness(1.05)}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(14,158,110,.6);animation:pulse 1.8s infinite;margin-right:6px;vertical-align:middle}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(14,158,110,.4)}70%{box-shadow:0 0 0 8px rgba(14,158,110,0)}100%{box-shadow:0 0 0 0 rgba(14,158,110,0)}}

/* range sliders (used on settings page) */
input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:999px;background:#E4E6EF;border:1px solid var(--line);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));cursor:pointer;box-shadow:0 2px 8px rgba(26,26,46,.2);border:2px solid #fff}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border:2px solid #fff;border-radius:50%;background:var(--accent);cursor:pointer}

/* ---------- Notification preview ---------- */
.notif-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.notif{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
.notif .ntype{font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin-bottom:11px;display:flex;align-items:center;gap:7px}
/* phone push */
.push-bubble{background:linear-gradient(180deg,#FBFAFF,#F4F2FB);border:1px solid var(--line);border-radius:16px;padding:12px 13px;box-shadow:var(--shadow-sm)}
.push-app{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);margin-bottom:7px}
.push-app .glyph{width:18px;height:18px;border-radius:5px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:grid;place-items:center;font-size:10px;color:#fff}
.push-title{font-weight:700;font-size:13.5px;color:var(--text)}
.push-body{font-size:12.5px;color:var(--text-2);margin-top:2px}
.push-time{font-size:10.5px;color:var(--muted-2);margin-top:7px}
/* email */
.email-head{font-size:12px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:9px}
.email-head .from{color:var(--text);font-weight:600}
.email-subj{font-weight:700;font-size:14px;margin-bottom:5px;color:var(--text)}
.email-prev{font-size:12.5px;color:var(--text-2)}
.email-cta{margin-top:auto;padding-top:12px}
.email-cta span{display:inline-block;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-size:12px;font-weight:600;padding:7px 13px;border-radius:8px}
/* in-app toast */
.toast{background:linear-gradient(135deg,rgba(216,27,126,.08),rgba(139,63,214,.07));border:1px solid rgba(216,27,126,.28);border-radius:13px;padding:13px;display:flex;gap:11px;align-items:center}
.toast .ttext{font-size:13px;color:var(--text)}
.toast .ttext b{display:block;margin-bottom:2px}
.toast .ttext small{color:var(--muted)}

/* ---------- Live-data notice banner ---------- */
.data-notice{font-size:12.5px;border-radius:10px;padding:9px 13px;margin-bottom:14px;display:flex;align-items:center;gap:9px}
.data-notice.live{background:rgba(14,156,196,.08);border:1px solid rgba(14,156,196,.3);color:#0a6f8c}
.data-notice.warn{background:rgba(200,136,28,.10);border:1px solid rgba(200,136,28,.4);color:#8a5e14}
.data-notice .ndot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}

/* ---------- Footer ---------- */
.foot{margin-top:42px;border-top:1px solid var(--line);padding-top:20px;color:var(--muted);font-size:12.5px;line-height:1.6}
.foot .pipeline{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.foot .pstep{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-size:11.5px;color:var(--text)}
.foot .arrow{color:var(--accent-2)}
.foot .credit{margin-top:10px;font-size:11.5px;color:var(--muted);opacity:.85}
.foot .credit a{color:inherit;text-decoration:underline}

.empty{color:var(--muted);font-size:13.5px;background:var(--panel);border:1px dashed var(--line);border-radius:12px;padding:18px;text-align:center}

/* ====================================================================
 *  SETTINGS PAGE
 * ==================================================================== */
.settings-hero{margin-top:26px;margin-bottom:6px}
.settings-hero h1{font-size:24px;margin:0 0 6px;color:var(--text)}
.settings-hero p{color:var(--muted);font-size:14px;margin:0;max-width:760px}
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--accent-2);margin-bottom:4px}
.back-link:hover{text-decoration:underline}
.set-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:22px;margin-top:18px}
.set-card > h2{font-size:16px;margin:0 0 4px;color:var(--text)}
.set-card > .desc{color:var(--muted);font-size:13px;margin:0 0 16px;max-width:720px}
.weights-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 26px;margin-top:6px}
.weight{display:flex;flex-direction:column;gap:5px}
.weight .wtop{display:flex;justify-content:space-between;align-items:baseline;font-size:13px}
.weight .wname{color:var(--text)}
.weight .wval{font-weight:800;color:var(--accent-2);font-variant-numeric:tabular-nums}
.weight.copmax .wval{color:var(--gold)}
.weights-actions{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.weights-note{color:var(--muted);font-size:12px;margin-left:auto}
.saved-flash{color:var(--green);font-size:12.5px;font-weight:600;opacity:0;transition:opacity .2s}
.saved-flash.show{opacity:1}

/* radio / toggle rows */
.opt-row{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.opt{display:flex;gap:11px;align-items:flex-start;padding:13px 14px;border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:border-color .12s,background .12s}
.opt:hover{border-color:var(--accent-2);background:var(--panel-2)}
.opt.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:var(--panel-2)}
.opt input{margin-top:3px;accent-color:var(--accent)}
.opt .opt-title{font-weight:600;font-size:13.5px;color:var(--text)}
.opt .opt-sub{color:var(--muted);font-size:12.5px;margin-top:2px}
.field-row{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.field-row label{font-size:12.5px;color:var(--muted)}
.field-row input[type=text],.field-row input[type=number],.set-card select{
  background:var(--bg-2);color:var(--text);border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;font-size:13.5px;max-width:480px;
}
.field-row input:focus,.set-card select:focus{outline:none;border-color:var(--accent-2)}
.field-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.muted-inline{color:var(--muted-2);font-size:12px}

/* collapsible */
.collapse-head{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.collapse-head .chev{margin-left:auto;color:var(--muted);transition:transform .15s}
.collapse-head.open .chev{transform:rotate(180deg)}
.collapse-body{display:none;margin-top:14px}
.collapse-body.open{display:block}
.collapse-body h3{font-size:13.5px;color:var(--text);margin:16px 0 6px}
.collapse-body h3:first-child{margin-top:0}
.collapse-body p,.collapse-body li{font-size:13px;color:var(--text-2);line-height:1.6}
.collapse-body ol,.collapse-body ul{margin:6px 0;padding-left:22px}
.collapse-body code{background:var(--panel);padding:1px 6px;border-radius:5px;color:var(--accent-2);font-size:12px}
.collapse-body .codeblock{display:block;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:8px 0;color:var(--text);white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.tbl{width:100%;border-collapse:collapse;margin:8px 0;font-size:12.5px}
.tbl th,.tbl td{text-align:left;border:1px solid var(--line);padding:7px 10px;vertical-align:top}
.tbl th{background:var(--panel);color:var(--text);font-weight:600}
.tbl td{color:var(--text-2)}
.tbl code{background:var(--panel);padding:1px 5px;border-radius:4px;color:var(--accent-2)}

/* ---------- Responsive ---------- */
@media (max-width:920px){
  .viewer-grid{grid-template-columns:1fr}
  .matches-grid{grid-template-columns:1fr}
  .notif-grid{grid-template-columns:1fr}
  .weights-grid{grid-template-columns:1fr}
  .field-grid{grid-template-columns:1fr}
}
/* Sidebar stacks on top of the content on narrow screens. */
@media (max-width:860px){
  .layout{grid-template-columns:1fr;gap:20px;padding-top:20px}
  .sidebar{position:static;top:auto}
  .sidebar .scenarios{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .sidebar .scenarios{grid-template-columns:1fr}
  .tagline{display:none}
}

/* ====================================================================
 *  TYPE COLORS (match SDC card colors) — frames, rings, legend
 *  single_female PINK · single_male BLUE · couple_fm PURPLE · trans TEAL
 * ==================================================================== */
:root{
  --t-female:#E84393;   /* single woman  — pink   */
  --t-male:#2E86DE;     /* single man    — blue   */
  --t-couple:#8B3FD6;   /* couple (F/M)  — purple */
  --t-trans:#16A085;    /* transgender   — teal   */
  --t-other:#828aa3;    /* neutral fallback        */
}
/* Per-type accent: each typed element exposes its color as --tc. */
.t-female{--tc:var(--t-female)}
.t-male{--tc:var(--t-male)}
.t-couple{--tc:var(--t-couple)}
.t-trans{--tc:var(--t-trans)}
.t-other{--tc:var(--t-other)}

/* Colored card frames: a clear left bar + tinted border in the type color.
   The match card uses the CANDIDATE color; the viewer card uses the viewer's. */
.match.t-female,.match.t-male,.match.t-couple,.match.t-trans,.match.t-other,
.viewer-card.t-female,.viewer-card.t-male,.viewer-card.t-couple,.viewer-card.t-trans,.viewer-card.t-other,
.pick.t-female,.pick.t-male,.pick.t-couple,.pick.t-trans,.pick.t-other{
  border-color:var(--tc);
  border-left-width:4px;
  border-left-color:var(--tc);
}
/* Keep the gold "featured" emphasis as an outer ring without losing the type
   frame (border stays the candidate's color; featured adds a soft gold glow). */
.match.featured{box-shadow:0 0 0 1px rgba(200,136,28,.30),var(--shadow-sm)}
/* On hover we keep the type color rather than overriding to purple. */
.match.t-female:hover,.match.t-male:hover,.match.t-couple:hover,.match.t-trans:hover,.match.t-other:hover,
.pick.t-female:hover,.pick.t-male:hover,.pick.t-couple:hover,.pick.t-trans:hover,.pick.t-other:hover{
  border-color:var(--tc);
}

/* Colored avatar rings (3px) in the pairing — clearly shows who is who. */
.avatar.av-ring{box-shadow:inset 0 0 0 2px rgba(26,26,46,.06), 0 0 0 3px var(--tc), var(--shadow-sm)}

/* ---------- Sidebar legend (compact, muted) ---------- */
.legend{display:flex;flex-direction:column;gap:7px}
.legend .legend-title{font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.legend .legend-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.legend .swatch{width:12px;height:12px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.legend .swatch.t-female{background:var(--t-female)}
.legend .swatch.t-male{background:var(--t-male)}
.legend .swatch.t-couple{background:var(--t-couple)}
.legend .swatch.t-trans{background:var(--t-trans)}

/* ====================================================================
 *  INTERACTION PANEL (demo-only) + transient toast
 * ==================================================================== */
.actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.act-btn{
  cursor:pointer;font-size:12px;font-weight:600;line-height:1;
  padding:7px 11px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--text-2);
  transition:border-color .12s,background .12s,color .12s,transform .08s;
}
.act-btn:hover{border-color:var(--accent-2);background:var(--panel-2);color:var(--accent-2)}
.act-btn:active{transform:translateY(1px)}
/* primary "Message" stands out in the SDC accent gradient */
.act-btn.primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border-color:transparent;color:#fff;
}
.act-btn.primary:hover{filter:brightness(1.05);color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
/* compact variant on daily-pick cards */
.actions-compact{gap:5px;margin-top:9px}
.actions-compact .act-btn{font-size:11px;padding:5px 8px}

/* ---- Learn-from-behavior UI -----------------------------------------------
   Low-emphasis "Not interested" soft-hide, the explainable affinity tag, and
   the Undo toast. All neutral/secondary so compatibility stays the hero. */
.not-interested-btn{
  font-size:12px;color:var(--muted);background:transparent;border:1px solid transparent;
  border-radius:8px;padding:5px 9px;cursor:pointer;line-height:1;
  transition:color .12s,border-color .12s,background .12s;
}
.not-interested-btn:hover{color:var(--accent);border-color:var(--line);background:var(--panel-2)}
/* Subtle "why" tag shown only when behavior actually boosted a card. */
.affinity-tag{
  display:inline-flex;align-items:center;gap:6px;margin-top:11px;
  font-size:11.5px;font-weight:600;color:var(--accent-2);
  background:rgba(139,63,214,.08);border:1px solid rgba(139,63,214,.22);
  border-radius:999px;padding:4px 10px;
}
.affinity-tag .aff-spark{font-size:11px;line-height:1}
/* Reply-likelihood chip: small, muted, low-emphasis. Shown only on highly
   responsive candidates (reply-likelihood >= ~0.7). Never shown for low. */
.reply-chip{
  display:inline-flex;align-items:center;gap:5px;margin-top:9px;
  font-size:11px;font-weight:600;color:#0a6f8c;
  background:rgba(14,156,196,.07);border:1px solid rgba(14,156,196,.22);
  border-radius:999px;padding:3px 9px;
}
.reply-chip .reply-emoji{font-size:11px;line-height:1}
/* Optional subtle exposure tag for a fairness-lifted newer / less-seen member. */
.lessseen-tag{
  display:inline-flex;align-items:center;gap:5px;margin-top:9px;
  font-size:10.5px;font-weight:600;color:var(--muted-2,#7a8194);
  background:rgba(122,129,148,.07);border:1px solid rgba(122,129,148,.2);
  border-radius:999px;padding:3px 9px;letter-spacing:.2px;
}
.lessseen-tag .ls-spark{font-size:10px;line-height:1;opacity:.8}
/* Undo toast: same shell as the action toast, with an inline Undo button. */
.action-toast.with-undo{display:flex;align-items:center;gap:12px}
.action-toast .toast-msg{flex:1}
.action-toast .toast-undo{
  flex:none;cursor:pointer;font-size:12px;font-weight:700;color:var(--accent-2);
  background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:5px 12px;transition:border-color .12s,background .12s;
}
.action-toast .toast-undo:hover{border-color:var(--accent-2);background:var(--panel-2)}

/* Trust line inside receipts (validations moved here off the card face) */
.receipt-trust{font-size:12px;color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.receipt-trust .shield{color:var(--green)}
.receipt-trust b{color:var(--text)}

/* fixed toast stack (bottom-right), tasteful, auto-dismiss */
.toast-host{position:fixed;right:18px;bottom:18px;z-index:1000;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.action-toast{
  pointer-events:auto;cursor:pointer;min-width:180px;max-width:300px;
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:12px;box-shadow:var(--shadow);padding:12px 15px;font-size:13px;color:var(--text);
  opacity:0;transform:translateY(8px) scale(.98);
  transition:opacity .22s ease,transform .22s ease;
}
.action-toast.in{opacity:1;transform:translateY(0) scale(1)}
.action-toast.out{opacity:0;transform:translateY(8px) scale(.98)}
.action-toast b{color:var(--accent-2)}
@media (max-width:560px){
  .toast-host{left:14px;right:14px;bottom:14px}
  .action-toast{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .action-toast{transition:opacity .15s ease}
  .action-toast.in{transform:none}
}
/* ====================================================================
 *  STATEFUL INTERACTION BUTTONS (winked / hearted / favorited)
 * ==================================================================== */
/* Wink + Heart, once sent: filled accent + check, locked. */
.act-btn.is-active{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border-color:transparent;color:#fff;cursor:default;
}
.act-btn.is-active:hover{filter:none;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.act-btn[disabled]{opacity:.92;cursor:default}
.act-btn[disabled]:active{transform:none}
/* Favorite toggled ON: filled gold star. */
.act-btn.act-favorite.is-on{
  background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  border-color:transparent;color:#3d2a05;font-weight:800;
}
.act-btn.act-favorite.is-on:hover{filter:brightness(1.03);color:#3d2a05;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold))}
/* small "Favorited" tag on the card face */
.fav-tag-slot{display:inline}
.fav-tag{
  display:inline-block;font-size:10px;font-weight:800;letter-spacing:.4px;
  color:#3d2a05;background:linear-gradient(90deg,var(--gold-soft),#ffd479);
  padding:2px 7px;border-radius:6px;text-transform:uppercase;vertical-align:middle;
  margin-left:4px;
}

/* ====================================================================
 *  CHAT POPUP (Message) — DM modal
 * ==================================================================== */
.chat-overlay{
  position:fixed;inset:0;z-index:1200;
  display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(26,26,46,.46);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .18s ease;
}
.chat-overlay.in{opacity:1}
.chat-modal{
  width:100%;max-width:420px;max-height:min(86vh,640px);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);
  transform:translateY(10px) scale(.985);transition:transform .18s ease;
}
.chat-overlay.in .chat-modal{transform:translateY(0) scale(1)}
/* header */
.chat-head{
  display:flex;align-items:center;gap:11px;padding:13px 14px;
  border-bottom:1px solid var(--line-soft);background:var(--panel-2);
}
.chat-head .avatar.sm{flex:none}
.chat-hmeta{min-width:0;flex:1}
.chat-hname{font-weight:800;font-size:15px;color:var(--text);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-status{font-size:11.5px;color:var(--muted);margin-top:2px;
  display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.online-dot{width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 3px rgba(14,158,110,.16);flex:none}
.chat-x{
  flex:none;cursor:pointer;border:1px solid var(--line);background:var(--card);
  color:var(--muted);width:30px;height:30px;border-radius:9px;font-size:13px;line-height:1;
  display:grid;place-items:center;transition:border-color .12s,color .12s,background .12s;
}
.chat-x:hover{border-color:var(--accent-2);color:var(--accent-2);background:var(--panel-2)}
/* thread */
.chat-thread{
  flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px;
  background:var(--bg);min-height:160px;
}
.chat-bubble{
  max-width:78%;padding:9px 12px;border-radius:15px;font-size:13.5px;line-height:1.42;
  word-wrap:break-word;overflow-wrap:anywhere;white-space:pre-wrap;
}
.chat-bubble.from-them{
  align-self:flex-start;background:var(--card);border:1px solid var(--line);
  color:var(--text);border-bottom-left-radius:5px;
}
.chat-bubble.from-you{
  align-self:flex-end;color:#fff;border-bottom-right-radius:5px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
}
/* typing indicator */
.chat-typing{display:flex;gap:4px;align-items:center;min-width:42px}
.chat-typing .td{width:6px;height:6px;border-radius:50%;background:var(--muted-2);
  opacity:.5;animation:chatdot 1s infinite ease-in-out}
.chat-typing .td:nth-child(2){animation-delay:.15s}
.chat-typing .td:nth-child(3){animation-delay:.3s}
@keyframes chatdot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-3px);opacity:.9}}
/* composer */
.chat-input{
  display:flex;gap:8px;padding:11px 12px;border-top:1px solid var(--line-soft);
  background:var(--card);
}
.chat-field{
  flex:1;min-width:0;font-size:13.5px;color:var(--text);
  padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);
}
.chat-field:focus{outline:none;border-color:var(--accent-2)}
.chat-send{
  flex:none;cursor:pointer;font-size:13px;font-weight:700;color:#fff;
  padding:9px 16px;border:none;border-radius:999px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
}
.chat-send:hover{filter:brightness(1.05)}
.chat-send:active{transform:translateY(1px)}
@media (max-width:560px){
  .chat-overlay{padding:0;align-items:flex-end}
  .chat-modal{max-width:none;max-height:92vh;border-radius:18px 18px 0 0}
}
@media (prefers-reduced-motion:reduce){
  .chat-overlay,.chat-modal{transition:opacity .12s ease}
  .chat-overlay.in .chat-modal{transform:none}
  .chat-typing .td{animation:none}
}

/* ---- Readiness AI assist ---- */
.s{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.s.done{opacity:.65}
.s.done .tick{color:#16A085;font-weight:700}
.ai-btn{margin-left:auto;border:1px solid #8B3FD6;color:#8B3FD6;background:transparent;border-radius:999px;padding:3px 10px;font-size:12px;cursor:pointer;font-weight:500}
.ai-btn:hover{background:rgba(139,63,214,.08)}
.ai-btn.done{border-color:#16A085;color:#16A085;cursor:default}
.ai-cta{display:inline-flex;align-items:center;gap:6px;margin-top:10px;border:1px dashed #8B3FD6;color:#8B3FD6;background:rgba(139,63,214,.05);border-radius:10px;padding:8px 12px;font-size:13px;font-weight:600;cursor:pointer;width:100%;justify-content:center}
.ai-cta:hover{background:rgba(139,63,214,.10)}
.ai-overlay .ai-modal{max-width:460px}
.ai-body{padding:14px 16px}
.ai-badge{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#8B3FD6,#D81B7E);color:#fff;font-size:18px;flex:0 0 auto}
.ai-hint{font-size:13px;color:#6b6b78;margin-bottom:8px}
.ai-gen{background:#f4f4f8;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:12px;font-size:14px;line-height:1.6;color:#1A1A2E;min-height:90px;white-space:pre-wrap}
.ai-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.ai-primary{background:linear-gradient(135deg,#8B3FD6,#D81B7E);color:#fff;border:none;border-radius:999px;padding:8px 16px;font-weight:600;cursor:pointer}
.ai-secondary{background:transparent;border:1px solid rgba(0,0,0,.2);border-radius:999px;padding:8px 14px;cursor:pointer;color:#1A1A2E}

/* ---- readiness rows v2 (per-item tip) ---- */
.suggest .s{display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:7px 0;border-bottom:1px solid rgba(0,0,0,.05)}
.suggest .s:last-child{border-bottom:none}
.s-head{display:flex;align-items:center;gap:8px}
.s-text{flex:1}
.s-tip{font-size:12px;color:#6b6b78;margin-left:24px;line-height:1.45}
.rd-tip{margin-top:10px;font-size:12.5px;color:#5a5a68;background:rgba(139,63,214,.06);border-radius:8px;padding:8px 10px}
.act-btn.is-active{cursor:pointer}

/* ---- Feed view ---- */
.feed-view{display:flex;flex-direction:column;gap:12px;max-width:560px}
.feed-card{background:#fff;border:1px solid rgba(0,0,0,.08);border-left:4px solid #ccc;border-radius:12px;padding:12px 14px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.feed-card.t-female{border-left-color:#E84393}
.feed-card.t-male{border-left-color:#2E86DE}
.feed-card.t-couple{border-left-color:#8B3FD6}
.feed-card.t-trans{border-left-color:#16A085}
.feed-hd{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.feed-badge{font-weight:600;color:#D81B7E;font-size:13px}
.feed-sub{font-size:12px;color:#8a8a98}
.feed-body{display:flex;gap:12px;align-items:center}
.feed-body .avatar{width:54px;height:54px;flex:0 0 auto}
.feed-meta{flex:1;min-width:0}
.feed-title{font-size:15px;color:#1A1A2E}
.feed-line{font-size:13px;color:#5a5a68;margin-top:2px}
.feed-cop{display:inline-block;margin-top:6px;font-size:12px;color:#0a7d6b;background:rgba(22,160,133,.10);border-radius:999px;padding:2px 10px}
.feed-card .actions{margin-top:10px}

/* ---- header controls (sidebar retired) ---- */
.header-controls{display:flex;align-items:center;gap:10px;margin-left:auto}
.header-controls .hc-label{font-size:13px;color:#6b6b78}
.header-controls #viewerSelect{max-width:240px;padding:7px 10px;border:1px solid rgba(0,0,0,.18);border-radius:8px;background:#fff;font-size:13px;color:#1A1A2E}
.topbar .settings-link{font-size:13px;text-decoration:none;color:#8B3FD6;white-space:nowrap;font-weight:500}
.content{width:100%;max-width:940px;margin:0 auto}
@media(max-width:640px){.header-controls .hc-label{display:none}.header-controls #viewerSelect{max-width:150px}}

/* keep the Message/Wink/Heart/Favorite row aligned across match cards */
.matches-grid{align-items:stretch}
.matches-grid .match{display:flex;flex-direction:column}
.matches-grid .match .actions{margin-top:auto}

/* breathing room above the action row (and a subtle divider) */
.matches-grid .match .actions{margin-top:auto;padding-top:14px;border-top:1px solid rgba(0,0,0,.06)}
.match .reasons{margin-bottom:4px}

/* "Not interested" hidden-profiles manager (top of Your Matches) */
.hidden-mgr{margin:0 0 12px;border:1px solid rgba(0,0,0,.08);border-radius:10px;background:#fafafc;overflow:hidden}
.hidden-mgr-head{width:100%;display:flex;justify-content:space-between;align-items:center;background:transparent;border:0;padding:10px 12px;cursor:pointer;font-size:13px;color:#5a5a68}
.hidden-mgr-body{padding:2px 12px 12px}
.hm-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid rgba(0,0,0,.05)}
.hm-row .avatar{width:34px;height:34px;flex:0 0 auto}
.hm-name{flex:1;font-size:13px;color:#1A1A2E}
.hm-type{color:#8a8a98;font-size:12px}
.hm-unhide{border:1px solid #8B3FD6;color:#8B3FD6;background:transparent;border-radius:999px;padding:4px 12px;font-size:12px;cursor:pointer}
.hm-unhide:hover{background:rgba(139,63,214,.08)}
.hm-clear{margin-top:10px;background:transparent;border:0;color:#8B3FD6;font-size:12px;cursor:pointer;text-decoration:underline;padding:0}