* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #020204;
  color: #c7cbd1;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;
}

body {
  min-height: 100vh;

  padding:
    clamp(16px, 4vw, 48px);

  overflow-x: hidden;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(120, 0, 24, 0.11),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #050507 0%,
      #010102 100%
    );
}

.cache-shell {

  width:100%;

  max-width:1200px;

  margin:0 auto;

  padding:
    clamp(25px,4vw,50px);

  border:none;

  background:none;

  box-shadow:none;

}

.cache-shell::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 0, 64, 0.025) 49%,
      rgba(0, 210, 255, 0.018) 51%,
      transparent 100%
    );

  mix-blend-mode: screen;

  opacity: 0.55;
}

.cache-title {
  position: relative;

  margin-top: 0;

  color: #f0d9dc;

  letter-spacing:
    clamp(2px, 0.7vw, 6px);

  font-size:
    clamp(2rem, 7vw, 4.2rem);

  text-transform: uppercase;

  text-shadow:
    -1px 0 rgba(255, 0, 70, 0.45),
    1px 0 rgba(0, 210, 255, 0.25),
    0 0 14px rgba(255, 0, 45, 0.20);
}

.cache-subtitle {
  color: #a7aab0;

  line-height: 1.65;
}

.cache-warning {
  color: #d35f6a;

  text-transform: uppercase;

  letter-spacing: 1px;
}

.cache-rule {
  height: 1px;

  border: 0;

  margin:
    clamp(22px, 4vw, 34px) 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 46, 74, 0.55),
      transparent
    );
}

.cache-stats {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 12px;

  margin-top: 24px;
}

.cache-stat {
  min-width: 0;

  border:
    1px solid rgba(210, 42, 62, 0.22);

  background:
    rgba(255, 255, 255, 0.018);

  padding: 14px;

  text-align: left;
}

.cache-stat-label {
  display: block;

  margin-bottom: 6px;

  color: #7c7f85;

  font-size: 0.78rem;

  letter-spacing: 1px;

  text-transform: uppercase;
}

.cache-stat-value {
  color: #d9dce1;

  font-size: 1.15rem;
}

.cache-list {
  display: grid;

  gap: 14px;

  margin-top: 26px;
}

.cache-file {
  position: relative;

  overflow: hidden;

  border:
    1px solid rgba(210, 42, 62, 0.25);

  background:
    rgba(120, 0, 24, 0.045);

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.cache-file::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  transform:
    translateX(-105%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.05),
      transparent
    );

  transition:
    transform 0.45s ease;
}

.cache-file:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(255, 61, 88, 0.62);

  background:
    rgba(135, 0, 25, 0.09);

  box-shadow:
    0 0 18px rgba(160, 0, 28, 0.10);
}

.cache-file:hover::before {
  transform:
    translateX(105%);
}

.cache-file a,
.cache-file-static {
  display: block;

  width: 100%;

  margin: 0;

  padding:
    18px 20px;

  border: 0;

  background: transparent;

  color: inherit;

  text-align: left;

  text-decoration: none;
}

.cache-file a:hover,
.cache-file a:focus {
  background: transparent;

  color: inherit;

  box-shadow: none;
}

.cache-filename {
  display: block;

  margin-bottom: 7px;

  color: #e5c6ca;

  font-size:
    clamp(0.95rem, 2.4vw, 1.08rem);

  overflow-wrap: anywhere;
}

.cache-status {
  display: block;

  color: #945c63;

  font-size: 0.84rem;

  letter-spacing: 0.5px;

  text-transform: uppercase;
}

.cache-file.corrupted {
  border-color:
    rgba(120, 120, 130, 0.18);

  background:
    rgba(255, 255, 255, 0.012);

  opacity: 0.72;
}

.cache-file.corrupted .cache-filename {
  color: #85878d;
}

.cache-file.corrupted .cache-status {
  color: #63656a;
}

.cache-actions {
  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 12px;

  margin-top: 28px;
}

.cache-button,
.cache-link {
  width:
    min(100%, 340px);

  display: inline-block;

  margin: 0;

  padding: 12px 24px;

  border:
    1px solid rgba(210, 42, 62, 0.42);

  background:
    rgba(100, 0, 18, 0.10);

  color: #dfc2c7;

  font: inherit;

  text-align: center;

  text-decoration: none;

  cursor: pointer;

  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.cache-button:hover,
.cache-button:focus,
.cache-link:hover,
.cache-link:focus {
  border-color:
    rgba(255, 70, 96, 0.72);

  background:
    rgba(155, 0, 30, 0.18);

  color: white;

  outline: none;

  box-shadow:
    0 0 14px rgba(180, 0, 30, 0.12);
}

.cache-warning-screen {
  min-height: 72vh;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;
}

.cache-hidden {
  display: none;
}

.cache-visible {
  display: block;
}

.cache-glitch {
  animation:
    cache-idle-glitch 11s infinite;
}

@keyframes cache-idle-glitch {
  0%,
  93%,
  100% {
    transform: none;
    filter: none;
  }

  94% {
    transform:
      translateX(1px);

    filter:
      saturate(1.18);
  }

  95% {
    transform:
      translateX(-2px);

    filter:
      contrast(1.15);
  }

  96% {
    transform:
      translateX(1px);
  }

  97% {
    transform: none;
  }
}

.cache-entry-flicker {
  animation:
    cache-entry-flicker 0.95s steps(2, end)
    forwards;
}

@keyframes cache-entry-flicker {
  0% {
    opacity: 1;
    filter: brightness(1);
    transform: translateX(0);
  }

  15% {
    opacity: 0.2;
    filter: brightness(2.6);
    transform: translateX(-3px);
  }

  30% {
    opacity: 1;
    filter: brightness(0.65);
    transform: translateX(2px);
  }

  45% {
    opacity: 0.12;
    filter: brightness(3);
  }

  60% {
    opacity: 1;
    filter: brightness(1.1);
    transform: translateX(-1px);
  }

  80% {
    opacity: 0.45;
  }

  100% {
    opacity: 0;
    filter: brightness(3.2);
    transform: translateX(0);
  }
}

/* Digital scan interference */

.cache-noise,
.cache-scanlines {
  position: fixed;

  inset: 0;

  pointer-events: none;
}

.cache-scanlines {
  z-index: 1000;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.014) 0,
      rgba(255, 255, 255, 0.014) 1px,
      rgba(0, 0, 0, 0.085) 2px,
      rgba(0, 0, 0, 0.085) 5px
    );

  opacity: 0.52;
}

.cache-noise {
  z-index: 1001;

  inset: -25%;

  opacity: 0.12;

  background-image:
    radial-gradient(
      circle at 18% 33%,
      rgba(255, 0, 56, 0.12) 0 1px,
      transparent 1.4px
    ),
    radial-gradient(
      circle at 73% 58%,
      rgba(0, 225, 255, 0.08) 0 1px,
      transparent 1.4px
    ),
    radial-gradient(
      circle at 47% 81%,
      rgba(255, 255, 255, 0.07) 0 1px,
      transparent 1.4px
    );

  background-size:
    8px 9px,
    13px 15px,
    17px 19px;

  animation:
    cache-noise-shift 0.18s steps(2, end)
    infinite;
}

@keyframes cache-noise-shift {
  0% {
    transform:
      translate3d(-2%, 1%, 0);
  }

  25% {
    transform:
      translate3d(2%, -1%, 0);
  }

  50% {
    transform:
      translate3d(1%, 2%, 0);
  }

  75% {
    transform:
      translate3d(-1%, -2%, 0);
  }

  100% {
    transform:
      translate3d(-2%, 1%, 0);
  }
}

@media (max-width: 700px) {
  .cache-stats {
    grid-template-columns: 1fr;
  }

  .cache-shell {
    width: 100%;

    padding:
      22px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cache-glitch,
  .cache-entry-flicker,
  .cache-noise {
    animation: none;
  }
}
.cache-entry {

  padding:
    14px 0;

  border-bottom:
    1px solid
    rgba(255,255,255,.05);

  transition:
    .2s;

}

.cache-entry:hover {

  padding-left:12px;

  background:
    rgba(255,0,0,.03);

}

.cache-entry a:hover {

  color:#fff !important;

}

.cache-system-message {

  position:fixed;

  top:25px;

  right:25px;

  color:#933;

  font-size:.85rem;

  opacity:0;

  pointer-events:none;

  transition:.3s;

}