.kpi,
    .panel {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .kpi {
      padding: 13px 14px;
      min-height: 92px;
    }

    .kpi-label {
      color: var(--muted);
      font-size: 12px;
    }

    .kpi-value {
      margin-top: 6px;
      font-size: 26px;
      font-weight: 760;
      line-height: 1.1;
    }

    .kpi-foot {
      margin-top: 8px;
      color: var(--muted);
      font-size: 12px;
    }

    .panel {
      padding: 15px;
    }

    .detail-page {
      padding: 20px 22px 28px;
      display: grid;
      gap: 14px;
      align-content: start;
    }

    .detail-page[hidden] {
      display: none;
    }

    .detail-page-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
      box-shadow: var(--shadow);
    }

    .detail-page-head h2 {
      margin: 2px 0 6px;
      font-size: 22px;
      line-height: 1.2;
    }

    .detail-page-meta {
      color: var(--muted);
      font-size: 12px;
      overflow-wrap: anywhere;
    }

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

    .detail-actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
    }

    .detail-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, 0.85fr);
      gap: 14px;
      align-items: start;
    }

    .detail-panel {
      padding: 15px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
      box-shadow: var(--shadow);
    }

    .detail-panel-title {
      margin: 0 0 12px;
      font-size: 15px;
      font-weight: 720;
    }

    .detail-page .screenshot {
      margin-top: 0;
      max-height: none;
    }

    .panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

    .panel-title {
      margin: 0;
      font-size: 15px;
      font-weight: 720;
    }

    .panel-note {
      color: var(--muted);
      font-size: 12px;
    }

    .mini {
      border: 1px solid var(--line);
      background: var(--surface-soft);
      border-radius: 7px;
      padding: 10px;
    }

    .mini span {
      display: block;
      color: var(--muted);
      font-size: 12px;
    }

    .mini strong {
      display: block;
      margin-top: 3px;
      font-size: 18px;
    }

    .filters {
      display: grid;
      grid-template-columns: minmax(260px, 1.2fr) repeat(3, minmax(140px, 0.4fr)) auto;
      gap: 10px;
      align-items: center;
    }

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

    .channel-card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface-soft);
      padding: 14px;
    }

    .channel-card.api-channel {
      background: #fbfdff;
    }

    .channel-title {
      display: grid;
      gap: 4px;
    }

    .channel-subtitle {
      color: var(--muted);
      font-size: 12px;
    }

    .query-grid {
      display: grid;
      grid-template-columns: minmax(220px, 1.15fr) repeat(3, minmax(145px, 0.75fr)) minmax(170px, 0.85fr) 140px 140px;
      gap: 10px;
      align-items: start;
    }

    .query-grid.api-query-grid {
      grid-template-columns: minmax(220px, 1.2fr) minmax(220px, 1fr) repeat(2, minmax(125px, .58fr)) minmax(170px, .78fr) 150px 150px;
    }

    .account-module .api-query-grid {
      grid-template-columns: minmax(220px, 1.2fr) minmax(220px, 1fr) repeat(2, minmax(120px, .55fr)) minmax(170px, .75fr) 150px 150px;
    }

    .account-module .api-query-grid.mode-all {
      grid-template-columns: minmax(260px, 1.25fr) minmax(220px, 1fr) minmax(190px, .85fr) 150px 150px;
    }

    .account-scope-panel {
      display: grid;
      gap: 10px;
      min-width: 0;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: rgba(255, 255, 255, 0.58);
    }

    .account-scope-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
      color: var(--text);
      font-weight: 760;
    }

    .account-scope-summary {
      min-width: 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 560;
      text-align: right;
      overflow-wrap: anywhere;
    }

    .account-module .account-scope-grid,
    .account-module .account-scope-grid.mode-all {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-scope-grid .wide {
      grid-column: 1 / -1;
    }

    .account-scope-grid .field-hint {
      min-height: 0;
    }

    .account-scope-grid .checkline {
      min-height: 32px;
      white-space: normal;
    }

    .device-run-config .query-grid {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .query-field.hidden {
      display: none;
    }

    .device-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 10px;
      margin-bottom: 12px;
    }

    .device-card {
      border: 1px solid var(--line);
      background: var(--surface-soft);
      border-radius: 7px;
      padding: 10px;
      display: grid;
      gap: 7px;
    }

    .device-card.resource-card {
      padding-left: 15px;
    }

    .device-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }

    .device-title {
      font-weight: 720;
    }

    .device-meta {
      color: var(--muted);
      font-size: 12px;
    }

    .device-selected {
      color: var(--muted);
      font-size: 12px;
      margin: -2px 0 12px;
      overflow-wrap: anywhere;
    }

    .setup-box {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: start;
      padding: 12px;
      margin-bottom: 12px;
      border: 1px dashed var(--line-strong);
      border-radius: 7px;
      background: #ffffff;
    }

    .setup-title {
      font-weight: 720;
      margin-bottom: 4px;
    }

    .setup-message {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .setup-message.success { color: var(--green); }
    .setup-message.error,
    .setup-message.needs_config { color: var(--amber); font-weight: 650; }

    .account-panel {
      display: grid;
      gap: 10px;
      padding: 12px;
      margin: 0 0 12px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #ffffff;
    }