:root {
      --bg: #f4f6f8;
      --panel: #ffffff;
      --panel-soft: #f9fafb;
      --ink: #172033;
      --muted: #687384;
      --line: #dbe2ea;
      --blue: #2563eb;
      --blue-dark: #1d4ed8;
      --green: #137a3a;
      --amber: #a16207;
      --red: #b42318;
      --sidebar: #182033;
      --sidebar-muted: #aab4c3;
      --shadow: 0 16px 40px rgba(17, 24, 39, 0.08);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
      font-size: 14px;
      letter-spacing: 0;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
      letter-spacing: 0;
    }

    .app {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 248px minmax(0, 1fr);
    }

    .sidebar {
      background: var(--sidebar);
      color: #fff;
      padding: 22px 18px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      border-right: 1px solid #111827;
    }

    .brand h1 {
      margin: 0;
      font-size: 22px;
      line-height: 1.2;
      font-weight: 700;
    }

    .brand p {
      margin: 8px 0 0;
      color: var(--sidebar-muted);
      font-size: 13px;
      overflow-wrap: anywhere;
    }

    .nav {
      display: grid;
      gap: 8px;
    }

    .nav button {
      min-height: 40px;
      border: 1px solid transparent;
      border-radius: 8px;
      background: transparent;
      color: var(--sidebar-muted);
      text-align: left;
      padding: 0 12px;
      cursor: pointer;
    }

    .nav button:hover,
    .nav button.active {
      color: #fff;
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.16);
    }

    .main {
      min-width: 0;
      padding: 22px;
    }

    .topbar {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 18px;
    }

    .topbar h2 {
      margin: 0;
      font-size: 24px;
      line-height: 1.2;
    }

    .topbar p {
      margin: 7px 0 0;
      color: var(--muted);
      overflow-wrap: anywhere;
    }

    .notice {
      min-width: 220px;
      min-height: 38px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--muted);
      padding: 9px 12px;
      box-shadow: var(--shadow);
    }

    .notice.good {
      border-color: rgba(19, 122, 58, 0.25);
      color: var(--green);
    }

    .notice.bad {
      border-color: rgba(180, 35, 24, 0.25);
      color: var(--red);
    }

    .view {
      display: none;
    }

    .view.active {
      display: block;
    }

    .grid {
      display: grid;
      gap: 14px;
    }

    .grid.two {
      grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
    }

    .grid.three {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow);
      min-width: 0;
    }

    .panel-header {
      min-height: 52px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
    }

    .panel-header h3 {
      margin: 0;
      font-size: 16px;
      line-height: 1.2;
    }

    .panel-body {
      padding: 16px;
      min-width: 0;
    }

    .metric {
      display: grid;
      gap: 8px;
      min-height: 94px;
      align-content: start;
    }

    .metric-label {
      color: var(--muted);
      font-size: 13px;
    }

    .metric-value {
      font-size: 22px;
      font-weight: 700;
      line-height: 1.15;
      overflow-wrap: anywhere;
    }

    .metric-sub {
      color: var(--muted);
      font-size: 13px;
      overflow-wrap: anywhere;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 28px;
      padding: 0 10px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: var(--panel-soft);
      color: var(--muted);
      white-space: nowrap;
      font-size: 13px;
      font-weight: 600;
    }

    .pill.good {
      color: var(--green);
      background: #ecfdf3;
      border-color: #bbf7d0;
    }

    .pill.warn {
      color: var(--amber);
      background: #fffbeb;
      border-color: #fde68a;
    }

    .pill.bad {
      color: var(--red);
      background: #fff1f0;
      border-color: #fecaca;
    }

    .actions {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .btn {
      min-height: 38px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: var(--ink);
      padding: 0 12px;
      cursor: pointer;
      font-weight: 600;
      overflow-wrap: anywhere;
    }

    .btn:hover {
      border-color: #b8c2cf;
      background: #f8fafc;
    }

    .btn.primary {
      background: var(--blue);
      border-color: var(--blue);
      color: #fff;
    }

    .btn.primary:hover {
      background: var(--blue-dark);
      border-color: var(--blue-dark);
    }

    .btn.danger {
      color: var(--red);
      border-color: #fecaca;
      background: #fff7f7;
    }

    .btn:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }

    .field-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .field {
      display: grid;
      gap: 6px;
      min-width: 0;
    }

    .field.full {
      grid-column: 1 / -1;
    }

    label {
      color: var(--muted);
      font-size: 13px;
      font-weight: 600;
    }

    input,
    select,
    textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: var(--ink);
      padding: 9px 10px;
      min-height: 38px;
      outline: none;
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    textarea {
      min-height: 420px;
      resize: vertical;
      line-height: 1.55;
      font-family: Consolas, "Cascadia Mono", "Microsoft YaHei", monospace;
    }

    .check-row {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      color: var(--ink);
    }

    .check-row input {
      width: 18px;
      height: 18px;
      min-height: 18px;
    }

    .segmented {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .segmented .btn {
      min-height: 34px;
    }

    .alerts {
      display: grid;
      gap: 8px;
    }

    .prompt-box {
      border: 1px solid #fde68a;
      background: #fffdf3;
      border-radius: 8px;
      overflow: hidden;
    }

    .prompt-head {
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      border-bottom: 1px solid #fde68a;
    }

    .prompt-head h3 {
      margin: 0;
      font-size: 15px;
    }

    .prompt-body {
      padding: 14px;
    }

    .alert {
      border: 1px solid #fde68a;
      background: #fffbeb;
      color: #7c4a03;
      border-radius: 8px;
      padding: 10px 12px;
      overflow-wrap: anywhere;
    }

    .log-box {
      height: 460px;
      overflow: auto;
      background: #101827;
      color: #d8dee9;
      border-radius: 8px;
      padding: 12px;
      font-family: Consolas, "Cascadia Mono", monospace;
      font-size: 13px;
      line-height: 1.45;
    }

    .log-line {
      display: grid;
      grid-template-columns: 76px 86px minmax(0, 1fr);
      gap: 8px;
      min-height: 20px;
    }

    .log-time {
      color: #9ca3af;
    }

    .log-source {
      color: #93c5fd;
      overflow-wrap: anywhere;
    }

    .log-text {
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
    }

    th,
    td {
      border-bottom: 1px solid var(--line);
      padding: 10px 8px;
      text-align: left;
      vertical-align: top;
      overflow-wrap: anywhere;
    }

    th {
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      background: var(--panel-soft);
    }

    .table-actions {
      width: 110px;
    }

    .quality-table {
      table-layout: auto;
    }

    .quality-action-cell {
      min-width: 420px;
    }

    .quality-suggestion {
      min-width: 170px;
      color: var(--text);
    }

    .quality-suggestion strong,
    .quality-suggestion small {
      display: block;
      line-height: 1.35;
    }

    .quality-suggestion small {
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
    }

    .quality-alias {
      display: grid;
      grid-template-columns: minmax(116px, 0.8fr) minmax(140px, 1fr) auto;
      gap: 8px;
      align-items: center;
    }

    .quality-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px;
    }

    .empty-cell {
      text-align: center;
      color: var(--muted);
      padding: 22px 8px;
    }

    .hidden {
      display: none !important;
    }

    @media (max-width: 1000px) {
      .app {
        grid-template-columns: 1fr;
      }

      .sidebar {
        min-height: auto;
      }

      .grid.two,
      .grid.three,
      .health-grid {
        grid-template-columns: 1fr;
      }

      .actions,
      .field-grid {
        grid-template-columns: 1fr;
      }

      .topbar {
        flex-direction: column;
      }

      .notice {
        width: 100%;
      }
    }

    :root {
      --bg: #f6f8fb;
      --panel: #ffffff;
      --panel-soft: #f3f6fa;
      --ink: #182033;
      --muted: #667085;
      --line: #dce4ee;
      --line-soft: #edf1f6;
      --blue: #2563eb;
      --blue-dark: #1d4ed8;
      --blue-soft: #e8f1ff;
      --green: #14804a;
      --green-soft: #edfdf4;
      --amber: #a15c07;
      --amber-soft: #fff7e6;
      --red: #c24135;
      --red-soft: #fff1f1;
      --cyan: #0f766e;
      --cyan-soft: #e7f8f5;
      --violet: #6941c6;
      --violet-soft: #f4efff;
      --sidebar: #ffffff;
      --sidebar-muted: #6b7280;
      --shadow: 0 18px 42px rgba(28, 39, 64, 0.09);
      --shadow-soft: 0 10px 24px rgba(28, 39, 64, 0.06);
    }

    body {
      background: var(--bg);
      color: var(--ink);
      font-family: "Inter", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
    }

    .app {
      grid-template-columns: 260px minmax(0, 1fr);
    }

    .sidebar {
      position: sticky;
      top: 0;
      height: 100vh;
      background: var(--sidebar);
      color: var(--ink);
      padding: 24px 18px;
      border-right: 1px solid var(--line);
      box-shadow: 8px 0 30px rgba(28, 39, 64, 0.04);
    }

    .brand-row {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .brand-mark,
    .metric-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background: var(--blue-soft);
      color: var(--blue);
      border: 1px solid rgba(37, 99, 235, 0.14);
      flex: 0 0 auto;
    }

    .brand h1 {
      color: var(--ink);
      font-size: 18px;
      font-weight: 800;
    }

    .brand p {
      margin-top: 4px;
      color: var(--sidebar-muted);
    }

    .nav {
      gap: 6px;
      margin-top: 4px;
    }

    .nav button {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 42px;
      border-radius: 8px;
      color: #475467;
      font-weight: 700;
      padding: 0 12px;
    }

    .nav button:hover,
    .nav button.active {
      color: var(--blue);
      background: var(--blue-soft);
      border-color: rgba(37, 99, 235, 0.16);
    }

    .main {
      padding: 26px;
      max-width: 1480px;
      width: 100%;
      margin: 0 auto;
    }

    .topbar {
      align-items: center;
      margin-bottom: 20px;
    }

    .topbar h2 {
      font-size: 26px;
      font-weight: 800;
    }

    .topbar p {
      color: #667085;
    }

    .notice {
      min-width: 240px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.88);
      color: #475467;
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(12px);
    }

    .notice.good {
      background: var(--green-soft);
      border-color: rgba(20, 128, 74, 0.18);
    }

    .notice.bad {
      background: var(--red-soft);
      border-color: rgba(194, 65, 53, 0.18);
    }

    .grid {
      gap: 16px;
    }

    .grid.two {
      grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    }

    .panel {
      border-color: var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow-soft);
      overflow: hidden;
    }

    .panel-header {
      min-height: 56px;
      padding: 14px 18px;
      background: #fbfcfe;
      border-bottom-color: var(--line-soft);
    }

    .panel-header h3 {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--ink);
      font-size: 15px;
      font-weight: 800;
    }

    .panel-body {
      padding: 18px;
    }

    .metric-card .panel-body {
      min-height: 120px;
    }

    .metric {
      grid-template-columns: 44px minmax(0, 1fr);
      grid-template-areas:
        "icon label"
        "icon value"
        "icon sub";
      column-gap: 12px;
      row-gap: 5px;
      align-items: center;
      align-content: center;
    }

    .metric-icon {
      grid-area: icon;
      width: 42px;
      height: 42px;
    }

    .metric-icon.green {
      background: var(--green-soft);
      color: var(--green);
      border-color: rgba(20, 128, 74, 0.14);
    }

    .metric-icon.cyan {
      background: var(--cyan-soft);
      color: var(--cyan);
      border-color: rgba(15, 118, 110, 0.14);
    }

    .metric-icon.amber {
      background: var(--amber-soft);
      color: var(--amber);
      border-color: rgba(161, 92, 7, 0.18);
    }

    .metric-icon.red {
      background: var(--red-soft);
      color: var(--red);
      border-color: rgba(194, 65, 53, 0.18);
    }

    .metric-icon.violet {
      background: var(--violet-soft);
      color: var(--violet);
      border-color: rgba(105, 65, 198, 0.16);
    }

    .metric-label {
      grid-area: label;
      font-weight: 700;
      color: #667085;
    }

    .metric-value {
      grid-area: value;
      font-size: 23px;
      font-weight: 800;
    }

    .metric-sub {
      grid-area: sub;
      color: #667085;
    }

    .health-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .health-item {
      display: grid;
      gap: 6px;
      min-width: 0;
      min-height: 106px;
      padding: 14px;
      border: 1px solid var(--line-soft);
      border-radius: 8px;
      background: #fbfcfe;
    }

    .health-label {
      color: #667085;
      font-size: 12px;
      font-weight: 800;
    }

    .health-value {
      color: var(--ink);
      font-size: 18px;
      line-height: 1.2;
      font-weight: 800;
      overflow-wrap: anywhere;
    }

    .health-value.good {
      color: var(--green);
    }

    .health-value.warn {
      color: var(--amber);
    }

    .health-value.bad {
      color: var(--red);
    }

    .health-item small {
      color: #667085;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .pill {
      min-height: 27px;
      border-color: var(--line);
      background: var(--panel-soft);
      color: #667085;
      font-size: 12px;
      font-weight: 800;
    }

    .pill.good {
      color: var(--green);
      background: var(--green-soft);
      border-color: rgba(20, 128, 74, 0.2);
    }

    .pill.warn {
      color: var(--amber);
      background: var(--amber-soft);
      border-color: rgba(161, 92, 7, 0.22);
    }

    .pill.bad {
      color: var(--red);
      background: var(--red-soft);
      border-color: rgba(194, 65, 53, 0.2);
    }

    .actions {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 40px;
      border-color: var(--line);
      border-radius: 8px;
      background: #ffffff;
      color: #253044;
      box-shadow: 0 1px 0 rgba(28, 39, 64, 0.04);
      transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
    }

    .btn:hover {
      border-color: #c8d3e0;
      background: #f8fafc;
      box-shadow: 0 6px 14px rgba(28, 39, 64, 0.08);
      transform: translateY(-1px);
    }

    .btn.primary {
      background: var(--blue);
      border-color: var(--blue);
      color: #ffffff;
      box-shadow: 0 10px 18px rgba(37, 99, 235, 0.2);
    }

    .btn.primary:hover {
      background: var(--blue-dark);
      border-color: var(--blue-dark);
    }

    .btn.danger {
      color: var(--red);
      border-color: rgba(194, 65, 53, 0.2);
      background: var(--red-soft);
    }

    .btn:disabled {
      transform: none;
      box-shadow: none;
    }

    label {
      color: #667085;
      font-weight: 700;
    }

    input,
    select,
    textarea {
      border-color: var(--line);
      border-radius: 8px;
      background: #ffffff;
      padding: 10px 11px;
    }

    input[type="checkbox"] {
      accent-color: var(--blue);
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    }

    textarea {
      min-height: 440px;
      background: #fbfcfe;
    }

    .segmented {
      gap: 7px;
      align-items: center;
    }

    .segmented .btn {
      min-height: 36px;
      padding: 0 11px;
    }

    .check-row {
      padding: 9px 10px;
      border: 1px solid var(--line-soft);
      border-radius: 8px;
      background: #fbfcfe;
    }

    .prompt-box {
      border-color: rgba(161, 92, 7, 0.2);
      background: var(--amber-soft);
    }

    .prompt-head {
      border-bottom-color: rgba(161, 92, 7, 0.16);
    }

    .alert {
      border-color: rgba(161, 92, 7, 0.2);
      background: var(--amber-soft);
    }

    .log-box {
      height: 480px;
      background: #0f172a;
      border: 1px solid rgba(148, 163, 184, 0.18);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    .log-line {
      grid-template-columns: 76px 92px minmax(0, 1fr);
      padding: 2px 0;
    }

    .log-source {
      color: #7dd3fc;
    }

    table {
      border: 1px solid var(--line-soft);
      border-radius: 8px;
      overflow: hidden;
    }

    th {
      background: #f6f8fb;
      color: #667085;
    }

    tr:hover td {
      background: #fbfcfe;
    }

    .ops-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .ops-kpi-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 16px;
    }

    .ops-main-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ops-live-grid {
      grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
    }

    .ops-status-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ops-list {
      display: grid;
      gap: 8px;
      min-height: 42px;
    }

    .ops-realtime-list {
      max-height: 328px;
      overflow: auto;
      padding-right: 2px;
      gap: 7px;
    }

    .ops-list-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      min-height: 42px;
      padding: 9px 10px;
      border: 1px solid var(--line-soft);
      border-radius: 8px;
      background: #fbfcfe;
    }

    .ops-realtime-list .ops-list-row {
      display: flex;
      justify-content: flex-start;
      min-height: 38px;
      padding: 7px 8px;
      gap: 10px;
    }

    .ops-list-row strong {
      min-width: 0;
      overflow-wrap: anywhere;
      font-size: 14px;
      line-height: 1.35;
    }

    .ops-list-row span {
      color: #667085;
      font-size: 12px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .ops-list-main {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .ops-realtime-list .ops-list-main {
      flex: 0 1 auto;
      max-width: min(480px, calc(100% - 86px));
    }

    .ops-list-count {
      color: var(--ink);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 28px;
      padding: 0 9px;
      border: 1px solid var(--line-soft);
      border-radius: 999px;
      background: #ffffff;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }

    .ops-status-button {
      appearance: none;
      min-width: 56px;
      min-height: 30px;
      padding: 0 13px;
      border-color: var(--line);
      border-radius: 999px;
      background: #ffffff;
      box-shadow: 0 5px 14px rgba(24, 32, 51, 0.08);
      color: var(--ink);
      cursor: default;
      font-size: 13px;
      line-height: 1;
      opacity: 1;
    }

    .ops-status-button.good {
      border-color: rgba(20, 128, 74, 0.28);
      background: var(--green);
      color: #ffffff;
    }

    .ops-status-button.warn {
      border-color: rgba(161, 92, 7, 0.28);
      background: var(--amber-soft);
      color: var(--amber);
    }

    .ops-status-button.bad {
      border-color: rgba(194, 65, 53, 0.28);
      background: var(--red);
      color: #ffffff;
    }

    .ops-list-row.good {
      border-color: rgba(20, 128, 74, 0.18);
      background: var(--green-soft);
    }

    .ops-list-row.warn {
      border-color: rgba(161, 92, 7, 0.2);
      background: var(--amber-soft);
    }

    .ops-list-row.bad {
      border-color: rgba(194, 65, 53, 0.18);
      background: var(--red-soft);
    }

    .ops-empty {
      min-height: 42px;
      display: flex;
      align-items: center;
      color: #667085;
      padding: 9px 10px;
      border: 1px dashed var(--line);
      border-radius: 8px;
      background: #fbfcfe;
    }

    .ops-status {
      display: grid;
      gap: 8px;
      min-height: 106px;
      align-content: start;
    }

    .ops-status strong {
      font-size: 20px;
      line-height: 1.2;
      overflow-wrap: anywhere;
    }

    .ops-status span {
      color: #667085;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .lucide {
      width: 16px;
      height: 16px;
      stroke-width: 2;
      flex: 0 0 auto;
    }

    .brand-mark .lucide,
    .metric-icon .lucide {
      width: 20px;
      height: 20px;
    }

    @media (max-width: 1000px) {
      .app {
        grid-template-columns: 1fr;
      }

      .sidebar {
        position: static;
        height: auto;
      }

      .nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .main {
        padding: 18px;
      }

      .actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .health-grid,
      .ops-kpi-grid,
      .ops-main-grid,
      .ops-live-grid,
      .ops-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 640px) {
      .nav,
      .actions,
      .field-grid,
      .health-grid,
      .ops-kpi-grid,
      .ops-main-grid,
      .ops-live-grid,
      .ops-status-grid {
        grid-template-columns: 1fr;
      }

      .topbar h2 {
        font-size: 23px;
      }

      .metric {
        grid-template-columns: 1fr;
        grid-template-areas:
          "icon"
          "label"
          "value"
          "sub";
      }
    }

    .quality-table {
      table-layout: auto;
    }

    .quality-action-cell {
      min-width: 420px;
    }

    .quality-suggestion {
      min-width: 170px;
      color: var(--text);
    }

    .quality-suggestion strong,
    .quality-suggestion small {
      display: block;
      line-height: 1.35;
    }

    .quality-suggestion small {
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
    }

    .quality-alias {
      display: grid;
      grid-template-columns: minmax(116px, 0.8fr) minmax(140px, 1fr) auto;
      gap: 8px;
      align-items: center;
    }

    .quality-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px;
    }

    .empty-cell {
      text-align: center;
      color: var(--muted);
      padding: 22px 8px;
    }

    @media (max-width: 760px) {
      .quality-action-cell {
        min-width: 280px;
      }

      .quality-alias {
        grid-template-columns: 1fr;
      }
    }

    .short-editor {
      min-height: 132px;
    }

    body.modal-open {
      overflow: hidden;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      padding: 10px 0 12px;
      background: rgba(246, 248, 251, 0.92);
      backdrop-filter: blur(14px);
    }

    .topbar-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
    }

    .proxy-status-button {
      min-height: 42px;
      border: 1px solid #bbf7d0;
      border-radius: 8px;
      background: #ecfdf3;
      color: #067647;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 0 14px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: var(--shadow-soft);
      white-space: nowrap;
    }

    .proxy-status-button:hover {
      border-color: #86efac;
      background: #dcfce7;
    }

    .proxy-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #94a3b8;
      box-shadow: 0 0 0 7px rgba(148, 163, 184, 0.16);
      flex: 0 0 auto;
    }

    .proxy-dot.good {
      background: #10b981;
      box-shadow: 0 0 0 7px rgba(16, 185, 129, 0.16);
    }

    .proxy-dot.warn {
      background: #f59e0b;
      box-shadow: 0 0 0 7px rgba(245, 158, 11, 0.16);
    }

    .proxy-dot.bad {
      background: #ef4444;
      box-shadow: 0 0 0 7px rgba(239, 68, 68, 0.16);
    }

    .settings-option-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .settings-option {
      min-height: 116px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: var(--ink);
      padding: 18px;
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr) auto;
      align-items: center;
      gap: 14px;
      text-align: left;
      cursor: pointer;
      box-shadow: var(--shadow-soft);
    }

    .settings-option:hover {
      border-color: #c8d3e0;
      background: #fbfcfe;
      transform: translateY(-1px);
      box-shadow: var(--shadow);
    }

    .settings-option-icon {
      width: 46px;
      height: 46px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--blue-soft);
      color: var(--blue);
      border: 1px solid rgba(37, 99, 235, 0.14);
    }

    .settings-option-icon.green {
      background: var(--green-soft);
      color: var(--green);
      border-color: rgba(20, 128, 74, 0.14);
    }

    .settings-option-icon.amber {
      background: var(--amber-soft);
      color: var(--amber);
      border-color: rgba(161, 92, 7, 0.18);
    }

    .settings-option-icon.red {
      background: var(--red-soft);
      color: var(--red);
      border-color: rgba(194, 65, 53, 0.16);
    }

    .settings-option-icon.violet {
      background: var(--violet-soft);
      color: var(--violet);
      border-color: rgba(105, 65, 198, 0.16);
    }

    .settings-option-icon.cyan {
      background: var(--cyan-soft);
      color: var(--cyan);
      border-color: rgba(15, 118, 110, 0.14);
    }

    .settings-option-main {
      display: grid;
      gap: 5px;
      min-width: 0;
    }

    .settings-option-main strong {
      font-size: 16px;
      line-height: 1.25;
    }

    .settings-option-main small {
      color: #667085;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .modal-layer {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: grid;
      place-items: center;
      padding: 24px;
    }

    .modal-layer.hidden {
      display: none;
    }

    .modal-scrim {
      position: absolute;
      inset: 0;
      background: rgba(15, 23, 42, 0.42);
      backdrop-filter: blur(6px);
    }

    .modal-card {
      position: relative;
      z-index: 1;
      width: min(760px, 100%);
      max-height: min(86vh, 900px);
      overflow: hidden;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: 0 28px 70px rgba(15, 23, 42, 0.24);
      transform: translate(var(--searchbot-modal-shift-x, 0), var(--searchbot-modal-shift-y, 0));
    }

    .modal-card-wide {
      width: min(1040px, 100%);
    }

    .modal-card.hidden {
      display: none;
    }

    .modal-header {
      min-height: 72px;
      padding: 18px 20px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      border-bottom: 1px solid var(--line-soft);
      background: #fbfcfe;
    }

    .modal-header h3 {
      margin: 0;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 17px;
      line-height: 1.25;
    }

    .modal-header p {
      margin: 6px 0 0;
      color: #667085;
      line-height: 1.45;
    }

    .modal-body {
      padding: 18px 20px;
      overflow: auto;
      min-width: 0;
    }

    .modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
    }

    .review-alias-body {
      display: grid;
      gap: 12px;
    }

    .review-alias-search {
      position: sticky;
      top: -18px;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(220px, 1fr) auto auto auto;
      gap: 8px;
      align-items: center;
      background: #ffffff;
      padding-bottom: 2px;
    }

    .review-alias-search-field {
      position: relative;
      display: block;
      min-width: 0;
    }

    .review-alias-search-field input {
      width: 100%;
      height: 40px;
      padding-left: 38px;
    }

    .review-alias-search-field .lucide {
      position: absolute;
      left: 13px;
      top: 20px;
      width: 16px;
      height: 16px;
      color: #64748b;
      transform: translateY(-50%);
      pointer-events: none;
    }

    .review-alias-list {
      display: grid;
      gap: 8px;
    }

    .review-alias-list.is-hidden {
      display: none;
    }

    .review-alias-row {
      display: grid;
      grid-template-columns: minmax(132px, 0.45fr) minmax(220px, 1fr) auto;
      gap: 8px;
      align-items: center;
      padding: 10px;
      border: 1px solid var(--line-soft);
      border-radius: 8px;
      background: #fbfcfe;
    }

    .review-alias-row[hidden] {
      display: none !important;
    }

    .review-alias-tag {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .review-alias-tag strong,
    .review-alias-tag small {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .review-alias-tag strong {
      color: #10213f;
      font-weight: 900;
    }

    .review-alias-tag small {
      color: #667085;
      font-size: 12px;
    }

    .review-alias-row input {
      min-width: 0;
    }

    .review-alias-row button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 36px;
      font-weight: 800;
    }

    .review-alias-empty,
    .alias-save-message {
      margin: 0;
    }

    .icon-btn {
      width: 38px;
      height: 38px;
      min-height: 38px;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: #475467;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex: 0 0 auto;
    }

    .icon-btn:hover {
      background: #f8fafc;
      border-color: #c8d3e0;
    }

    .proxy-current-card {
      min-height: 68px;
      padding: 14px 16px;
      border: 1px solid #bbf7d0;
      border-radius: 8px;
      background: #ecfdf3;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      column-gap: 12px;
      row-gap: 3px;
      align-items: center;
    }

    .proxy-current-card strong,
    .proxy-current-card small {
      overflow-wrap: anywhere;
    }

    .proxy-current-card small {
      color: #667085;
      grid-column: 2;
    }

    .proxy-import-box {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: end;
    }

    .proxy-profile-list {
      display: grid;
      gap: 8px;
    }

    .proxy-profile {
      min-height: 58px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      align-items: center;
      gap: 10px;
      padding: 10px;
      border: 1px solid var(--line-soft);
      border-radius: 8px;
      background: #fbfcfe;
    }

    .proxy-profile.active {
      border-color: rgba(20, 128, 74, 0.22);
      background: var(--green-soft);
    }

    .proxy-profile-main {
      border: 0;
      background: transparent;
      color: inherit;
      padding: 0;
      display: grid;
      gap: 3px;
      text-align: left;
      cursor: pointer;
      min-width: 0;
    }

    .proxy-profile-main strong,
    .proxy-profile-main span {
      overflow-wrap: anywhere;
    }

    .proxy-profile-main span {
      color: #667085;
      font-size: 12px;
    }

    .proxy-profile-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .content-toolbar {
      margin-bottom: 12px;
    }

    @media (max-width: 760px) {
      .settings-option-grid,
      .settings-option,
      .review-alias-search,
      .review-alias-row,
      .proxy-import-box,
      .proxy-profile {
        grid-template-columns: 1fr;
      }

      .topbar-actions {
        width: 100%;
        justify-content: stretch;
      }

      .proxy-status-button,
      .notice {
        width: 100%;
      }

      .modal-layer {
        padding: 12px;
      }

      .modal-card {
        max-height: 92vh;
      }
    }

    /* ThonBot integrated layout layer */
    :root {
      --bg: oklch(97.7% 0.010 248);
      --panel: oklch(99.1% 0.004 248);
      --panel-soft: oklch(97.9% 0.006 248);
      --ink: oklch(24% 0.046 252);
      --text: var(--ink);
      --muted: oklch(45.4% 0.034 252);
      --line: oklch(90.6% 0.018 248);
      --line-soft: oklch(93.8% 0.012 248);
      --blue: oklch(55.4% 0.202 257);
      --blue-dark: oklch(48.6% 0.206 257);
      --blue-soft: oklch(95.7% 0.034 254);
      --green: oklch(53.6% 0.145 151);
      --green-soft: oklch(96.5% 0.036 150);
      --amber: oklch(58.2% 0.135 78);
      --amber-soft: oklch(96.5% 0.045 86);
      --red: oklch(55.8% 0.190 29);
      --red-soft: oklch(96.3% 0.028 27);
      --cyan: oklch(54.5% 0.105 205);
      --cyan-soft: oklch(96% 0.030 205);
      --violet: oklch(55.5% 0.160 294);
      --violet-soft: oklch(95.5% 0.028 294);
      --sidebar: oklch(99.1% 0.004 248);
      --sidebar-muted: var(--muted);
      --shadow-soft: 0 10px 26px oklch(42% 0.04 252 / .055);
    }

    body {
      background: var(--bg);
      color: var(--ink);
    }

    .app {
      grid-template-columns: 232px minmax(0, 1fr);
    }

    .sidebar {
      background: var(--panel);
      color: var(--ink);
      border-right: 1px solid var(--line);
      box-shadow: 8px 0 24px oklch(42% 0.04 252 / .035);
    }

    .brand-mark {
      border-color: oklch(88% 0.044 254);
      background: var(--blue-soft);
      color: var(--blue);
    }

    .brand h1 {
      color: var(--ink);
      font-weight: 850;
    }

    .brand p {
      color: var(--muted);
    }

    .nav button {
      min-height: 42px;
      color: var(--muted);
      font-weight: 800;
      border-color: transparent;
    }

    .nav button:hover,
    .nav button.active {
      color: var(--blue);
      background: var(--blue-soft);
      border-color: oklch(84.7% 0.074 252);
    }

    .main {
      width: 100%;
      max-width: none;
      padding: 20px 24px 28px;
    }

    .topbar {
      align-items: flex-start;
      margin-bottom: 14px;
    }

    .topbar h2 {
      font-size: 24px;
      font-weight: 850;
    }

    .topbar p {
      color: var(--muted);
    }

    .notice,
    .proxy-status-button {
      border-color: var(--line);
      background: var(--panel);
      color: var(--muted);
      box-shadow: var(--shadow-soft);
    }

    .grid,
    .control-page {
      gap: 14px;
    }

    .control-page {
      display: grid;
    }

    .control-metrics {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .control-main-grid {
      grid-template-columns: minmax(0, .95fr) minmax(340px, .65fr);
    }

    .panel {
      border-color: var(--line);
      background: var(--panel);
      box-shadow: var(--shadow-soft);
    }

    .panel-header {
      min-height: 52px;
      padding: 13px 16px;
      background: var(--panel-soft);
      border-bottom-color: var(--line);
    }

    .panel-header h3 {
      color: var(--ink);
      font-size: 15px;
      font-weight: 850;
    }

    .panel-body {
      padding: 16px;
    }

    .panel-actions,
    .modal-toolbar {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
      min-width: 0;
    }

    .modal-toolbar {
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .control-panel .panel-body {
      align-content: start;
    }

    .control-actions {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .control-actions.process-actions {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .control-actions.process-actions .btn {
      min-height: 36px;
      padding: 0 10px;
    }

    .control-actions.compact {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .btn,
    .icon-btn {
      border-color: var(--line);
      background: var(--panel);
      color: oklch(32% 0.044 252);
      box-shadow: 0 1px 0 oklch(42% 0.04 252 / .04);
    }

    .btn:hover,
    .icon-btn:hover {
      border-color: oklch(84% 0.024 248);
      background: var(--panel-soft);
      box-shadow: 0 8px 18px oklch(42% 0.04 252 / .08);
    }

    .btn.primary {
      background: var(--blue);
      border-color: var(--blue);
      color: oklch(99% 0.004 248);
      box-shadow: 0 10px 20px oklch(55.4% 0.202 257 / .22);
    }

    .btn.danger,
    .btn.subtle-danger {
      color: var(--red);
      background: var(--red-soft);
      border-color: oklch(86% 0.056 29);
    }

    .pill {
      border-color: var(--line);
      background: var(--panel);
      color: var(--muted);
    }

    .settings-option-grid {
      grid-template-columns: repeat(3, minmax(220px, 1fr));
      gap: 14px;
    }

    .settings-option {
      min-height: 96px;
      padding: 16px;
      border-color: var(--line);
      background: var(--panel);
      box-shadow: var(--shadow-soft);
    }

    .settings-option:hover {
      border-color: oklch(84.7% 0.074 252);
      background: oklch(98.6% 0.010 248);
    }

    .log-panel .panel-body {
      padding: 0;
    }

    .log-box {
      height: min(42vh, 440px);
      min-height: 300px;
      border: 0;
      border-radius: 0;
      background: oklch(22% 0.035 252);
      box-shadow: inset 0 1px 0 oklch(96% 0.02 248 / .05);
    }

    .log-line {
      grid-template-columns: 76px 92px minmax(0, 1fr);
    }

    .quality-modal {
      width: min(1120px, calc(100vw - 32px));
      max-height: min(88vh, 920px);
    }

    .quality-modal .modal-body {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      overflow: hidden;
    }

    .table-shell {
      min-height: 0;
      overflow: auto;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
    }

    .table-shell table {
      border: 0;
      border-radius: 0;
    }

    .quality-table {
      min-width: 860px;
    }

    th {
      background: var(--panel-soft);
      color: var(--muted);
      font-weight: 850;
    }

    td {
      vertical-align: top;
    }

    .modal-card {
      background: var(--panel);
      border-color: var(--line);
      box-shadow: 0 28px 72px oklch(24% 0.046 252 / .24);
    }

    .modal-header {
      min-height: 64px;
      padding: 16px 18px;
      background: var(--panel-soft);
      border-bottom-color: var(--line);
    }

    .modal-header p {
      color: var(--muted);
    }

    .modal-body {
      padding: 16px 18px;
    }

    @media (max-width: 1180px) {
      .settings-option-grid,
      .control-main-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 860px) {
      .app {
        display: block;
      }

      .sidebar {
        position: sticky;
        top: 0;
        z-index: 20;
        padding: 10px 14px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }

      .brand {
        display: none;
      }

      .nav {
        display: flex;
        flex-wrap: wrap;
      }

      .nav button {
        width: auto;
        flex: 1 1 120px;
      }

      .main {
        padding: 14px;
      }

      .topbar,
      .modal-toolbar {
        align-items: stretch;
      }

      .control-metrics,
      .control-main-grid,
      .settings-option-grid,
      .control-actions,
      .control-actions.compact {
        grid-template-columns: 1fr;
      }

      .panel-actions {
        justify-content: flex-start;
      }

      .quality-modal {
        width: calc(100vw - 20px);
      }
    }

    /* Ops dashboard density pass */
    .ops-live-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .ops-realtime-panel .panel-body {
      padding: 12px 14px;
    }

    .ops-realtime-list {
      min-height: 44px;
      max-height: 184px;
      gap: 6px;
    }

    .ops-realtime-list .ops-list-row {
      min-height: 36px;
      padding: 7px 10px;
    }

    .ops-status-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: stretch;
    }

    .ops-status-grid .panel-header,
    .ops-health-panel .panel-header {
      min-height: 46px;
      padding: 10px 14px;
    }

    .ops-status-grid .panel-body {
      min-height: 96px;
      padding: 12px 14px;
    }

    .ops-status-grid .ops-list {
      gap: 6px;
      min-height: 0;
    }

    .ops-status-grid .ops-list-row,
    .ops-status-grid .ops-empty {
      min-height: 34px;
      padding: 7px 9px;
    }

    .ops-status {
      min-height: 96px;
      gap: 5px;
      align-content: start;
    }

    .ops-status strong {
      font-size: 18px;
      line-height: 1.15;
    }

    .ops-status span {
      font-size: 13px;
      line-height: 1.32;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    .ops-health-panel .panel-body {
      padding: 12px 14px;
    }

    .ops-health-panel .health-grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 8px;
    }

    .ops-health-panel .health-item {
      min-height: 78px;
      padding: 9px 10px;
      gap: 3px;
    }

    .ops-health-panel .health-label {
      font-size: 11.5px;
      line-height: 1.2;
    }

    .ops-health-panel .health-value {
      font-size: 16px;
      line-height: 1.15;
    }

    .ops-health-panel .health-item small {
      font-size: 12px;
      line-height: 1.24;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    @media (max-width: 1380px) {
      .ops-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .ops-health-panel .health-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 760px) {
      .ops-status-grid,
      .ops-health-panel .health-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Float searchbot notices like the ThonBot global toast */
    .topbar {
      display: none;
      min-height: 0;
      padding: 6px 0 8px;
      margin-bottom: 8px;
    }

    #view-ops > .grid {
      gap: 10px;
    }

    .ops-primary-grid {
      grid-template-columns: minmax(420px, .82fr) minmax(560px, 1.18fr);
      align-items: stretch;
      gap: 10px;
    }

    .ops-primary-grid > .panel {
      min-width: 0;
      height: 100%;
    }

    .ops-primary-grid .ops-realtime-panel .panel-body,
    .ops-primary-grid .ops-config-panel .panel-body {
      padding: 12px 14px;
    }

    .ops-primary-grid .ops-realtime-list {
      max-height: 158px;
    }

    .ops-config-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    #view-ops .ops-config-card {
      min-height: 76px;
      padding: 10px;
      grid-template-columns: 38px minmax(0, 1fr) auto;
      gap: 9px;
      border-color: var(--line-soft);
      background: #fff;
      box-shadow: none;
    }

    #view-ops .ops-config-card:hover {
      border-color: oklch(84.7% 0.074 252);
      background: oklch(98.6% 0.010 248);
    }

    #view-ops .ops-config-card .settings-option-icon {
      width: 36px;
      height: 36px;
    }

    #view-ops .ops-config-card .settings-option-main {
      gap: 2px;
    }

    #view-ops .ops-config-card .settings-option-main strong {
      font-size: 14px;
      line-height: 1.2;
    }

    #view-ops .ops-config-card .settings-option-main small {
      font-size: 12px;
      line-height: 1.28;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    .ops-overview-panel .panel-body.ops-overview-body {
      display: grid;
      gap: 10px;
      padding: 12px 14px;
    }

    .ops-overview-strip {
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      gap: 12px;
      min-width: 0;
    }

    .ops-overview-title {
      min-width: 0;
    }

    .ops-overview-title h2 {
      margin: 0;
      color: var(--text);
      font-size: 22px;
      line-height: 1.15;
      font-weight: 850;
    }

    .ops-overview-title p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }

    .ops-toolbar {
      flex: 0 0 auto;
      justify-content: flex-end;
      margin-top: 0;
      text-align: right;
    }

    .ops-overview-panel .ops-kpi-grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 8px;
    }

    .ops-overview-panel .metric-card {
      min-width: 0;
      border: 1px solid var(--line-soft);
      border-radius: 8px;
      background: #fff;
      box-shadow: none;
    }

    .ops-overview-panel .metric-card .panel-body {
      min-height: 84px;
      padding: 9px 10px;
    }

    .ops-overview-panel .metric {
      grid-template-columns: 38px minmax(0, 1fr);
      column-gap: 9px;
      row-gap: 3px;
      min-height: 84px;
    }

    .ops-overview-panel .metric-icon {
      width: 36px;
      height: 36px;
    }

    .ops-overview-panel .metric-label,
    .ops-overview-panel .metric-sub {
      font-size: 12px;
      line-height: 1.25;
    }

    .ops-overview-panel .metric-value {
      font-size: 20px;
      line-height: 1.08;
    }

    .ops-health-actions {
      justify-content: flex-end;
    }

    .ops-health-actions .proxy-status-button {
      min-height: 32px;
      padding: 0 10px;
      box-shadow: none;
    }

    @media (max-width: 1380px) {
      .ops-primary-grid {
        grid-template-columns: 1fr;
      }

      .ops-config-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .ops-overview-panel .ops-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 760px) {
      .ops-overview-strip {
        flex-direction: column;
      }

      .ops-toolbar {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
      }

      .ops-config-grid {
        grid-template-columns: 1fr;
      }

      .ops-overview-panel .ops-kpi-grid {
        grid-template-columns: 1fr;
      }
    }

    .notice[hidden] {
      display: none !important;
    }

    .notice {
      --notice-color: oklch(53.6% 0.145 151);
      --notice-duration: 4200ms;
      position: fixed;
      top: 18px;
      left: 50%;
      z-index: 5000;
      width: min(460px, calc(100vw - 32px));
      min-height: 62px;
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr) 28px;
      align-items: center;
      gap: 12px;
      padding: 16px 18px;
      border: 1px solid oklch(89.8% 0.020 248);
      border-left: 5px solid var(--notice-color);
      border-radius: 10px;
      background: oklch(99.2% 0.004 248 / .98);
      box-shadow: 0 22px 60px oklch(24% 0.046 252 / .18);
      color: var(--ink);
      transform: translateX(-50%);
      overflow: hidden;
      animation: searchbot-notice-in .18s ease-out both;
      pointer-events: auto;
    }

    .notice::before {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: inherit;
      padding: 2px;
      background: conic-gradient(from -90deg, var(--notice-color) 100%, transparent 0);
      -webkit-mask: linear-gradient(oklch(100% 0 0) 0 0) content-box, linear-gradient(oklch(100% 0 0) 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }

    .notice.bad {
      --notice-color: var(--red);
    }

    .notice.good,
    .notice.bad {
      background: oklch(99.2% 0.004 248 / .98);
      border-color: oklch(89.8% 0.020 248);
    }

    .notice-icon {
      width: 26px;
      height: 26px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid oklch(86% 0.070 151);
      border-radius: 999px;
      color: var(--green);
      background: var(--green-soft);
    }

    .notice.bad .notice-icon {
      color: var(--red);
      background: var(--red-soft);
      border-color: oklch(86% 0.056 29);
    }

    .notice p {
      min-width: 0;
      margin: 0;
      color: var(--ink);
      font-size: 15px;
      font-weight: 700;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .notice-close {
      width: 28px;
      height: 28px;
      min-height: 28px;
      padding: 0;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--muted);
      box-shadow: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .notice-close:hover {
      color: var(--ink);
      background: var(--panel-soft);
    }

    .notice-progress {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 3px;
      background: transparent;
    }

    .notice-progress i {
      display: block;
      width: 100%;
      height: 100%;
      background: var(--notice-color);
      transform-origin: left center;
      animation: searchbot-notice-bar var(--notice-duration) linear forwards;
    }

    .notice.is-hiding {
      opacity: 0;
      transform: translate(-50%, -6px) scale(.98);
      transition: opacity .18s ease, transform .18s ease;
    }

    @keyframes searchbot-notice-in {
      from {
        opacity: 0;
        transform: translate(-50%, 8px) scale(.98);
      }
      to {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
      }
    }

    @keyframes searchbot-notice-bar {
      to {
        transform: scaleX(0);
      }
    }

    /* Search management workbench card sync */
    :root {
      --radius-card: 8px;
      --radius-control: 8px;
      --soft-shadow: var(--shadow-soft);
    }

    #view-ops {
      --ops-tone: var(--blue);
    }

    #view-ops > .grid {
      gap: 16px;
    }

    #view-ops .panel,
    #view-ops .metric-card {
      border-color: var(--line);
      border-radius: var(--radius-card);
      background: var(--panel);
      box-shadow: var(--shadow-soft);
    }

    #view-ops .panel-header {
      min-height: 0;
      padding: 14px 16px 10px;
      background: var(--panel);
      border-bottom: 0;
    }

    #view-ops .panel-header h3 {
      gap: 8px;
      color: var(--ink);
      font-size: 17px;
      font-weight: 850;
      line-height: 1.2;
    }

    #view-ops .panel-header h3 .lucide {
      color: var(--blue);
    }

    #view-ops .panel-body {
      padding: 0 16px 16px;
    }

    #view-ops .ops-kpi-grid {
      gap: 12px;
    }

    #view-ops .metric-card {
      overflow: hidden;
    }

    #view-ops .metric-card .panel-body {
      min-height: 92px;
      padding: 13px 14px;
    }

    #view-ops .metric-icon {
      border-radius: var(--radius-control);
    }

    #view-ops .ops-health-panel .panel-header {
      padding-bottom: 12px;
    }

    #view-ops .ops-health-panel .panel-body {
      padding: 0 16px 16px;
    }

    #view-ops .ops-health-panel .health-grid {
      gap: 10px;
    }

    #view-ops .ops-health-panel .health-item {
      border-color: var(--line);
      border-radius: var(--radius-card);
      background: var(--panel-soft);
    }

    #view-ops .ops-status-grid {
      grid-template-columns: minmax(220px, .9fr) minmax(0, 1fr) minmax(0, 1fr) minmax(260px, 1fr);
      gap: 16px;
      align-items: stretch;
    }

    #view-ops .ops-status-grid > .panel {
      --ops-tone: var(--blue);
      min-width: 0;
      border-color: color-mix(in oklab, var(--ops-tone) 13%, var(--line));
      transition: transform 160ms ease-out, border-color 160ms ease-out, box-shadow 160ms ease-out, background-color 160ms ease-out;
    }

    #view-ops .ops-status-grid > .panel:nth-child(1) {
      --ops-tone: var(--green);
    }

    #view-ops .ops-status-grid > .panel:nth-child(2) {
      --ops-tone: var(--blue);
    }

    #view-ops .ops-status-grid > .panel:nth-child(3) {
      --ops-tone: var(--cyan);
    }

    #view-ops .ops-status-grid > .panel:nth-child(4) {
      --ops-tone: var(--violet);
    }

    #view-ops .ops-signal-card {
      --ops-tone: var(--green);
    }

    #view-ops .ops-sync-card {
      --ops-tone: var(--blue);
      grid-column: span 2;
    }

    #view-ops .ops-ads-card {
      --ops-tone: var(--cyan);
    }

    #view-ops .ops-benchmark-card {
      --ops-tone: var(--violet);
    }

    #view-ops .ops-status-grid > .panel:hover,
    #view-ops .ops-realtime-panel:hover {
      transform: translateY(-1px);
      border-color: color-mix(in oklab, var(--ops-tone) 24%, var(--line));
      box-shadow: var(--shadow);
    }

    #view-ops .ops-status-grid > .panel .panel-header h3 .lucide {
      color: color-mix(in oklab, var(--ops-tone) 86%, var(--ink));
    }

    #view-ops .ops-status-grid .panel-body {
      min-height: 126px;
      padding: 0 16px 16px;
    }

    .login-gate {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px;
      background:
        linear-gradient(135deg, rgba(22, 101, 52, 0.10), transparent 42%),
        linear-gradient(315deg, rgba(14, 116, 144, 0.12), transparent 44%),
        var(--bg);
    }

    .login-gate.hidden {
      display: none !important;
    }

    .auth-boot {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px;
      background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.10), transparent 42%),
        linear-gradient(315deg, rgba(19, 122, 58, 0.10), transparent 44%),
        var(--bg);
    }

    .auth-boot.hidden {
      display: none !important;
    }

    .auth-boot-shell {
      width: min(420px, 100%);
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      box-shadow: var(--shadow);
    }

    .auth-boot-mark {
      width: 48px;
      height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      color: var(--blue);
      background: rgba(37, 99, 235, 0.08);
      border: 1px solid rgba(37, 99, 235, 0.18);
    }

    .auth-boot-mark svg {
      width: 26px;
      height: 26px;
      animation: auth-spin 1s linear infinite;
    }

    @keyframes auth-spin {
      to {
        transform: rotate(360deg);
      }
    }

    .auth-boot-copy h1 {
      margin: 0 0 6px;
      font-size: 24px;
      line-height: 1.2;
      letter-spacing: 0;
    }

    .auth-boot-copy p {
      margin: 0;
      color: var(--muted);
      line-height: 1.55;
    }

    .login-shell {
      width: min(440px, 100%);
      display: grid;
      gap: 18px;
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      box-shadow: var(--shadow-soft);
    }

    .login-mark {
      width: 48px;
      height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      color: var(--green);
      background: var(--green-soft);
      border: 1px solid rgba(20, 128, 74, 0.18);
    }

    .login-mark svg {
      width: 26px;
      height: 26px;
    }

    .login-heading h1 {
      margin: 0 0 6px;
      font-size: 24px;
      line-height: 1.2;
      letter-spacing: 0;
    }

    .login-heading p,
    .login-error {
      margin: 0;
      color: var(--muted);
      line-height: 1.55;
    }

    .login-form {
      display: grid;
      gap: 10px;
    }

    .login-form label {
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }

    .login-code-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: stretch;
    }

    .login-code-row input {
      min-height: 44px;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: 0;
      text-align: center;
      font-variant-numeric: tabular-nums;
    }

    .login-code-row button {
      min-height: 44px;
      white-space: nowrap;
    }

    .login-error {
      color: var(--red);
      font-weight: 700;
    }

    @media (max-width: 520px) {
      .login-code-row {
        grid-template-columns: 1fr;
      }

      .login-code-row button {
        width: 100%;
      }
    }

    #view-ops .ops-status {
      min-height: 110px;
      gap: 7px;
      align-content: start;
    }

    #view-ops .ops-status strong {
      color: var(--ink);
      font-size: 22px;
      font-weight: 850;
      line-height: 1.15;
    }

    #view-ops .ops-status span {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.42;
    }

    #view-ops .ops-combined-status {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    #view-ops .ops-status-block {
      display: grid;
      align-content: start;
      gap: 8px;
      min-width: 0;
    }

    #view-ops .ops-status-block + .ops-status-block {
      border-left: 1px solid var(--line);
      padding-left: 14px;
    }

    #view-ops .ops-status-block-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
    }

    #view-ops .ops-status-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
      line-height: 1.2;
    }

    #view-ops .ops-status-label .lucide {
      width: 15px;
      height: 15px;
      color: color-mix(in oklab, var(--ops-tone) 78%, var(--ink));
    }

    #view-ops .ops-combined-status .ops-status {
      min-height: auto;
      gap: 6px;
    }

    #view-ops .ops-list {
      gap: 10px;
    }

    #view-ops .ops-realtime-list {
      max-height: 216px;
      gap: 8px;
      padding-right: 0;
    }

    #view-ops .ops-realtime-list .ops-list-row,
    #view-ops .ops-status-grid .ops-list-row,
    #view-ops #opsTopAds .ops-list-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      min-height: 56px;
      padding: 9px 11px;
      border-color: var(--line);
      border-radius: var(--radius-card);
      background: var(--panel);
      transition: transform 160ms ease-out, border-color 160ms ease-out, box-shadow 160ms ease-out, background-color 160ms ease-out;
    }

    #view-ops .ops-realtime-list .ops-list-main {
      max-width: none;
      flex: initial;
    }

    #view-ops .ops-list-row:hover {
      transform: translateY(-1px);
      border-color: oklch(84.7% 0.074 252);
      box-shadow: 0 12px 24px oklch(25.8% 0.044 252 / .08);
    }

    #view-ops .ops-list-row.good {
      border-color: color-mix(in oklab, var(--green) 20%, var(--line));
      background: color-mix(in oklab, var(--green) 8%, var(--panel));
    }

    #view-ops .ops-list-row.warn {
      border-color: color-mix(in oklab, var(--amber) 22%, var(--line));
      background: color-mix(in oklab, var(--amber) 9%, var(--panel));
    }

    #view-ops .ops-list-row.bad {
      border-color: color-mix(in oklab, var(--red) 22%, var(--line));
      background: color-mix(in oklab, var(--red) 8%, var(--panel));
    }

    #view-ops .ops-list-row strong {
      color: var(--ink);
      font-weight: 850;
    }

    #view-ops .ops-list-row span {
      color: var(--muted);
      font-weight: 650;
    }

    #view-ops .ops-list-count,
    #view-ops .ops-status-button,
    #view-ops .pill {
      min-height: 28px;
      border-radius: 999px;
      background: var(--panel);
      color: var(--muted);
      box-shadow: none;
      font-weight: 850;
    }

    #view-ops .ops-status-button.good,
    #view-ops .pill.good {
      color: var(--green);
      background: var(--green-soft);
      border-color: color-mix(in oklab, var(--green) 24%, var(--line));
    }

    #view-ops .ops-status-button.warn,
    #view-ops .pill.warn {
      color: var(--amber);
      background: var(--amber-soft);
      border-color: color-mix(in oklab, var(--amber) 26%, var(--line));
    }

    #view-ops .ops-status-button.bad,
    #view-ops .pill.bad {
      color: var(--red);
      background: var(--red-soft);
      border-color: color-mix(in oklab, var(--red) 26%, var(--line));
    }

    #view-ops .ops-empty {
      min-height: 56px;
      padding: 10px 12px;
      border-color: var(--line);
      border-radius: var(--radius-card);
      background: var(--panel-soft);
      color: var(--muted);
      font-weight: 700;
    }

    @media (max-width: 1380px) {
      #view-ops .ops-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      #view-ops .ops-sync-card {
        grid-column: 1 / -1;
        order: 1;
      }

      #view-ops .ops-signal-card {
        order: 2;
      }

      #view-ops .ops-ads-card {
        order: 3;
      }
    }

    @media (max-width: 760px) {
      #view-ops .ops-status-grid {
        grid-template-columns: 1fr;
      }

      #view-ops .ops-sync-card,
      #view-ops .ops-signal-card,
      #view-ops .ops-ads-card {
        grid-column: auto;
      }

      #view-ops .ops-combined-status {
        grid-template-columns: 1fr;
      }

      #view-ops .ops-status-block + .ops-status-block {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding-left: 0;
        padding-top: 12px;
      }

      #view-ops .panel-header {
        align-items: flex-start;
      }

      #view-ops .ops-realtime-list .ops-list-row,
      #view-ops .ops-status-grid .ops-list-row,
      #view-ops #opsTopAds .ops-list-row {
        grid-template-columns: 1fr;
        align-items: start;
      }
    }

    .ucpan-page {
      display: grid;
      gap: 14px;
    }

    .ucpan-action-panel .panel-body {
      padding: 14px;
    }

    .ucpan-action-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .ucpan-action-card {
      min-height: 96px;
      align-items: center;
    }

    .ucpan-main-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
      gap: 16px;
      align-items: start;
    }

    .ucpan-column {
      display: grid;
      gap: 16px;
      align-content: start;
      min-width: 0;
    }

    .ucpan-list {
      display: grid;
      gap: 10px;
    }

    .ucpan-progress-head {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      margin-bottom: 12px;
    }

    .ucpan-progress-list {
      display: grid;
      gap: 10px;
      max-height: 420px;
      overflow: auto;
    }

    .ucpan-progress-row {
      display: grid;
      gap: 8px;
      min-width: 0;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel-soft);
    }

    .ucpan-progress-top,
    .ucpan-progress-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
    }

    .ucpan-progress-top strong,
    .ucpan-progress-meta,
    .ucpan-progress-foot {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .ucpan-progress-top strong {
      font-size: 14px;
      line-height: 1.25;
    }

    .ucpan-progress-meta,
    .ucpan-progress-foot {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.3;
    }

    .ucpan-progress-bar {
      width: 100%;
      height: 8px;
      overflow: hidden;
      border-radius: 999px;
      background: #e8eef5;
    }

    .ucpan-progress-bar span {
      display: block;
      height: 100%;
      min-width: 0;
      border-radius: inherit;
      background: var(--blue);
      transition: width .18s ease-out;
    }

    .ucpan-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      min-height: 58px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel-soft);
    }

    .ucpan-row.muted {
      opacity: 0.72;
    }

    .ucpan-row-main {
      display: grid;
      gap: 5px;
      min-width: 0;
    }

    .ucpan-row-main strong,
    .ucpan-row-main span {
      overflow-wrap: anywhere;
    }

    .ucpan-row-main span {
      color: var(--muted);
      font-size: 13px;
    }

    .ucpan-row-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 8px;
    }

    .ucpan-table-shell {
      max-height: 420px;
    }

    .ucpan-col-id {
      width: 72px;
    }

    .ucpan-col-status {
      width: 92px;
    }

    .ucpan-col-uploaded {
      width: 120px;
    }

    .ucpan-table td.good {
      color: var(--green);
      font-weight: 700;
    }

    .ucpan-table td.warn {
      color: var(--amber);
      font-weight: 700;
    }

    .ucpan-table td.bad {
      color: var(--red);
      font-weight: 700;
    }

    @media (max-width: 860px) {
      .ucpan-action-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .ucpan-main-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .ucpan-progress-head,
      .ucpan-progress-top,
      .ucpan-progress-foot {
        align-items: flex-start;
        flex-direction: column;
      }

      .ucpan-row {
        grid-template-columns: minmax(0, 1fr);
      }

      .ucpan-row-actions {
        justify-content: flex-start;
      }
    }