.cn-dialog { width: min(1060px, calc(100vw - 32px)); max-width: none; height: min(780px, calc(100dvh - 40px)); max-height: none; padding: 24px; border: 1px solid #e2e8f0; border-radius: 16px; color: #1e293b; background: #fff; box-shadow: 0 20px 80px #0f172a40; }
.cn-dialog::backdrop { background: #0f172a66; }
.cn-dialog { margin: auto; }
.cn-status { font-size: 13px; min-height: 20px; margin-bottom: 8px; }
.cn-dialog[open] { display: flex; flex-direction: column; }
.cn-header,.cn-detail-tools,.cn-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cn-header { justify-content: space-between; } .cn-header h2 { font-size: 22px; margin: 0; }
.cn-intro,.cn-muted { color: #64748b; font-size: 13px; line-height: 1.7; margin: 12px 0; }
.cn-layout { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 24px; min-height: 0; flex: 1; }
.cn-group-label { display: grid; gap: 6px; font-size: 13px; color: #64748b; }
.cn-dialog select { width: 100%; min-width: 0; padding: 10px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #1e293b; font: inherit; }
.cn-group { margin-bottom: 12px; border-bottom: 1px solid #e2e8f0; padding-bottom: 4px; }
.cn-group summary { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 12px 4px; font-size: 14px; font-weight: 600; }
.cn-group summary::before { content: '›'; flex-shrink: 0; } .cn-group[open] summary::before { content: '⌄'; }
.cn-group-title { overflow-wrap: anywhere; white-space: pre-wrap; min-width: 0; }
.cn-count { margin-left: auto; border-radius: 12px; padding: 2px 8px; background: #eef2ff; color: #4065f1; font-size: 12px; flex-shrink: 0; }
.cn-back { display: none; }
.cn-sidebar { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.cn-list { overflow: auto; } .cn-client { display: block; width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; margin-bottom: 8px; }
.cn-detail { overflow: auto; min-width: 0; padding-right: 4px; }
.cn-detail-tools { position: sticky; top: 0; background: white; padding: 0 0 16px; z-index: 1; } .cn-detail-tools strong { margin-right: auto; }
.cn-row { display: grid; grid-template-columns: 145px minmax(0,1fr) auto; gap: 12px; align-items: start; padding: 16px 0; border-bottom: 1px solid #e2e8f0; }
.cn-label { font-size: 13px; color: #64748b; overflow-wrap: anywhere; } .cn-value { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; user-select: text; }
.cn-dialog input:not([type=checkbox]),.cn-dialog textarea { box-sizing: border-box; width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 10px; font: inherit; background: white; color: inherit; }
.cn-dialog textarea { resize: vertical; } .cn-edit-row { padding: 16px 0; border-bottom: 1px solid #e2e8f0; display: grid; gap: 8px; margin-bottom: 12px; }
.cn-secret { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-right: auto; }
@media(max-width: 650px) {
  .cn-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); padding: 16px; }
  .cn-layout { display: flex; flex-direction: column; overflow: hidden; gap: 0; }
  .cn-sidebar { flex: 1; min-height: 0; } .cn-list { flex: 1; max-height: none; overflow: auto; }
  .cn-detail { display: none; min-height: 0; }
  .cn-detail-open .cn-sidebar { display: none; }
  .cn-detail-open .cn-detail { display: block; flex: 1; overflow: auto; }
  .cn-detail-open .cn-intro { display: none; }
  .cn-back { display: inline-flex; flex-basis: 100%; width: fit-content; justify-content: flex-start; }
  .cn-dialog .btn { min-height: 44px !important; }
  .cn-group summary { min-height: 44px; }
  .cn-row { grid-template-columns: minmax(0,1fr) auto; } .cn-label { grid-column: 1/-1; }
  .cn-header h2 { font-size: 20px; }
}