.cn-overlay { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 20px; background: #101b2a91; backdrop-filter: blur(4px); }
.cn-dialog { width: min(100%, 740px); max-height: min(94dvh, 850px); overflow: auto; border-radius: 20px; background: var(--surface,#fff); color: var(--text,#1f2329); box-shadow: 0 28px 80px #0b1d3b50; }
.cn-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 24px 28px 17px; border-bottom: 1px solid var(--border,#ecedf1); }
.cn-kicker { color: var(--brand,#2f6bff); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.cn-header h2 { margin: 2px 0 2px; font-size: 22px; }
.cn-header p { margin: 0; color: var(--muted,#6b7280); font-size: 13px; }
.cn-close { width: 32px; height: 32px; border: 0; border-radius: 9px; background: #f2f4f8; color: var(--muted); font-size: 22px; }
.cn-body { padding: 20px 28px 28px; }
.cn-toolbar,.cn-form-actions,.cn-item-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.cn-toolbar { margin-bottom: 17px; }.cn-toolbar strong { margin-right: auto; }
.cn-button { display: inline-flex; align-items: center; justify-content: center; min-height: 33px; padding: 0 11px; border: 1px solid #dfe5ef; border-radius: 9px; background: #fff; color: var(--text); font-size: 12px; cursor: pointer; }
.cn-button:hover { background: #f6f8fd; }.cn-button.primary { border-color: var(--brand); background: var(--brand); color: #fff; }.cn-button.danger { border-color: #ffd9d9; color: #be3232; background: #fff6f6; }
.cn-button:disabled { opacity: .5; cursor: not-allowed; }
.cn-form { padding: 17px; border: 1px solid #e5ebf5; border-radius: 14px; background: #fbfcff; }
.cn-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.cn-form-grid label { display: grid; gap: 5px; min-width: 0; color: #4a5362; font-size: 12px; font-weight: 600; }
.cn-form-grid input,.cn-form-grid select,.cn-list-head input,.cn-group-panel input { width: 100%; min-height: 38px; padding: 7px 10px; border: 1px solid #dfe5ee; border-radius: 9px; background: #fff; color: var(--text); outline: 0; }
.cn-form-grid input:focus,.cn-list-head input:focus,.cn-group-panel input:focus { border-color: var(--brand); }
.cn-wide { grid-column: 1/-1; }.cn-form-actions { margin-top: 15px; }
.cn-status { min-height: 21px; margin: 11px 0; color: #0b8754; font-size: 12px; }.cn-status.error { color: #c9343c; }
.cn-list-head { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin: 20px 0 10px; }.cn-list-head h3 { margin: 0; font-size: 16px; }.cn-list-head input { max-width: 240px; min-height: 34px; }
.cn-list { display: grid; gap: 9px; }.cn-item { display: flex; justify-content: space-between; align-items: center; gap: 15px; min-width: 0; padding: 13px 15px; border: 1px solid var(--border); border-radius: 12px; }
.cn-item > div:first-child { min-width: 0; }.cn-item strong,.cn-item span,.cn-item small { display: block; }.cn-item strong { font-size: 14px; }.cn-item span { color: var(--muted); font-size: 11px; }.cn-item small { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--subtle); font-size: 11px; }
.cn-empty { padding: 30px; color: var(--muted); text-align: center; border: 1px dashed var(--border); border-radius: 12px; }
.cn-group-overlay { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 20px; background: #101b2a80; }
.cn-group-panel { width: min(100%, 440px); max-height: 80dvh; overflow: auto; padding: 22px; border-radius: 16px; background: var(--surface,#fff); }.cn-group-panel h3 { margin: 0 0 15px; }
.cn-group-panel form,.cn-group-list > div { display: flex; gap: 7px; margin-bottom: 9px; }.cn-group-panel form input,.cn-group-list input { flex: 1; min-width: 0; }.cn-group-panel > .cn-button { margin-top: 10px; }
html.netscope-theme-dark .cn-dialog,html.netscope-theme-dark .cn-group-panel { background: #111d2f; } html.netscope-theme-dark .cn-form,html.netscope-theme-dark .cn-item { background: #17243a; border-color: #29364b; } html.netscope-theme-dark .cn-button,html.netscope-theme-dark .cn-form-grid input,html.netscope-theme-dark .cn-form-grid select,html.netscope-theme-dark .cn-list-head input,html.netscope-theme-dark .cn-group-panel input { background: #17243a; color: #e7ecf5; border-color: #34435b; }
html.netscope-theme-dark .cn-form-grid label { color: #c4d0e2; }
html.netscope-theme-dark .cn-close { color: #c4d0e2; background: #20314a; }
html.netscope-theme-dark .cn-button:hover { background: #20314a; }
html.netscope-theme-dark .cn-button.primary { color: #fff; background: var(--brand); border-color: var(--brand); }
html.netscope-theme-dark .cn-button.danger { color: #f5a5aa; background: #3d222c; border-color: #633540; }
html.netscope-theme-dark .cn-status { color: #73d7a5; }
html.netscope-theme-dark .cn-status.error { color: #f5a5aa; }
@media (max-width:640px) { .cn-overlay { padding: 8px; }.cn-dialog { max-height: 98dvh; }.cn-header { padding: 18px; }.cn-body { padding: 15px; }.cn-form-grid { grid-template-columns: 1fr; }.cn-wide { grid-column: auto; }.cn-item { align-items: flex-start; flex-direction: column; }.cn-item-actions { width: 100%; }.cn-list-head { flex-direction: column; align-items: stretch; }.cn-list-head input { max-width: none; } }