/* static/ui-skin.css */
/* Base skin */
body { font-family: system-ui, Arial, sans-serif; margin: 0; background: #0b1220; color: #eaf1ff; }
header { padding: 12px 16px; background: #121a2c; border-bottom: 1px solid #233; display: flex; align-items: center; gap: 12px; }
h1 { font-size: 18px; margin: 0; }
.container { padding: 16px; max-width: 1100px; margin: 0 auto; }
.card { background:#0f172a; border:1px solid #223046; border-radius:10px; padding:14px; margin:12px 0; }
table { width:100%; border-collapse: collapse; }
th, td { padding: 8px 10px; border-bottom: 1px solid #223046; font-size: 14px; }
th { text-align:left; color:#a7b6d8; }
.badge { display:inline-block; padding:2px 6px; border-radius:6px; border:1px solid #3a4b6a; font-size:12px; }
.small { font-size: 12px; color: #a7b6d8; }
a { color:#6aa7ff; text-decoration:none; }
a:hover { text-decoration:underline; }

/* Header nav buttons */
header a {
  color:#a7b6d8;
  text-decoration:none;
  padding:6px 10px;
  border:1px solid #223046;
  border-radius:8px;
}
header a.active { background:#16223f; }

/* Copy chip */
.copy-btn {
  display:inline-block;
  margin-left:6px;
  cursor:pointer;
  font-size:12px;
  padding:2px 5px;
  border-radius:4px;
  background:#223046;
  color:#eaf1ff;
  transition:background 0.2s, color 0.2s;
}
.copy-btn:hover { background:#3b4c6a; color:#fff; }

/* Ko-fi gif helper (Overview) */
.about-gif{ display:grid; place-items:center; margin:12px auto 2px; }
.gif-shell{ width:40px; aspect-ratio:1; display:grid; place-items:center;
            filter:drop-shadow(0 6px 16px rgba(239,124,49,.18)); }
.gif-coin{ width:100%; height:100%; object-fit:cover; display:block;
           clip-path:circle(48% at 50% 50%);
           -webkit-mask-image: radial-gradient(closest-side,#fff 98%,transparent 99%);
                   mask-image: radial-gradient(closest-side,#fff 98%,transparent 99%); }

/* ===== RGB banner INSIDE the header ===== */
.rgb-banner{
  display:none;
  margin-left:auto;     /* keeps it on the right side */
  margin-right:918px;    /* <-- add this (tweak 16–64px to taste) */
  padding:6px 10px;
  border-radius:8px;
  border:1px dashed #2a3a59;
  background:#0b1326;
  align-items:center;
  line-height:1.2;
}

/* Gradient/animation applies to the text span */
.rgb-banner .rgb-text{
  background: linear-gradient(45deg,
    #ff6b6b, #ffd93d, #6bff95, #6bb8ff, #b86bff, #ff6bba, #ff6b6b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rgb-scroll var(--rgb-speed, 8s) linear infinite;
  background-size: 400% 400%;
}

@keyframes rgb-scroll {
  0%   { background-position: 0% 50% }
  50%  { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}

/* Info bars (Rebase page panels) */
.infobar {
  display:none;                 /* toggled on by page JS when needed */
  width:100%;
  text-align:center;
  padding:10px 14px;
  border:1px dashed #2a3a59;
  border-radius:10px;
  margin:8px 0 0 0;
  background:#0b1326;
  font-weight:700;
  letter-spacing:0.2px;
}

/* utility */
.hidden { display: none !important; }