:root {
      --brand: #530086;
      --brand-2: #7b2bbd;
      --brand-soft: #f7f2fb;
      --bg: #f6f7f9;
      --panel: #ffffff;
      --ink: #17202a;
      --muted: #667085;
      --line: #ded5e8;
      --blue: #530086;
      --green: #25835b;
      --red: #b42318;
      --amber: #b86b00;
      --violet: #7b2bbd;
    }
    * { box-sizing: border-box; }
    html { overflow-x: hidden; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font: 14px/1.45 Arial, sans-serif;
      overflow-x: hidden;
    }
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 22px;
      background: linear-gradient(90deg, #ffffff 0%, #fbf8ff 58%, #efe1ff 100%);
      color: #fff;
      border-bottom: 1px solid var(--line);
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 16px;
      min-width: 0;
    }
    .logo {
      width: 178px;
      height: auto;
      display: block;
    }
    h1 { margin: 0; font-size: 20px; font-weight: 800; color: var(--brand); }
    .meta { color: #6b5b78; font-size: 13px; }
    .db-meta {
      max-width: 45vw;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: right;
    }
    .primary-tabs {
      display: flex;
      gap: 8px;
      padding: 12px 20px;
      background: #fff;
      border-bottom: 1px solid var(--line);
      overflow-x: auto;
      scrollbar-width: thin;
    }
    .primary-tab {
      height: 38px;
      border: 1px solid var(--line);
      background: #fff;
      color: #44314f;
      padding: 0 16px;
      cursor: pointer;
      font-weight: 800;
    }
    .primary-tab.active {
      color: #fff;
      background: var(--brand);
      border-color: var(--brand);
    }
    .tabs {
      display: flex;
      gap: 4px;
      padding: 10px 20px 0;
      background: #eef1f5;
      border-bottom: 1px solid var(--line);
      overflow-x: auto;
      scrollbar-width: thin;
    }
    .tab {
      border: 1px solid transparent;
      border-bottom: 0;
      background: transparent;
      color: #344054;
      padding: 10px 14px;
      cursor: pointer;
      font-weight: 700;
    }
    .tab.active {
      background: var(--bg);
      border-color: var(--line);
      color: var(--brand);
    }
    .section { display: none; min-width: 0; }
    .section.active { display: block; }
    main { padding: 18px 20px 28px; min-width: 0; }
    .page { display: none; min-width: 0; }
    .page.active { display: block; }
    .toolbar {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }
    select, input {
      height: 34px;
      border: 1px solid var(--line);
      background: #fff;
      padding: 0 10px;
      color: var(--ink);
    }
    button.action {
      height: 34px;
      border: 1px solid var(--line);
      background: #fff;
      cursor: pointer;
      padding: 0 12px;
      font-weight: 700;
    }
    .kpis {
      display: grid;
      grid-template-columns: repeat(5, minmax(140px, 1fr));
      gap: 10px;
      margin-bottom: 14px;
    }
    .kpi, .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      min-width: 0;
    }
    .kpi { padding: 12px; }
    .kpi .label { color: var(--muted); font-size: 12px; }
    .kpi .value { margin-top: 4px; font-size: 22px; font-weight: 800; }
    .grid {
      display: grid;
      grid-template-columns: minmax(320px, 1.25fr) minmax(320px, 1fr);
      gap: 14px;
      min-width: 0;
    }
    .grid > * { min-width: 0; }
    .panel-wide { grid-column: 1 / -1; }
    .panel h2 {
      margin: 0;
      padding: 12px 14px;
      font-size: 16px;
      border-bottom: 1px solid var(--line);
    }
    .panel-body {
      padding: 12px 14px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .chart-controls {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .chart-controls label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }
    canvas { width: 100%; height: 280px; display: block; }
    .panel-wide canvas { height: 560px; }
    .panel-wide canvas.catalog-price-chart { height: 380px; }
    .panel-wide canvas.catalog-compare-chart { height: 360px; }
    .panel-wide canvas.date-compare-chart { height: 390px; }
    .kpis.kpis-compact {
      grid-template-columns: repeat(5, minmax(120px, 1fr));
      margin: 8px 0 12px;
    }
    .kpis-compact .kpi { padding: 10px 12px; }
    .kpis-compact .kpi .value { font-size: 20px; }
    .chart-tooltip {
      position: fixed;
      z-index: 50;
      pointer-events: none;
      display: none;
      min-width: 150px;
      padding: 8px 10px;
      background: #17202a;
      color: #fff;
      border-radius: 6px;
      box-shadow: 0 10px 28px rgba(16, 24, 40, .22);
      font-size: 12px;
      line-height: 1.35;
    }
    .chart-tooltip strong {
      display: block;
      font-size: 13px;
      margin-bottom: 2px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      background: #fff;
      border: 1px solid var(--line);
    }
    th, td {
      border-bottom: 1px solid var(--line);
      padding: 7px 8px;
      text-align: left;
      vertical-align: top;
      white-space: nowrap;
    }
    th {
      position: sticky;
      top: 0;
      background: #edf2f7;
      z-index: 1;
      font-size: 12px;
      color: #344054;
    }
    td.num { text-align: right; font-variant-numeric: tabular-nums; }
    td.good { color: var(--green); font-weight: 700; }
    td.bad { color: var(--red); font-weight: 700; }
    .table-wrap {
      max-height: calc(100vh - 190px);
      overflow: auto;
      border: 1px solid var(--line);
      background: #fff;
      -webkit-overflow-scrolling: touch;
    }
    .panel-body.table-wrap {
      padding: 0;
      max-height: min(520px, calc(100vh - 210px));
    }
    .catalog-compare-table .table-wrap {
      min-height: 320px;
    }
    .status-ok { color: var(--green); font-weight: 700; }
    .status-error { color: var(--red); font-weight: 700; }
    pre {
      margin: 0;
      padding: 14px;
      min-height: 420px;
      max-height: calc(100vh - 230px);
      overflow: auto;
      background: #101828;
      color: #eef4ff;
      white-space: pre-wrap;
      border: 1px solid #0b1220;
    }
    .empty {
      padding: 24px;
      border: 1px dashed var(--line);
      background: #fff;
      color: var(--muted);
    }
    .coming-soon {
      min-height: calc(100vh - 210px);
      display: flex;
      align-items: center;
      justify-content: center;
      background:
        linear-gradient(135deg, rgba(83, 0, 134, .08), rgba(123, 43, 189, .02)),
        #fff;
      border: 1px solid var(--line);
      color: var(--brand);
      font-size: 34px;
      font-weight: 900;
      text-align: center;
    }
    a.link {
      color: var(--brand);
      font-weight: 700;
      text-decoration: none;
    }
    a.link:hover { text-decoration: underline; }
    @media (max-width: 1100px) {
      .kpis { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
      .grid { grid-template-columns: 1fr; }
      header { align-items: flex-start; flex-direction: column; }
      .db-meta { max-width: 100%; text-align: left; }
    }
    @media (max-width: 700px) {
      body { font-size: 13px; }
      header {
        gap: 10px;
        padding: 10px 12px;
        background: #fff;
      }
      .brand {
        width: 100%;
        gap: 10px;
      }
      .logo { width: 132px; }
      h1 { font-size: 17px; line-height: 1.15; }
      .meta { font-size: 11.5px; }
      .db-meta {
        width: 100%;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
      }
      .primary-tabs {
        gap: 6px;
        padding: 8px 10px;
        scroll-snap-type: x proximity;
      }
      .primary-tab {
        flex: 0 0 auto;
        min-width: max-content;
        height: 42px;
        padding: 0 13px;
        scroll-snap-align: start;
      }
      .tabs {
        gap: 6px;
        padding: 8px 10px 0;
        scroll-snap-type: x proximity;
      }
      .tab {
        flex: 0 0 auto;
        min-width: max-content;
        padding: 10px 12px;
        scroll-snap-align: start;
      }
      main { padding: 12px 10px 20px; }
      .toolbar,
      .chart-controls {
        align-items: stretch;
        gap: 8px;
      }
      .toolbar input,
      .toolbar select,
      .toolbar button.action,
      .chart-controls label,
      .chart-controls select,
      .chart-controls button.action {
        width: 100%;
      }
      select, input, button.action {
        min-height: 42px;
        font-size: 16px;
      }
      .kpis,
      .kpis.kpis-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      .kpi { padding: 10px; }
      .kpi .label { font-size: 11px; }
      .kpi .value { font-size: 19px; line-height: 1.2; overflow-wrap: anywhere; }
      .kpis > .kpi:last-child { grid-column: 1 / -1; }
      .panel h2 {
        padding: 11px 12px;
        font-size: 15px;
        line-height: 1.25;
      }
      .panel-body { padding: 10px; }
      canvas {
        min-width: 620px;
        height: 260px;
      }
      .panel-wide canvas {
        min-width: 760px;
        height: 430px;
      }
      #historyChart,
      #mHistoryChart {
        min-width: 620px;
        height: 300px;
      }
      #statusChart,
      #mStatusChart {
        min-width: 320px;
        height: 240px;
      }
      .panel-wide canvas.catalog-price-chart {
        min-width: 680px;
        height: 340px;
      }
      .panel-wide canvas.catalog-compare-chart {
        min-width: 680px;
        height: 340px;
      }
      table { min-width: 760px; }
      th, td { padding: 8px 9px; }
      .table-wrap { max-height: calc(100svh - 210px); }
      .panel-body.table-wrap { max-height: calc(100svh - 230px); }
      .catalog-compare-table .table-wrap { min-height: 280px; }
      pre {
        min-height: 320px;
        max-height: calc(100svh - 210px);
        font-size: 12px;
      }
      .coming-soon {
        min-height: calc(100svh - 180px);
        font-size: 26px;
      }
    }
    @media (max-width: 390px) {
      .logo { width: 118px; }
      h1 { font-size: 16px; }
      .primary-tab { padding: 0 11px; }
      .tab { padding: 9px 11px; }
      .kpi .value { font-size: 18px; }
    }