.theme-color-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 10px;
      align-items: center;
    }

    .theme-color-swatch,
    .theme-color-custom {
      width: clamp(38px, 11vw, 46px);
      height: clamp(38px, 11vw, 46px);
      margin: auto;
      padding: 0;
      border: 1px solid rgba(127, 127, 127, .35);
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--swatch, #000000);
      color: var(--ui-text);
      box-shadow: 0 4px 13px rgba(0, 0, 0, .08);
      cursor: pointer;
    }

    .theme-color-swatch.is-selected,
    .theme-color-custom.is-selected {
      outline: 3px solid var(--ui-text);
      outline-offset: 3px;
    }

    .theme-color-custom {
      background: var(--ui-surface-secondary);
    }

    .theme-color-custom svg {
      width: 16px;
      height: 16px;
      color: var(--ui-text);
    }

    .developer-textarea {
      width: 100%;
      min-height: clamp(230px, 48dvh, 410px);
      resize: vertical;
      padding: 16px;
      border: 1px solid var(--ui-line);
      border-radius: 24px;
      outline: 0;
      background: var(--ui-surface-secondary);
      color: var(--ui-text);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 12px;
      line-height: 1.6;
    }

    .developer-textarea:focus { border-color: var(--ui-muted); }

    .cache-preview {
      display: grid;
      gap: 10px;
      min-width: 0;
    }

    .cache-visual {
      min-width: 0;
      display: grid;
      gap: 12px;
      padding: 15px;
      border: 1px solid var(--ui-line);
      border-radius: 20px;
      background: var(--ui-surface-secondary);
    }

    .cache-total-line {
      min-width: 0;
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 12px;
    }

    .cache-total-copy {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .cache-total-label {
      color: var(--ui-muted);
      font-size: calc(10px * var(--display-scale));
      font-weight: 650;
      line-height: 1.2;
    }

    .cache-total-note {
      color: var(--ui-muted);
      font-size: calc(9px * var(--display-scale));
      font-weight: 500;
      line-height: 1.2;
    }

    .cache-total-value {
      flex: 0 0 auto;
      color: var(--ui-text);
      font-size: calc(18px * var(--display-scale));
      font-weight: 760;
      letter-spacing: -.02em;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }

    .cache-meter {
      width: 100%;
      min-width: 0;
      height: 24px;
      display: flex;
      gap: 3px;
      padding: 3px;
      overflow: hidden;
      border: 1px solid var(--ui-line);
      border-radius: 10px;
      background: var(--ui-surface);
    }

    .cache-meter-segment {
      height: 100%;
      min-width: 8px;
      border-radius: 6px;
      background: var(--segment-color, #111111);
      transition: flex-basis .2s ease;
    }

    .cache-legend {
      min-width: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      overflow: hidden;
      border: 1px solid var(--ui-line);
      border-radius: 18px;
      background: var(--ui-surface);
    }

    .cache-legend-row {
      min-width: 0;
      min-height: 50px;
      display: grid;
      grid-template-columns: 9px minmax(0, 1fr);
      grid-template-rows: auto auto;
      column-gap: 9px;
      row-gap: 2px;
      align-content: center;
      padding: 9px 11px;
      background: var(--ui-surface);
    }

    .cache-legend-row:nth-child(odd) {
      border-right: 1px solid var(--ui-line);
    }

    .cache-legend-row:nth-child(n + 3) {
      border-top: 1px solid var(--ui-line);
    }

    .cache-dot {
      grid-row: 1 / 3;
      align-self: center;
      width: 9px;
      height: 24px;
      border-radius: 4px;
      background: var(--dot);
      border: 1px solid rgba(127, 127, 127, .15);
    }

    .cache-legend-name {
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: var(--ui-text);
      font-size: calc(10px * var(--display-scale));
      font-weight: 650;
      line-height: 1.2;
    }

    .cache-legend-value {
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: var(--ui-muted);
      font-size: calc(9px * var(--display-scale));
      font-weight: 500;
      line-height: 1.2;
      font-variant-numeric: tabular-nums;
    }

    @media (max-width: 360px) {
      .cache-visual { padding: 13px; border-radius: 18px; }
      .cache-total-value { font-size: calc(16px * var(--display-scale)); }
      .cache-meter { height: 22px; }
      .cache-legend-row { min-height: 48px; padding: 8px 9px; }
    }