.ch-page { color: var(--text, #1f2329); font: 14px/1.6 var(--font, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", Arial, sans-serif); }
.ch-page * { box-sizing: border-box; }
.ch-page button, .ch-page input, .ch-page select, .ch-page textarea { font: inherit; }
.ch-page .ch-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.ch-status { padding: 12px 15px; margin: 0 0 16px; border: 1px solid #c9e9d8; border-radius: 11px; background: #f0fbf5; color: #147d4b; font-size: 13px; }
.ch-status[hidden] { display: none; }
.ch-status.error { border-color: #f4d0d2; background: #fff3f3; color: #c62f3a; }
.ch-kicker { color: var(--brand, #2f6bff); font-size: 12px; font-weight: 700; letter-spacing: .6px; }
.ch-button { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 14px; border: 1px solid transparent; border-radius: 999px; background: #fff; color: #405069; font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer; }
.ch-button:disabled { opacity: .48; cursor: default; }
.ch-primary { background: var(--brand, #2f6bff); color: #fff; }
.ch-primary:hover:not(:disabled) { background: var(--brand-hover, #1f57e6); }
.ch-outline { border-color: #dfe5ef; }
.ch-outline:hover:not(:disabled) { background: #f5f8ff; }
.ch-danger { background: #fff1f1; color: #d9474f; }
.ch-danger:hover:not(:disabled) { background: #ffe8e8; }
.ch-empty { padding: 38px 18px; border: 1px dashed #dce3ed; border-radius: 15px; color: #919aaa; text-align: center; }
.ch-help { margin: 10px 0; color: #929aaa; font-size: 12px; line-height: 1.6; }
.ch-loading { padding: 80px 20px; color: var(--muted, #6b7280); text-align: center; }
.ch-tag { display: inline-flex; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #f0f2f5; color: #89929e; font-size: 11px; font-weight: 700; vertical-align: middle; }
.ch-tag.active { background: #eaf9f0; color: #148652; }
.ch-panel { padding: 24px; margin-bottom: 18px; border: 1px solid var(--border, #ecedf1); border-radius: 18px; background: #fff; box-shadow: 0 3px 20px rgba(16, 24, 40, .025); }
.ch-admin-head { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.ch-admin-head h2 { margin: 4px 0 4px; font-size: 22px; }
.ch-admin-head p, .ch-panel-head p { margin: 0; color: var(--muted, #6b7280); font-size: 13px; }
.ch-panel-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.ch-panel-head h3, .ch-panel-head h2 { margin: 0 0 4px; font-size: 18px; }
.ch-material-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 13px; }
.ch-material { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px; border: 1px solid #e9edf5; border-radius: 15px; }
.ch-material-preview { flex: none; }
.ch-material-preview .ch-preview-stage { width: 82px; height: 82px; border-radius: 11px; }
.ch-material-copy { min-width: 0; }
.ch-material-copy > strong { font-size: 14px; }
.ch-material-copy p { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 4px 0 7px; color: var(--muted, #6b7280); font-size: 12px; }
.ch-material-copy > div { display: flex; gap: 6px; }
.ch-material-copy .ch-button { min-height: 29px; padding: 0 9px; font-size: 11px; }
.ch-rule-list { display: grid; gap: 10px; }
.ch-rule-item { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 17px 18px; border: 1px solid #e9edf5; border-radius: 14px; }
.ch-rule-item strong { font-size: 14px; }
.ch-rule-item p { margin: 5px 0 3px; color: #586477; font-size: 12px; line-height: 1.6; }
.ch-rule-item small { color: #9aa1ab; font-size: 11px; }
.ch-row-actions { display: flex; gap: 7px; flex: none; }
.ch-user-lookup { display: flex; align-items: end; gap: 9px; max-width: 470px; }
.ch-user-lookup .ch-field { flex: 1; }
.ch-grant-form { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; align-items: end; gap: 9px; margin: 18px 0; }
.ch-grant-form [hidden] { display: none !important; }
.ch-grants { display: grid; gap: 8px; }
.ch-grant { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid #e8edf5; border-radius: 12px; }
.ch-grant img { width: 40px; height: 40px; object-fit: contain; flex: none; border-radius: 9px; background: #f5f7fb; }
.ch-grant > div { min-width: 0; flex: 1; }
.ch-grant strong, .ch-grant small { display: block; }
.ch-grant small { color: #9aa1ab; font-size: 11px; }
.ch-field { display: grid; gap: 5px; min-width: 0; color: #516077; font-size: 12px; font-weight: 600; }
.ch-field input, .ch-field select, .ch-field textarea, .ch-attachment-row select, .ch-rule-toolbar select, .ch-catalog-filter input, .ch-catalog-filter select { width: 100%; min-height: 39px; padding: 8px 11px; border: 1px solid #dfe5ef; border-radius: 10px; outline: 0; background: #fff; color: var(--text, #1f2329); font-weight: 400; }
.ch-field textarea { min-height: 75px; resize: vertical; }
.ch-field input:focus, .ch-field select:focus, .ch-field textarea:focus, .ch-attachment-row select:focus, .ch-rule-toolbar select:focus { border-color: var(--brand, #2f6bff); box-shadow: 0 0 0 3px rgba(47, 107, 255, .12); }
.ch-check { display: flex; align-items: center; gap: 8px; color: #536075; font-size: 13px; cursor: pointer; }
.ch-check input { width: 16px; height: 16px; accent-color: var(--brand, #2f6bff); }
.ch-backdrop { position: fixed; inset: 0; z-index: 125; display: grid; place-items: center; padding: 20px; background: rgba(12, 20, 38, .56); backdrop-filter: blur(4px); }
.ch-dialog { width: min(100%, 780px); max-height: min(92dvh, 940px); overflow-y: auto; padding: 25px; border: 1px solid #e2e8f3; border-radius: 20px; background: #fff; box-shadow: 0 30px 90px #0c142655; }
.ch-dialog.rule { width: min(100%, 640px); }
.ch-dialog-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.ch-dialog-head h3 { margin: 2px 0 0; font-size: 21px; }
.ch-dialog-head > button { width: 28px; height: 28px; border: 0; border-radius: 7px; background: transparent; color: #8b94a4; font-size: 25px; line-height: 1; cursor: pointer; }
.ch-dialog-head > button:hover { background: #eef3ff; }
.ch-dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 21px; }
.ch-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 24px; }
.ch-editor-fields { display: grid; align-content: start; gap: 13px; }
.ch-attachment-row { display: flex; gap: 7px; }
.ch-attachment-row .ch-button { flex: none; }
.ch-attachment-row select { min-width: 0; }
.ch-attachment-picker { display: grid; gap: 7px; }
.ch-attachment-search { display: flex; align-items: center; gap: 5px; }
.ch-attachment-search input { width: 100%; min-width: 0; min-height: 32px; padding: 5px 8px; border: 1px solid #dfe5ef; border-radius: 8px; outline: 0; font-size: 11px; }
.ch-attachment-search button { min-height: 30px; padding: 0 6px; flex: none; border: 0; border-radius: 7px; background: #eef3ff; color: var(--brand, #2f6bff); font-size: 11px; cursor: pointer; }
.ch-attachment-search button:disabled { opacity: .45; cursor: default; }
.ch-attachment-search span { flex: none; color: #8791a1; font-size: 11px; }
.ch-fields-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ch-editor-preview { align-self: start; padding: 16px; border: 1px solid #e4eaf5; border-radius: 15px; background: #f8faff; text-align: center; }
.ch-editor-preview > p { margin: 12px 0; color: #8995a5; font-size: 11px; line-height: 1.5; }
.ch-preview-actions { display: flex; justify-content: center; gap: 7px; }
.ch-size-previews { display: flex; justify-content: center; align-items: end; gap: 14px; margin-top: 18px; padding-top: 15px; border-top: 1px solid #e2e9f4; }
.ch-size-previews > div { display: grid; justify-items: center; gap: 5px; }
.ch-size-previews .ch-preview-stage { border-radius: 7px; }
.ch-size-previews .ch-avatar { font-size: 13px; }
.ch-size-previews small { color: #919aaa; font-size: 10px; }
.ch-shapes { display: flex; gap: 5px; padding: 3px; margin-bottom: 14px; border-radius: 999px; background: #eaf0fb; }
.ch-shapes button { flex: 1; border: 0; border-radius: 999px; padding: 5px; background: transparent; color: #7d899d; font-size: 11px; cursor: pointer; }
.ch-shapes button.active { background: #fff; color: var(--brand, #2f6bff); box-shadow: 0 2px 8px #17315a16; }
.ch-preview-stage { width: 160px; height: 160px; display: grid; place-items: center; position: relative; flex: none; overflow: hidden; border: 1px solid #e6edfa; border-radius: 20px; background: radial-gradient(circle at 35% 25%, #ffffff, #eaf1ff 80%); }
.ch-preview-stage.editor { width: 236px; height: 236px; max-width: 100%; margin: 0 auto; cursor: grab; touch-action: none; }
.ch-preview-stage.editor:active { cursor: grabbing; }
.ch-preview-stage.editor:focus-visible { outline: 3px solid #a7bdff; outline-offset: 3px; }
.ch-avatar { width: 70%; height: 70%; display: grid; place-items: center; position: relative; background: linear-gradient(135deg, #2f6bff, #74a2ff); color: #fff; font-size: 42px; font-weight: 700; }
.ch-avatar.circle { border-radius: 50%; }
.ch-avatar.square { border-radius: 17%; }
.ch-avatar > span { position: relative; z-index: 1; }
.ch-avatar .ch-base-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ch-avatar .ch-overlay-image { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: contain; pointer-events: none; transform: translate(var(--ch-x, 0%), var(--ch-y, 0%)) scale(var(--ch-scale, 1.2)); transform-origin: center; }
.ch-rule-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 11px; }
.ch-rule-toolbar select { width: auto; min-width: 145px; }
.ch-condition-list { display: grid; gap: 10px; margin-bottom: 10px; }
.ch-condition { display: grid; gap: 9px; padding: 15px; border: 1px solid #e7ecf5; border-radius: 13px; background: #fbfcff; }
.ch-condition-head { display: flex; justify-content: space-between; }
.ch-condition-head button { border: 0; background: transparent; color: #d9474f; font-size: 12px; cursor: pointer; }
.ch-hero { padding: 76px 0 70px; background: radial-gradient(500px 250px at 75% 10%, rgba(100, 145, 255, .22), transparent 70%), linear-gradient(180deg, #f5f8ff, #fff); text-align: center; }
.ch-hero h1 { margin: 10px 0 12px; font-size: clamp(33px, 4vw, 48px); line-height: 1.2; letter-spacing: -1px; }
.ch-hero p { max-width: 600px; margin: 0 auto; color: var(--muted, #6b7280); font-size: 16px; }
.ch-public-section { padding: 70px 0; border-bottom: 1px solid #edf0f6; }
.ch-public-section:last-child { border-bottom: 0; }
.ch-public-section .ch-panel-head h2 { font-size: 31px; letter-spacing: -.6px; }
.ch-wardrobe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.ch-wardrobe-preview { display: flex; flex-direction: column; align-items: center; padding: 27px; border: 1px solid #e6ebf4; border-radius: 19px; background: #fff; text-align: center; }
.ch-wardrobe-preview h3 { margin: 16px 0 3px; font-size: 19px; }
.ch-wardrobe-preview p { margin: 0; color: var(--muted, #6b7280); }
.ch-wardrobe-preview small { margin-top: 9px; color: #99a1af; }
.ch-wardrobe-preview > div:last-child { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.ch-owned-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 10px; }
.ch-owned-column { display: grid; align-content: start; gap: 10px; }
.ch-owned-search { display: flex; gap: 8px; }
.ch-owned-search input { width: 100%; min-width: 0; min-height: 36px; padding: 7px 11px; border: 1px solid #dfe5ef; border-radius: 10px; outline: 0; }
.ch-owned-search input:focus { border-color: var(--brand, #2f6bff); box-shadow: 0 0 0 3px rgba(47, 107, 255, .12); }
.ch-owned-list:focus-visible { outline: 3px solid #a7bdff; outline-offset: 2px; border-radius: 8px; }
.ch-owned-item { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 9px; border: 1px solid #e7ecf5; border-radius: 13px; background: #fff; text-align: left; cursor: pointer; }
.ch-owned-item.selected { border-color: var(--brand, #2f6bff); background: var(--brand-soft, #eef3ff); }
.ch-owned-item strong, .ch-owned-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-owned-item small { color: #939baa; font-size: 11px; }
.ch-mini-preview .ch-preview-stage { width: 50px; height: 50px; border-radius: 9px; }
.ch-mini-preview .ch-avatar { font-size: 18px; }
.ch-catalog-filter { display: flex; gap: 9px; margin-bottom: 19px; }
.ch-catalog-filter input { flex: 1; min-width: 0; }
.ch-catalog-filter select { width: 150px; }
.ch-catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ch-catalog-item { padding: 21px; border: 1px solid #e7ecf5; border-radius: 18px; background: #fff; }
.ch-catalog-top { display: flex; align-items: center; gap: 15px; }
.ch-catalog-top .ch-preview-stage { width: 82px; height: 82px; border-radius: 12px; }
.ch-catalog-top h3 { margin: 0 0 3px; font-size: 17px; }
.ch-catalog-top p { margin: 0; color: var(--muted, #6b7280); font-size: 12px; }
.ch-catalog-rules { display: grid; gap: 8px; margin-top: 15px; }
.ch-catalog-rules > div { padding: 11px 12px; border-radius: 11px; background: #f8faff; }
.ch-catalog-rules strong { font-size: 13px; }
.ch-catalog-rules p { margin: 4px 0 2px; color: #5b6779; font-size: 12px; }
.ch-catalog-rules small { color: #9aa1ab; font-size: 11px; }
html.netscope-theme-dark .ch-page { color: #e7ecf5; background: #0b1220; }
html.netscope-theme-dark .ch-hero { background: radial-gradient(500px 250px at 75% 10%, rgba(75, 119, 227, .22), transparent 70%), linear-gradient(180deg, #101d33, #0b1220); }
html.netscope-theme-dark .ch-hero h1 { color: #e7ecf5; }
html.netscope-theme-dark .ch-public-section { border-color: #29364b; }
html.netscope-theme-dark .ch-panel, html.netscope-theme-dark .ch-dialog, html.netscope-theme-dark .ch-wardrobe-preview, html.netscope-theme-dark .ch-owned-item, html.netscope-theme-dark .ch-catalog-item { color: #e7ecf5; background: #111d2f; border-color: #33435c; }
html.netscope-theme-dark .ch-material, html.netscope-theme-dark .ch-rule-item, html.netscope-theme-dark .ch-grant, html.netscope-theme-dark .ch-editor-preview, html.netscope-theme-dark .ch-condition, html.netscope-theme-dark .ch-catalog-rules > div { color: #e7ecf5; background: #17243a; border-color: #33435c; }
html.netscope-theme-dark .ch-field, html.netscope-theme-dark .ch-check, html.netscope-theme-dark .ch-rule-item p, html.netscope-theme-dark .ch-catalog-rules p { color: #c4d0e2; }
html.netscope-theme-dark .ch-field input, html.netscope-theme-dark .ch-field select, html.netscope-theme-dark .ch-field textarea, html.netscope-theme-dark .ch-attachment-row select, html.netscope-theme-dark .ch-rule-toolbar select, html.netscope-theme-dark .ch-catalog-filter input, html.netscope-theme-dark .ch-catalog-filter select, html.netscope-theme-dark .ch-owned-search input, html.netscope-theme-dark .ch-attachment-search input { color: #e7ecf5; background: #0d1727; border-color: #3c4d68; }
html.netscope-theme-dark .ch-button:not(.ch-primary):not(.ch-danger) { color: #dce6f5; background: #17243a; border-color: #3c4d68; }
html.netscope-theme-dark .ch-button:not(.ch-primary):not(.ch-danger):hover { background: #20314a; }
html.netscope-theme-dark .ch-danger { color: #f5a5aa; background: #3d222c; border-color: #633540; }
html.netscope-theme-dark .ch-tag { color: #bdcbe0; background: #20314a; }
html.netscope-theme-dark .ch-tag.active { color: #73d7a5; background: #153b2b; }
html.netscope-theme-dark .ch-owned-item.selected { background: #1d3158; border-color: #5580ce; }
html.netscope-theme-dark .ch-shapes { background: #20314a; }
html.netscope-theme-dark .ch-shapes button.active { background: #30476a; color: #c5d7ff; }
html.netscope-theme-dark .ch-attachment-search button { background: #20314a; }
html.netscope-theme-dark .ch-status { color: #73d7a5; background: #153b2b; border-color: #2c6248; }
html.netscope-theme-dark .ch-status.error { color: #f5a5aa; background: #3d222c; border-color: #633540; }
@media (max-width: 920px) { .ch-editor-grid, .ch-wardrobe { grid-template-columns: 1fr; } .ch-editor-preview { order: -1; } .ch-grant-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .ch-page .ch-wrap { padding: 0 16px; } .ch-hero { padding: 54px 0 56px; } .ch-hero p { font-size: 14px; } .ch-public-section { padding: 58px 0; } .ch-public-section .ch-panel-head h2 { font-size: 26px; } .ch-catalog { grid-template-columns: 1fr; } .ch-panel-head, .ch-admin-head, .ch-rule-item { flex-direction: column; } .ch-row-actions { width: 100%; } .ch-row-actions .ch-button { flex: 1; } .ch-backdrop { align-items: end; padding: 0; } .ch-dialog { width: 100%; max-height: 94dvh; border-radius: 20px 20px 0 0; padding: 20px 16px; } }
@media (max-width: 480px) { .ch-panel { padding: 18px 14px; } .ch-user-lookup, .ch-catalog-filter { flex-direction: column; align-items: stretch; } .ch-catalog-filter select { width: 100%; } .ch-grant-form, .ch-fields-two, .ch-owned-list { grid-template-columns: 1fr; } .ch-attachment-row { flex-direction: column; } .ch-dialog-actions .ch-button { flex: 1; } }