{% comment %}
Shared presentation for the four cache pages.

Everything here is expressed with the panel's CSS custom properties
(--cp-primary, --cp-border, …). They are redefined under [data-theme="dark"] in
static/css/cloudpanel.css, so a hardcoded colour in this file would be the one
thing that does not follow the user into dark mode.
{% endcomment %}
<style>
  .cpc-muted { color: var(--cp-neutral); }
  .cpc-mono {
    font-family: var(--cp-font-mono);
    font-size: .8125rem;
    word-break: break-all;
  }
  .cpc-stat {
    background: var(--cp-bg-subtle);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    padding: .875rem 1rem;
    height: 100%;
  }
  .cpc-stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--cp-primary);
  }
  .cpc-stat-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cp-neutral);
  }
  .cpc-pill {
    border-radius: var(--cp-radius-pill);
    font-weight: 500;
  }
  .cpc-panel {
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
    background: var(--cp-bg);
    box-shadow: var(--cp-shadow);
  }
  .cpc-note {
    background: var(--cp-primary-soft);
    border-left: 3px solid var(--cp-primary);
    border-radius: var(--cp-radius);
    padding: .625rem .875rem;
    font-size: .875rem;
  }
  .cpc-key {
    background: var(--cp-bg-subtle);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    padding: .5rem .75rem;
  }
  .cpc-bar {
    height: .4rem;
    border-radius: var(--cp-radius-pill);
    background: var(--cp-bg-subtle);
    overflow: hidden;
  }
  .cpc-bar > span {
    display: block;
    height: 100%;
    background: var(--cp-primary);
  }
</style>