/* POD 7 skin. Loaded after style.css. Remove the pod7.css link to undo. */
:root {
  --p7-void: #070809;
  --p7-glass: #05090b;
  --p7-panel: #0e141b;
  --p7-line: #1e2b37;
  --p7-text: #eef1f3;
  --p7-glow: #e9feff;
  --p7-mute: #7f8e9c;
  --p7-cyan: #3ef2ff;
  --p7-room: #14b8d6;
  --p7-red: #e2142d;
  --p7-red-hot: #ff3347;
  --blood: var(--p7-cyan);
  --glow-blood: rgba(62, 242, 255, 0.22);
  --bg: var(--p7-void);
  --frame: var(--p7-panel);
  --white: var(--p7-text);
  --dim: var(--p7-mute);
  --red: var(--p7-red);
}

html, body { background: var(--p7-void); color: var(--p7-text); }
body {
  font-family: "IBM Plex Sans Condensed", "Arial Narrow", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(62, 242, 255, 0.02) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 70px rgba(20, 184, 214, 0.16), inset 0 0 18px rgba(20, 184, 214, 0.1);
}

.brand h1,
.p7-title {
  font-family: Syncopate, "Arial Black", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.45rem, 5.4vw, 2.15rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--p7-glow);
  text-shadow: 0 0 6px rgba(62, 242, 255, 0.9), 0 0 22px rgba(62, 242, 255, 0.45);
}
.brand { margin-bottom: 0.85rem; }
.p7-seven {
  color: var(--p7-red-hot);
  text-shadow: 0 0 6px var(--p7-red-hot), 0 0 20px rgba(226, 20, 45, 0.7);
  animation: p7flick 1.1s 1;
}
@keyframes p7flick {
  0%, 100% { opacity: 1; }
  22% { opacity: 0.35; }
  42% { opacity: 1; }
  58% { opacity: 0.55; }
  74% { opacity: 1; }
}
.frame {
  background: var(--p7-panel);
  border: 1px solid var(--p7-line);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.frame-head,
.voice-toggle {
  border-color: var(--p7-line);
}
.voice-toggle { min-height: 44px; padding: 0.35rem 0.7rem; }
.voice-toggle.off { color: var(--p7-mute); }

.line {
  font-family: "IBM Plex Sans Condensed", "Arial Narrow", Arial, sans-serif;
  line-height: 1.6;
}
.line .who,
.line.meta,
.line.payout,
.line.purge { font-family: "IBM Plex Mono", ui-monospace, monospace; }

.btn, .bin, .ch-bin, .plate, .send, .decline {
  min-height: 44px;
  border-radius: 0;
}
.btn:hover, .bin:hover, .plate:hover, .ch-bin.x:hover {
  border-color: var(--p7-cyan);
  color: var(--p7-cyan);
}
.bin[data-sort="compliant"]:hover,
.ch-bin.c:hover { border-color: var(--green); color: var(--green); }
.bin[data-sort="noncompliant"]:hover,
.ch-bin.n:hover { border-color: var(--p7-red); color: var(--p7-red-hot); }

.send {
  background: var(--p7-cyan);
  border-color: var(--p7-cyan);
  color: var(--p7-void);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.14em;
}
.send:hover {
  background: #9af8ff;
  color: var(--p7-void);
  box-shadow: 0 0 18px rgba(62, 242, 255, 0.5);
}

.input-row input, .decline {
  font-size: 16px;
}
.input-row input {
  background: #04070a;
  border-color: var(--p7-line);
  color: var(--p7-text);
}
.input-row input:focus { border-color: var(--p7-cyan); }
:focus-visible { outline: 2px solid var(--p7-cyan); outline-offset: 3px; }
a, a.pad-link { color: var(--p7-cyan); text-underline-offset: 3px; }
a.pad-link:hover, a:hover { color: var(--p7-glow); }

.file, .plate, .file-face, .inv-item img, .inv-ph, .meas-bar,
.pad-img img, .pad-page img, .pad-video video, .pad-video-frame, a.pad-imglink img {
  border-color: var(--p7-line);
}
.file, .plate { background: var(--p7-panel); }
.file-face { border-color: var(--p7-line); }
.xp-bar, .meas-bar {
  height: 3px;
  background: var(--p7-line);
  border-color: var(--p7-line);
}
.xp-bar i, .meas-bar i {
  background: var(--p7-cyan);
  box-shadow: 0 0 8px rgba(62, 242, 255, 0.45);
}

.hold-window { background: rgba(62, 242, 255, 0.12); }
.hold-btn.down {
  background: rgba(62, 242, 255, 0.16);
  border-color: var(--p7-cyan);
  color: var(--p7-glow);
}
.hold-fill.kept,
.hold-fill.late { background: var(--p7-red); }
.hold-pips span.kept,
.hold-pips span.late { color: var(--p7-red-hot); }

@media (prefers-reduced-motion: reduce) {
  .p7-seven { animation: none; }
}