/* Customer Stories — dashboard styles (v20260614a)
   Tokens mirror the design handoff. Lives inside the Viva dashboard shell. */
:root {
  --cs-primary: #8200DB; --cs-primary-dark: #6B00B5; --cs-accent: #2B7FFF;
  --cs-gradient: linear-gradient(135deg, #9810FA 0%, #2B7FFF 100%);
  --cs-proof: #10B981; --cs-proof-soft: #ECFDF5; --cs-proof-border: #A7F3D0; --cs-proof-ink: #047857;
  --cs-accent-soft: #F3E8FF; --cs-accent-ink: #7E22CE; --cs-accent-border: #E9D5FF;
  --cs-border: #E8EAED; --cs-ink: #101828; --cs-gray: #6B7280; --cs-muted: #9AA3AF;
}
.cs-page {
  max-width: 1180px; margin: 0 auto; padding: 32px 40px 120px;
  font-family: 'Inter', -apple-system, sans-serif; color: var(--cs-ink);
}
.cs-h-poppins { font-family: 'Poppins','Inter',sans-serif; }

/* header */
.cs-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:24px; }
.cs-title { font-family:'Poppins',sans-serif; font-size:30px; font-weight:600; letter-spacing:-.02em; margin:0; }
.cs-subtitle { font-size:15px; color:var(--cs-gray); margin:4px 0 0; }

/* buttons */
.cs-btn { display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; font-family:'Inter',sans-serif;
  font-size:14px; font-weight:600; border-radius:9px; padding:10px 16px; transition:all .18s; text-decoration:none; }
.cs-btn svg { width:17px; height:17px; }
.cs-btn-primary { background:var(--cs-primary); color:#fff; }
.cs-btn-primary:hover { background:var(--cs-primary-dark); transform:translateY(-2px); box-shadow:0 6px 18px rgba(130,0,219,.25); }
.cs-btn-secondary { background:#fff; color:#334155; border:1px solid var(--cs-border); }
.cs-btn-secondary:hover { border-color:#DCD3F0; transform:translateY(-1px); }
.cs-btn-ghost { background:transparent; color:#475569; padding:8px 10px; }
.cs-btn-ghost:hover { background:#F4F1FA; color:var(--cs-primary); }
.cs-btn-proof { background:var(--cs-proof); color:#fff; }
.cs-btn-proof:hover { filter:brightness(.96); transform:translateY(-2px); }
.cs-btn[disabled] { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

/* stat strip */
.cs-stats { display:flex; gap:16px; margin-bottom:28px; }
.cs-stat { flex:1; min-width:0; background:#fff; border:1px solid var(--cs-border); border-radius:14px; padding:20px;
  display:flex; align-items:center; gap:16px; }
.cs-stat-ic { width:44px; height:44px; border-radius:12px; background:var(--cs-accent-soft); color:var(--cs-accent-ink);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cs-stat-val { font-family:'Poppins',sans-serif; font-size:26px; font-weight:700; line-height:1.1; }
.cs-stat-lbl { font-size:13px; color:var(--cs-gray); margin-top:2px; }

/* section */
.cs-section { margin-bottom:32px; }
.cs-section-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.cs-section-title { font-family:'Poppins',sans-serif; font-size:17px; font-weight:600; }
.cs-count { background:var(--cs-accent-soft); color:var(--cs-accent-ink); font-size:12px; font-weight:600;
  padding:2px 9px; border-radius:999px; }

/* approval card */
.cs-approval { position:relative; background:#fff; border:1px solid var(--cs-accent-border); border-radius:14px;
  padding:20px 22px 20px 26px; display:flex; gap:20px; align-items:center; overflow:hidden; }
.cs-approval::before { content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--cs-gradient); }
.cs-approval-main { flex:1; min-width:0; }
.cs-kicker { font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--cs-accent-ink); }
.cs-approval-headline { font-family:'Poppins',sans-serif; font-size:21px; font-weight:600; margin:6px 0 10px; }
.cs-approval-side { display:flex; flex-direction:column; align-items:center; gap:10px; flex-shrink:0; }

/* reviewer row */
.cs-reviewer { display:flex; align-items:center; gap:10px; }
.cs-avatar { width:42px; height:42px; border-radius:999px; background:#E2E8F0; color:#334155; display:flex;
  align-items:center; justify-content:center; font-weight:600; font-family:'Poppins',sans-serif; flex-shrink:0; }
.cs-avatar.proof { background:var(--cs-proof-soft); color:var(--cs-proof-ink); }
.cs-reviewer-name { font-family:'Poppins',sans-serif; font-weight:600; font-size:14.5px; display:flex; align-items:center; gap:6px; }
.cs-reviewer-sub { font-size:12.5px; color:var(--cs-gray); }

/* chips */
.cs-chips { display:flex; flex-wrap:wrap; gap:8px; }
.cs-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px;
  background:var(--cs-proof-soft); color:var(--cs-proof-ink); border:1px solid var(--cs-proof-border);
  font-size:13px; font-weight:600; }
.cs-chip svg { width:14px; height:14px; }
.cs-chip.lg { padding:8px 14px; font-size:15px; }

/* verified marker */
.cs-verified { display:inline-flex; align-items:center; gap:4px; color:var(--cs-proof-ink); font-size:12px; font-weight:600; }
.cs-verified svg { width:14px; height:14px; }

/* status pills */
.cs-pill { display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 8px; border-radius:999px;
  font-size:12px; font-weight:600; white-space:nowrap; }
.cs-pill .dot { width:6px; height:6px; border-radius:6px; }
.cs-pill.live { background:var(--cs-proof-soft); color:var(--cs-proof-ink); } .cs-pill.live .dot{background:var(--cs-proof);}
.cs-pill.approved { background:#EDE9FE; color:#6D28D9; } .cs-pill.approved .dot{background:#8200DB;}
.cs-pill.draft { background:#F1F5F9; color:#475569; } .cs-pill.draft .dot{background:#94A3B8;}
.cs-pill.requested,.cs-pill.opened { background:#FEF3C7; color:#92400E; } .cs-pill.requested .dot,.cs-pill.opened .dot{background:#D97706;}

/* filters */
.cs-filters { display:inline-flex; gap:4px; background:#fff; border:1px solid var(--cs-border); border-radius:999px; padding:4px; margin-bottom:16px; }
.cs-filter { border:none; background:transparent; cursor:pointer; font-family:'Inter',sans-serif; font-size:13px; font-weight:600;
  color:#64748B; padding:6px 14px; border-radius:999px; display:inline-flex; gap:6px; align-items:center; }
.cs-filter.active { background:var(--cs-accent-soft); color:var(--cs-accent-ink); }
.cs-filter .n { opacity:.6; }

/* story grid */
.cs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:16px; }
.cs-card { background:#fff; border:1px solid var(--cs-border); border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:12px;
  transition:all .18s; cursor:pointer; }
.cs-card:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(16,24,40,.1); border-color:#DCD3F0; }
.cs-card-top { display:flex; align-items:flex-start; gap:10px; }
.cs-card-summary { font-size:13.5px; color:#475569; line-height:1.5; flex:1; }
.cs-card-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cs-card-actions { display:flex; gap:4px; border-top:1px solid #F1F3F5; padding-top:12px; margin-top:2px; }

/* strength chip + gauge */
.cs-strength-chip { display:inline-flex; align-items:center; gap:6px; padding:3px 9px 3px 7px; border-radius:999px;
  background:#fff; border:1px solid var(--cs-border); font-size:12px; font-weight:600; color:#475569; }
.cs-gauge { position:relative; display:inline-flex; }
.cs-gauge .val { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.cs-gauge .num { font-family:'Poppins',sans-serif; font-weight:700; color:var(--cs-ink); line-height:1; }
.cs-gauge .cap { font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--cs-muted); margin-top:3px; }

/* pending rows */
.cs-pending-wrap { background:#fff; border:1px solid var(--cs-border); border-radius:14px; overflow:hidden; }
.cs-pending { display:flex; align-items:center; gap:12px; padding:13px 16px; border-top:1px solid #F1F3F5; }
.cs-pending:first-child { border-top:none; }
.cs-pending:hover { background:#F8F9FB; }
.cs-pending-main { flex:1; min-width:0; }
.cs-pending-name { font-weight:600; font-size:14px; }
.cs-pending-sub { font-size:12.5px; color:var(--cs-gray); }

/* empty / first run */
.cs-firstrun { max-width:720px; margin:40px auto; text-align:center; background:#fff; border:1px solid var(--cs-border);
  border-radius:18px; padding:48px 40px; }
.cs-firstrun-ic { width:64px; height:64px; border-radius:18px; background:var(--cs-gradient); color:#fff; display:flex;
  align-items:center; justify-content:center; margin:0 auto 20px; }
.cs-firstrun h2 { font-family:'Poppins',sans-serif; font-size:24px; font-weight:600; margin:0 0 10px; }
.cs-firstrun p { color:var(--cs-gray); font-size:15px; line-height:1.6; margin:0 auto 24px; max-width:460px; }

/* ---- detail ---- */
.cs-back { display:inline-flex; align-items:center; gap:6px; color:var(--cs-gray); font-size:14px; font-weight:600;
  background:none; border:none; cursor:pointer; padding:0; margin-bottom:18px; }
.cs-back:hover { color:var(--cs-primary); }
.cs-detail-grid { display:grid; grid-template-columns:340px 1fr; gap:24px; align-items:start; }
.cs-detail-left { position:sticky; top:24px; display:flex; flex-direction:column; gap:16px; }
.cs-cardbox { background:#fff; border:1px solid var(--cs-border); border-radius:14px; padding:20px; }
.cs-dl { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.cs-dl-row { display:flex; align-items:center; gap:9px; font-size:13.5px; color:#475569; }
.cs-dl-row svg { width:16px; height:16px; color:var(--cs-muted); flex-shrink:0; }
.cs-trustrow { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.cs-trust { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:4px 9px; border-radius:999px;
  background:var(--cs-proof-soft); color:var(--cs-proof-ink); }
.cs-link-ext { display:inline-flex; align-items:center; gap:6px; color:var(--cs-primary); font-size:13px; font-weight:600; text-decoration:none; margin-top:10px; }

.cs-strength-head { display:flex; align-items:center; gap:8px; }
.cs-strength-note { font-size:11.5px; color:var(--cs-muted); margin:4px 0 14px; }
.cs-bars { display:flex; flex-direction:column; gap:10px; }
.cs-bar-row { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; }
.cs-bar-lbl { font-size:12.5px; color:#475569; }
.cs-bar-track { height:6px; border-radius:6px; background:#F1F3F5; overflow:hidden; margin-top:5px; }
.cs-bar-fill { height:100%; border-radius:6px; transition:width .8s cubic-bezier(.2,.8,.2,1); }
.cs-bar-num { font-size:12px; font-weight:600; color:#64748B; min-width:22px; text-align:right; font-variant-numeric:tabular-nums; }
.cs-suggest { margin-top:16px; padding-top:14px; border-top:1px solid #F1F3F5; }
.cs-suggest li { display:flex; gap:8px; font-size:12.5px; color:#475569; line-height:1.5; margin-bottom:8px; list-style:none; }
.cs-suggest li svg { width:15px; height:15px; color:var(--cs-accent-ink); flex-shrink:0; margin-top:1px; }
.cs-suggest ul { margin:0; padding:0; }

.cs-detail-headline { font-family:'Poppins',sans-serif; font-size:28px; font-weight:600; letter-spacing:-.02em; margin:6px 0 12px; }
.cs-tabs { display:inline-flex; flex-wrap:wrap; gap:4px; background:#fff; border:1px solid var(--cs-border); border-radius:10px; padding:4px; margin:18px 0 14px; }
.cs-tab { border:none; background:transparent; cursor:pointer; font-family:'Inter',sans-serif; font-size:13px; font-weight:600;
  color:#64748B; padding:7px 13px; border-radius:7px; }
.cs-tab.active { background:var(--cs-primary); color:#fff; }
.cs-asset { background:#fff; border:1px solid var(--cs-border); border-radius:14px; padding:22px; }
.cs-asset-hint { font-size:12px; color:var(--cs-muted); margin-bottom:12px; }
.cs-asset-body { font-size:15px; line-height:1.7; color:#1f2937; white-space:pre-wrap; }
.cs-asset-body[contenteditable="true"] { outline:none; box-shadow:0 0 0 3px rgba(130,0,219,.12); border-radius:8px; padding:10px; }
.cs-asset-toolbar { display:flex; gap:6px; margin-top:16px; padding-top:14px; border-top:1px solid #F1F3F5; }
.cs-notice { display:flex; gap:8px; align-items:flex-start; background:var(--cs-proof-soft); border:1px solid var(--cs-proof-border);
  color:var(--cs-proof-ink); border-radius:10px; padding:10px 12px; font-size:12.5px; line-height:1.5; margin-bottom:14px; }
.cs-notice svg { width:16px; height:16px; flex-shrink:0; margin-top:1px; }
.cs-qa { margin-bottom:16px; } .cs-qa .q { font-weight:600; font-size:13.5px; margin-bottom:4px; }
.cs-qa .a { font-size:14px; color:#475569; line-height:1.6; }

.cs-actionbar { position:sticky; bottom:0; margin-top:20px; background:rgba(255,255,255,.85); backdrop-filter:blur(8px);
  border:1px solid var(--cs-border); border-radius:14px; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cs-slug { font-size:12.5px; color:var(--cs-gray); }
.cs-slug a { color:var(--cs-primary); }

/* modal */
.cs-modal-overlay { position:fixed; inset:0; background:rgba(16,24,40,.45); backdrop-filter:blur(3px); z-index:1000;
  display:none; align-items:center; justify-content:center; padding:20px; }
.cs-modal-overlay.open { display:flex; }
.cs-modal { background:#fff; border-radius:18px; width:100%; max-width:880px; max-height:90vh; overflow:auto;
  box-shadow:0 24px 60px rgba(16,24,40,.25); animation:csPop .2s ease; }
@keyframes csPop { from{opacity:0; transform:scale(.97)} to{opacity:1; transform:scale(1)} }
.cs-modal-head { display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--cs-border); }
.cs-modal-title { font-family:'Poppins',sans-serif; font-size:19px; font-weight:600; }
.cs-modal-body { padding:24px; display:grid; grid-template-columns:1fr 320px; gap:24px; }
.cs-modal-foot { padding:16px 24px; border-top:1px solid var(--cs-border); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cs-field { margin-bottom:16px; }
.cs-label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.cs-hint { font-size:12px; color:var(--cs-muted); margin-top:5px; }
.cs-input, .cs-textarea { width:100%; box-sizing:border-box; border:1px solid var(--cs-border); border-radius:9px; padding:10px 12px;
  font-family:'Inter',sans-serif; font-size:14px; color:var(--cs-ink); }
.cs-input:focus, .cs-textarea:focus { outline:none; border-color:var(--cs-primary); box-shadow:0 0 0 3px rgba(130,0,219,.1); }
.cs-textarea { min-height:80px; resize:vertical; }
.cs-emailprev { background:#F8F9FB; border:1px solid var(--cs-border); border-radius:12px; padding:16px; font-size:13px; }
.cs-emailprev .cta { display:inline-block; background:var(--cs-primary); color:#fff; padding:8px 16px; border-radius:8px; font-weight:600; margin:10px 0; }

/* toast */
.cs-toast { position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0; z-index:2000;
  background:#101828; color:#fff; padding:11px 18px; border-radius:999px; font-size:13.5px; font-weight:500; display:flex; align-items:center; gap:9px;
  transition:all .25s; box-shadow:0 8px 28px rgba(0,0,0,.25); pointer-events:none; }
.cs-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.cs-toast .tick { width:20px; height:20px; border-radius:20px; background:var(--cs-proof); color:#fff; display:flex; align-items:center; justify-content:center; }

.cs-powered { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:#94A3B8; }
.cs-powered .sq { width:16px; height:16px; border-radius:5px; background:var(--cs-gradient); }

.cs-loading { text-align:center; padding:60px 20px; color:var(--cs-gray); }
.cs-spin { width:28px; height:28px; border:3px solid #E9D5FF; border-top-color:var(--cs-primary); border-radius:50%;
  margin:0 auto 14px; animation:csSpin .8s linear infinite; }
@keyframes csSpin { to { transform:rotate(360deg); } }
.hidden { display:none !important; }

@media (max-width:1080px) {
  .cs-detail-grid { grid-template-columns:1fr; }
  .cs-detail-left { position:static; }
  .cs-stats { flex-direction:column; }
  .cs-modal-body { grid-template-columns:1fr; }
}
@media (max-width:640px) { .cs-page { padding:20px 16px 100px; } }