/* Genesys Engine — domain-wide design tokens (shared by all apps) */
:root {
  --header-h: 56px;            /* corporate header standard */
  --header-bg: #032d60;        /* corporate navy */
  --header-bg-mobile: #032d60;
  --header-text: #fff;
  --header-muted: rgba(255,255,255,.7);
  --header-border: rgba(255,255,255,.12);
}
body.dark {
  --header-bg: #0b1120;
  --header-bg-mobile: #0b1120;
}

/* Genesys Engine — Settings modal (Webex Settings → General equivalent) */
.set-overlay { position:fixed; inset:0; z-index:3000; background:rgba(2,6,23,.6); display:flex; align-items:center; justify-content:center; }
.set-modal { width:min(860px,94vw); height:min(560px,88vh); background:var(--white,#fff); border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.35); display:flex; flex-direction:column; overflow:hidden; }
.set-head { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--slate-200,#e2e8f0); }
.set-head h2 { margin:0; font-size:16px; font-weight:700; color:var(--slate-900,#0f172a); }
.set-head .set-btn { background:none; border:1px solid var(--slate-200,#e2e8f0); border-radius:8px; padding:7px 16px; font-size:13px; font-weight:600; color:var(--slate-700,#334155); cursor:pointer; font-family:inherit; margin-left:8px; }
.set-head .set-btn:hover { background:var(--slate-100,#f1f5f9); }
.set-head .set-btn.primary { background:var(--accent,#4262ff); color:#fff; border-color:var(--accent,#4262ff); }
.set-head .set-btn.primary:hover { background:var(--accent-hover,#3350e0); }
.set-body { display:flex; flex:1; min-height:0; }
.set-rail { width:220px; flex-shrink:0; border-right:1px solid var(--slate-200,#e2e8f0); padding:12px 10px; overflow-y:auto; }
.set-rail-item { display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:none; border-radius:8px; padding:9px 12px; font-size:13px; font-weight:500; color:var(--slate-600,#475569); cursor:pointer; font-family:inherit; }
.set-rail-item:hover { background:var(--slate-100,#f1f5f9); color:var(--slate-900,#0f172a); }
.set-rail-item.on { background:var(--slate-100,#f1f5f9); color:var(--accent,#4262ff); font-weight:600; }
.set-rail-item .ic { width:18px; text-align:center; }
.set-pane { flex:1; padding:20px 24px; overflow-y:auto; }
.set-h { margin:0 0 16px; font-size:14px; font-weight:700; color:var(--slate-900,#0f172a); }
.set-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--slate-100,#f1f5f9); }
.set-row:last-child { border-bottom:none; }
.set-label { font-size:13px; color:var(--slate-700,#334155); }
.set-ctl { display:flex; align-items:center; gap:8px; }
.set-check { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--slate-700,#334155); cursor:pointer; }
.set-check input { width:16px; height:16px; accent-color:var(--accent,#4262ff); }
.set-select { border:1px solid var(--slate-200,#e2e8f0); border-radius:8px; padding:7px 10px; font-size:13px; font-family:inherit; background:var(--white,#fff); color:var(--slate-700,#334155); min-width:220px; }
.set-path { display:flex; align-items:center; gap:8px; }
.set-path span { font-size:12px; color:var(--slate-500,#64748b); background:var(--slate-100,#f1f5f9); border-radius:6px; padding:5px 10px; }
.set-path button { background:none; border:1px solid var(--slate-200,#e2e8f0); border-radius:6px; padding:5px 10px; font-size:12px; color:var(--accent,#4262ff); cursor:pointer; font-family:inherit; }
.set-path button:hover { background:var(--slate-100,#f1f5f9); }
.set-note { font-size:12px; color:var(--slate-500,#64748b); line-height:1.6; }
/* ── Mobile ── */
@media (max-width:768px) {
  .set-modal { width:100vw; height:100dvh; border-radius:0; }
  .set-body { flex-direction:column; }
  .set-rail { width:100%; height:auto; max-height:44px; border-right:none; border-bottom:1px solid var(--slate-200,#e2e8f0); padding:6px 8px; display:flex; gap:4px; overflow-x:auto; }
  .set-rail-item { flex-shrink:0; padding:7px 10px; font-size:12px; }
  .set-rail-item .ic { display:none; }
  .set-pane { padding:14px 16px; }
  .set-row { flex-direction:column; align-items:flex-start; gap:6px; }
  .set-ctl { width:100%; }
  .set-select { width:100%; min-width:0; }
  .set-path { width:100%; justify-content:space-between; }
  .set-head { padding:12px 14px; }
  .set-head h2 { font-size:15px; }
}