/* ---- 2000s indie-hacker skin (simple CSS, intentionally old-school) ---- */
body {
  margin: 0;
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  color: #111;
  /* faux “tiled” pattern */
  background:
          repeating-linear-gradient(45deg, #f7f2e7 0 8px, #f3ead8 8px 16px),
          linear-gradient(#fff, #f4f0e6);
}

a {
  color: #0033cc;
}
a:visited {
  color: #551a8b;
}
a:hover {
  background: #fffdc7;
}

.wrap {
  width: 760px; /* fixed width = 2000s vibe */
  margin: 22px auto;
  background: #fff;
  border: 1px solid #444;
  box-shadow: 0 1px 0 #fff inset;
}

/* faux “window chrome” */
.titlebar {
  background: linear-gradient(#3b5bd6, #2443b9);
  color: #fff;
  padding: 6px 10px;
  font-weight: bold;
  letter-spacing: 0.3px;
  border-bottom: 1px solid #1a2d7c;
}
.titlebar .small {
  font-weight: normal;
  opacity: 0.9;
  margin-left: 10px;
  font-size: 11px;
}

/* inner border bevel */
.inner {
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  padding: 10px;
  background: #fbfbfb;
}

.inner-new {
  display: flex;
  flex-flow: row nowrap;
  align-items: start;
  justify-content: flex-start;
  gap: 15px;

  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  padding: 20px;
  background: #fbfbfb;
}
#sidebar {
  flex: 0 0 210px;

  /*flex-basis: 210px;*/
  /*vertical-align: top;*/
}
#main {
  width: 100%;
}

/* “boxed” modules */
.box {
  background: #fff;
  border: 1px solid #666;
  box-shadow: 1px 1px 0 #cfcfcf;
  margin: 0 0 10px 0;
}
.box .hd {
  background: linear-gradient(#efefef, #dcdcdc);
  border-bottom: 1px solid #777;
  padding: 6px 8px;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.6px;
}
.box .bd {
  padding: 8px;
  background: #fff;
}
.box.featured{
  /*border-color: #2b55d4;*/
  /*box-shadow: 0 0 0 2px #b9c8ff, 2px 2px 0 #cfcfcf;*/
  background: #ffffff;
}

/* ADD: stronger header bar for featured module */
.box.featured .hd{
  background: linear-gradient(#fff3a0, #ffd24d);
  border-bottom-color: #8a6b00;
  color: #1a1a1a;
}

/* ADD: faint glow inside the featured module body */
.box.featured .bd{
  background: linear-gradient(#fffef2, #ffffff);
}

/* OPTIONAL ADD: “shine” strip across the featured header */
.box.featured .hd{
  position: relative;
  overflow: hidden;
}

.mono {
  font-family: "Courier New", Courier, monospace;
}
.muted {
  color: #555;
}
.tiny {
  font-size: 11px;
}

/* “status lights” */
.lamp {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 1px solid #222;
  margin-right: 6px;
  vertical-align: middle;
  background: #0c0;
  box-shadow: 0 0 6px rgba(0, 180, 0, 0.6);
}
.lamp.off {
  background: #900;
  box-shadow: 0 0 6px rgba(180, 0, 0, 0.35);
}

.on-air {
  width: 12px;
  height: 12px;
  background-color: #ff0000;
  border-radius: 50%;
  box-shadow: 0 0 8px #ff0000;
  animation: pulse 1.5s ease-in-out infinite;
}

.off-air {
  width: 12px;
  height: 12px;
  background-color: #666666;
  border-radius: 50%;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 8px #ff0000;
  }
  50% {
    opacity: 0.7;
    box-shadow: 0 0 16px #ff0000;
  }
}

/* old-school button */
.btn {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid #222;
  background: linear-gradient(#fefefe, #dedede);
  box-shadow: 0 1px 0 #fff inset;
  text-decoration: none;
  color: #000;
  font-weight: bold;
  margin-right: 6px;
}
.btn:active {
  background: linear-gradient(#dedede, #fefefe);
  box-shadow: 0 1px 0 #bbb inset;
}

/* “sticker” badges */
.badge {
  display: inline-block;
  padding: 2px 6px;
  border: 1px dashed #444;
  background: #fff7a8;
  margin-right: 6px;
  font-weight: bold;
}

/* blink, but controlled (2000s energy without being unreadable) */
.blink {
  animation: blink 1.1s steps(1, end) infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* footer like a webring bar */
.footer {
  border-top: 1px solid #777;
  background: #f1f1f1;
  padding: 8px 10px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* tiny “marquee” strip */
marquee {
  background: #111;
  color: #9cff57;
  padding: 6px 8px;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
}

/* keep the audio element from looking too modern (limited control) */
audio {
  width: 100%;
}