/* ════════════════════════════════════════════════════════════════════════
   Coded Destiny — Portal Extras
   Companion to cd-branding.css. Carries the 3rd-column detail panel,
   stat grid, tiles, and assignment-row styles used by ACRE + Math portals.
   (Extracted from the cd-admin-portal admin.css so look & feel matches.)
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Stat grid (dashboard KPIs) ────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; }
.stat { background: var(--bg2); border: 1px solid var(--bd); border-radius: var(--rl); padding: 20px; }
.stat .stat-label { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--tx4); margin-bottom: 8px; }
.stat .stat-value { font-size: 30px; font-weight: 700; font-family: var(--display); color: var(--tx); line-height: 1; }
.stat .stat-sub { font-size: 12px; color: var(--tx3); margin-top: 6px; }

/* ─── Tile grid (catalog cards) ─────────────────────────────────────── */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; padding: 20px 0; }
.tile { background: var(--bg2); border: 1px solid var(--bd); border-radius: var(--rl); padding: 20px; cursor: pointer; transition: all .2s; }
.tile:hover { border-color: var(--accent); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.tile-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--accentl); margin-bottom: 14px; }
.tile-icon svg { width: 22px; height: 22px; }
.tile h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; color: var(--tx); }
.tile p { font-size: 12px; color: var(--tx3); line-height: 1.5; }

/* ─── Assignment rows (license checkboxes) ──────────────────────────── */
.assign-item { display: flex; align-items: flex-start; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--bdl); transition: background .15s; }
.assign-item:last-child { border-bottom: none; }
.assign-item:hover { background: rgba(21, 112, 239, .03); }
.assign-item input[type="checkbox"] { width: 20px; height: 20px; accent-color: #1570ef; cursor: pointer; flex-shrink: 0; margin-top: 1px; }
.assign-item-info { flex: 1; min-width: 0; }
.assign-item-info .assign-name { font-size: 14px; font-weight: 500; color: var(--tx); cursor: pointer; display: block; margin-bottom: 3px; }
.assign-item-info .assign-desc { font-size: 13px; color: var(--tx3); line-height: 1.6; }
.assign-actions { display: flex; gap: 12px; padding: 18px 20px; border-top: 1px solid var(--bdl); }

/* ─── Detail panel (3rd column, right side) ─────────────────────────── */
.detail-panel { width: 0; overflow: hidden; transition: width .3s ease; background: var(--bg2); border-left: 1px solid var(--bd); flex-shrink: 0; position: relative; }
.detail-panel.open { width: 400px; overflow-y: auto; }
.detail-panel .dp-inner { padding: 0 0 24px; min-width: 320px; }
.dp-body { padding: 0 20px; }
.dp-field { margin-bottom: 12px; }
.dp-field .dp-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tx4); margin-bottom: 2px; }
.dp-field .dp-value { font-size: 14px; color: var(--tx); word-break: break-word; }

/* ─── Misc helpers ──────────────────────────────────────────────────── */
.muted { color: var(--tx3); }
.mono { font-family: var(--mono); }
.row-flex { display: flex; align-items: center; gap: 10px; }
.spacer { flex: 1; }
.pill { display: inline-flex; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; background: var(--bg3); color: var(--tx3); }
.section-title { font-family: var(--display); font-size: 22px; font-weight: 700; margin-bottom: 6px; color: var(--tx); }
.section-sub { font-size: 14px; color: var(--tx3); margin-bottom: 22px; }
.empty { text-align: center; padding: 48px 20px; color: var(--tx4); font-size: 14px; }
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
code.kv { font-family: var(--mono); font-size: 12px; background: var(--bg3); padding: 2px 7px; border-radius: 5px; color: var(--tx2); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.dot-gn { background: var(--gn); } .dot-am { background: var(--am); } .dot-rd { background: var(--rd); } .dot-bl { background: var(--accent); }

/* ════════════════════════════════════════════════════════════════════════
   ACRE-aligned sidebar nav + Product configuration redesign
   (mirrors the ACRE operator portal: DM Sans nav, accent-on-active,
    neutral icons that inherit link color, capability-grouped matrices)
   ════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar nav links: match ACRE .slk look ──────────────────────────── */
.cdp-nav {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border-radius: 8px;
  color: var(--tx2); font-family: var(--sans);
  font-size: 14.5px; font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: all .15s; margin: 1px 0;
}
.cdp-nav:hover { color: var(--tx); background: var(--bg3); }
.cdp-nav.on { color: var(--accent); background: var(--accentl); font-weight: 600; }
.cdp-nav-i { width: 20px; height: 20px; flex-shrink: 0; opacity: .9;
  color: var(--tx2) !important; stroke: currentColor !important; fill: none; }
.cdp-nav.on .cdp-nav-i, .cdp-nav:hover .cdp-nav-i { color: var(--accent) !important; opacity: 1; }
.cdp-sec { margin-bottom: 4px; }
.cdp-sec-h {
  display: flex; align-items: center; gap: 7px; width: 100%;
  background: none; border: none; cursor: pointer;
  padding: 17px 12px 7px; color: var(--tx);
  font-family: var(--sans); font-size: 12.5px; font-weight: 800;
  letter-spacing: 1.6px; text-transform: uppercase; text-align: left;
}
.cdp-sec-h:hover { color: var(--accent); }
.cdp-sec-h:hover .cdp-sec-chev { color: var(--accent); }
.cdp-sec-chev { transition: transform .18s; transform: rotate(-90deg); flex-shrink: 0; }
.cdp-sec-chev.open { transform: rotate(0deg); }
.cdp-side.collapsed .cdp-nav-label, .cdp-side.collapsed .cdp-sec-h span { display: none; }
.cdp-side.collapsed .cdp-nav { justify-content: center; padding: 11px; }

/* ── Product-config: tabs ─────────────────────────────────────────────── */
.pc-tabs { display: flex; align-items: center; gap: 4px; margin: 22px 0 0;
  border-bottom: 1px solid var(--bd); padding-bottom: 0; }
.pc-tab { background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--tx3);
  padding: 11px 16px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: flex; align-items: center; gap: 8px; transition: all .15s; }
.pc-tab:hover { color: var(--tx); }
.pc-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.pc-tab-n { font-size: 11px; font-weight: 700; background: var(--bg3); color: var(--tx3);
  padding: 1px 8px; border-radius: 10px; }
.pc-tab.on .pc-tab-n { background: var(--accentl); color: var(--accent); }
.pc-tabs-sp { flex: 1; }
.pc-dirty { font-size: 12px; color: var(--am); font-weight: 600; margin-right: 6px; }
.pc-msg { margin: 12px 0 0; padding: 10px 14px; border-radius: 8px; font-size: 13px;
  background: var(--rdl); color: var(--rd); border: 1px solid var(--rd); }
.pc-msg.ok { background: var(--gnl); color: var(--gn); border-color: var(--gn); }

/* ── Product picker buttons ───────────────────────────────────────────── */
.pc-prod { font-family: var(--mono); font-size: 12.5px; padding: 7px 13px;
  border: 1px solid var(--bd); background: var(--bg2); color: var(--tx2);
  border-radius: 7px; cursor: pointer; transition: all .15s; }
.pc-prod:hover { border-color: var(--accent); color: var(--accent); }
.pc-prod.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.pc-prod:disabled { opacity: .5; cursor: default; }

/* ── Three-column role editor ─────────────────────────────────────────── */
.pc-cols { display: grid; grid-template-columns: 260px 1fr 280px; gap: 16px; margin-top: 18px; align-items: start; }
.pc-col { background: var(--bg-side, #fff); border: 1px solid var(--bd); border-radius: 12px; overflow: hidden; }
.pc-col-h { padding: 14px 18px; font-family: var(--sans); font-size: 14px; font-weight: 700;
  color: var(--tx); border-bottom: 1px solid var(--bd); background: var(--bg2); }
.pc-rolelist { display: flex; flex-direction: column; padding: 8px; gap: 2px; max-height: 420px; overflow-y: auto; }
.pc-roleitem { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: none; border-radius: 8px; padding: 9px 11px; cursor: pointer;
  font-family: var(--sans); font-size: 13.5px; color: var(--tx2); transition: all .12s; }
.pc-roleitem:hover { background: var(--bg3); }
.pc-roleitem.on { background: var(--accentl); color: var(--accent); font-weight: 600; }
.pc-roleitem-name { flex: 1; font-family: var(--mono); font-size: 12.5px; }
.pc-roleitem-n { font-size: 11px; font-weight: 700; background: var(--bg3); color: var(--tx3); padding: 1px 7px; border-radius: 9px; }
.pc-roleitem.on .pc-roleitem-n { background: #fff; color: var(--accent); }
.pc-roleitem-x { color: var(--tx4); font-size: 16px; line-height: 1; padding: 0 3px; border-radius: 4px; }
.pc-roleitem-x:hover { color: var(--rd); background: var(--rdl); }
.pc-addrole { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--bd); }
.pc-suggest { padding: 10px 12px 14px; border-top: 1px solid var(--bd); }

/* capability matrix (ACRE .lic-cap / .lic-feat) */
.pc-capblock { border: 1px solid var(--bd); border-radius: 10px; overflow: hidden; margin: 12px 18px; }
.pc-col-feats .pc-capblock:first-of-type { margin-top: 14px; }
.lic-cap { display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  background: var(--bg3); font-family: var(--sans); font-weight: 700; font-size: 13.5px; color: var(--tx); }
.lic-cap-name { flex: 1; }
.pc-capcheck { display: flex; align-items: center; }
.lic-feat { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 20px;
  border-top: 1px solid var(--bd); font-family: var(--sans); font-size: 13.5px; color: var(--tx2); cursor: pointer; }
.lic-feat:hover { background: var(--bg2); }
.lic-feat-name { flex: 0 0 auto; }
.pc-featdesc { flex: 1; }
.pc-featrow input, .pc-capcheck input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.pc-featrow2 { justify-content: flex-start; }
.pc-featrow2 .lic-feat-name { flex: 1; }
.pc-switch-l { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  color: var(--tx3); font-family: var(--sans); cursor: pointer; white-space: nowrap; }
.pc-switch-l input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }

/* preview column */
.pc-preview { padding: 16px 18px; }
.pc-rolecode { font-family: var(--mono); font-size: 12.5px; background: var(--accentl);
  color: var(--accent); padding: 2px 8px; border-radius: 6px; }
.pc-prev-cap { margin-bottom: 12px; }
.pc-prev-capname { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--tx4); margin-bottom: 4px; }
.pc-prev-feat { font-family: var(--sans); font-size: 13px; color: var(--tx2); padding: 2px 0 2px 10px;
  border-left: 2px solid var(--accentl); margin-bottom: 2px; }
.pc-prev-maps { border-top: 1px solid var(--bd); margin-top: 10px; }
.pc-prev-grp { display: block; margin: 4px 0; font-size: 11px; }
.pc-link { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }

/* ── Group mappings tab ───────────────────────────────────────────────── */
.pc-observed { background: var(--bg2); border: 1px solid var(--bd); border-radius: 10px; padding: 12px 14px; margin: 14px 0; }
.pc-observed-h { font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--tx2); margin-bottom: 8px; }
.pc-observed-row { display: flex; gap: 12px; padding: 3px 0; font-size: 12px; }
.pc-observed-email { color: var(--tx3); min-width: 180px; }
.pc-observed-grps { color: var(--tx2); word-break: break-all; }
.pc-maptbl { width: 100%; margin: 14px 0; }
.pc-addmap { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pc-rm { background: none; border: 1px solid var(--bd); color: var(--tx3); border-radius: 6px;
  padding: 4px 10px; font-size: 12px; cursor: pointer; }
.pc-rm:hover { border-color: var(--rd); color: var(--rd); }

@media (max-width: 1100px) { .pc-cols { grid-template-columns: 1fr; } }

/* ── Tables (ACRE cd-tbl look) ────────────────────────────────────────── */
.cdp-tbl { width: 100%; border-collapse: collapse; font-family: var(--sans); }
.cdp-tbl thead th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--tx4); padding: 10px 14px; border-bottom: 1px solid var(--bd); }
.cdp-tbl tbody td { padding: 11px 14px; border-bottom: 1px solid var(--bdl); font-size: 13.5px; color: var(--tx2); }
.cdp-tbl tbody tr:hover { background: var(--bg2); }
.cdp-tbl code { font-family: var(--mono); font-size: 12px; }

/* ── Directory-group naming (GUID -> friendly name) ───────────────────── */
.pc-dirgroups { background: var(--bg2); border: 1px solid var(--bd); border-radius: 10px; padding: 12px 14px; margin: 14px 0 18px; }
.pc-dirrow { display: flex; align-items: center; gap: 14px; padding: 7px 0; border-top: 1px solid var(--bdl); }
.pc-dirrow:first-of-type { border-top: none; }
.pc-dirname { flex: 0 0 280px; }
.pc-dirmeta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pc-dirguid { font-size: 11px; }
.pc-dirseen { font-size: 11.5px; }
.pc-grpname { font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--tx); display: block; }
.pc-grpguid { font-size: 10.5px; display: inline-block; margin-top: 2px; opacity: .7; }

/* ── Column variants + preview role chip (completeness) ───────────────── */
.pc-col-roles { display: flex; flex-direction: column; }
.pc-col-preview { position: sticky; top: 16px; }
.pc-prev-role { margin-bottom: 2px; }

/* ════════════════════════════════════════════════════════════════════════
   Overview hero — Coded Destiny style (orbital convergence motif)
   ════════════════════════════════════════════════════════════════════════ */
.cdp-hero { position: relative; overflow: hidden; border-radius: 16px;
  background: linear-gradient(135deg, #0a1426 0%, #0e1c33 60%, #14233f 100%);
  min-height: 300px; display: flex; align-items: center; margin-bottom: 22px;
  border: 1px solid rgba(45,108,223,.25); }
.cdp-hero-bg { position: absolute; inset: 0; z-index: 0; }
.cdp-hero-svg { width: 100%; height: 100%; display: block; }
.cdp-orbit { animation: cdspin 60s linear infinite; }
.cdp-orbit2 { animation: cdspin 38s linear infinite reverse; }
@keyframes cdspin { to { transform: rotate(360deg); } }
.cdp-core { animation: cdpulse 4s ease-in-out infinite; transform-origin: 600px 250px; }
.cdp-core-ring { animation: cdring 4s ease-in-out infinite; transform-origin: 600px 250px; }
@keyframes cdpulse { 0%,100% { opacity: .9; } 50% { opacity: .55; } }
@keyframes cdring { 0% { transform: scale(1); opacity: .8; } 70%,100% { transform: scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cdp-orbit,.cdp-orbit2,.cdp-core,.cdp-core-ring { animation: none; } }
.cdp-hero-inner { position: relative; z-index: 1; padding: 44px 48px; max-width: 640px; }
.cdp-hero-eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: #6ea0ff; margin-bottom: 16px; }
.cdp-hero-h1 { font-family: var(--display); font-weight: 700; font-size: 52px; line-height: 1.04;
  color: #fff; margin: 0 0 18px; letter-spacing: -.5px; }
.cdp-hero-name { color: #6ea0ff; }
.cdp-hero-sub { font-family: var(--sans); font-size: 16px; line-height: 1.6; color: #c5d2e8; max-width: 520px; margin: 0 0 22px; }
.cdp-hero-tag { display: inline-block; font-family: var(--sans); font-size: 15px; font-weight: 700;
  color: #fff; padding: 9px 18px; border-radius: 30px;
  background: rgba(45,108,223,.22); border: 1px solid rgba(110,160,255,.4); }
@media (max-width: 820px) { .cdp-hero-h1 { font-size: 38px; } .cdp-hero-inner { padding: 32px 28px; } }

/* ── Products marketing/awareness page ────────────────────────────────── */
.mk-layout { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: start; margin-top: 16px; }
.mk-cards { display: flex; flex-direction: column; gap: 10px; }
.mk-card { display: flex; align-items: flex-start; gap: 12px; text-align: left; width: 100%;
  background: var(--bg-side,#fff); border: 1px solid var(--bd); border-radius: 12px; padding: 14px; cursor: pointer; transition: all .15s; position: relative; }
.mk-card:hover { border-color: var(--accent); box-shadow: var(--shadow-lg); }
.mk-card.on { border-color: var(--accent); background: var(--accentl); }
.mk-card-ic { width: 38px; height: 38px; border-radius: 9px; background: var(--accentl); color: var(--accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mk-card-ic svg { width: 20px; height: 20px; }
.mk-card-body { flex: 1; min-width: 0; }
.mk-card-name { font-family: var(--sans); font-size: 14.5px; font-weight: 700; color: var(--tx); }
.mk-card-desc { font-size: 12px; color: var(--tx3); line-height: 1.45; margin-top: 2px; }
.mk-status { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.mk-status.prod { background: var(--gnl); color: var(--gn); }
.mk-status.beta { background: var(--aml); color: var(--am); }
.mk-card .mk-status { position: absolute; top: 12px; right: 12px; }

.mk-detail { background: var(--bg-side,#fff); border: 1px solid var(--bd); border-radius: 12px; padding: 22px 24px; }
.mk-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mk-detail-name { font-family: var(--display); font-size: 24px; font-weight: 700; color: var(--tx); }
.mk-detail-id { font-family: var(--mono); font-size: 12px; color: var(--tx4); margin-top: 2px; }
.mk-detail-desc { font-size: 14px; color: var(--tx2); line-height: 1.6; margin: 12px 0 20px; }
.mk-cap-h { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--tx4); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--bd); }
.mk-cap { padding: 12px 0; border-bottom: 1px solid var(--bdl); }
.mk-cap:last-child { border-bottom: none; }
.mk-cap-name { font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--tx); }
.mk-cap-desc { font-size: 13px; color: var(--tx3); line-height: 1.5; margin-top: 3px; }
.mk-feats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mk-feat { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--tx2);
  background: var(--bg2); border: 1px solid var(--bd); border-radius: 20px; padding: 4px 12px; }
.mk-feat svg { color: var(--gn); flex-shrink: 0; }
@media (max-width: 920px) { .mk-layout { grid-template-columns: 1fr; } }

/* ── SSO page: compact aligned filters + tabbed panels ────────────────── */
.sso-filters { display: grid; grid-template-columns: 1fr 1fr 200px; gap: 14px; margin: 16px 0 4px; align-items: start; }
.sso-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sso-field .cdp-label { margin: 0; }
.sso-field-sm { }
.sso-tabs { margin-top: 18px; }
.sso-panel { padding: 18px 2px 4px; }
.sso-enable-row { border: 1px solid var(--bd); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--bg-side,#fff); }
@media (max-width: 820px) { .sso-filters { grid-template-columns: 1fr; } }

/* ── Overview globe (deployment regions) ──────────────────────────────── */
.cdp-globe { animation: cdspin-y 80s linear infinite; }
@keyframes cdspin-y { to { transform: rotateZ(360deg); } }
.cdp-mk-ping { animation: cdping 3s ease-out infinite; transform-origin: center; }
@keyframes cdping { 0% { transform: scale(1); opacity: .8; } 70%,100% { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cdp-globe, .cdp-mk-ping { animation: none; } }

/* ── Deployment globe (Overview hero) ─────────────────────────────────── */
.dg-wrap { position: relative; width: 100%; min-height: 340px; }
.dg-svg { position: absolute; right: -40px; top: 50%; transform: translateY(-50%);
  height: 460px; width: 460px; max-width: 60%; z-index: 0; }
.dg-ping { animation: dgping 2.4s ease-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes dgping { 0% { transform: scale(1); opacity: .9; } 70%,100% { transform: scale(3.2); opacity: 0; } }
.dg-inner { position: relative; z-index: 1; padding: 40px 44px; max-width: 540px; }
.dg-carousel { margin-top: 18px; }
.dg-dots { display: flex; gap: 6px; margin-bottom: 12px; }
.dg-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(199,210,232,.35); transition: all .3s; }
.dg-dot.on { background: #f2a623; width: 18px; border-radius: 3px; }
.dg-region { display: inline-block; font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: #3a2a06; background: #f2a623;
  padding: 3px 10px; border-radius: 4px; margin-bottom: 8px; }
.dg-prod { font-family: var(--display); font-size: 22px; font-weight: 700; color: #fff; line-height: 1.2; }
.dg-ver { font-family: var(--mono); font-size: 13px; font-weight: 400; color: #9cc0ff; }
.dg-desc { font-family: var(--sans); font-size: 14px; color: #c5d2e8; line-height: 1.55; margin-top: 6px; max-width: 460px; }
@media (max-width: 820px) {
  .dg-svg { opacity: .35; right: -120px; }
  .dg-inner { padding: 30px 26px; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .dg-ping { animation: none; } }

/* ── Hidden-by-default sidebar (overlay) + top hamburger ──────────────── */
.cdp-burger-top { display: flex; flex-direction: column; gap: 4px; background: none; border: none;
  cursor: pointer; padding: 8px; margin-right: 6px; border-radius: 8px; }
.cdp-burger-top:hover { background: var(--bg3); }
.cdp-burger-top span { display: block; width: 22px; height: 2px; background: var(--tx2); border-radius: 2px; transition: all .2s; }
.cdp-side { position: fixed; top: 0; left: 0; bottom: 0; width: 340px; z-index: 200;
  background: var(--bg-side, #fff); border-right: 1px solid var(--bd); padding: 20px 12px;
  transform: translateX(-100%); transition: transform .25s ease; overflow-y: auto; }
.cdp-side.open { transform: translateX(0); box-shadow: 0 0 40px rgba(8,16,32,.25); }
.cdp-scrim { position: fixed; inset: 0; z-index: 150; background: rgba(8,16,32,.35); animation: cdfade .2s ease; }
@keyframes cdfade { from { opacity: 0; } to { opacity: 1; } }
.cdp-main { width: 100%; }

/* ── Full-width grayscale deployment globe (Anthropic style) ──────────── */
:root { --dg-land: #b8b6ad; --dg-line: rgba(120,118,110,0.30); --dg-bg: #f4f1ea; }
[data-theme="dark"] { --dg-land: #6b6f78; --dg-line: rgba(140,144,152,0.22); --dg-bg: #14161a; }
.dg-full { position: relative; width: 100%; min-height: 560px; display: flex; align-items: center;
  justify-content: center; overflow: hidden; background: var(--dg-bg); border-radius: 0; }
.dg-svg-full { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(760px, 96vw); height: min(760px, 96vw); z-index: 0; }
.dg-msg { position: relative; z-index: 1; text-align: center; padding: 40px 24px; }
.dg-title { font-family: var(--display); font-weight: 700; font-size: 64px; line-height: 1.05;
  color: var(--tx); margin: 0; letter-spacing: -1px; }
.dg-tagline { font-family: var(--sans); font-size: 17px; color: var(--tx2); margin: 16px 0 0; }
@media (max-width: 720px) { .dg-title { font-size: 40px; } .dg-full { min-height: 440px; } }

/* full-bleed globe host (cancels main padding so the globe spans edge to edge) */
.cdp-globe-host { margin: -24px -24px 0; }
.cdp-globe-host + * { margin-top: 0; }
.cdp-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 22px 0 0; }
@media (max-width: 720px) { .cdp-pillars { grid-template-columns: 1fr 1fr; } }

/* ── Custom dropdown: in-flow menu that expands the section vertically ────
   The Step-1 card uses .cdp-card2 (overflow:hidden), which clips an absolute
   overlay. Rendering the menu IN-FLOW grows the card to contain it instead, so
   every entry is visible and the list scrolls when long. */
.cdp-dd { position: relative; }
.cdp-dd-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; background: var(--bg2); border: 1px solid var(--bd); border-radius: 10px;
  font-family: var(--sans); font-size: 14px; color: var(--tx); cursor: pointer; text-align: left; }
.cdp-dd-btn:hover { border-color: var(--accent); }
.cdp-dd-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdp-dd-btn svg { flex-shrink: 0; transition: transform .18s; color: var(--tx3); }
.cdp-dd-menu { position: static; width: 100%; margin-top: 6px;
  background: var(--bg2); border: 1px solid var(--bd); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(8,16,32,.12); padding: 6px; max-height: 260px; overflow-y: auto; }
.cdp-dd-opt { display: block; width: 100%; text-align: left; padding: 9px 12px; background: none;
  border: none; border-radius: 7px; font-family: var(--sans); font-size: 14px; color: var(--tx2);
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdp-dd-opt:hover { background: var(--bg3); color: var(--tx); }
.cdp-dd-opt.on { background: var(--accentl); color: var(--accent); font-weight: 600; }

/* ── SSO: section divider + header above the tabs ─────────────────────── */
.sso-section-head { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--bd); }
.sso-section-title { font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--tx); }
.sso-section-sub { font-size: 12.5px; color: var(--tx3); margin-top: 2px; }
.sso-provd { padding: 6px 2px; }
.sso-provd-row { display: flex; align-items: center; gap: 10px; }

/* ── Feature behavior: horizontal capability sections ─────────────────── */
.pc-feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; margin-top: 14px; }
.pc-feat-grid .pc-capblock { margin: 0; }
@media (max-width: 760px) { .pc-feat-grid { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════════════
   Deployment globe v2 — title above, full globe (not cut off), carousel below,
   Coded Destiny tinted background (a CD spin on the Anthropic grayscale look)
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --dg-land: #aeb4c2;            /* cool gray land (CD tilt vs warm cream) */
  --dg-line: rgba(45,108,223,0.16);
  --dg-mk: #5b7fbf;
  --dg-bg1: #eef1f7;             /* soft CD-blue-tinted neutral */
  --dg-bg2: #e7ebf3;
}
[data-theme="dark"] {
  --dg-line: rgba(110,160,255,0.16); --dg-mk: #6e88b8;
  --dg-bg1: #0e1422; --dg-bg2: #0a0f1a;
}
.dg2 { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center;
  padding: 36px 24px 30px;
  background: radial-gradient(120% 90% at 50% 0%, var(--dg-bg1) 0%, var(--dg-bg2) 100%); }
.dg2-head { text-align: center; max-width: 720px; z-index: 2; }
.dg2-eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.dg2-title { font-family: var(--display); font-weight: 700; font-size: 52px; line-height: 1.05;
  color: var(--tx); margin: 0; letter-spacing: -0.5px; }
.dg2-sub { font-family: var(--sans); font-size: 16px; color: var(--tx2); line-height: 1.55; margin: 14px auto 0; max-width: 560px; }
.dg2-globe-wrap { width: 100%; max-width: 520px; margin: 8px auto 0; }
.dg2-svg { width: 100%; height: auto; display: block; overflow: visible; }
.dg2-ping { animation: dg2ping 2.6s ease-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes dg2ping { 0% { transform: scale(1); opacity: .9; } 70%,100% { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dg2-ping { animation: none; } }
.dg2-carousel { text-align: center; margin-top: 4px; z-index: 2; }
.dg2-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 12px; }
.dg2-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(100,110,130,.30); transition: all .3s; }
.dg2-dot.on { background: #c8862a; width: 18px; border-radius: 3px; }
.dg2-region { display: inline-block; font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 1.1px; text-transform: uppercase; color: #5a3d0c; background: #f0c067;
  padding: 3px 11px; border-radius: 4px; margin-bottom: 8px; }
.dg2-prod { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--tx); line-height: 1.2; }
.dg2-ver { font-family: var(--mono); font-size: 13px; font-weight: 400; color: var(--tx3); }
.dg2-desc { font-family: var(--sans); font-size: 14px; color: var(--tx3); line-height: 1.5; margin-top: 5px; max-width: 480px; margin-left: auto; margin-right: auto; }
@media (max-width: 720px) { .dg2-title { font-size: 36px; } .dg2-globe-wrap { max-width: 380px; } }

/* ── Persistent sidebar: push content on desktop, overlay on mobile ───── */
@media (min-width: 1080px) {
  .cdp-body.nav-open .cdp-main { margin-left: 340px; transition: margin-left .25s ease; }
  .cdp-body.nav-open .cdp-scrim { display: none; }   /* no dimming on desktop */
}
.cdp-main { transition: margin-left .25s ease; }

/* ── Products: stacked horizontal sections ────────────────────────────── */
.mkx-list { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.mkx-section { background: var(--bg-side,#fff); border: 1px solid var(--bd); border-radius: 12px; padding: 22px 24px; }
.mkx-head { display: flex; align-items: center; gap: 14px; }
.mkx-ic { width: 42px; height: 42px; border-radius: 10px; background: var(--accentl); color: var(--accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mkx-ic svg { width: 22px; height: 22px; }
.mkx-titles { flex: 1; min-width: 0; }
.mkx-name { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--tx); }
.mkx-id { font-family: var(--mono); font-size: 12px; color: var(--tx4); margin-top: 1px; }
.mkx-desc { font-size: 14px; color: var(--tx2); line-height: 1.6; margin: 12px 0 16px; }
.mkx-caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px;
  border-top: 1px solid var(--bd); padding-top: 16px; }
.mkx-cap { }
.mkx-cap-name { font-family: var(--sans); font-size: 14.5px; font-weight: 700; color: var(--tx); }
.mkx-cap-desc { font-size: 12.5px; color: var(--tx3); line-height: 1.5; margin-top: 2px; }
.mkx-cap .mk-feats { margin-top: 8px; }

/* ════════════════════════════════════════════════════════════════════════
   Overview v4 — big responsive globe with overlaid CD-style welcome, then
   Announcements + Innovation sections in the Coded Destiny vibe.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --dg-land: #b3b8c4; --dg-line: rgba(45,108,223,0.14);
  --ov-bg1: #f5f7fc; --ov-bg2: #eaeef7;
}
[data-theme="dark"] {
  --dg-land: #565f70; --dg-line: rgba(110,160,255,0.14);
  --ov-bg1: #0d1320; --ov-bg2: #0a0f1a;
}
/* full-bleed host (cancel main padding) */
.cdp-globe-host { margin: -24px -24px 0; }

.dg3 { position: relative; width: 100%; min-height: 60vh;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(130% 100% at 50% 0%, var(--ov-bg1) 0%, var(--ov-bg2) 100%); }
/* globe scales with the viewport: grows when window grows, shrinks when it shrinks */
.dg3-svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(90vw, 96vh); height: min(90vw, 96vh); z-index: 0; overflow: visible; }
.dg3-overlay { position: relative; z-index: 1; text-align: center; padding: 7vh 24px; }
.dg3-eyebrow { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.dg3-title { font-family: var(--display); font-weight: 700; font-size: clamp(40px, 6vw, 76px);
  line-height: 1.04; color: var(--tx); margin: 0; letter-spacing: -1px; }
.dg3-title em { font-style: italic; color: var(--accent); font-weight: 700; }
.dg3-ping { animation: dg3ping 2.6s ease-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes dg3ping { 0% { transform: scale(1); opacity: .9; } 70%,100% { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dg3-ping { animation: none; } }
.dg3-carousel { margin-top: 30px; }
.dg3-dots { display: flex; gap: 7px; justify-content: center; margin-bottom: 14px; }
.dg3-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(120,128,145,.30); transition: all .3s; }
.dg3-dot.on { width: 20px; border-radius: 4px; background: #8a93a6; }
.dg3-dot.on.live, .dg3-dot.live.on { background: #c8862a; }
.dg3-badge { display: inline-block; font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 1.1px; text-transform: uppercase; padding: 4px 12px; border-radius: 5px; }
.dg3-badge.live { color: #5a3d0c; background: #f0c067; }
.dg3-badge.soon { color: var(--tx3); background: rgba(120,128,145,.18); }
.dg3-prod { font-family: var(--display); font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; color: var(--tx); margin-top: 10px; }
.dg3-ver { font-family: var(--mono); font-size: 14px; font-weight: 400; color: var(--tx3); }

/* ── Announcements + innovation sections ─────────────────────────────── */
.ov-sec { padding: 40px 4px 8px; }
.ov-eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.ov-h2 { font-family: var(--display); font-size: clamp(26px, 3vw, 36px); font-weight: 700; color: var(--tx); margin: 0 0 22px; letter-spacing: -.5px; }
.ov-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.ov-card { background: var(--bg-side,#fff); border: 1px solid var(--bd); border-radius: 14px; padding: 22px; transition: box-shadow .15s, border-color .15s; }
.ov-card:hover { border-color: var(--accent); box-shadow: var(--shadow-lg); }
.ov-card-tag { display: inline-block; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--accent); background: var(--accentl); padding: 3px 10px; border-radius: 20px; margin-bottom: 12px; }
.ov-card-h { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--tx); margin: 0 0 8px; }
.ov-card-p { font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--tx2); margin: 0; }
.ov-innov { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
.ov-innov-item { border-left: 2px solid var(--accent); padding-left: 16px; }
.ov-innov-h { font-family: var(--sans); font-size: 16px; font-weight: 700; color: var(--tx); margin: 0 0 6px; }
.ov-innov-p { font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--tx2); margin: 0; }

/* ── Layout fix: top nav always above the sidebar; sidebar sits below it ── */
.cdp-top { position: sticky; top: 0; z-index: 300; }   /* above sidebar (200) */
.cdp-side { top: 58px !important; z-index: 200; }       /* start below the top bar */
.cdp-scrim { top: 58px; }

/* ── Product configuration: stack all tab sections VERTICALLY ─────────── */
.pc-cols { grid-template-columns: 1fr !important; }   /* roles · features · summary stacked */
.pc-feat-grid { grid-template-columns: 1fr !important; }  /* capability blocks stacked */
.pc-cols > * { max-width: 100%; }

/* ════════════════════════════════════════════════════════════════════════
   Consistent buttons across the portal:
   primary  = solid CD navy, white text
   secondary= white, navy text, navy border (for Update/Cancel/Copy/History)
   ════════════════════════════════════════════════════════════════════════ */
.cdp-save, .cdp-prod-btn, .pc-save, .ov-btn-primary {
  background: #0b1d3a !important; color: #fff !important; border: 1px solid #0b1d3a !important;
  font-family: var(--sans); font-weight: 700; border-radius: 9px; cursor: pointer; }
.cdp-save:hover, .cdp-prod-btn:hover, .pc-save:hover, .ov-btn-primary:hover { background: #11264b !important; }
.cdp-prod-btn { padding: 8px 16px; font-size: 13px; }
.cdp-prod-btn.sel { background: #1f7a4d !important; border-color: #1f7a4d !important; }   /* selected = green */
.cdp-prod-btn:disabled, .cdp-save:disabled { opacity: .45 !important; cursor: not-allowed; }
/* secondary / ghost */
.cdp-copy, .cdp-btn-ghost {
  background: #fff !important; color: #0b1d3a !important; border: 1px solid #c9d2e3 !important;
  font-family: var(--sans); font-weight: 600; border-radius: 8px; cursor: pointer; }
.cdp-copy:hover, .cdp-btn-ghost:hover { background: #f3f6fc !important; border-color: #0b1d3a !important; }
[data-theme="dark"] .cdp-copy, [data-theme="dark"] .cdp-btn-ghost { background: transparent !important; color: #cdd6ea !important; }

/* ── Reusable page header: icon · divider · title/subtitle ───────────── */
.cdp-phead { display: flex; align-items: center; gap: 20px; margin: 4px 0 26px; }
.cdp-phead-ic { width: 58px; height: 58px; flex-shrink: 0; border-radius: 15px;
  background: var(--accentl); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.cdp-phead-ic svg { width: 30px; height: 30px; }
.cdp-phead-div { width: 1px; align-self: stretch; background: var(--bd); margin: 2px 0; }
.cdp-phead-txt { min-width: 0; }
.cdp-phead-title { font-family: var(--display); font-size: 34px; font-weight: 700; color: var(--tx); line-height: 1.08; letter-spacing: -.5px; }
.cdp-phead-sub { font-family: var(--sans); font-size: 14px; color: var(--tx3); line-height: 1.5; margin-top: 5px; max-width: 660px; }

/* ── Products: divider lines between capabilities ─────────────────────── */
.mkx-caps { display: block !important; }   /* stack capabilities, divider between */
.mkx-cap { padding: 16px 0; border-top: 1px solid var(--bdl); }
.mkx-cap:first-child { padding-top: 0; border-top: none; }

/* ── Sign-up: product heading subnote + single-window terms ──────────── */
.cdp-su-subnote { font-family: var(--sans); font-size: 13px; color: var(--tx3); margin: 2px 0 14px 30px; }
.cdp-terms-scroll { max-height: 52vh; overflow-y: auto; padding-right: 8px; }
.cdp-terms-item { padding: 14px 0; border-bottom: 1px solid var(--bdl); }
.cdp-terms-item:last-child { border-bottom: none; }
.cdp-terms-item h3 { font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--tx); margin: 0 0 6px; }
.cdp-terms-item p { font-size: 13px; line-height: 1.6; color: var(--tx2); margin: 0; }
.cdp-terms-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ── Demos: launch link + TERA coming-soon ───────────────────────────── */
.cdp-demo-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--accent); cursor: pointer; }
.cdp-demo-link:hover { text-decoration: underline; }
.cdp-demo-soon { background: var(--accentl); border: 1px solid var(--accent); border-radius: 10px;
  padding: 12px 14px; font-size: 13px; line-height: 1.55; color: var(--tx2); margin-bottom: 14px; }
.cdp-demo-soon::before { content: "Coming soon"; display: inline-block; font-weight: 700; font-size: 11px;
  letter-spacing: .6px; text-transform: uppercase; color: var(--accent); margin-right: 8px; }

/* ── SSO: cleaner endpoints + enablements (less "text box") ──────────── */
.cdp-sso-out { border: 1px solid var(--bd); border-radius: 12px; overflow: hidden; margin-top: 8px; }
.cdp-sso-row { display: grid; grid-template-columns: 260px 1fr auto; gap: 14px; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--bdl); }
.cdp-sso-row:last-child { border-bottom: none; }
.cdp-sso-row > span:first-child { color: var(--tx3); font-size: 13px; }
.cdp-sso-v { font-family: var(--mono); font-size: 12px; color: var(--tx2); background: transparent;
  word-break: break-all; padding: 0; }

.sso-enable { border: 1px solid var(--bd); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; background: var(--bg-side,#fff); }
.sso-enable-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sso-enable-name { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--tx); }
.sso-enable-meta { font-family: var(--sans); font-size: 12.5px; color: var(--tx3); margin-left: 10px; }
.sso-enable-actions { display: flex; gap: 18px; margin-top: 12px; flex-wrap: wrap; }
.sso-link { font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--accent);
  cursor: pointer; background: none; border: none; padding: 0; }
.sso-link:hover { text-decoration: underline; }
.sso-enable-warn { font-size: 13px; color: #b54708; margin-top: 10px; }
.sso-history { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--bdl); }
.sso-history li { display: grid; grid-template-columns: 170px 1fr auto; gap: 12px; text-align: left;
  font-size: 12.5px; color: var(--tx3); padding: 4px 0; }
.sso-hist-at { font-family: var(--mono); }
.sso-hist-ev { color: var(--tx2); }
.sso-hist-by { color: var(--tx4); }
@media (max-width: 700px) { .cdp-sso-row, .sso-history li { grid-template-columns: 1fr; gap: 4px; } }
.sso-enable-id { display: flex; align-items: baseline; min-width: 0; }

/* ── Overview: two-column layout for the sections below the globe ─────── */
.ov-two { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.ov-stack { display: flex; flex-direction: column; gap: 14px; }
.ov-two .ov-innov-item { border-left: 2px solid var(--accent); padding-left: 16px; }
@media (max-width: 860px) { .ov-two { grid-template-columns: 1fr; gap: 8px; } }

/* ── Clean status panel (replaces the awkward centered tinted box) ────── */
.sso-status { display: flex; gap: 14px; align-items: flex-start; padding: 18px 4px 4px; }
.sso-status-ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
  background: var(--gnl); color: var(--gn); display: flex; align-items: center; justify-content: center; }
.sso-status-ic svg { width: 22px; height: 22px; }
.sso-status-h { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--tx); }
.sso-status-p { font-family: var(--sans); font-size: 13.5px; line-height: 1.55; color: var(--tx3); margin-top: 4px; max-width: 560px; }

/* ════════════════════════════════════════════════════════════════════════
   Product config — Group mappings: clean subsections, 2-col naming,
   GUID on one line, styled selects + map list (no boxy text).
   ════════════════════════════════════════════════════════════════════════ */
.pc-sub { padding: 18px 0; border-top: 1px solid var(--bd); }
.pc-sub:first-of-type { border-top: none; padding-top: 8px; }
.pc-sub-h { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .4px; color: var(--tx); margin-bottom: 4px; }
.pc-sub-note { font-family: var(--sans); font-size: 12.5px; color: var(--tx3); margin-bottom: 14px; line-height: 1.5; }
/* add-guid row */
.pc-addguid { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 10px; }
/* naming: 2 columns */
.pc-naming { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--bd); margin-top: 8px; }
.pc-name-row { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; align-items: center; gap: 14px; background: none; border: none; border-bottom: 1px solid var(--bd); border-radius: 0; padding: 10px 2px; }
.pc-name-meta { display: flex; align-items: center; gap: 10px; }
.pc-guid { font-family: var(--mono); font-size: 11px; color: var(--tx4); background: transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-seen { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.pc-seen.yes { background: var(--gnl); color: var(--gn); }
.pc-seen.no { background: var(--bg3); color: var(--tx4); }
/* styled native selects */
.cdp-select2 { font: 14px var(--sans); padding: 9px 12px; border: 1px solid var(--bd); border-radius: 9px;
  background: var(--bg-side,#fff); color: var(--tx); cursor: pointer; min-width: 200px; }
.cdp-select2:focus { outline: none; border-color: var(--accent); }
/* Native select used on the New-ticket form (Category / Priority) — styled to match inputs */
.cdp-select { width: 100%; font: 14px var(--sans); padding: 10px 38px 10px 13px;
  border: 1px solid var(--bd); border-radius: 10px; background-color: var(--bg2); color: var(--tx);
  cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 16px;
  transition: border-color .15s, box-shadow .15s; }
.cdp-select:hover { border-color: var(--accent); }
.cdp-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accentl); }
/* map bar: dropdown → dropdown → button (top of subsection) */
.pc-mapbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pc-maparrow { color: var(--tx4); font-weight: 700; }
/* map list: clean rows, not table boxes */
.pc-maplist { display: flex; flex-direction: column; gap: 8px; }
.pc-maprow { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--bd); border-radius: 10px; background: var(--bg-side,#fff); }
.pc-map-grp { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; }
.pc-grpname { font-family: var(--sans); font-weight: 700; font-size: 14px; color: var(--tx); }
.pc-rolecode { font-family: var(--mono); font-size: 12.5px; background: var(--accentl); color: var(--accent); padding: 2px 8px; border-radius: 5px; }
.pc-map-grants { font-size: 12.5px; color: var(--tx3); }
.pc-map-rm { margin-left: auto; padding: 5px 12px !important; font-size: 12px; }
@media (max-width: 720px) { .pc-naming { grid-template-columns: 1fr; } .pc-addguid { grid-template-columns: 1fr; } }

/* ── Key Management page ─────────────────────────────────────────────── */
.km-empty { font-size: 14px; color: var(--tx3); padding: 6px 0; }
.km-current { display: flex; flex-direction: column; gap: 10px; }
.km-row { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; }
.km-k { font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--tx4); }
.km-v { font-size: 14px; color: var(--tx); }
.km-code { font-family: var(--mono); font-size: 12.5px; color: var(--tx2); background: var(--bg3); padding: 4px 10px; border-radius: 6px; word-break: break-all; }
.km-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.km-opt { text-align: left; background: var(--bg-side,#fff); border: 1px solid var(--bd); border-radius: 12px; padding: 16px; cursor: pointer; transition: all .15s; }
.km-opt:hover { border-color: var(--accent); }
.km-opt.on { border-color: var(--accent); background: var(--accentl); box-shadow: 0 0 0 1px var(--accent) inset; }
.km-opt-h { font-family: var(--sans); font-size: 14.5px; font-weight: 700; color: var(--tx); margin-bottom: 6px; }
.km-opt-d { font-size: 12.5px; line-height: 1.5; color: var(--tx3); }
.km-opt-d code { font-family: var(--mono); font-size: 11.5px; }
.km-arn { margin-top: 16px; }
.km-log { list-style: none; margin: 0; padding: 0; }
.km-log li { display: grid; grid-template-columns: 180px 1fr auto; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--bdl); text-align: left; font-size: 13px; }
.km-log li:last-child { border-bottom: none; }
.km-log-at { font-family: var(--mono); font-size: 12px; color: var(--tx4); }
.km-log-ev { color: var(--tx2); }
.km-log-by { color: var(--tx4); }
@media (max-width: 760px) { .km-opts { grid-template-columns: 1fr; } .km-log li { grid-template-columns: 1fr; gap: 2px; } }

/* ── Sign-up: inline next-steps after submit ─────────────────────────── */
.cdp-nextsteps { margin-top: 16px; border: 1px solid var(--gn); background: var(--gnl); border-radius: 12px; padding: 14px 16px; }
.cdp-nextsteps-msg { font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--gn); }
.cdp-nextsteps-body { font-family: var(--sans); font-size: 13.5px; color: var(--tx2); line-height: 1.6; margin-top: 8px; }
.cdp-prod.disabled { opacity: .55; pointer-events: none; }
.cdp-prod.disabled .cdp-i { pointer-events: auto; }
.sso-status-txt { min-width: 0; }

/* ── Top bar: keep hamburger + logo together on the left ─────────────── */
.cdp-top-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cdp-burger-top { margin: 0; }
.cdp-top { gap: 18px; }

/* ════════════════════════════════════════════════════════════════════════
   Admin guides — index/stepper + clean expandable articles
   ════════════════════════════════════════════════════════════════════════ */
.hg-layout { display: grid; grid-template-columns: 250px 1fr; gap: 26px; align-items: start; }
.hg-index { position: sticky; top: 74px; display: flex; flex-direction: column; gap: 2px; }
.hg-index-item { display: flex; align-items: center; gap: 12px; text-align: left; background: none; border: none;
  padding: 10px 12px; border-radius: 9px; cursor: pointer; color: var(--tx3); font-family: var(--sans); font-size: 13.5px; }
.hg-index-item:hover { background: var(--bg3); color: var(--tx); }
.hg-index-item.on { background: var(--accentl); color: var(--accent); font-weight: 600; }
.hg-index-title { line-height: 1.3; }
.hg-num { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: var(--bg3); color: var(--tx3);
  display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 12px; font-weight: 700; }
.hg-index-item.on .hg-num { background: var(--accent); color: #fff; }
.hg-num.lg { width: 32px; height: 32px; font-size: 14px; }

.hg-content { display: flex; flex-direction: column; gap: 14px; }
.hg-article { background: var(--bg-side,#fff); border: 1px solid var(--bd); border-radius: 14px; overflow: hidden; transition: border-color .15s; }
.hg-article.on { border-color: var(--accent); }
.hg-article-head { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: none; border: none;
  padding: 18px 20px; cursor: pointer; }
.hg-article.on .hg-num.lg { background: var(--accent); color: #fff; }
.hg-article-title { font-family: var(--sans); font-size: 16px; font-weight: 700; color: var(--tx); margin: 0; flex: 1; }
.hg-chev { color: var(--tx4); transition: transform .2s; }
.hg-chev.open { transform: rotate(180deg); }
.hg-body { padding: 4px 22px 22px 66px; }
.hg-body p { font-family: var(--sans); font-size: 14.5px; line-height: 1.7; color: var(--tx2); margin: 0 0 14px; }
.hg-body ol, .hg-body ul { margin: 0 0 14px; padding-left: 0; list-style: none; counter-reset: hg; }
.hg-body ol li { counter-increment: hg; position: relative; padding: 8px 0 8px 38px; font-size: 14.5px; line-height: 1.6; color: var(--tx2); border-bottom: 1px solid var(--bdl); }
.hg-body ol li:last-child { border-bottom: none; }
.hg-body ol li::before { content: counter(hg); position: absolute; left: 0; top: 8px; width: 24px; height: 24px;
  border-radius: 50%; background: var(--accentl); color: var(--accent); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.hg-body ul li { position: relative; padding: 6px 0 6px 22px; font-size: 14.5px; line-height: 1.6; color: var(--tx2); }
.hg-body ul li::before { content: ""; position: absolute; left: 4px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hg-body h4 { font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--tx); margin: 16px 0 8px; }
.hg-body a { color: var(--accent); font-weight: 600; }
@media (max-width: 860px) { .hg-layout { grid-template-columns: 1fr; } .hg-index { position: static; flex-direction: row; flex-wrap: wrap; } .hg-body { padding-left: 22px; } }

/* ── Sidebar: wider so labels like "Product configuration" fit ───────── */
.cdp-nav-label { white-space: normal; line-height: 1.2; flex: 1 1 auto; }
.cdp-nav.nested { padding-top: 8px; padding-bottom: 8px; padding-left: 30px; font-size: 13px; color: var(--tx3); }
.cdp-nav.nested .cdp-nav-i { width: 15px; height: 15px; }
.cdp-nav.nested.on { color: var(--accent); }
.cdp-side.collapsed .cdp-nav.nested { padding-left: 11px; }
.cdp-nav { font-size: 14px; }
.cdp-side { overflow-x: hidden; }
.cdp-side { padding-left: 14px; padding-right: 14px; }

/* ════════════════════════════════════════════════════════════════════════
   Product config — Feature behavior: header subtext, capability count circle,
   column headers, Licensed/Enabled/Display switches, grayed back-end Display.
   ════════════════════════════════════════════════════════════════════════ */
/* section subtext directly under the card header (replaces boxed text) */
.pc-sec-sub { font-family: var(--sans); font-size: 13px; line-height: 1.55; color: var(--tx3);
  padding: 10px 18px 0; max-width: 760px; }
/* capability header: circle count + name + "features" */
.pc-cap-head { display: flex; align-items: center; gap: 10px; padding: 6px 0 10px; }
.pc-cap-count { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  background: var(--accent); color: #fff; font-family: var(--sans); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.pc-cap-name2 { font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--tx); }
.pc-cap-feats-label { font-family: var(--sans); font-size: 12.5px; color: var(--tx4); }
/* column headers + rows: name | Licensed | Enabled | Display */
.pc-feat-colhdr, .pc-featrow3 { display: grid; grid-template-columns: 1fr 84px 84px 84px; align-items: center; gap: 8px; }
.pc-feat-colhdr { padding: 4px 0 6px; border-bottom: 1px solid var(--bdl); }
.pc-feat-colname, .pc-feat-colsw { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--tx4); }
.pc-feat-colsw { text-align: center; }
.pc-featrow3 { padding: 9px 0; border-bottom: 1px solid var(--bdl); }
.pc-featrow3:last-child { border-bottom: none; }
.pc-featrow3 .pc-switch-l { justify-content: center; margin: 0; }
.pc-featrow3 .pc-switch-l.pc-switch-off { opacity: .4; cursor: not-allowed; }
.pc-feat-tag { display: inline-block; font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--tx4); background: var(--bg3); padding: 1px 7px; border-radius: 10px; margin-left: 8px; vertical-align: middle; }
.pc-capblock { padding: 14px 0; border-top: 1px solid var(--bd); }
.pc-capblock:first-child { border-top: none; padding-top: 4px; }

/* unlicensed features: dimmed row + amber "not licensed" tag */
.pc-featrow3.pc-feat-unlic .lic-feat-name { color: var(--tx4); }
.pc-feat-tag.pc-tag-unlic { color: #b54708; background: #fef0c7; }
[data-theme="dark"] .pc-feat-tag.pc-tag-unlic { color: #fec84b; background: rgba(181,71,8,.22); }

/* ════════════════════════════════════════════════════════════════════════
   Feature behavior — summary bar + capability header (name then count)
   ════════════════════════════════════════════════════════════════════════ */
/* horizontal summary: 4 vertical cells separated by gray dividers (no boxes) */
.pc-summary { display: grid; grid-template-columns: repeat(4, 1fr); margin: 4px 0 18px;
  border: 1px solid var(--bd); border-radius: 12px; overflow: hidden; background: var(--bg); }
.pc-sum-cell { padding: 16px 18px; border-left: 1px solid var(--bd); }
.pc-sum-cell:first-child { border-left: none; }
.pc-sum-n { font-family: var(--serif, Georgia, serif); font-size: 26px; font-weight: 700; color: var(--tx); line-height: 1; }
.pc-sum-l { font-family: var(--sans); font-size: 12px; color: var(--tx3); margin-top: 6px; letter-spacing: .2px; }
@media (max-width: 720px) { .pc-summary { grid-template-columns: 1fr 1fr; } .pc-sum-cell:nth-child(3) { border-left: none; } }

/* capability header: NAME first, then a small count circle + "features" */
.pc-cap-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--bg3); }
.pc-cap-name2 { font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--tx); }
.pc-cap-count { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%;
  background: var(--accent); color: #fff; font-family: var(--sans); font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.pc-cap-feats-label { font-family: var(--sans); font-size: 12px; color: var(--tx3); }

/* Roles tab: plain fraction count, no light-blue box */
.pc-cap-frac { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--tx3); background: none; padding: 0; }

/* ════════════════════════════════════════════════════════════════════════
   Group mappings — numbered sections with headers (no gray text boxes)
   ════════════════════════════════════════════════════════════════════════ */
.pc-section { padding: 18px 0; border-top: 1px solid var(--bd); }
.pc-section:first-of-type { border-top: none; padding-top: 6px; }
.pc-section-h { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.pc-section-num { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%;
  background: var(--accent); color: #fff; font-family: var(--sans); font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.pc-section-t { font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--tx); }
.pc-section-sub { font-family: var(--sans); font-size: 12.5px; color: var(--tx3); margin: 0 0 14px 34px; line-height: 1.5; }
/* group naming rows: no gray box — plain rows with a light divider */
.pc-name-row { border-radius: 10px; }
.pc-naming { gap: 10px; }

/* Feature behavior: two-column layout (Licensed + Enabled; Display removed) */
.pc-feat-colhdr.pc-featrow2col, .pc-featrow3.pc-featrow2col { grid-template-columns: 1fr 90px 90px; }

/* product name + description tile under the product picker */
.pc-prod-meta { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--bd); border-radius: 10px; background: var(--bg2); }
.pc-prod-meta-name { font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--tx); display: flex; align-items: center; gap: 10px; }
.pc-prod-meta-id { font-family: var(--mono, monospace); font-size: 11px; font-weight: 600; color: var(--accent);
  background: var(--accentl); padding: 2px 8px; border-radius: 6px; }
.pc-prod-meta-desc { font-family: var(--sans); font-size: 13px; color: var(--tx3); line-height: 1.55; margin-top: 6px; }

/* ── Account Profile: contacts + invoices ─────────────────────────────── */
.cdp-help-p { font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--tx2); }
.cdp-contact { border: 1px solid var(--bd); border-radius: 14px; padding: 18px; margin-bottom: 16px; background: var(--bg); }
.cdp-contact-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cdp-contact-n { font-family: var(--sans); font-weight: 800; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--tx3); }
.cdp-contact-rm { background: none; border: none; cursor: pointer; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--rd, #d92d20); padding: 4px 6px; border-radius: 6px; }
.cdp-contact-rm:hover { background: rgba(217,45,32,.08); }
.cdp-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.cdp-contact-grid .cdp-input2 { width: 100%; }
.cdp-contact-grid .cdp-label { display: block; margin-bottom: 5px; }
.cdp-add-contact { background: none; border: 1.5px dashed var(--bd); cursor: pointer; width: 100%; padding: 13px; border-radius: 12px;
  font-family: var(--sans); font-weight: 700; font-size: 14px; color: var(--accent); transition: border-color .15s, background .15s; }
.cdp-add-contact:hover { border-color: var(--accent); background: var(--accentl); }
.cdp-inv-empty { padding: 8px 0; }
@media (max-width: 720px) { .cdp-contact-grid { grid-template-columns: 1fr; } }

/* ── Your Products (version & upgrade management) ─────────────────────── */
.yp-policy { display: flex; gap: 12px; align-items: flex-start; background: var(--accentl); border: 1px solid var(--bd);
  border-radius: 14px; padding: 14px 18px; margin-bottom: 22px; font-family: var(--sans); font-size: 13.5px; line-height: 1.55; color: var(--tx2); }
.yp-policy svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.yp-policy code { font-family: var(--mono, monospace); background: var(--bg3); padding: 1px 6px; border-radius: 5px; font-size: 12px; }
.yp-list { display: flex; flex-direction: column; gap: 18px; }
.yp-card { border: 1px solid var(--bd); border-radius: 16px; background: var(--bg2); overflow: hidden; border-top: 3px solid var(--yp-tint, var(--accent)); }
.yp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--bd); flex-wrap: wrap; }
.yp-head-l { display: flex; align-items: center; gap: 12px; }
.yp-dot { width: 12px; height: 12px; border-radius: 4px; background: var(--yp-tint, var(--accent)); flex-shrink: 0; }
.yp-name { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--tx); text-decoration: none; }
.yp-name:hover { color: var(--accent); }
.yp-url { font-family: var(--mono, monospace); font-size: 12px; color: var(--tx3); margin-top: 2px; }
.yp-head-r { display: flex; align-items: center; gap: 12px; }
.yp-cur { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--tx); }
.yp-badge { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .4px; padding: 4px 11px; border-radius: 99px; }
.yp-badge.ok { background: rgba(16,140,90,.12); color: #0a8a55; }
.yp-badge.warn { background: rgba(217,45,32,.12); color: #b42318; }
.yp-body { display: grid; grid-template-columns: 1fr 1.2fr; gap: 26px; padding: 20px 22px; }
.yp-col-h { font-family: var(--sans); font-weight: 800; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--tx3); margin-bottom: 12px; }
.yp-rel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.yp-rel li { display: flex; align-items: center; gap: 10px; }
.yp-rel li.out { opacity: .55; }
.yp-rel-v { font-family: var(--mono, monospace); font-weight: 600; font-size: 14px; color: var(--tx); min-width: 56px; }
.yp-tag { font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .3px; padding: 2px 8px; border-radius: 99px; }
.yp-tag.latest { background: var(--accentl); color: var(--accent); }
.yp-tag.you { background: var(--yp-tint, var(--accent)); color: #fff; }
.yp-tag.out { background: rgba(120,120,130,.14); color: #6b7280; }
.yp-note { font-family: var(--sans); font-size: 13.5px; line-height: 1.6; color: var(--tx2); margin: 0; }
.yp-note.warn { color: #b42318; }
.yp-up { padding: 0 22px 20px; }
.yp-latest-line { font-family: var(--sans); font-size: 14px; font-weight: 600; color: #0a8a55; }
.yp-up-btn { background: var(--yp-tint, var(--accent)); color: #fff; border: none; cursor: pointer; font-family: var(--sans);
  font-weight: 700; font-size: 14.5px; padding: 12px 22px; border-radius: 10px; display: inline-flex; align-items: center; gap: 8px; transition: filter .15s; }
.yp-up-btn:hover { filter: brightness(1.06); }
.yp-panel { border: 1px solid var(--bd); border-radius: 14px; background: var(--bg); padding: 18px; }
.yp-panel-h { font-family: var(--sans); font-weight: 700; font-size: 15px; color: var(--tx); margin-bottom: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.yp-panel-url { font-family: var(--mono, monospace); font-size: 12px; color: var(--tx3); font-weight: 400; }
.yp-step { border-top: 1px solid var(--bd); padding: 16px 0; }
.yp-step:first-of-type { border-top: none; padding-top: 0; }
.yp-step-h { display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 700; font-size: 14.5px; color: var(--tx); }
.yp-step-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg3); color: var(--tx3); font-size: 12px; font-weight: 800; flex-shrink: 0; }
.yp-step-n.done { background: #0a8a55; color: #fff; }
.yp-manual { font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #b06a12; background: rgba(180,120,20,.13); padding: 2px 8px; border-radius: 99px; }
.yp-step-p { font-family: var(--sans); font-size: 13px; line-height: 1.6; color: var(--tx2); margin: 8px 0 12px 32px; }
.yp-auto { list-style: none; margin: 10px 0 0 32px; padding: 0; display: grid; gap: 7px; }
.yp-auto li { display: flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: 13px; color: var(--tx2); }
.yp-auto svg { color: #0a8a55; flex-shrink: 0; }
.yp-btn-outline { margin-left: 32px; background: none; border: 1.5px solid var(--accent); color: var(--accent); cursor: pointer;
  font-family: var(--sans); font-weight: 700; font-size: 13.5px; padding: 9px 18px; border-radius: 9px; }
.yp-btn-outline:hover { background: var(--accentl); }
.yp-btn-primary { margin-left: 32px; background: var(--accent); border: none; color: #fff; cursor: pointer;
  font-family: var(--sans); font-weight: 700; font-size: 13.5px; padding: 10px 20px; border-radius: 9px; }
.yp-btn-primary:disabled { background: var(--bg3); color: var(--tx4, #98a2b3); cursor: not-allowed; }
.yp-ok-line { margin-left: 32px; font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: #0a8a55; }
.yp-hint { margin: 8px 0 0 32px; font-family: var(--sans); font-size: 12px; color: var(--tx3); }
.yp-confirm { margin-left: 32px; background: var(--accentl); border: 1px solid var(--bd); border-radius: 10px; padding: 13px 15px;
  font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--tx); }
.yp-confirm.danger { background: rgba(217,45,32,.07); border-color: rgba(217,45,32,.25); }
.yp-confirm-btns { display: flex; gap: 10px; margin-top: 11px; }
.yp-btn-go { background: var(--accent); border: none; color: #fff; cursor: pointer; font-family: var(--sans); font-weight: 700; font-size: 13px; padding: 8px 16px; border-radius: 8px; }
.yp-btn-go.danger { background: #d92d20; }
.yp-btn-go:disabled { background: var(--bg3); color: var(--tx4, #98a2b3); cursor: not-allowed; }
.yp-btn-cancel { background: none; border: 1px solid var(--bd); color: var(--tx2); cursor: pointer; font-family: var(--sans); font-weight: 600; font-size: 13px; padding: 8px 16px; border-radius: 8px; }
.yp-collapse { margin-top: 6px; background: none; border: none; color: var(--tx3); cursor: pointer; font-family: var(--sans); font-size: 13px; font-weight: 600; text-decoration: underline; }
@media (max-width: 720px) { .yp-body { grid-template-columns: 1fr; gap: 18px; } }

/* product nav: short description under the product name */
.cdp-nav.nested .cdp-nav-label { display: flex; flex-direction: column; line-height: 1.15; }
.cdp-nav-desc { font-size: 11px; font-weight: 500; color: var(--tx3); margin-top: 1px; }
.cdp-nav.nested.on .cdp-nav-desc { color: var(--accent); opacity: .85; }
.cdp-side.collapsed .cdp-nav-desc { display: none; }

/* Groups tab — at-a-glance summary of all known IdP groups + mapping status */
.pc-gs { margin: 4px 0 18px; }
.pc-gs-h { font-size: 12px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--tx4); margin-bottom: 9px; }
.pc-gs-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pc-gs-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--tx2); background: var(--bg3); border: 1px solid var(--bd); border-radius: 14px; padding: 4px 11px; max-width: 100%; }
.pc-gs-chip.mapped { background: var(--gnl); border-color: transparent; color: var(--gn); }
.pc-gs-chip em { font-style: normal; font-weight: 700; }
.pc-gs-chip em.un { font-weight: 500; color: var(--tx4); }

/* ===== Usage Metrics ===== */
.um-card { padding: 0 !important; overflow: visible; }
.um-card-h { display: flex; align-items: center; gap: 8px; padding: 14px 18px; cursor: pointer;
  font: 600 14px var(--sans); color: var(--tx); border-bottom: 1px solid var(--bd); user-select: none; }
.um-chev { display: inline-block; transition: transform .15s; color: var(--tx2, #667085); font-size: 2.2em; line-height: 1; }
.um-filter-body { padding: 18px; }
.um-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 18px; }
.um-row2 { grid-template-columns: 1fr 1fr 1fr 1fr auto; align-items: end; margin-top: 14px; }
.um-fl { display: flex; flex-direction: column; gap: 6px; }
.um-fl > span { font: 600 11px var(--sans); letter-spacing: .3px; text-transform: uppercase; color: var(--tx2, #667085); }
.um-sel { width: 100%; min-width: 0; }
.um-go { height: 40px; white-space: nowrap; }

.um-stats { display: flex; gap: 14px; flex-wrap: wrap; margin: 16px 0; }
.um-stat { flex: 1; min-width: 150px; background: var(--bg-side, #fff); border: 1px solid var(--bd);
  border-radius: 12px; padding: 16px; }
.um-stat-l { font: 600 11px var(--sans); letter-spacing: .4px; text-transform: uppercase; color: var(--tx2, #667085); }
.um-stat-v { font: 700 26px var(--display, var(--sans)); margin-top: 6px; color: var(--tx); }

.um-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--bd); margin-bottom: 16px; }
.um-tab { appearance: none; background: none; border: none; padding: 11px 20px; font: 600 14px var(--sans);
  color: var(--tx2, #667085); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.um-tab:hover { color: var(--tx); }
.um-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.um-tab-body { }

.um-muted { color: var(--tx2, #667085); }
.um-sub { font-size: 12px; margin-bottom: 12px; }
.um-pad { padding: 16px 20px 18px; }
.um-bar-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.um-bar-label { width: 150px; flex-shrink: 0; font: 600 13px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tx); line-height: 22px; }
.um-bar-track { flex: 1; background: var(--bg2, #f1f3f5); border-radius: 6px; height: 22px; overflow: hidden; min-width: 0; }
.um-bar-fill { height: 100%; border-radius: 6px; transition: width .3s; }
.um-bar-val { width: 64px; text-align: right; font: 700 13px var(--sans); flex-shrink: 0; color: var(--tx); line-height: 22px; font-variant-numeric: tabular-nums; }

.um-cap-row { padding: 10px 0; border-bottom: 1px solid var(--bd); }
.um-cap-head { display: flex; align-items: center; gap: 12px; }
.um-cap-name { width: 150px; flex-shrink: 0; font: 600 13px var(--sans); color: var(--tx); line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-cap-chips { margin-left: 162px; margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.um-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; font: 11.5px var(--sans);
  background: var(--bg2, #f4f3ff); color: #6941c6; border: 1px solid #e9d7fe; border-radius: 12px; }
.um-chip b { color: #53389e; }

/* Demo details drawer — capability/feature tree */
.cdp-cap-block { margin: 12px 0; padding: 10px 0; border-top: 1px solid var(--bd); }
.cdp-cap-name { font: 600 14px var(--sans); color: var(--tx); }
.cdp-cap-ver { font: 500 12px var(--sans); color: var(--tx2, #667085); }
.cdp-cap-desc { font-size: 13px; color: var(--tx2, #667085); margin: 4px 0 8px; }
.cdp-feat-list { margin: 0; padding-left: 18px; }
.cdp-feat-list li { margin: 4px 0; font-size: 13.5px; }
.cdp-feat-name { font-weight: 600; color: var(--tx); }
.cdp-feat-desc { color: var(--tx2, #667085); }

/* ════ GANESH page v19 — these styles MUST live in public/portal.css: it is
   the SERVED stylesheet (app/layout.jsx links /portal.css). The v18 block was
   appended to the repo-root portal.css, which is not served — that is why the
   why-detail panel rendered unstyled and the demo fullscreen appeared inline
   at the bottom of the page. ════ */

/* intro with Coded Destiny blue key phrases */
.pd-intro-lg { font-size: 21px; line-height: 1.55; max-width: 980px; }
.pd-run-blue { font-style: italic; color: #2563eb; font-weight: 700; }

/* WHY — vertical stack, full-width cards, detail beneath the clicked card */
.pd-why-stack { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.pd-why-wide { display: flex; align-items: flex-start; gap: 18px; width: 100%;
               background: #fff; border: 1px solid #e4e7ec; border-radius: 14px;
               padding: 18px 22px; }
.pd-why-wide .pd-why-num { font-family: Georgia, "Times New Roman", serif;
               font-size: 26px; font-weight: 700; color: #2563eb; font-style: italic;
               min-width: 44px; }
.pd-why-body { flex: 1; min-width: 0; }
.pd-why-wide .pd-why-h { margin: 2px 0 6px; font-size: 19px; }
.pd-why-wide .pd-why-p { margin: 0; color: #475467; font-size: 15px; line-height: 1.6; }
.pd-why-click { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.pd-why-click:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16,24,40,.10); }
.pd-why-wide.on { border-color: #2563eb; box-shadow: 0 10px 26px rgba(16,24,40,.12); }
.pd-why-more { align-self: center; white-space: nowrap; font-size: 12.5px; font-weight: 800;
               letter-spacing: .03em; text-transform: uppercase; color: #2563eb; }
.pd-why-detail { background: #fff; border: 2px solid; border-radius: 16px;
                 padding: 20px 26px 16px; margin: -4px 0 6px;
                 box-shadow: 0 14px 34px rgba(16,24,40,.10); }
.pd-why-detail-p { font-size: 15.5px; line-height: 1.7; color: #344054;
                   margin: 0 0 12px; max-width: 940px; }
.pd-why-detail-x { border: 1px solid #d0d5dd; background: #fff; border-radius: 9px;
                   padding: 7px 13px; font-weight: 700; cursor: pointer; }

/* DEMOS — What-page blocks; frame + expand + fullscreen overlay */
.pd-demo-block { align-items: center; }
.pd-demo-frame { position: relative; }
.pd-demo-gif { width: 100%; height: auto; border-radius: 12px;
               border: 1px solid #e4e7ec; box-shadow: 0 14px 34px rgba(16,24,40,.12);
               display: block; }
.pd-demo-expand { position: absolute; right: 12px; bottom: 12px; border: 0; cursor: pointer;
                  background: rgba(16,24,40,.78); color: #fff; font-weight: 800;
                  border-radius: 9px; padding: 8px 13px; font-size: 13px; }
.pd-demo-expand:hover { background: rgba(16,24,40,.92); }
.pd-demo-kpis { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.pd-demo-kpi { border: 1px solid #e4e7ec; border-radius: 12px; padding: 10px 16px;
               background: #fff; min-width: 110px; }
.pd-demo-kpi-v { font-family: Georgia, "Times New Roman", serif; font-size: 20px;
                 font-weight: 700; color: #101828; }
.pd-demo-kpi-l { font-size: 12px; color: #667085; margin-top: 2px; }
.pd-demo-fs { position: fixed; inset: 0; z-index: 1200; background: rgba(10,14,22,.93);
              display: flex; flex-direction: column; align-items: center;
              justify-content: center; padding: 3vh 3vw; }
.pd-demo-fs img { max-width: 94vw; max-height: 84vh; border-radius: 10px;
                  box-shadow: 0 30px 80px rgba(0,0,0,.6); background: #fff; }
.pd-demo-fs-bar { width: 94vw; max-width: 1500px; display: flex; align-items: center;
                  color: #fff; font-size: 17px; margin-bottom: 12px; }
.pd-demo-fs-x { margin-left: auto; border: 1px solid rgba(255,255,255,.4);
                background: transparent; color: #fff; border-radius: 9px;
                padding: 8px 14px; font-weight: 700; cursor: pointer; }
@media (max-width: 980px) {
  .pd-why-wide { flex-wrap: wrap; }
  .pd-why-more { align-self: flex-start; }
}

/* ── Sign-up v20: even, pleasant product tiles ───────────────────────────
   Equal-width columns, equal-height cards, clamped descriptions and the
   action pinned to the bottom — no more ragged tiles. */
.cdp-prod-grid { display: grid !important;
                 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                 gap: 16px; align-items: stretch; }
.cdp-prod { display: flex !important; flex-direction: column; align-items: center;
            min-height: 320px; padding: 18px 16px 16px; text-align: center; }
.cdp-prod .cdp-prod-name { font-size: 16.5px; font-weight: 800; margin: 10px 0 8px; }
.cdp-prod .cdp-prod-full { font-size: 12.5px; line-height: 1.55; color: #667085;
            display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
            overflow: hidden; }
.cdp-prod .cdp-prod-btn, .cdp-prod .cdp-prod-prov { margin-top: auto !important; }
.cdp-prod .cdp-prod-btn { padding: 9px 22px; }
.cdp-prod .cdp-prod-prov { padding-top: 12px; font-size: 12.5px; color: #067647;
            font-weight: 700; }
@media (max-width: 760px) { .cdp-prod-grid { grid-template-columns: 1fr; } }

/* ===== Billing dashboard ===== */
.bill { max-width: 1180px; }
.bill-preview-banner {
  margin: -8px 0 18px; padding: 10px 14px; border-radius: 10px;
  background: #eff8ff; border: 1px solid #b2ddff; color: #175cd3;
  font: 600 13px var(--sans);
}
.bill-err {
  margin: 0 0 16px; padding: 10px 14px; border-radius: 10px;
  background: #fef3f2; border: 1px solid #fecdca; color: #b42318; font-size: 13px;
}
.bill-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; margin-bottom: 20px;
}
.bill-kpi {
  background: #fff; border: 1px solid var(--cd-line, #e6e9f2);
  border-radius: 14px; padding: 22px 24px 20px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  box-sizing: border-box;
}
.bill-kpi-lab {
  font: 600 11px var(--sans); letter-spacing: .4px; text-transform: uppercase;
  color: var(--tx3, #667085);
}
.bill-kpi-val {
  font: 700 26px var(--display, var(--sans)); color: var(--tx, #101828);
  letter-spacing: -.4px; margin-top: 8px; line-height: 1.15;
}
.bill-kpi-sub { font-size: 12.5px; color: var(--tx3, #667085); margin-top: 6px; }
.bill-kpi-navy {
  background: linear-gradient(160deg, #0B1F3A, #13315f);
  border-color: #0B1F3A; color: #fff;
}
.bill-kpi-navy .bill-kpi-lab { color: #9BB0D4; }
.bill-kpi-navy .bill-kpi-val { color: #fff; }
.bill-kpi-navy .bill-kpi-sub { color: #8AA0C4; }

.bill-card {
  background: #fff; border: 1px solid var(--cd-line, #e6e9f2);
  border-radius: 14px; margin-bottom: 20px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  box-sizing: border-box;
}
.bill-card-h {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 32px; border-bottom: 1px solid #f2f4f7;
}
.bill-card-h h2 {
  margin: 0; font-family: var(--cd-head, var(--sans));
  font-size: 15px; font-weight: 700; color: var(--cd-ink, #0b1437);
}
.bill-card-meta { font-size: 12.5px; color: var(--tx3, #667085); }
.bill-card-b { padding: 28px 32px 32px; box-sizing: border-box; }
.bill-lead { font-size: 13.5px; color: var(--tx2, #344054); line-height: 1.55; margin: 0 0 16px; }

.bill-filters {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; margin-bottom: 18px;
}
.bill-filters label {
  display: flex; flex-direction: column; gap: 6px;
  font: 600 11px var(--sans); letter-spacing: .3px; text-transform: uppercase;
  color: var(--tx3, #667085);
}
.bill-select {
  width: 100%; padding: 10px 12px; border: 1px solid #d4d9e6; border-radius: 9px;
  font: 500 13.5px var(--sans); color: var(--tx); background: #fff;
}
.bill-select:focus { outline: none; border-color: #1570ef; box-shadow: 0 0 0 4px rgba(21,112,239,.13); }

.bill-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; margin-bottom: 18px;
}
.bill-stats > div {
  background: #F5F7FB; border: 1px solid #eef1f6; border-radius: 12px; padding: 16px 20px;
  box-sizing: border-box;
}
.bill-stats span {
  display: block; font: 600 11px var(--sans); letter-spacing: .35px;
  text-transform: uppercase; color: var(--tx3, #667085);
}
.bill-stats b { display: block; margin-top: 6px; font-size: 18px; color: var(--tx); }

.bill-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.bill-panel {
  background: #fff; border: 1px solid #eef1f6; border-radius: 12px;
  padding: 24px 28px 26px; box-sizing: border-box;
}
.bill-panel h3 {
  margin: 0 0 16px; font-size: 13px; font-weight: 700; color: var(--cd-ink, #0b1437);
}

.bill-empty { padding: 18px 8px; color: #98a2b3; font-size: 13.5px; }

.bill-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bill-table th, .bill-table td {
  text-align: left; padding: 12px 16px; border-bottom: 1px solid #f2f4f7;
  vertical-align: middle;
}
.bill-table th:first-child, .bill-table td:first-child { padding-left: 16px; }
.bill-table th:last-child, .bill-table td:last-child { padding-right: 16px; }
.bill-table th {
  color: var(--tx3, #667085); font-weight: 600; font-size: 11px;
  letter-spacing: .4px; text-transform: uppercase;
}
.bill-table tr:last-child td { border-bottom: none; }
.bill-mono { font-variant-numeric: tabular-nums; font-weight: 600; }
.bill-strong { font-weight: 700; }
.bill-pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: #ecfdf3; color: #027a48; font-size: 12px; font-weight: 700;
}
.bill-pdf {
  appearance: none; border: 1px solid #c9d2e3; background: #fff; color: #0b1d3a;
  border-radius: 8px; padding: 6px 11px; font: 700 12px var(--sans); cursor: pointer;
}
.bill-pdf:hover { background: #f3f6fc; border-color: #0b1d3a; }
.bill-pdf:disabled { opacity: 0.65; cursor: progress; }

.bill-hbar { display: flex; flex-direction: column; gap: 10px; padding: 2px 4px 0; }
.bill-hbar-row {
  display: grid; grid-template-columns: minmax(100px, 168px) 1fr 76px;
  gap: 14px; align-items: center;
}
.bill-hbar-lab {
  font: 600 12.5px var(--sans); color: var(--tx);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bill-hbar-track {
  height: 18px; background: #eef2fb; border-radius: 6px; overflow: hidden; min-width: 0;
}
.bill-hbar-fill {
  height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, #3B6EEA, #2F5BD8);
}
.bill-hbar-val {
  text-align: right; font: 700 12.5px var(--sans); font-variant-numeric: tabular-nums;
  color: var(--tx);
}

.bill-hour { padding: 4px 4px 0; }
.bill-hour-plot {
  display: flex; align-items: flex-end; gap: 4px; height: 148px;
  padding: 8px 8px 0; border-bottom: 1px solid #e6e9f2;
  background: linear-gradient(to top, #F5F7FB 0%, transparent 62%);
}
.bill-hour-col { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 0; }
.bill-hour-bar {
  width: 100%; min-width: 4px;
  background: linear-gradient(180deg, #5B8CFF, #3B6EEA);
  border-radius: 4px 4px 0 0;
}
.bill-hour-axis {
  display: flex; margin-top: 6px; color: #98a2b3; font-size: 11px;
}
.bill-hour-axis span { flex: 1; text-align: center; }

.bill-mix { display: flex; align-items: center; gap: 18px; }
.bill-mix-svg { width: 132px; height: 132px; flex-shrink: 0; }
.bill-mix-leg { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.bill-mix-item {
  display: grid; grid-template-columns: 10px 1fr auto auto; gap: 8px; align-items: center;
  font-size: 13px;
}
.bill-swatch { width: 10px; height: 10px; border-radius: 3px; }
.bill-mix-name { color: var(--tx); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bill-mix-pct { color: var(--tx3); font-variant-numeric: tabular-nums; }
.bill-mix-amt { font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 980px) {
  .bill-kpis, .bill-grid2, .bill-stats, .bill-filters { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .bill-kpis, .bill-grid2, .bill-stats, .bill-filters { grid-template-columns: 1fr; }
  .bill-card-b { padding: 20px 20px 24px; }
  .bill-card-h { padding: 16px 20px; }
  .bill-panel { padding: 20px 20px 22px; }
  .bill-hbar-row { grid-template-columns: 1fr; gap: 4px; }
  .bill-mix { flex-direction: column; align-items: flex-start; }
}