:root {
      --p-color-bg: #f1f1f1; --p-color-bg-surface: #fff;
      --p-color-border: #e1e3e5; --p-color-text: #303030;
      --p-color-text-secondary: #616161; --p-color-text-success: #008060;
      --p-color-text-critical: #d72c0d; --p-color-text-warning: #b98900;
      --p-color-bg-success-subdued: #e3f1df; --p-color-bg-critical-subdued: #fce3e3;
      --p-color-bg-warning-subdued: #fff5e1;
      --p-color-text-interactive: #2c6ecb;
      --p-shadow-card: 0 0 0 1px rgba(63,63,68,.05), 0 1px 3px rgba(63,63,68,.15);
      --p-border-radius-2: 8px; --p-border-radius-3: 12px;
      --p-space-2: 8px; --p-space-3: 12px; --p-space-4: 16px; --p-space-5: 20px;
      --p-font-size-3: 13px; --p-font-size-4: 14px; --p-font-size-7: 20px; --p-font-size-9: 28px;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, sans-serif;
      background: var(--p-color-bg); color: var(--p-color-text);
      font-size: var(--p-font-size-4); line-height: 1.5;
    }

    /* Shopify Polaris-like Page layout */
    .Polaris-Page { max-width: 1200px; margin: 0 auto; padding: var(--p-space-5); }
    .Polaris-Page__Header { margin-bottom: var(--p-space-5); }
    .Polaris-Page__Title { font-size: var(--p-font-size-7); font-weight: 600; }

    /* Layout grid */
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--p-space-4); margin-bottom: var(--p-space-5); }
    .grid-wide { grid-template-columns: 1fr; }

    /* Card (Polaris-like) */
    .Polaris-Card {
      background: var(--p-color-bg-surface); border-radius: var(--p-border-radius-3);
      box-shadow: var(--p-shadow-card); padding: var(--p-space-5);
    }
    .Polaris-Card__Header { font-size: var(--p-font-size-4); font-weight: 600; margin-bottom: var(--p-space-3); }
    .stat-value { font-size: var(--p-font-size-9); font-weight: 700; }
    .stat-label { font-size: var(--p-font-size-3); color: var(--p-color-text-secondary); margin-top: 4px; }
    .stat-sub { font-size: 12px; color: var(--p-color-text-secondary); margin-top: var(--p-space-2); }

    /* Badges */
    .badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 500; }
    .badge-ok { background: var(--p-color-bg-success-subdued); color: var(--p-color-text-success); }
    .badge-warn { background: var(--p-color-bg-warning-subdued); color: var(--p-color-text-warning); }
    .badge-err { background: var(--p-color-bg-critical-subdued); color: var(--p-color-text-critical); }

    /* Tabs (Polaris-like) */
    .Polaris-Tabs { display: flex; gap: 0; border-bottom: 1px solid var(--p-color-border); margin-bottom: var(--p-space-4); }
    .Polaris-Tabs__Tab {
      padding: var(--p-space-2) var(--p-space-4); cursor: pointer;
      font-size: var(--p-font-size-4); color: var(--p-color-text-secondary);
      border-bottom: 3px solid transparent; transition: all 0.15s;
    }
    .Polaris-Tabs__Tab:hover { color: var(--p-color-text); }
    .Polaris-Tabs__Tab--selected { color: var(--p-color-text); border-bottom-color: var(--p-color-text-interactive); font-weight: 500; }

    /* Controls */
    .controls { display: flex; gap: var(--p-space-3); align-items: center; margin-bottom: var(--p-space-4); flex-wrap: wrap; }
    select, input[type="search"], input[type="number"] {
      font-size: var(--p-font-size-4); padding: 6px 12px;
      border: 1px solid var(--p-color-border); border-radius: var(--p-border-radius-2);
      background: var(--p-color-bg-surface);
    }
    input[type="search"] { width: 240px; }
    .Polaris-Button {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 6px 16px; font-size: var(--p-font-size-4); font-weight: 500;
      border: none; border-radius: var(--p-border-radius-2); cursor: pointer;
      background: #303030; color: #fff; transition: opacity 0.15s;
    }
    .Polaris-Button:hover { opacity: 0.85; }
    .Polaris-Button:disabled { opacity: 0.4; cursor: not-allowed; }
    .Polaris-Button--outline { background: var(--p-color-bg-surface); color: var(--p-color-text); border: 1px solid var(--p-color-border); }

    /* Table (Polaris IndexTable-like) */
    .table-wrap { overflow-x: auto; border-radius: var(--p-border-radius-3); box-shadow: var(--p-shadow-card); }
    table { width: 100%; border-collapse: collapse; font-size: var(--p-font-size-3); background: var(--p-color-bg-surface); }
    th {
      text-align: left; padding: 10px 12px; background: #f9fafb;
      border-bottom: 1px solid var(--p-color-border); font-weight: 600;
      position: sticky; top: 0; cursor: pointer; white-space: nowrap; user-select: none;
    }
    th:hover { color: var(--p-color-text-interactive); }
    th .sort-arrow { font-size: 10px; margin-left: 2px; }
    td { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; white-space: nowrap; }
    tr:hover td { background: #f9fafb; }
    .price { text-align: right; font-variant-numeric: tabular-nums; font-family: 'SF Mono', Consolas, monospace; }
    .cheaper { color: var(--p-color-text-success); font-weight: 600; }
    .expensive { color: var(--p-color-text-critical); }

    /* Chart */
    .chart-container { position: relative; height: 320px; }

    /* Loading */
    .loading { text-align: center; padding: 40px; color: var(--p-color-text-secondary); }
    .btn-spinner { display:inline-block; width:9px; height:9px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; animation:btnspin .6s linear infinite; vertical-align:-1px; }
    @keyframes btnspin { to { transform:rotate(360deg); } }

    /* Run list */
    .run-list { list-style: none; font-size: var(--p-font-size-3); }
    .run-list li { padding: 6px 0; border-bottom: 1px solid #f0f0f0; display: flex; gap: 8px; align-items: center; }

    /* Empty state */
    .empty-state { text-align: center; padding: 60px 20px; color: var(--p-color-text-secondary); }
    .empty-state h3 { font-size: 16px; margin-bottom: 8px; color: var(--p-color-text); }