/* ═══════════════════════════════════════════════════════════
   Com Center — cc.css v1.1
   LUZOkit tokens · Scoped to #lz-cc-root
   ═══════════════════════════════════════════════════════════ */

#lz-cc-root {
  --bg:        #f1f5f9;
  --card:      #fff;
  --c-brand:   #6d28d9;
  --brand-soft:#ede9fe;
  --brand-tx:  #5b21b6;
  --tx:        #1e293b;
  --tx2:       #64748b;
  --tx3:       #94a3b8;
  --line:      #e2e8f0;
  --r:         10px;
  --rs:        6px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
  font-size: 13px;
  color: var(--tx);
}

/* ── Topbar ───────────────────────────────────────────────── */

.cc-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  height: 52px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.cc-topbar-ico  { color: var(--c-brand); flex-shrink: 0; }
.cc-topbar-title { font-size: 15px; font-weight: 600; color: var(--tx); }
.cc-topbar-sep  { width: 1px; height: 20px; background: var(--line); margin: 0 6px; }

.cc-tabs {
  display: flex;
  gap: 0;
  margin-left: auto;
}

.cc-tab {
  position: relative;
  padding: 16px 16px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: var(--tx2);
  background: none;
  border: none;
  font-family: inherit;
  transition: color .12s;
}

.cc-tab:hover { color: var(--tx); }
.cc-tab--on   { color: var(--c-brand); font-weight: 600; }

.cc-tab--on::after {
  content: '';
  position: absolute;
  bottom: 0; left: 8px; right: 8px;
  height: 2px;
  background: var(--c-brand);
  border-radius: 2px 2px 0 0;
}

.cc-tab-badge {
  font-size: 9px;
  background: #ef4444;
  color: #fff;
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: 4px;
  font-weight: 700;
}

.cc-tab-badge:empty { display: none; }

/* ── Content area ─────────────────────────────────────────── */

.cc-content {
  flex: 1;
  overflow-y: auto;
}

/* ── Dashboard layout ─────────────────────────────────────── */

.cc-dash {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── KPI cards ────────────────────────────────────────────── */

.cc-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.cc-kpi {
  background: var(--card);
  border-radius: var(--r);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}

.cc-kpi-label { font-size: 11px; color: var(--tx2); font-weight: 500; margin-bottom: 6px; }
.cc-kpi-val   { font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.cc-kpi-sub   { font-size: 10px; color: var(--tx3); margin-top: 4px; display: flex; align-items: center; gap: 3px; }
.cc-kpi-spark { position: absolute; right: 12px; bottom: 10px; opacity: .15; }

.cc-delta         { font-weight: 600; }
.cc-delta--up     { color: #059669; }
.cc-delta--down   { color: #ef4444; }

/* ── Card container ───────────────────────────────────────── */

.cc-card {
  background: var(--card);
  border-radius: var(--r);
  padding: 16px 18px;
}

.cc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cc-row3 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }

/* ── Section header ───────────────────────────────────────── */

.cc-sec-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tx);
  margin-bottom: 12px;
}

.cc-sec-header svg { color: var(--tx2); flex-shrink: 0; }

.cc-sec-link {
  margin-left: auto;
  font-size: 10px;
  color: var(--brand-tx);
  font-weight: 500;
  cursor: pointer;
}

.cc-sec-link:hover { text-decoration: underline; }

/* ── Alerts ───────────────────────────────────────────────── */

.cc-alerts { display: flex; flex-direction: column; gap: 6px; }

.cc-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--rs);
  cursor: pointer;
  transition: transform .1s;
}

.cc-alert:hover { transform: translateX(2px); }

.cc-alert-dot   { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cc-alert-body  { flex: 1; min-width: 0; }
.cc-alert-title { font-size: 12px; font-weight: 600; }
.cc-alert-desc  { font-size: 10.5px; color: var(--tx2); margin-top: 1px; }
.cc-alert-count { font-size: 16px; font-weight: 700; flex-shrink: 0; min-width: 24px; text-align: right; }

.cc-alert-btn {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  color: #fff;
  flex-shrink: 0;
  font-family: inherit;
}

.cc-alert-btn:hover { opacity: .85; }

.cc-alerts-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  font-size: 12px;
  color: #059669;
  background: #ecfdf5;
  border-radius: var(--rs);
}

/* ── Volume chart ─────────────────────────────────────────── */

.cc-chart-area {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 130px;
  padding-top: 8px;
}

.cc-chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  height: 100%;
  justify-content: flex-end;
}

.cc-chart-bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  position: relative;
  transition: height .3s;
}

.cc-chart-val {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 700;
  color: var(--c-brand);
}

.cc-chart-lbl {
  font-size: 9px;
  color: var(--tx3);
  font-weight: 500;
}

.cc-chart-lbl--today { font-weight: 700; color: var(--tx); }

.cc-chart-legend {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.cc-legend-i   { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--tx2); }
.cc-legend-dot { width: 8px; height: 8px; border-radius: 2px; }

.cc-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px;
  color: var(--tx3);
  font-size: 12px;
}

/* ── Activity feed ────────────────────────────────────────── */

.cc-feed { display: flex; flex-direction: column; }

.cc-feed-item {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
}

.cc-feed-item:last-child { border-bottom: none; }

.cc-feed-av {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

.cc-feed-body { flex: 1; min-width: 0; }
.cc-feed-top  { display: flex; align-items: center; gap: 6px; }
.cc-feed-name { font-size: 12px; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-feed-time { font-size: 10px; color: var(--tx3); flex-shrink: 0; }
.cc-feed-desc { font-size: 11px; color: var(--tx2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-feed-pills{ display: flex; gap: 3px; margin-top: 4px; }
.cc-feed-empty{ padding: 16px; color: var(--tx3); font-size: 12px; text-align: center; }

/* ── Pills ────────────────────────────────────────────────── */

.cc-pill {
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  display: inline-block;
}

.cc-pill--conf { background: #dbeafe; color: #1e40af; }
.cc-pill--rec  { background: #fef3c7; color: #92400e; }
.cc-pill--cons { background: var(--brand-soft); color: var(--brand-tx); }
.cc-pill--inv  { background: #d1fae5; color: #065f46; }
.cc-pill--auth { background: #fce7f3; color: #9d174d; }
.cc-pill--inf  { background: #e2e8f0; color: #475569; }

.cc-st--env { background: #dbeafe; color: #1e40af; }
.cc-st--abi { background: #d1fae5; color: #065f46; }
.cc-st--cli { background: #ecfdf5; color: #047857; }
.cc-st--fal { background: #fee2e2; color: #991b1b; }
.cc-st--pen { background: #fef3c7; color: #92400e; }

/* ── Template performance ─────────────────────────────────── */

.cc-tpl-list { display: flex; flex-direction: column; }

.cc-tpl-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.cc-tpl-item:last-child { border-bottom: none; }

.cc-tpl-ico {
  width: 28px; height: 28px;
  border-radius: var(--rs);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cc-tpl-name { font-size: 12px; font-weight: 500; flex: 1; }
.cc-tpl-stat { text-align: right; }
.cc-tpl-pct  { font-size: 13px; font-weight: 700; }
.cc-tpl-lbl  { font-size: 9px; color: var(--tx3); }

.cc-tpl-bar-wrap {
  width: 60px; height: 4px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
  margin-left: 8px;
}

.cc-tpl-bar { height: 100%; border-radius: 2px; transition: width .4s; }
.cc-tpl-empty { padding: 16px; color: var(--tx3); font-size: 12px; text-align: center; }

/* ── Placeholder / denied ─────────────────────────────────── */

.cc-placeholder, .cc-denied {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 80px 20px;
  text-align: center;
}

.cc-placeholder-title, .cc-denied-title { font-size: 15px; font-weight: 600; color: var(--tx); }
.cc-placeholder-sub, .cc-denied-sub     { font-size: 12px; color: var(--tx3); }

/* ── Loading skeleton ─────────────────────────────────────── */

.cc-kpi--loading { min-height: 90px; }
.cc-card--loading { min-height: 180px; }

.cc-skel {
  background: linear-gradient(90deg, var(--line) 25%, #f8fafc 50%, var(--line) 75%);
  background-size: 200% 100%;
  animation: cc-shimmer 1.5s infinite;
  border-radius: 4px;
}

.cc-skel--lg { height: 28px; width: 60%; margin-bottom: 8px; }
.cc-skel--md { height: 18px; width: 80%; margin-bottom: 6px; }
.cc-skel--sm { height: 14px; width: 40%; }
.cc-skel--circ { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; }

@keyframes cc-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════════════════════════════
   MONITOR — List + Detail split
   ══════════════════════════════════════════════════════════════ */

/* ── Monitor wrapper ──────────────────────────────────────── */

.ccm-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ── Toolbar ──────────────────────────────────────────────── */

.ccm-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.ccm-search-wrap {
  position: relative;
  flex: 1;
  max-width: 320px;
}

.ccm-search-ico {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.ccm-search {
  width: 100%;
  padding: 7px 10px 7px 32px;
  border: 1px solid var(--line);
  border-radius: var(--rs);
  font-size: 12px;
  font-family: inherit;
  color: var(--tx);
  background: var(--bg);
  outline: none;
  transition: border-color .12s;
}

.ccm-search:focus { border-color: var(--c-brand); }
.ccm-search::placeholder { color: var(--tx3); }

.ccm-select {
  padding: 7px 28px 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--rs);
  font-size: 11px;
  font-family: inherit;
  color: var(--tx);
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;
  appearance: none;
  cursor: pointer;
  outline: none;
}

.ccm-select:focus { border-color: var(--c-brand); }

.ccm-count {
  font-size: 11px;
  color: var(--tx3);
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Split layout ─────────────────────────────────────────── */

.ccm-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── List ─────────────────────────────────────────────────── */

.ccm-list {
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: var(--card);
}

.ccm-item {
  display: flex;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .1s;
  align-items: flex-start;
}

.ccm-item:hover { background: #f8fafc; }

.ccm-item--sel {
  background: var(--brand-soft) !important;
  border-left: 3px solid var(--c-brand);
  padding-left: 13px;
}

.ccm-item-av {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

.ccm-item-body { flex: 1; min-width: 0; }

.ccm-item-row1 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ccm-item-name {
  font-size: 12px;
  font-weight: 600;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ccm-item-date {
  font-size: 10px;
  color: var(--tx3);
  flex-shrink: 0;
}

.ccm-item-subj {
  font-size: 11px;
  color: var(--tx2);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ccm-item-pills {
  display: flex;
  gap: 3px;
  margin-top: 4px;
}

.ccm-item--skel {
  display: flex;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}

.ccm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 60px 20px;
  color: var(--tx3);
  font-size: 12px;
}

.ccm-load-more {
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--brand-tx);
  background: var(--brand-soft);
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s;
}

.ccm-load-more:hover { background: #ddd6fe; }
.ccm-load-more:disabled { opacity: .5; cursor: wait; }

/* ══════════════════════════════════════════════════════════════
   DETAIL PANEL
   ══════════════════════════════════════════════════════════════ */

.ccm-detail {
  overflow-y: auto;
  background: var(--bg);
}

.ccd-panel {
  padding: 20px;
}

/* ── Detail header ────────────────────────────────────────── */

.ccd-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}

.ccd-header-av {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

.ccd-header-info { flex: 1; min-width: 0; }
.ccd-header-name { font-size: 14px; font-weight: 600; }
.ccd-header-email { font-size: 11px; color: var(--tx2); margin-top: 1px; }
.ccd-header-pills { display: flex; gap: 4px; flex-shrink: 0; }

/* ── Section title ────────────────────────────────────────── */

.ccd-sec-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--tx2);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 16px 0 8px;
}

.ccd-sec-title:first-of-type { margin-top: 0; }

/* ── Metadata grid ────────────────────────────────────────── */

.ccd-meta {
  background: var(--card);
  border-radius: var(--rs);
  overflow: hidden;
}

.ccd-meta-row {
  display: flex;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
}

.ccd-meta-row:last-child { border-bottom: none; }
.ccd-meta-key { width: 110px; color: var(--tx2); font-weight: 500; flex-shrink: 0; }
.ccd-meta-val { flex: 1; color: var(--tx); word-break: break-all; }

/* ── Timeline ─────────────────────────────────────────────── */

.ccd-timeline {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 20px;
}

.ccd-timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--line);
  border-radius: 1px;
}

.ccd-tl-item {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  position: relative;
}

.ccd-tl-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  margin-left: -20px;
}

.ccd-tl-body { flex: 1; min-width: 0; }

.ccd-tl-row1 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ccd-tl-label { font-size: 12px; font-weight: 600; }
.ccd-tl-time  { font-size: 10px; color: var(--tx3); margin-left: auto; }
.ccd-tl-sub   { font-size: 10px; color: var(--tx2); margin-top: 2px; word-break: break-all; }

.ccd-tl-empty {
  padding: 16px;
  color: var(--tx3);
  font-size: 12px;
  text-align: center;
  background: var(--card);
  border-radius: var(--rs);
}

/* ── Detail actions ───────────────────────────────────────── */

.ccd-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.ccd-btn {
  padding: 7px 14px;
  border-radius: var(--rs);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--line);
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--card);
  color: var(--tx);
  transition: background .1s;
}

.ccd-btn:hover { background: #f8fafc; }
.ccd-btn:disabled { opacity: .5; cursor: wait; }

.ccd-btn--retry {
  background: var(--c-brand);
  color: #fff;
  border-color: var(--c-brand);
}

.ccd-btn--retry:hover { background: var(--brand-tx); }

/* ── Detail empty / error ─────────────────────────────────── */

.ccd-empty, .ccd-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 60px 20px;
  color: var(--tx3);
  font-size: 12px;
  text-align: center;
}

.ccd-empty-text { max-width: 200px; line-height: 1.5; }

/* Templates tab */
#lz-cc-root .cc-tpl-wrap{display:grid;grid-template-columns:280px minmax(0,1fr);height:100%;min-height:480px}
#lz-cc-root .cc-tpl-list{border-right:1px solid var(--border,#e2e8f0);overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:6px}
#lz-cc-root .cc-tpl-card{padding:12px 14px;border-radius:8px;border:1.5px solid transparent;cursor:pointer;background:var(--bg-card,#fff);transition:border-color .12s}
#lz-cc-root .cc-tpl-card:hover{border-color:var(--border,#e2e8f0)}
#lz-cc-root .cc-tpl-card--on{border-color:var(--c-brand,#6d28d9);background:var(--bg-active)}
#lz-cc-root .cc-tpl-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
#lz-cc-root .cc-tpl-card-subj{font-size:12.5px;font-weight:600;color:var(--tx-base,#1e293b);margin-bottom:2px}
#lz-cc-root .cc-tpl-card-vars{font-size:10.5px;color:var(--tx3,#94a3b8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lz-cc-root .cc-tpl-tipo{font-size:9.5px;font-weight:600;padding:2px 7px;border-radius:4px}
#lz-cc-root .cc-tpl-tipo--conf{background:#dbeafe;color:#1e40af}
#lz-cc-root .cc-tpl-tipo--rec{background:#fef3c7;color:#92400e}
#lz-cc-root .cc-tpl-tipo--cons{background:#ede9fe;color:#5b21b6}
#lz-cc-root .cc-tpl-tipo--inv{background:#d1fae5;color:#065f46}
#lz-cc-root .cc-tpl-tipo--auth{background:#fce7f3;color:#9d174d}
#lz-cc-root .cc-tpl-tipo--inf{background:#e2e8f0;color:#475569}
#lz-cc-root .cc-tpl-status{font-size:9.5px;font-weight:600;padding:2px 7px;border-radius:4px}
#lz-cc-root .cc-tpl-status--on{background:#d1fae5;color:#065f46}
#lz-cc-root .cc-tpl-status--off{background:#fee2e2;color:#991b1b}
#lz-cc-root .cc-tpl-preview{padding:20px;overflow-y:auto}
#lz-cc-root .cc-tpl-empty,#lz-cc-root .cc-tpl-empty-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:8px;color:var(--tx3,#94a3b8);font-size:13px}
#lz-cc-root .cc-tpl-empty-title{font-weight:600;color:var(--tx-base,#1e293b)}
#lz-cc-root .cc-tpl-empty-sub{font-size:12px}

#lz-cc-root .cc-tpl-toggle{padding:5px 14px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;border:1px solid var(--border,#e2e8f0);background:var(--bg-card,#fff);color:var(--tx-base,#1e293b);transition:all .12s}
#lz-cc-root .cc-tpl-toggle:hover{background:var(--bg-body,#f1f5f9)}
#lz-cc-root .cc-tpl-detail-field{margin-bottom:14px}
#lz-cc-root .cc-tpl-detail-field label{font-size:10px;font-weight:600;color:var(--tx3,#94a3b8);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;display:block}
#lz-cc-root .cc-tpl-detail-val{font-size:13px;font-weight:500;color:var(--tx-base,#1e293b)}

#lz-cc-root .cc-tpl-var{font-size:10.5px;font-family:monospace;padding:2px 6px;border-radius:4px;background:var(--bg-body,#f1f5f9);color:var(--c-brand,#6d28d9)}
#lz-cc-root .cc-tpl-no-vars{font-size:11px;color:var(--tx3,#94a3b8)}
#lz-cc-root .cc-tpl-detail-iframe{width:100%;min-height:260px;border:1px solid var(--border,#e2e8f0);border-radius:8px;background:#fff}
/* Accounts tab */
#lz-cc-root .cc-acc-wrap{max-width:520px;margin:24px auto;padding:0 20px}
#lz-cc-root .cc-acc-card{background:var(--bg-card,#fff);border:1px solid var(--border,#e2e8f0);border-radius:10px;padding:20px}
#lz-cc-root .cc-acc-card-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
#lz-cc-root .cc-acc-card-title{font-size:14px;font-weight:600;color:var(--tx-base,#1e293b);flex:1}
#lz-cc-root .cc-acc-status{font-size:10px;font-weight:600;padding:3px 10px;border-radius:20px}
#lz-cc-root .cc-acc-st--ok{background:#d1fae5;color:#065f46}
#lz-cc-root .cc-acc-st--err{background:#fee2e2;color:#991b1b}
#lz-cc-root .cc-acc-st--warn{background:#fef3c7;color:#92400e}
#lz-cc-root .cc-acc-meta{background:var(--bg-body,#f1f5f9);border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
#lz-cc-root .cc-acc-row{display:flex;justify-content:space-between;align-items:center;font-size:12px}
#lz-cc-root .cc-acc-label{color:var(--tx-muted,#64748b)}
#lz-cc-root .cc-acc-val{font-weight:600;color:var(--tx-base,#1e293b)}
#lz-cc-root .cc-acc-val--num{font-variant-numeric:tabular-nums}
#lz-cc-root .cc-acc-val--err{color:#dc2626}
#lz-cc-root .cc-acc-actions{margin-top:16px;display:flex;gap:8px}
#lz-cc-root .cc-acc-btn{padding:8px 16px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .12s}
#lz-cc-root .cc-acc-btn--test{background:var(--c-brand,#6d28d9);color:#fff}
#lz-cc-root .cc-acc-btn--test:hover{filter:brightness(.9)}
#lz-cc-root .cc-acc-btn--test:disabled{opacity:.6;cursor:not-allowed}
#lz-cc-root .cc-acc-info{margin-top:16px;display:flex;align-items:flex-start;gap:8px;padding:10px 14px;border-radius:8px;background:var(--bg-body,#f1f5f9);font-size:11px;color:var(--tx-muted,#64748b);line-height:1.5}
#lz-cc-root .cc-acc-info svg{flex-shrink:0;margin-top:1px;color:var(--tx3,#94a3b8)}
#lz-cc-root .cc-acc-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:8px;color:var(--tx3,#94a3b8)}
#lz-cc-root .cc-acc-empty-title{font-weight:600;color:var(--tx-base,#1e293b);font-size:14px}
#lz-cc-root .cc-acc-empty-sub{font-size:12px}

/* PassKey gate */
#lz-cc-root .cc-pk-gate{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;gap:12px;padding:40px 20px}
#lz-cc-root .cc-pk-title{font-size:16px;font-weight:600;color:var(--tx-base,#1e293b)}
#lz-cc-root .cc-pk-sub{font-size:13px;color:var(--tx-muted,#64748b);text-align:center;max-width:360px;line-height:1.5}
#lz-cc-root .cc-pk-btn{padding:10px 28px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:none;background:var(--c-brand,#6d28d9);color:#fff;transition:all .12s}
#lz-cc-root .cc-pk-btn:hover{filter:brightness(.9)}
#lz-cc-root .cc-pk-btn:disabled{opacity:.6;cursor:not-allowed}
#lz-cc-root .cc-pk-error{font-size:12px;color:#dc2626;min-height:18px;text-align:center}
/* Identity cards */
#lz-cc-root .cc-id-wrap{max-width:580px;margin:20px auto;padding:0 20px}
#lz-cc-root .cc-id-header{margin-bottom:16px}
#lz-cc-root .cc-id-header-title{font-size:15px;font-weight:600;color:var(--tx-base,#1e293b)}
#lz-cc-root .cc-id-header-sub{font-size:12px;color:var(--tx-muted,#64748b);margin-top:4px;line-height:1.4}
#lz-cc-root .cc-id-card{background:var(--bg-card,#fff);border:1px solid var(--border,#e2e8f0);border-radius:10px;padding:16px;margin-bottom:8px}
#lz-cc-root .cc-id-card-head{display:flex;align-items:center;gap:12px}
#lz-cc-root .cc-id-card-info{flex:1;min-width:0}
#lz-cc-root .cc-id-card-name{font-size:13px;font-weight:600;color:var(--tx-base,#1e293b)}
#lz-cc-root .cc-id-card-email{font-size:11.5px;color:var(--c-brand,#6d28d9)}
#lz-cc-root .cc-id-badges{display:flex;gap:4px;flex-shrink:0}
#lz-cc-root .cc-id-badge{font-size:9.5px;font-weight:600;padding:2px 8px;border-radius:20px}
#lz-cc-root .cc-id-badge--default{background:#ede9fe;color:#5b21b6}
#lz-cc-root .cc-id-badge--active{background:#d1fae5;color:#065f46}
#lz-cc-root .cc-id-badge--inactive{background:#fee2e2;color:#991b1b}
#lz-cc-root .cc-id-card-actions{display:flex;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border,#e2e8f0)}
#lz-cc-root .cc-id-act{padding:4px 12px;border-radius:6px;font-size:11px;font-weight:500;cursor:pointer;border:1px solid var(--border,#e2e8f0);background:var(--bg-card,#fff);color:var(--tx-base,#1e293b);transition:all .12s}
#lz-cc-root .cc-id-act:hover{background:var(--bg-body,#f1f5f9)}
#lz-cc-root .cc-id-act--danger{color:#dc2626;border-color:#fecaca}
#lz-cc-root .cc-id-act--danger:hover{background:#fee2e2}
#lz-cc-root .cc-id-form{background:var(--bg-card,#fff);border:1.5px solid var(--c-brand,#6d28d9);border-radius:10px;padding:16px;margin-bottom:8px}
#lz-cc-root .cc-id-form-title{font-size:13px;font-weight:600;color:var(--tx-base,#1e293b);margin-bottom:12px}
#lz-cc-root .cc-id-form-row{margin-bottom:8px}
#lz-cc-root .cc-id-input{width:100%;padding:8px 12px;border:1px solid var(--border,#e2e8f0);border-radius:6px;font-size:12px;color:var(--tx-base,#1e293b);background:var(--bg-body,#f1f5f9);outline:none;box-sizing:border-box}
#lz-cc-root .cc-id-input:focus{border-color:var(--c-brand,#6d28d9);box-shadow:0 0 0 2px #ede9fe}
#lz-cc-root .cc-id-form-btns{display:flex;gap:6px;margin-top:12px}
#lz-cc-root .cc-id-btn{padding:8px 16px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .12s}
#lz-cc-root .cc-id-btn--primary{background:var(--c-brand,#6d28d9);color:#fff}
#lz-cc-root .cc-id-btn--primary:hover{filter:brightness(.9)}
#lz-cc-root .cc-id-btn--secondary{background:var(--bg-body,#f1f5f9);color:var(--tx-base,#1e293b);border:1px solid var(--border,#e2e8f0)}
#lz-cc-root .cc-id-btn--add{display:flex;align-items:center;gap:6px;width:100%;justify-content:center;padding:12px;border-radius:10px;border:1.5px dashed var(--border,#e2e8f0);background:transparent;color:var(--tx-muted,#64748b);font-size:12px;font-weight:500;cursor:pointer;transition:all .12s}
#lz-cc-root .cc-id-btn--add:hover{border-color:var(--c-brand,#6d28d9);color:var(--c-brand,#6d28d9);background:#ede9fe}
#lz-cc-root .cc-id-info{margin-top:16px;display:flex;align-items:flex-start;gap:8px;padding:10px 14px;border-radius:8px;background:var(--bg-body,#f1f5f9);font-size:11px;color:var(--tx-muted,#64748b);line-height:1.5}
#lz-cc-root .cc-id-info svg{flex-shrink:0;margin-top:1px;color:var(--tx3,#94a3b8)}

#lz-cc-root .ccm-toolbar .lks-wrap{max-width:220px;flex:0 0 auto}
#lz-cc-root .ccm-toolbar .lks-trigger{font-size:12px;padding:6px 12px;min-height:34px}

#lz-cc-root .cc-tpl-preview{flex:1;display:flex;flex-direction:column;min-height:0}
#lz-cc-root .cc-tpl-detail-iframe{flex:1;width:100%;min-height:calc(100vh - 340px);border:1px solid var(--border,#e2e8f0);border-radius:8px;background:#fff}

/* ── Templates v2 Detail + Buttons (patch) ──────────── */
#lz-cc-root .cc-tpl-detail{display:flex;flex-direction:column;height:100%;gap:0}
#lz-cc-root .cc-tpl-detail-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border,#e2e8f0)}
#lz-cc-root .cc-tpl-detail-actions{display:flex;align-items:center;gap:6px}
#lz-cc-root .cc-tpl-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border,#e2e8f0);background:var(--bg-card,#fff);color:var(--tx-base,#1e293b);transition:all .12s;white-space:nowrap}
#lz-cc-root .cc-tpl-btn:hover{border-color:var(--c-brand,#6d28d9);color:var(--c-brand,#6d28d9)}
#lz-cc-root .cc-tpl-btn--test{background:var(--c-brand,#6d28d9);color:#fff;border-color:var(--c-brand,#6d28d9)}
#lz-cc-root .cc-tpl-btn--test:hover{filter:brightness(.9)}
#lz-cc-root .cc-tpl-btn--on{background:#d1fae5;color:#065f46;border-color:#a7f3d0}
#lz-cc-root .cc-tpl-btn--on:hover{background:#bbf7d0}
#lz-cc-root .cc-tpl-btn--off{background:#fee2e2;color:#991b1b;border-color:#fecaca}
#lz-cc-root .cc-tpl-btn--off:hover{background:#fecdd3}
#lz-cc-root .cc-tpl-btn--more{padding:6px 8px;border:1px solid var(--border,#e2e8f0);background:var(--bg-card,#fff);border-radius:6px;cursor:pointer;color:var(--tx-muted,#64748b);display:inline-flex;align-items:center}
#lz-cc-root .cc-tpl-btn--more:hover{background:var(--bg-body,#f1f5f9);color:var(--tx-base,#1e293b)}
#lz-cc-root .cc-tpl-detail-row{padding:10px 20px;display:flex;align-items:flex-start;gap:12px;border-bottom:1px solid var(--border,#e2e8f0)}
#lz-cc-root .cc-tpl-detail-row>label{font-size:11px;font-weight:600;color:var(--tx-muted,#64748b);min-width:130px;text-transform:uppercase;letter-spacing:.3px;padding-top:2px}
#lz-cc-root .cc-tpl-detail-row>span{font-size:13px;color:var(--tx-base,#1e293b)}
#lz-cc-root .cc-tpl-detail-vars{display:flex;flex-wrap:wrap;gap:4px}
#lz-cc-root .cc-tpl-detail-grow{flex:1;flex-direction:column;min-height:0}
#lz-cc-root .cc-tpl-card-status{font-size:10px;font-weight:600;padding:2px 8px;border-radius:20px}
#lz-cc-root .cc-tpl-st-on{background:#d1fae5;color:#065f46}
#lz-cc-root .cc-tpl-st-off{background:#fee2e2;color:#991b1b}
#lz-cc-root .cc-tpl-card--inactive{opacity:.6}