/* SMRC CSAT — Ledger design system. Monochrome ink on paper; one per-tenant --accent. */
:root{
  --paper:#F4F3EF; --card:#FFFFFF; --ink:#11182A; --ink-2:#2A3346;
  --line:#DCDBD4; --muted:#6A6E78; --fill:#ECEBE4; --accent:#9A6F3C;
  --qfont:"IBM Plex Sans";
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.5}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
a{color:inherit}

/* ============ SURVEY ============ */
body.survey{display:flex;justify-content:center;background:var(--paper)}
.surveywrap{width:100%;max-width:468px;min-height:100dvh;background:var(--card);display:flex;flex-direction:column;
  border-left:1px solid var(--line);border-right:1px solid var(--line)}
.s-head{display:flex;align-items:center;justify-content:space-between;padding:26px 26px 18px;border-bottom:1px solid var(--line)}
.s-logo{font-weight:600;font-size:15px;letter-spacing:.14em}
.s-logo b{color:var(--accent);font-weight:600}
.s-logo span{color:var(--muted);font-weight:400;letter-spacing:0;margin-inline-start:9px}
.langbtn{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--ink);
  background:none;border:0;cursor:pointer;padding:6px;border-radius:8px}
.langbtn svg{width:16px;height:16px;color:var(--accent)}
.s-prog{display:flex;gap:4px;padding:18px 26px 0}
.s-prog i{height:2px;flex:1;background:var(--line);transition:.3s}
.s-prog i.on{background:var(--ink)}
.s-body{flex:1;display:flex;flex-direction:column;overflow-y:auto;padding:26px 26px 8px}
.s-inner{margin:auto 0;width:100%}
.q{font-family:var(--qfont),"IBM Plex Sans",sans-serif;font-weight:500;font-size:25px;line-height:1.3;
  letter-spacing:-.01em;overflow-wrap:anywhere}
.q-sub{color:var(--muted);font-size:13.5px;margin-top:12px}
.s-foot{padding:18px 26px calc(20px + env(safe-area-inset-bottom));border-top:1px solid var(--line);
  display:flex;align-items:center;gap:12px}
.btn{font:inherit;font-weight:600;font-size:15px;cursor:pointer;border:0;border-radius:11px;padding:15px 26px}
.btn-primary{background:var(--ink);color:var(--paper);flex:1}
.btn-primary:disabled{opacity:.3;cursor:default}
.btn-ghost{background:none;color:var(--muted);padding:15px 16px;flex:0 0 auto}
.skip{display:block;text-align:center;color:var(--muted);font-size:13px;margin-top:14px;cursor:pointer;background:none;border:0;width:100%}

/* screener */
.screener{display:flex;flex-direction:column;gap:10px;margin-top:30px}
.lang-opt{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);
  background:var(--card);padding:16px 18px;border-radius:12px;cursor:pointer;transition:.15s;font-size:16px;font-weight:500}
.lang-opt:hover{border-color:var(--ink-2)}
.lang-opt .en{color:var(--muted);font-size:12.5px;font-weight:400}

/* NPS 0-10 */
.nps{display:grid;grid-template-columns:repeat(11,1fr);gap:6px;margin-top:34px}
.nps button{aspect-ratio:1;border:1px solid var(--line);background:var(--card);border-radius:9px;font:inherit;
  font-weight:600;font-size:15px;color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums;transition:.12s}
.nps button:hover{border-color:var(--ink-2)}
.nps button.sel{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.scale-ends{display:flex;justify-content:space-between;margin-top:12px;font-size:11.5px;color:var(--muted)}

/* smiley */
.faces{display:flex;justify-content:space-between;gap:9px;margin-top:38px}
.face{flex:1;aspect-ratio:1;border:1px solid var(--line);background:var(--card);border-radius:14px;display:flex;
  align-items:center;justify-content:center;cursor:pointer;transition:.16s}
.face svg{width:30px;height:30px}
.face.sel{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);transform:translateY(-2px)}

/* matrix */
.matrix{display:flex;flex-direction:column;gap:18px;margin-top:30px}
.mrow .ml{font-size:15px;font-weight:500;margin-bottom:9px}
.dots{display:flex;gap:7px}
.dots button{flex:1;height:38px;border:1px solid var(--line);background:var(--card);border-radius:8px;cursor:pointer;
  font:inherit;font-size:13px;color:var(--muted);transition:.12s}
.dots button.sel{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* scale5 list */
.opts{display:flex;flex-direction:column;gap:10px;margin-top:30px}
.opt{display:flex;align-items:center;gap:14px;border:1px solid var(--line);background:var(--card);padding:15px 16px;
  border-radius:11px;cursor:pointer;transition:.14s;font-size:15px;font-weight:500}
.opt .dot{width:18px;height:18px;border:1.5px solid var(--muted);border-radius:50%;flex:0 0 18px}
.opt.sel{border-color:var(--ink)}
.opt.sel .dot{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px #fff}

/* text */
.ta{width:100%;margin-top:28px;border:1px solid var(--line);border-radius:12px;padding:15px;font:inherit;font-size:15px;
  min-height:140px;resize:vertical;background:var(--card);color:var(--ink)}
.ta:focus{outline:none;border-color:var(--ink-2)}

/* thank you */
.ty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 30px;gap:14px}
.ty .mk{width:58px;height:58px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center}
.ty .mk svg{width:28px;height:28px;color:#fff}
.ty h2{font-family:"IBM Plex Serif",serif;font-weight:500;font-size:28px}
.ty p{color:var(--muted);font-size:15px;max-width:300px}
.poweredby{text-align:center;padding:16px;color:var(--muted);font-size:11.5px;letter-spacing:.02em}

/* ============ DASHBOARD ============ */
body.dash{background:var(--paper);padding:26px 18px 60px}
.dashwrap{max-width:1080px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.d-top{display:flex;align-items:center;justify-content:space-between;padding:22px 28px;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:14px}
.d-who{display:flex;align-items:center;gap:13px}
.d-logo{width:34px;height:34px;border-radius:8px;background:var(--ink);color:var(--paper);display:flex;align-items:center;
  justify-content:center;font-weight:600;font-size:12px;letter-spacing:.04em}
.d-who h2{font-size:16px;font-weight:600}
.d-who h2 span{display:block;color:var(--muted);font-weight:400;font-size:12.5px;margin-top:1px}
.d-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.d-filters select,.d-filters .exp{font:inherit;font-size:12.5px;border:1px solid var(--line);background:var(--card);
  border-radius:8px;padding:7px 11px;color:var(--ink);cursor:pointer}
.d-body{display:grid;grid-template-columns:1.15fr 1fr}
.d-hero{padding:32px 28px;border-right:1px solid var(--line)}
.d-lab{font-size:13px;color:var(--muted)}
.d-big{font-family:"IBM Plex Serif",serif;font-size:84px;line-height:.9;font-weight:600;letter-spacing:-.02em;margin-top:4px}
.d-delta{font-size:13.5px;color:var(--muted);margin-top:10px}
.d-delta b{color:var(--accent);font-weight:600}
.npsbar{display:flex;height:32px;margin-top:24px;overflow:hidden;border:1px solid var(--line);font-size:11.5px;font-weight:600}
.npsbar div{display:flex;align-items:center;justify-content:center}
.npsbar .pr{background:var(--accent);color:#fff}
.npsbar .pa{background:#C9CBD0;color:var(--ink)}
.npsbar .de{background:var(--card);color:var(--muted)}
.npsleg{display:flex;gap:16px;margin-top:11px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.npsleg i{width:9px;height:9px;display:inline-block;margin-inline-end:6px;vertical-align:middle}
.d-kpis{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.kpi{background:var(--card);padding:20px 24px}
.kpi .k{font-size:12.5px;color:var(--muted)}
.kpi .v{font-size:28px;font-weight:600;margin-top:5px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.kpi .v small{font-size:13px;font-weight:500;color:var(--muted)}
.kpi .spark{margin-top:8px;height:30px}
.d-lower{display:grid;grid-template-columns:1.15fr 1fr;border-top:1px solid var(--line)}
.panel{padding:24px 28px}
.panel.br{border-right:1px solid var(--line)}
.panel h3{font-size:14px;font-weight:600}
.panel .ph{font-size:12px;color:var(--muted);margin:2px 0 18px}
.drv{display:flex;flex-direction:column;gap:14px}
.drv .row{display:grid;grid-template-columns:120px 1fr 38px;align-items:center;gap:13px;font-size:13px}
.drv .bar{display:block;height:9px;background:var(--fill);overflow:hidden;align-self:center}
.drv .bar i{display:block;height:9px;background:var(--accent)}
.drv .val{text-align:end;font-weight:600;font-variant-numeric:tabular-nums}
.verb{display:flex;flex-direction:column;gap:13px}
.verb .v{border-inline-start:3px solid var(--ink);padding:2px 0 2px 14px}
.verb .v.neg{border-color:var(--muted);border-inline-start-style:dashed}
.verb .v.pos{border-color:var(--accent)}
.verb .v p{font-size:13.5px;line-height:1.5}
.verb .v .m{font-size:11px;color:var(--muted);margin-top:5px}
.langsplit{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.langsplit .lr{display:grid;grid-template-columns:70px 1fr 34px;align-items:center;gap:10px;font-size:12.5px}
.langsplit .lb{height:7px;background:var(--fill)}.langsplit .lb i{display:block;height:7px;background:var(--ink-2)}

/* ============ LANDING ============ */
body.landing{background:var(--paper)}
.land{max-width:760px;margin:0 auto;padding:56px 24px 48px}
.land-head{margin-bottom:28px}
.wordmark{font-weight:600;font-size:20px;letter-spacing:.16em}
.wordmark span{color:var(--accent);margin-inline-start:8px}
.land-tag{color:var(--muted);font-size:14px;margin-top:6px}
.land-card{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.land-demo{display:flex;align-items:center;gap:18px;padding:26px 28px;border-bottom:1px solid var(--line)}
.demo-logo{width:58px;height:58px;border-radius:12px;background:var(--ink);color:var(--paper);display:flex;
  align-items:center;justify-content:center;font-weight:600;letter-spacing:.06em;font-size:15px}
.demo-meta h1{font-size:19px;font-weight:600}
.demo-meta p{color:var(--muted);font-size:13.5px;margin-top:3px}
.land-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.land-tile{background:var(--card);padding:24px 26px;text-decoration:none;display:block;transition:.15s}
.land-tile:hover{background:#FbFAF7}
.land-tile .tt{font-size:16px;font-weight:600;display:block}
.land-tile .tt::after{content:"";display:inline-block;width:7px;height:7px;border-top:2px solid var(--accent);
  border-right:2px solid var(--accent);transform:rotate(45deg);margin-inline-start:9px;vertical-align:middle}
.land-tile .td{color:var(--muted);font-size:13px;margin-top:7px;display:block}
.land-share{display:flex;gap:22px;align-items:center;padding:24px 28px;border-top:1px solid var(--line)}
.qr{flex:0 0 auto;padding:10px;border:1px solid var(--line);border-radius:12px;background:#fff;line-height:0}
.share-lab{font-size:12.5px;color:var(--muted)}
.share-txt code{display:inline-block;margin:6px 0 8px;font-size:13.5px;background:var(--fill);padding:5px 9px;border-radius:7px;word-break:break-all}
.share-txt p{font-size:13px;color:var(--muted)}
.land-foot{text-align:center;color:var(--muted);font-size:12px;margin-top:22px}

[dir=rtl] .surveywrap{direction:rtl}
@media (max-width:620px){
  .d-body,.d-lower,.land-grid{grid-template-columns:1fr}
  .d-hero,.panel.br{border-right:0;border-bottom:1px solid var(--line)}
  .land-share{flex-direction:column;align-items:flex-start}
  body.dash{padding:12px 10px 36px}
  .dashwrap{border-radius:12px}
  .d-top{padding:18px 20px;align-items:flex-start}
  .d-filters{width:100%}
  .d-filters select{flex:1;min-width:0}
  .d-hero{padding:26px 20px}
  .d-big{font-size:68px}
  .kpi{padding:18px 20px}
  .kpi .v{font-size:25px}
  .panel{padding:22px 20px}
  .drv .row{grid-template-columns:96px 1fr 34px;gap:10px}
}
@media (max-width:430px){
  .nps{gap:4px}
  .nps button{font-size:14px;border-radius:7px}
  .surveywrap{border-left:0;border-right:0}
}