/* 鳞小仙：浅色工作区、深青导航。页面共享控件、状态与响应式规则。 */
:root, [data-bs-theme="light"] {
    --chan-bg: #f5f7f9; --chan-bg-2: #edf3f2; --chan-panel: #fff; --chan-panel-2: #f7f9fa;
    --chan-border: #e7ecef; --chan-border-2: #d5dfe3; --chan-accent: #137c6b; --chan-accent-2: #106958;
    --chan-accent-dim: #eaf5f1; --chan-text: #263b40; --chan-text-dim: #63757e;
    --chan-ok: #148567; --chan-warn: #a76a12; --chan-fault: #ce5050; --chan-idle: #97a5af;
    --bs-body-bg: var(--chan-bg); --bs-body-color: var(--chan-text); --bs-border-color: var(--chan-border);
    --bs-secondary-color: var(--chan-text-dim); --bs-info-rgb: 19, 124, 107;
    --bs-warning-rgb: 167, 106, 18; --bs-danger-rgb: 206, 80, 80;
    --bs-link-color: var(--chan-accent); --bs-link-hover-color: var(--chan-accent-2);
}
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: var(--chan-bg); font: 1rem/1.65 "Segoe UI", "Microsoft YaHei", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--chan-accent); text-decoration: none; }
a:hover { color: var(--chan-accent-2); }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid #52ad9a; outline-offset: 3px; }
[hidden] { display: none !important; }
code, .chan-mono, .chan-code { font-family: "Cascadia Code", Consolas, ui-monospace, monospace; font-size: .93em; letter-spacing: .15px; }
code { color: #456b75; overflow-wrap: anywhere; }
.chan-code { text-transform: uppercase; }
.chan-num { font-family: "Segoe UI", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.chan-icon-library { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.chan-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.chan-icon-button { display: inline-flex; justify-content: center; align-items: center; width: 36px; height: 36px; flex: none; padding: 0; border: 0; border-radius: 9px; color: inherit; background: transparent; cursor: pointer; }
.chan-icon-button:hover { background: #e9f0ee; color: var(--chan-accent); }
.chan-skip-link { position: fixed; top: -60px; left: 20px; z-index: 2000; padding: 10px 18px; background: white; border: 2px solid var(--chan-accent); border-radius: 8px; }
.chan-skip-link:focus { top: 10px; }
/* Shell and navigation */
.chan-shell { display: flex; min-height: 100vh; }
.chan-sidebar { width: 256px; flex: none; position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; background: #123f3a; color: #dbece7; padding: 28px 16px 16px; z-index: 50; }
.chan-brand-row { display: flex; align-items: center; justify-content: space-between; }
.chan-brand { display: flex; align-items: center; gap: 11px; padding: 0 8px; text-decoration: none; color: inherit; }
.chan-brand:hover { color: inherit; }
.chan-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 12px; color: #fff; background: #298b73; }
.chan-brand-mark .chan-icon { width: 28px; height: 28px; }
.chan-brand-col { display: flex; flex-direction: column; gap: 4px; }
.chan-brand-text { display: flex; align-items: center; gap: 8px; font-size: 1.375rem; line-height: 1.25; font-weight: 650; letter-spacing: 2px; white-space: nowrap; color: #fff; }
.chan-brand-badge { padding: 2px 5px; font-size: 0.75rem; font-weight: 500; letter-spacing: .8px; background: #ffffff12; border: 1px solid #ffffff24; border-radius: 4px; color: #a9c9bd; }
.chan-brand-sub { font-size: 0.75rem; letter-spacing: 1px; color: #a0bfb4; }
.chan-side-nav { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #46756b transparent; padding: 0 3px; margin: 28px -3px 14px; }
.chan-side-group { margin: 22px 14px 9px; color: #8eafa5; font-size: 0.75rem; letter-spacing: 1.7px; }
.chan-side-group:first-child { margin-top: 0; }
.chan-side-link { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 10px 14px; margin: 3px 0; color: #bdd2ca; border-radius: 8px; font-size: 1rem; transition: background .18s, color .18s; }
.chan-side-link .chan-icon { width: 18px; height: 18px; opacity: .8; }
.chan-side-link:hover { background: #ffffff0c; color: #fff; }
.chan-side-link.active { color: #fff; background: #2c6559; font-weight: 600; }
.chan-side-link.active .chan-icon { color: #a8dfbf; opacity: 1; }
.chan-nav-indicator { width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: #bde5cd; }
.chan-side-foot { border-top: 1px solid #ffffff16; padding: 18px 6px 0; }
.chan-user { display: flex; align-items: center; gap: 10px; }
.chan-avatar, .chan-topbar-avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: #dcebe4; color: #386754; font-size: 1rem; font-weight: 600; }
.chan-avatar { background: #ffffff12; color: #d0e9da; border-radius: 10px; }
.chan-user-info { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.chan-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9375rem; font-weight: 500; color: #e0ede7; }
.chan-role { color: #a0bfb4; font-size: 0.75rem; }
.chan-user form { margin: 0; }
.chan-user .chan-icon-button:hover { color: #fff; background: #ffffff12; }
.chan-body { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.chan-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 20px; padding: 12px 36px; background: #ffffffed; backdrop-filter: blur(12px); border-bottom: 1px solid var(--chan-border); }
.chan-breadcrumb, .chan-topbar-tools { display: flex; align-items: center; gap: 16px; }
.chan-breadcrumb { min-width: 0; font-size: 0.9375rem; white-space: nowrap; }
.chan-breadcrumb > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.chan-breadcrumb-root { color: #7c8b92; }
.chan-breadcrumb-sep { color: #cbd5d9; }
.chan-topbar-tools { gap: 22px; }
.chan-global-search { display: flex; align-items: center; gap: 10px; width: 264px; padding: 7px 12px; border: 1px solid var(--chan-border); border-radius: 8px; background: #f8fafb; color: #8b9a9e; }
.chan-global-search:focus-within { border-color: #4d9f8b; box-shadow: 0 0 0 3px #137c6b0d; }
.chan-global-search .chan-icon { width: 16px; height: 16px; }
.chan-global-search input { width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--chan-text); outline: none; font-size: 0.875rem; }
.chan-global-search input::placeholder { color: #687a83; }
.chan-global-search kbd { padding: 0 5px; border: 1px solid #e0e6e9; border-radius: 4px; color: #91a0a7; background: white; font-size: 0.75rem; }
.chan-topbar-divider { height: 24px; width: 1px; background: var(--chan-border); }
.chan-main { flex: 1; width: 100%; max-width: 1660px; margin: 0 auto; padding: 32px 36px; outline: none; }
.chan-page-title { font-size: 1.9375rem; font-weight: 650; line-height: 1.4; letter-spacing: -.5px; margin: 0 0 6px; color: #203b3b; }
.chan-page-desc { font-size: 1rem; line-height: 1.8; color: var(--chan-text-dim); margin-bottom: 24px; }
.chan-main > .d-flex:first-child { margin-bottom: 24px; flex-wrap: wrap; gap: 16px; }
.chan-main > .d-flex:first-child .chan-page-desc { margin-bottom: 0; }
.chan-main > .d-flex:first-child > .d-flex { flex-wrap: wrap; }
.chan-main > div:first-child:has(> .chan-page-title) { margin-bottom: 24px; }
.chan-footer { display: flex; justify-content: space-between; gap: 14px; width: 100%; max-width: 1660px; margin: 0 auto; padding: 6px 36px 24px; font-size: 0.75rem; color: #89979d; }
.chan-footer-sep { padding: 0 7px; color: #b3c0c4; }
.chan-menu-toggle, .chan-menu-close { display: none; }
.chan-sidebar-backdrop { position: fixed; inset: 0; z-index: 45; background: #122c3b66; border: 0; backdrop-filter: blur(2px); }
/* Shared panels and tables */
.chan-card { background: var(--chan-panel); border: 1px solid var(--chan-border); border-radius: 14px; overflow: hidden; box-shadow: 0 2px 5px #233e3b02; }
.chan-card + .chan-card { margin-top: 20px; }
.chan-card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 19px 22px; border-bottom: 1px solid var(--chan-border); background: white; }
.chan-card-head > a { font-size: 0.9375rem; }
.chan-card-title { font-size: 1.125rem; font-weight: 650; margin: 0; letter-spacing: .2px; }
.chan-list-heading { min-width: 0; }
.chan-list-heading p { margin: 5px 0 0; }
.chan-count { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 8px; border: 1px solid var(--chan-border); border-radius: 5px; font-size: 0.875rem; font-weight: 500; color: var(--chan-text-dim); vertical-align: middle; white-space: nowrap; }
.chan-card-body { padding: 24px; }
.chan-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 18px; margin: 0 0 24px; }
.chan-stat { position: relative; min-width: 0; background: var(--chan-panel); border: 1px solid var(--chan-border); border-radius: 14px; padding: 22px; }
.chan-stat-label { font-size: 0.9375rem; color: var(--chan-text-dim); margin-bottom: 12px; }
.chan-stat-value { font-size: 2.5rem; line-height: 1.2; font-weight: 650; letter-spacing: -.6px; color: #203b3b; font-variant-numeric: tabular-nums; }
.chan-stat-unit { font-size: 0.9375rem; letter-spacing: 0; font-weight: 400; color: var(--chan-text-dim); margin-left: 6px; }
.chan-table-wrapper, .table-responsive { max-width: 100%; overflow: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #cddbd9 transparent; }
.chan-table-wrapper:focus-visible { outline-offset: -3px; }
.chan-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 1rem; margin: 0; }
.chan-table thead th { position: sticky; top: 0; padding: 13px 24px; background: #f8fafb; border-bottom: 1px solid var(--chan-border); color: #61737c; font-size: 0.9375rem; font-weight: 500; text-align: left; white-space: nowrap; z-index: 1; }
.chan-table tbody td { padding: 16px 24px; border-bottom: 1px solid #eef2f3; vertical-align: middle; }
.chan-table tbody tr:hover td { background: #f6faf8; }
.chan-table tbody tr:last-child td { border-bottom: 0; }
.chan-table tbody tr.is-selected td { background: var(--chan-accent-dim); }
.chan-table .chan-mono { white-space: nowrap; }
.chan-device-identity { min-width: 166px; white-space: nowrap; }
.chan-device-model { min-width: 130px; }
.chan-device-list-table { min-width: 1040px; }
.chan-device-list-table .chan-device-time { white-space: nowrap; }
.chan-device-list-table td:nth-child(3) { white-space: nowrap; }
.chan-table a.chan-mono { font-weight: 600; color: #315753; }
.chan-table a.chan-mono:hover { color: var(--chan-accent); text-decoration: underline; }
.chan-sub { font-size: 0.875rem; line-height: 1.7; color: var(--chan-text-dim); }
.chan-strong-link { color: var(--chan-text); font-weight: 500; }
.chan-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.chan-status-text { font-size: 0.9375rem; }
.chan-dot { width: 6px; height: 6px; flex: none; display: inline-block; border-radius: 50%; background: var(--chan-idle); }
.chan-dot.is-ok { background: var(--chan-ok); box-shadow: 0 0 0 3px #1485670d; }
.chan-dot.is-warn { background: var(--chan-warn); }
.chan-dot.is-fault { background: var(--chan-fault); }
.chan-tag { display: inline-block; padding: 3px 9px; font-size: 0.75rem; line-height: 1.6; color: #6a7c86; background: #f2f5f7; border: 1px solid #e9eff1; border-radius: 5px; white-space: nowrap; }
.chan-tag.is-accent, .chan-tag.is-ok { color: #167458; background: #edf7f1; border-color: #e2efe8; }
.chan-tag.is-warn { color: #96631c; background: #fdf4e7; border-color: #f5e9d6; }
.chan-tag.is-fault { color: #bd5151; background: #fff0ef; border-color: #fbe3e1; }
.chan-caps { display: flex; flex-wrap: wrap; gap: 6px; }
.chan-row-actions { text-align: right; white-space: nowrap; }
.chan-row-actions > * + * { margin-left: 6px; }
.chan-row-actions form { display: inline-flex; margin: 0; }
.chan-empty { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; min-height: 200px; padding: 44px 24px; color: var(--chan-text-dim); font-size: 0.9375rem; line-height: 1.9; text-align: center; }
.chan-empty .chan-icon { width: 36px; height: 36px; color: #9bbcaf; }
.chan-empty strong { font-size: 1.125rem; color: #526962; font-weight: 500; }
/* Summary bands keep secondary metrics from pushing the main task below the fold. */
.chan-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 20px; overflow: hidden; border: 1px solid var(--chan-border); border-radius: 12px; background: #fff; }
.chan-metrics--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chan-metrics--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.chan-metrics > .chan-stat { padding: 20px 24px; border: 0; border-radius: 0; }
.chan-metrics > .chan-stat + .chan-stat { border-left: 1px solid var(--chan-border); }
.chan-metrics .chan-stat-label { margin-bottom: 8px; }
.chan-metrics .chan-stat-value { font-size: 2.25rem; }
.chan-metrics .chan-stat > .text-secondary { font-size: 0.875rem !important; line-height: 1.7; }
.chan-metric-context { display: flex; flex-wrap: wrap; gap: 8px 24px; grid-column: 1 / -1; padding: 10px 24px; border-top: 1px solid var(--chan-border); background: #fbfcfc; color: var(--chan-text-dim); font-size: 0.875rem; }
.chan-metric-context strong { margin-inline: 4px; font-weight: 600; color: var(--chan-text); }
.chan-metric-context > :last-child { margin-left: auto; }
.chan-section-heading { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 32px 0 16px; }
.chan-section-heading h2 { margin: 0; font-size: 1.1875rem; font-weight: 600; }
.chan-section-heading p { margin: 5px 0 0; font-size: 0.9375rem; color: var(--chan-text-dim); }
.chan-section-link { font-size: 0.9375rem; }
.chan-analysis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.chan-analysis-grid > div { width: auto; min-width: 0; }
.chan-analysis-grid .chan-card { overflow-x: auto; }
.chan-analysis-grid .chan-table { min-width: 500px; }
.chan-analysis-grid .chan-table th:first-child, .chan-analysis-grid .chan-table td:first-child { min-width: 140px; white-space: nowrap; }
.chan-pending-table { min-width: 820px; }
.chan-pending-model { min-width: 140px; white-space: nowrap; }
.chan-table-wrapper::-webkit-scrollbar { height: 10px; }
.chan-table-wrapper::-webkit-scrollbar-track { background: #f0f4f2; }
.chan-table-wrapper::-webkit-scrollbar-thumb { border: 2px solid #f0f4f2; border-radius: 6px; background: #afc1bb; }
.chan-aging-key { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; color: var(--chan-text-dim); font-size: 0.875rem; }
.chan-aging-key > span { display: inline-flex; align-items: center; gap: 6px; }
/* Form controls */
.form-label { font-size: 0.9375rem; font-weight: 500; margin-bottom: 8px; }
.form-control, .form-select { min-height: 46px; padding: 10px 14px; font-size: 1rem; line-height: 1.5; background-color: #fff; border-color: var(--chan-border-2); border-radius: 8px; color: var(--chan-text); }
.form-select { padding-right: 32px; }
.form-control::placeholder { color: #687a83; font-size: 0.9375rem; }
.form-control:focus, .form-select:focus { color: var(--chan-text); background-color: #fff; border-color: #55a58f; box-shadow: 0 0 0 3px #137c6b12; }
.form-control:disabled, .form-select:disabled { background-color: #f3f6f6; color: #8d9ba2; }
.form-check-input:checked { background-color: var(--chan-accent); border-color: var(--chan-accent); }
.form-check-input:focus { border-color: #55a58f; box-shadow: 0 0 0 3px #137c6b12; }
.form-control.input-validation-error { border-color: var(--chan-fault); }
.chan-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.chan-filter > div { min-width: 0; max-width: 100%; }
.chan-filter .form-control, .chan-filter .form-select { max-width: 100%; }
.chan-filter label { display: block; margin-bottom: 7px; font-size: 0.875rem; color: #536b74; }
.chan-filter > div:last-child:has(.btn) { display: flex; align-items: center; gap: 8px; }
.chan-filter > div:last-child .btn { min-height: 40px; }
/* Query panels own their spacing and respond to their available width, not the viewport. */
.chan-query { container-type: inline-size; padding: 20px 24px 24px; margin-bottom: 20px; }
.chan-query + .chan-list { margin-top: 0; }
.chan-query-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 16px; }
.chan-query-title { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 600; color: #526971; }
.chan-query-title .chan-icon { width: 16px; height: 16px; color: #8d9da2; }
.chan-query .chan-filter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 16px; }
.chan-query .chan-filter--stock { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) auto; }
.chan-query .chan-filter--devices { grid-template-columns: minmax(220px, 1.8fr) repeat(3, minmax(120px, 1fr)) auto; }
.chan-query .chan-filter--users { grid-template-columns: minmax(0, 2fr) minmax(140px, 1fr) auto auto; }
.chan-query .chan-filter--logs { grid-template-columns: minmax(200px, 1.6fr) minmax(100px, .8fr) minmax(120px, 1fr) repeat(2, minmax(138px, 1fr)) auto; gap: 12px; }
.chan-query .chan-filter--firmware { grid-template-columns: minmax(0, 480px) auto; justify-content: start; }
.chan-query .chan-filter label { font-size: 0.9375rem; margin-bottom: 8px; }
.chan-query .chan-filter .form-control, .chan-query .chan-filter .form-select { width: 100%; height: 46px; min-height: 46px; }
.chan-filter-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.chan-query .chan-filter-actions .btn { min-height: 46px; white-space: nowrap; }
.chan-query .chan-filter-check { display: flex; align-items: center; height: 46px; border: 1px solid var(--chan-border); border-radius: 8px; background: #fafcfc; }
.chan-query .chan-filter .chan-check-tile { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 14px; margin: 0; white-space: nowrap; cursor: pointer; }
.chan-check-tile .form-check-input { margin: 0; flex: none; }
.chan-query .chan-check-inline .form-check-label { margin: 0; }
.chan-query-note { margin: 12px 0 0; font-size: 0.875rem; color: var(--chan-text-dim); }
@container (max-width: 1020px) {
    .chan-query .chan-filter--devices, .chan-query .chan-filter--logs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .chan-filter--devices .chan-filter-search { grid-column: span 2; }
}
@container (max-width: 680px) {
    .chan-query .chan-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .chan-query .chan-filter-search, .chan-query .chan-filter-actions { grid-column: 1 / -1; }
    .chan-query .chan-filter-actions { padding-top: 4px; }
    .chan-query .chan-filter--firmware > div:first-child { grid-column: 1 / -1; }
}
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 10px 18px; border-radius: 8px; font-size: 0.9375rem; font-weight: 500; line-height: 1.5; transition: background .15s, border-color .15s, box-shadow .15s; }
.btn-sm { min-height: 40px; padding: 8px 14px; font-size: 0.875rem; border-radius: 7px; }
.btn .chan-icon { width: 16px; height: 16px; }
.btn-chan-primary { color: white; background: var(--chan-accent); border-color: var(--chan-accent); box-shadow: 0 2px 3px #123f3a0a; }
.btn-chan-primary:hover, .btn-chan-primary:active, .btn-chan-primary:focus-visible { color: white !important; background: var(--chan-accent-2) !important; border-color: var(--chan-accent-2) !important; }
.btn-chan-primary:disabled { color: #fff; background: #83a69c; border-color: #83a69c; opacity: .65; }
.btn-outline-secondary { color: #596e77; background: white; border-color: #dfe6e9; }
.btn-outline-secondary:hover, .btn-outline-secondary:active { color: #294c43 !important; background: #edf4f1 !important; border-color: #c6d9d0 !important; }
.btn-outline-danger { color: var(--chan-fault); border-color: #eedbda; }
.btn-outline-danger:hover { color: #fff; background: var(--chan-fault); border-color: var(--chan-fault); }
.chan-section { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--chan-border); }
.chan-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.chan-field-hint { margin-top: 6px; font-size: 0.875rem; line-height: 1.8; color: var(--chan-text-dim); }
.chan-field-error { font-size: 0.9375rem; color: var(--chan-fault); }
.chan-field-error ul { margin: 0; padding-left: 18px; }
.validation-summary-valid { display: none; }
.validation-summary-errors { padding: 12px 16px; margin-bottom: 16px; border: 1px solid #f3dad7; border-radius: 8px; background: #fff7f6; }
.chan-form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--chan-border); }
.chan-label { display: block; margin-bottom: 5px; color: var(--chan-text-dim); font-size: 0.875rem; }
.chan-readonly-row { display: flex; flex-wrap: wrap; gap: 32px; padding-bottom: 20px; border-bottom: 1px solid var(--chan-border); }
.chan-readonly-value { font-size: 1.125rem; }
.chan-pre { padding: 20px 24px; margin: 0; overflow: auto; max-height: 360px; white-space: pre; font: .9375rem/1.8 Consolas, monospace; color: #516b70; background: #f8fafb; border-block: 1px solid var(--chan-border); }
.chan-check-inline { display: flex; align-items: center; gap: 7px; min-height: 40px; }
.chan-check-inline .form-check-input { margin: 0; flex: none; }
.chan-check-inline .form-check-label { cursor: pointer; font-size: 0.9375rem; color: var(--chan-text); white-space: nowrap; margin: 0; }
.chan-cap-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.chan-cap-option { display: flex; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--chan-border); border-radius: 8px; background: #fbfcfc; cursor: pointer; }
.chan-cap-option:hover { border-color: #a5c8b8; }
.chan-cap-option:has(input:checked), .chan-cap-option.is-on { border-color: #9dc8b6; background: var(--chan-accent-dim); }
.chan-cap-option input { margin: 0; flex: none; accent-color: var(--chan-accent); }
.chan-cap-name { flex: 1; font-size: 0.9375rem; }
.chan-cap-bit { font: .8125rem Consolas, monospace; color: var(--chan-text-dim); }
/* Results, editable tables and action picker */
.chan-result { padding: 16px 20px; margin-bottom: 20px; border: 1px solid var(--chan-border); border-left: 3px solid var(--chan-border-2); border-radius: 10px; background: #fff; font-size: 0.9375rem; }
.chan-result-head { font-size: 1rem; font-weight: 600; }
.chan-result.is-ok { border-left-color: var(--chan-ok); background: #f3faf6; }
.chan-result.is-warn { border-left-color: var(--chan-warn); background: #fffbf3; }
.chan-result.is-fault { border-left-color: var(--chan-fault); background: #fff7f6; }
.chan-result.is-ok .chan-result-head { color: var(--chan-ok); }
.chan-result.is-warn .chan-result-head { color: var(--chan-warn); }
.chan-result.is-fault .chan-result-head { color: var(--chan-fault); }
.chan-result-list { max-height: 260px; overflow-y: auto; margin: 10px 0 0; padding-left: 18px; font-size: 0.9375rem; line-height: 1.8; }
.chan-result-foot { padding: 14px 20px; color: var(--chan-text-dim); font-size: 0.875rem; line-height: 1.8; }
.chan-grid { table-layout: fixed; min-width: 640px; }
.chan-grid thead th { padding: 12px 10px; }
.chan-grid tbody td { padding: 6px; vertical-align: top; }
.chan-grid-row.is-error td { background: #fff7f6; }
.chan-grid-row.is-error td:first-child { box-shadow: inset 3px 0 var(--chan-fault); }
.chan-grid-row.is-error .chan-grid-no { color: var(--chan-fault); }
.chan-grid-no { padding-top: 16px !important; text-align: right; font-size: 0.875rem; color: var(--chan-text-dim); }
.chan-grid-input { width: 100%; padding: 9px 10px; border: 1px solid var(--chan-border); border-radius: 6px; color: var(--chan-text); background: #fbfcfc; font-size: 0.9375rem; outline: none; }
.chan-grid-input::placeholder { color: #9cabb2; }
.chan-grid-input:focus { border-color: #55a58f; background: #fff; box-shadow: 0 0 0 2px #137c6b12; }
.chan-grid-input.is-invalid { border-color: var(--chan-fault); background: #fff4f3; }
.chan-grid-input.is-duplicate { border-color: var(--chan-warn); background: #fff8eb; }
.chan-grid-msg { padding: 4px 2px 0; font-size: 0.875rem; line-height: 1.5; color: var(--chan-fault); }
.chan-grid-del { width: 30px; height: 30px; margin-top: 5px; padding: 0; border: 1px solid var(--chan-border); border-radius: 6px; background: white; color: var(--chan-text-dim); font-size: 1.3125rem; line-height: 1; }
.chan-grid-del:hover { background: #fff2f1; color: var(--chan-fault); border-color: #eed3ce; }
.chan-grid-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.chan-grid-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 18px 22px; border-top: 1px solid var(--chan-border); }
.chan-req { margin-left: 4px; padding: 1px 4px; border: 1px solid var(--chan-border); border-radius: 4px; color: var(--chan-text-dim); font-size: 0.75rem; }
#stock-grid-status.has-error { color: var(--chan-warn); }
.chan-action-picker { display: flex; flex-wrap: wrap; gap: 12px; }
.chan-action-option { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "radio name" ". hint"; flex: 1 1 220px; gap: 4px 10px; padding: 17px; border: 1px solid var(--chan-border); border-radius: 10px; cursor: pointer; background: #fafcfc; }
.chan-action-option:hover { border-color: #b6cfc4; }
.chan-action-option:has(input:checked) { border-color: #78b399; background: var(--chan-accent-dim); }
.chan-action-option.is-danger:has(input:checked) { border-color: #dd9f97; background: #fff3f0; }
.chan-action-option input { grid-area: radio; margin-top: 5px; accent-color: var(--chan-accent); }
.chan-action-name { grid-area: name; font-size: 1rem; font-weight: 500; }
.chan-action-hint { grid-area: hint; font-size: 0.875rem; line-height: 1.7; color: var(--chan-text-dim); }
.chan-rate { display: flex; align-items: center; gap: 10px; }
.chan-rate-value { min-width: 46px; flex: none; font-size: 0.9375rem; text-align: right; }
.chan-rate-bar { min-width: 40px; height: 5px; flex: 1; overflow: hidden; border-radius: 10px; background: #e9f0ed; }
.chan-rate-fill { display: block; height: 100%; border-radius: inherit; background: #469c7e; }
.chan-pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 2px; margin-bottom: 10px; }
.chan-pager-info { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--chan-text-dim); font-size: 0.875rem; }
.chan-pager-info .form-select { width: auto; min-height: 30px; padding: 4px 28px 4px 10px; font-size: 0.875rem; }
.chan-list > .chan-pager { margin: 0; padding: 16px 24px; border-top: 1px solid var(--chan-border); background: #fcfdfd; }
.pagination { gap: 5px; --bs-pagination-color: #6c7f82; --bs-pagination-bg: #fff; --bs-pagination-border-color: #e0e7e8; --bs-pagination-hover-bg: #edf5f0; --bs-pagination-hover-color: #137c6b; --bs-pagination-active-bg: #137c6b; --bs-pagination-active-border-color: #137c6b; --bs-pagination-disabled-bg: #f5f7f8; --bs-pagination-disabled-color: #a9b3b9; --bs-pagination-disabled-border-color: #e7ecef; }
.page-link, .page-item:first-child .page-link, .page-item:last-child .page-link { border-radius: 6px; padding: 5px 10px; font-size: 0.875rem; }
#chan-refresh-hint { display: inline-flex; align-items: center; gap: 7px; color: var(--chan-text-dim); font-size: 0.75rem; white-space: nowrap; }
#chan-refresh-hint .chan-dot { background: var(--chan-ok); }
#chan-refresh-hint.is-error .chan-dot { background: var(--chan-warn); }
#chan-refresh-hint.is-error { color: var(--chan-warn); }
.chan-refresh-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.chan-table-wrapper.is-refreshing { opacity: .7; transition: opacity .18s; }
.chan-toast { position: fixed; right: 28px; bottom: 28px; max-width: calc(100vw - 40px); z-index: 1100; border-radius: 10px; padding: 12px 20px; background: #254d43; box-shadow: 0 5px 24px #193e3a26; color: white; font-size: 0.9375rem; }
.chan-confirm-dialog { width: min(440px, calc(100vw - 32px)); padding: 28px; border: 1px solid var(--chan-border); border-radius: 18px; color: var(--chan-text); box-shadow: 0 25px 90px #143e3a26; }
.chan-confirm-dialog::backdrop { background: #173d3555; backdrop-filter: blur(3px); }
.chan-confirm-dialog h2 { margin: 18px 0 12px; font-size: 1.5rem; font-weight: 600; }
.chan-confirm-dialog p { margin: 0; font-size: 1rem; line-height: 1.9; color: var(--chan-text-dim); white-space: pre-line; }
.chan-confirm-icon { display: inline-flex; padding: 12px; color: #b57835; background: #fcf2e6; border-radius: 50%; }
.chan-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 28px; }
.btn.is-submitting::before { content: ""; width: 13px; height: 13px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: chan-spin .8s linear infinite; }
@keyframes chan-spin { to { transform: rotate(360deg); } }
/* Dashboard */
.chan-page-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.chan-page-heading .chan-page-desc { margin: 0; }
.chan-date { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--chan-border); border-radius: 7px; color: #74858b; background: #fff; font-size: 0.875rem; white-space: nowrap; }
.chan-date .chan-icon { width: 14px; height: 14px; }
.chan-welcome { position: relative; display: flex; align-items: center; overflow: hidden; min-height: 180px; padding: 30px 34px; margin-bottom: 24px; background: #e9f0e9; border: 1px solid #e2eae2; border-radius: 14px; }
.chan-welcome-copy { position: relative; z-index: 2; max-width: 65%; }
.chan-eyebrow { display: block; margin-bottom: 9px; color: #658b76; font-size: 0.75rem; letter-spacing: 2.4px; font-weight: 600; }
.chan-welcome h2 { margin: 0 0 9px; font-size: 1.8125rem; line-height: 1.5; font-weight: 600; color: #2e5144; letter-spacing: .5px; }
.chan-welcome h2 span { display: inline-block; }
.chan-welcome p { margin: 0; font-size: 0.875rem; line-height: 1.9; color: #728678; }
.chan-welcome-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 15px; color: #32644d; font-size: 0.875rem; font-weight: 600; }
.chan-welcome-link .chan-icon { width: 15px; height: 15px; }
.chan-aquarium { position: absolute; right: 20px; bottom: -1px; width: 305px; height: 185px; color: #6a9d7e; }
.chan-dashboard-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chan-dashboard-stats .chan-stat { padding: 22px 24px 18px; transition: border-color .18s, box-shadow .18s; }
.chan-dashboard-stats a.chan-stat:hover { border-color: #b8d0c3; box-shadow: 0 5px 16px #254b3b06; }
.chan-stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 8px; }
.chan-stat-top .chan-stat-label { margin: 0; }
.chan-stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; color: #648baf; background: #edf3f9; }
.chan-stat-icon.is-green { color: #459779; background: #edf7f0; }
.chan-stat-icon.is-purple { color: #9a84b1; background: #f4eff9; }
.chan-stat-icon.is-amber { color: #b58b4a; background: #fbf5e9; }
.chan-stat-icon .chan-icon { width: 18px; height: 18px; }
.chan-stat-caption { margin-top: 14px; padding-top: 13px; border-top: 1px solid #f0f3f4; font-size: 0.75rem; color: #6d7e85; }
.chan-stat-caption strong { font-weight: 500; color: #4a8c6d; }
.chan-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; margin-bottom: 24px; }
.chan-dashboard-grid .chan-card { margin: 0; }
.chan-card-kicker { color: #9aa6ac; font-size: 0.75rem; }
.chan-online-content { display: flex; align-items: center; justify-content: space-around; gap: 28px; min-height: 200px; padding: 24px; }
.chan-ring { display: grid; place-items: center; position: relative; width: 142px; height: 142px; flex: none; border-radius: 50%; background: conic-gradient(#429477 calc(var(--rate) * 1%), #edf2ef 0); }
.chan-ring::before { content: ""; position: absolute; inset: 12px; background: white; border-radius: 50%; }
.chan-ring-label { position: relative; z-index: 1; text-align: center; }
.chan-ring-label strong { display: block; color: #2f4a41; font-size: 2.125rem; line-height: 1.3; font-weight: 650; font-variant-numeric: tabular-nums; }
.chan-ring-label span { color: #98a39f; font-size: 0.75rem; }
.chan-online-legend { flex: 1; max-width: 230px; }
.chan-legend-item { display: flex; align-items: center; gap: 9px; margin: 12px 0; font-size: 0.875rem; color: #70837d; }
.chan-legend-item strong { margin-left: auto; font-size: 1.25rem; font-weight: 600; color: #354f45; }
.chan-legend-note { border-top: 1px solid var(--chan-border); padding-top: 10px; margin-top: 16px; color: #8c9c94; font-size: 0.75rem; }
.chan-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px; }
.chan-quick-link { display: flex; align-items: center; gap: 12px; padding: 14px 12px; min-width: 0; border: 1px solid #edf1f2; border-radius: 9px; color: #435b55; transition: background .15s, border-color .15s; }
.chan-quick-link:hover { background: #f4f9f5; border-color: #cbded1; color: #285e45; }
.chan-quick-link > .chan-icon { width: 21px; height: 21px; color: #81a18c; }
.chan-quick-link strong { display: block; font-size: 0.875rem; font-weight: 500; }
.chan-quick-link small { display: block; color: #6c7f76; font-size: 0.75rem; margin-top: 3px; }
.chan-overview-resources { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 14px 22px; background: #fafcfb; border-top: 1px solid var(--chan-border); font-size: 0.75rem; color: #83948a; }
.chan-overview-resources a { color: #657e70; }
.chan-overview-resources strong { font-weight: 600; color: #395b47; padding-inline: 5px; }
.chan-dashboard-devices .chan-table { min-width: 850px; }
.chan-dashboard-devices .chan-table th, .chan-dashboard-devices .chan-table td { padding-inline: 18px; }
/* Task layouts: device activity leads the dashboard; related objects sit side by side. */
.chan-dashboard-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.chan-dashboard-aside { display: grid; gap: 20px; min-width: 0; }
.chan-dashboard-aside .chan-card { margin: 0; }
.chan-dashboard-aside .chan-online-content { flex-direction: column; gap: 12px; padding: 24px; }
.chan-dashboard-aside .chan-online-legend { width: 100%; max-width: none; }
.chan-dashboard-aside .chan-quick-grid { grid-template-columns: 1fr; gap: 10px; padding: 16px; }
.chan-dashboard-aside .chan-quick-link { padding: 13px 14px; }
.chan-dashboard-aside .chan-quick-link strong { font-size: 0.9375rem; }
.chan-dashboard-aside .chan-quick-link small { font-size: 0.75rem; }
.chan-dashboard-stats .chan-stat { padding: 18px 24px; }
.chan-dashboard-stats .chan-stat-top { margin-bottom: 8px; }
.chan-dashboard-stats .chan-stat-caption { margin-top: 10px; padding-top: 10px; font-size: 0.875rem; }
.chan-product-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; gap: 20px; }
.chan-dashboard-shortcuts { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; margin-bottom: 24px; }
.chan-dashboard-shortcuts .chan-card-head { border: 0; padding: 20px 24px; gap: 4px; }
.chan-dashboard-shortcuts .chan-quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 16px 16px 16px 0; }
.chan-dashboard-shortcuts .chan-quick-link { padding: 14px 12px; }
.chan-dashboard-shortcuts .chan-quick-link small { font-size: .8125rem; }
.chan-product-layout > .chan-card { margin: 0; min-width: 0; }
.chan-series-panel .chan-card-head { padding: 20px; }
.chan-series-list { padding: 10px; }
.chan-series-item { padding: 4px; margin-bottom: 6px; border: 1px solid transparent; border-radius: 9px; }
.chan-series-item:last-child { margin: 0; }
.chan-series-item.is-selected { background: #f2f7f5; border-color: #dbe8e2; }
.chan-series-select { display: flex; flex-direction: column; gap: 6px; padding: 10px; color: var(--chan-text); }
.chan-series-select:hover { color: var(--chan-accent); }
.chan-series-name { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 1.125rem; font-weight: 600; }
.chan-series-meta { color: var(--chan-text-dim); font-size: 0.875rem; }
.chan-series-meta > span { padding-inline: 4px; color: #aab7ba; }
.chan-series-desc { font-size: 0.9375rem; line-height: 1.8; color: var(--chan-text-dim); }
.chan-series-actions { display: flex; align-items: center; gap: 8px; padding: 0 10px 10px; }
.chan-series-actions:empty { display: none; }
.chan-factory-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: start; gap: 20px; margin-bottom: 20px; }
.chan-factory-workspace > .chan-card { margin: 0 !important; }
.chan-factory-workspace #factory-summary .row > div { width: 100%; }
.chan-factory-workspace #factory-summary .row { --bs-gutter-y: 16px; }
.chan-recent-table { min-width: 600px !important; }
.chan-recent-table .chan-sub { white-space: normal; }
.chan-model-list { padding: 24px; display: grid; gap: 20px; }
.chan-model-item { padding: 24px; border: 1px solid var(--chan-border); border-radius: 10px; }
.chan-model-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.chan-model-heading h3 { font-size: 1.125rem; font-weight: 600; margin: 0 0 5px; }
.chan-model-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 24px 0; }
.chan-model-facts dt { font-size: .8125rem; color: var(--chan-text-dim); font-weight: 400; }
.chan-model-facts dd { font-size: 1rem; margin: 6px 0 0; }
.chan-model-capabilities { display: grid; gap: 10px; }
.chan-model-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; border-top: 1px solid var(--chan-border); margin-top: 24px; padding-top: 20px; }
.chan-settings-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; align-items: start; }
.chan-settings-nav { display: grid; gap: 8px; position: sticky; top: 96px; }
.chan-settings-nav a { display: flex; align-items: center; gap: 10px; padding: 12px; font-size: .9375rem; color: #526971; border-radius: 8px; }
.chan-settings-nav a:hover, .chan-settings-nav a:focus-visible { background: #eaf1ee; color: var(--chan-accent); }
.chan-settings-content { min-width: 0; }
.chan-settings-content > .chan-card { scroll-margin-top: 96px; }
.chan-settings-content .chan-card-body > .d-flex { gap: 12px; flex-wrap: wrap; align-items: flex-start !important; }
.chan-manifest { margin-bottom: 20px !important; }
.chan-manifest summary { cursor: pointer; list-style: none; }
.chan-manifest summary::-webkit-details-marker { display: none; }
.chan-manifest summary::after { content: "展开详情 ＋"; margin-left: auto; font-size: .8125rem; color: var(--chan-text-dim); }
.chan-manifest[open] summary::after { content: "收起详情 －"; }
.chan-manifest:not([open]) summary { border-bottom: 0; }
.chan-batch-fields { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; gap: 20px; }
.chan-batch-fields > div { min-width: 0; }
.chan-batch-fields label { display: block; margin-bottom: 8px; font-size: .9375rem; font-weight: 500; }
.chan-batch-fields .form-control, .chan-batch-fields .form-select { width: 100%; }
.chan-batch-fields--outbound { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
/* Login */
.chan-auth-body { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; min-height: 100dvh; background: #f1f5f2; }
.chan-auth-main { width: 100%; max-width: 1000px; }
.chan-login { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 590px; overflow: hidden; border: 1px solid #e1e9e2; border-radius: 24px; background: #fff; box-shadow: 0 24px 80px #123f3a0b; }
.chan-login-story { display: flex; flex-direction: column; position: relative; overflow: hidden; padding: 40px; color: #d7e7dc; background: #164a40; }
.chan-login-story .chan-brand { padding: 0; }
.chan-login-story h1 { font-size: 2.625rem; font-weight: 500; line-height: 1.65; margin: 66px 0 14px; color: #e9f1e7; letter-spacing: 3px; z-index: 1; }
.chan-login-story > p { margin: 0; color: #a2c0ae; font-size: 0.9375rem; line-height: 2; z-index: 1; }
.chan-login-art { position: absolute; width: 390px; height: 255px; right: -10px; bottom: -12px; color: #8abf96; opacity: .85; }
.chan-login-story-foot { position: relative; margin-top: auto; padding-top: 150px; font-size: 0.75rem; color: #88ac97; letter-spacing: 2px; }
.chan-login-form { display: flex; flex-direction: column; justify-content: center; padding: 56px 52px; }
.chan-login-title { margin: 0 0 8px; font-size: 2rem; line-height: 1.4; font-weight: 600; color: #26463c; }
.chan-login-desc { margin: 0 0 32px; font-size: 0.9375rem; color: #85958e; }
.chan-login-form .form-control { min-height: 46px; background: #fcfdfc; }
.chan-login-form .btn[type="submit"] { min-height: 46px; margin-top: 8px; }
.chan-auth-label { display: block; margin-bottom: 8px; color: #4d665b; font-size: 0.9375rem; }
.chan-password-field { position: relative; }
.chan-password-field .form-control { padding-right: 48px; }
.chan-password-toggle { position: absolute; top: 5px; right: 5px; color: #8ca096; }
.chan-password-toggle[aria-pressed="true"] { color: var(--chan-accent); background: var(--chan-accent-dim); }
.chan-auth-alert { font-size: 0.9375rem; }
.chan-auth-note { margin: 24px 0 0; text-align: center; color: #8fa096; font-size: 0.75rem; line-height: 1.8; }
.chan-auth-foot { margin-top: 30px; color: #8e9e93; font-size: 0.75rem; letter-spacing: .5px; }
.chan-auth-main > .chan-card { max-width: 460px; margin: auto; }
/* Responsive: drawer on smaller screens; tables scroll inside their panels. */
@media (min-width: 1600px) { .chan-main { padding-top: 38px; } .chan-welcome { min-height: 196px; } }
@media (max-width: 1199px) {
    .chan-sidebar { width: 220px; padding-inline: 12px; }
    .chan-sidebar .chan-brand-badge { display: none; }
    .chan-sidebar .chan-brand-sub { font-size: .625rem; letter-spacing: 0; white-space: nowrap; }
    .chan-main { padding: 28px 24px; } .chan-topbar, .chan-footer { padding-inline: 24px; }
    .chan-dashboard-stats .chan-stat { padding: 18px; }
    .chan-online-content { gap: 20px; padding: 20px; } .chan-ring { width: 118px; height: 118px; }
    .chan-quick-grid { gap: 8px; padding: 16px; } .chan-quick-link { gap: 8px; padding: 13px 10px; }
    .chan-dashboard-workspace { grid-template-columns: 1fr; }
    .chan-dashboard-aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .chan-dashboard-shortcuts { display: block; }
    .chan-dashboard-shortcuts .chan-card-head { padding: 18px 20px 0; }
    .chan-dashboard-shortcuts .chan-quick-grid { padding: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chan-metrics > .chan-stat { padding: 18px; }
    .chan-product-layout { grid-template-columns: 230px minmax(0, 1fr); }
    .chan-analysis-grid { grid-template-columns: 1fr; }
    .chan-model-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chan-settings-layout { grid-template-columns: 150px minmax(0, 1fr); gap: 20px; }
    .chan-settings-content .row > .col-md-6 { width: 100%; }
    .chan-batch-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .chan-shell { flex-direction: column; } .chan-sidebar { position: static; width: 100%; height: auto; padding: 18px; }
    .chan-side-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
    .chan-side-group { width: 100%; margin: 10px 10px 0; } .chan-side-link { margin: 0; }
    .has-js .chan-shell { flex-direction: row; }
    .has-js .chan-sidebar { position: fixed; inset: 0 auto 0 0; width: 270px; height: 100dvh; padding: 24px 16px 18px; transform: translateX(-100%); transition: transform .2s; visibility: hidden; }
    .has-js .chan-side-nav { display: block; margin: 28px 0 14px; }
    .has-js .chan-side-group { width: auto; margin: 22px 14px 9px; } .has-js .chan-side-group:first-child { margin-top: 0; }
    .has-js .chan-side-link { margin: 3px 0; }
    .has-js .chan-menu-toggle, .has-js .chan-menu-close { display: inline-flex; }
    .chan-menu-close { color: #c0d4c9; }
    .has-js body.chan-menu-open { overflow: hidden; }
    .has-js .chan-menu-open .chan-sidebar { transform: translateX(0); visibility: visible; }
    .chan-topbar { min-height: 68px; } .chan-breadcrumb { gap: 12px; }
    .chan-dashboard-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
    .chan-login-form { padding: 40px 32px; }
}
@media (max-width: 767px) {
    .chan-main { padding: 24px 18px; } .chan-topbar { padding: 12px 18px; gap: 12px; }
    .chan-breadcrumb-root, .chan-breadcrumb-sep, .chan-topbar-divider, .chan-global-search kbd { display: none; }
    .chan-topbar-tools { gap: 12px; } .chan-global-search { width: 180px; }
    .chan-topbar-avatar { width: 30px; height: 30px; font-size: 0.875rem; }
    .chan-page-title { font-size: 1.8125rem; } .chan-page-heading { align-items: flex-start; }
    .chan-date { font-size: 0.75rem; padding: 6px 9px; }
    .chan-welcome { padding: 24px; min-height: 180px; } .chan-welcome-copy { max-width: 76%; }
    .chan-welcome h2 { font-size: 1.5rem; } .chan-aquarium { right: -60px; width: 240px; opacity: .55; }
    .chan-dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .chan-stats { gap: 12px; }
    .chan-stat { padding: 18px; } .chan-dashboard-grid { grid-template-columns: 1fr; gap: 16px; }
    .chan-online-content { justify-content: center; gap: 40px; } .chan-ring { width: 140px; height: 140px; }
    .chan-quick-grid { padding: 20px; gap: 12px; } .chan-quick-link { padding: 14px; }
    .chan-card-head { padding: 16px 18px; } .chan-card-body { padding: 20px 18px; }
    .chan-filter { gap: 14px; } .chan-filter > div { flex: 1 1 calc(50% - 14px); }
    .chan-filter > div:first-child, .chan-filter > div:last-child:has(.btn) { flex-basis: 100%; }
    .chan-filter .form-control, .chan-filter .form-select { width: 100% !important; }
    .chan-query { padding: 18px; }
    .chan-query-head > .chan-sub { display: none; }
    .chan-query .chan-filter > div { flex: none; }
    .chan-query .chan-filter-actions .btn { flex: 1; }
    .chan-list > .chan-pager { padding: 16px 18px; }
    .chan-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chan-metrics > .chan-stat { padding: 18px; }
    .chan-metrics > .chan-stat:nth-child(n+3) { border-top: 1px solid var(--chan-border); }
    .chan-metrics .chan-stat > .text-secondary { display: none; }
    .chan-metrics > .chan-stat:nth-child(odd) { border-left: 0; }
    .chan-metrics--three > .chan-stat:last-child, .chan-metrics--five > .chan-stat:last-child { grid-column: 1 / -1; }
    .chan-metric-context { padding: 12px 18px; gap: 6px 16px; }
    .chan-metric-context > :last-child { margin-left: 0; }
    .chan-analysis-grid, .chan-product-layout, .chan-factory-workspace, .chan-settings-layout { grid-template-columns: 1fr; }
    .chan-dashboard-aside { grid-template-columns: 1fr; }
    .chan-dashboard-aside .chan-online-content { flex-direction: row; }
    .chan-dashboard-aside .chan-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chan-dashboard-stats .chan-stat-caption { font-size: .8125rem; }
    .chan-model-list, .chan-model-item { padding: 18px; }
    .chan-settings-nav { position: static; display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--chan-border); }
    .chan-settings-nav a { padding: 10px; }
    .chan-batch-fields { grid-template-columns: 1fr; }
    .chan-page-heading { flex-wrap: wrap; gap: 16px; }
    .chan-page-heading > .d-flex { flex-wrap: wrap; }
    .chan-table-wrapper > .chan-table, .table-responsive > .chan-table { min-width: 650px; } .chan-table tbody td { padding: 14px 16px; }
    .chan-table-wrapper > .chan-pending-table { min-width: 820px; }
    .chan-grid { min-width: 640px; } .chan-grid tbody td { padding: 6px; }
    .chan-grid-foot { padding: 16px; } .chan-footer { padding: 4px 18px 20px; }
    .chan-footer > span:last-child { display: none; }
    .chan-auth-body { padding: 24px 16px; }
    .chan-login { grid-template-columns: 1fr; max-width: 460px; margin: auto; border-radius: 20px; min-height: auto; }
    .chan-login-story { padding: 28px; min-height: 180px; }
    .chan-login-story h1 { margin: 24px 0 0; font-size: 1.8125rem; letter-spacing: 1px; }
    .chan-login-story h1 br, .chan-login-story > p, .chan-login-story-foot { display: none; }
    .chan-login-art { width: 200px; height: 160px; right: -10px; opacity: .3; }
    .chan-login-form { padding: 32px 28px; } .chan-login-desc { margin-bottom: 26px; }
}
@media (max-width: 420px) {
    .chan-topbar { padding-inline: 12px; } .chan-global-search { width: 146px; padding-inline: 9px; gap: 6px; }
    .chan-topbar-tools { gap: 8px; } .chan-breadcrumb { gap: 6px; } .chan-main { padding-inline: 14px; }
    .chan-stat-caption { font-size: 0.75rem; } .chan-dashboard-stats .chan-stat { padding: 16px; }
    .chan-page-heading { flex-wrap: wrap; } .chan-online-content { gap: 22px; } .chan-ring { width: 116px; height: 116px; }
    .chan-welcome-copy { max-width: 90%; } .chan-quick-grid { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }