/* =========================
   catsrun.com – early internet social hub
   ========================== */

.cr-body {
  margin: 0;
  padding: 0;
  font-family: "Verdana", "Tahoma", system-ui, sans-serif;
  color: #f4f4f4;
  background:
    radial-gradient(circle at 10% 0%, rgba(0, 255, 255, 0.18) 0, transparent 55%),
    radial-gradient(circle at 90% 100%, rgba(255, 0, 255, 0.18) 0, transparent 55%),
    #050918;
}

.cr-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px;
}

/* =========================
   Header
   ========================== */

.cr-header {
  border: 3px solid #33ffcc;
  box-shadow: 0 0 12px rgba(51, 255, 204, 0.5);
  background: linear-gradient(90deg, #080c1f, #101538);
  padding: 8px 12px 10px;
  margin-bottom: 10px;
}

.cr-header-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

/* Logo block */

.cr-logo-block {
  display: inline-block;
}

.cr-logo-main {
  font-family: "Courier New", monospace;
  text-transform: lowercase;
  font-size: 2.3rem;
  font-weight: 700;
  color: #fffb9c;
  text-shadow:
    2px 2px 0 #000,
    0 0 8px #ff00ff;
  letter-spacing: 0.06em;
}

.cr-logo-main .cr-dot {
  color: #33ffcc;
}

.cr-logo-sub {
  margin-top: 2px;
  font-size: 0.8rem;
  color: #c7ffe9;
  text-shadow: 1px 1px 0 #000;
}

/* Login box */

.cr-login-box {
  border: 2px solid #ff00ff;
  padding: 6px 8px;
  background: radial-gradient(circle at 0 0, #28123b, #0b0718);
  min-width: 200px;
}

.cr-login-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #ffb8ff;
  margin-bottom: 4px;
}

.cr-login-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cr-login-form input {
  font-size: 0.7rem;
  padding: 3px 4px;
  border: 1px inset #333;
  background: #050712;
  color: #f4f4f4;
}

.cr-login-form button {
  margin-top: 2px;
  font-size: 0.75rem;
  padding: 3px 4px;
  border: 2px outset #ff00ff;
  background: #0a0920;
  color: #ffb8ff;
  cursor: pointer;
}

.cr-login-form button:hover {
  background: #ff00ff;
  color: #050712;
}

.cr-login-links {
  margin-top: 4px;
  font-size: 0.7rem;
}

.cr-login-links a {
  color: #9fffe3;
  text-decoration: underline;
}

/* Header marquee */

.cr-header-marquee-wrap {
  margin-top: 6px;
  border: 2px solid #33ffcc;
  background: #050918;
  font-size: 0.75rem;
  color: #c7ffe9;
}

/* Main nav */

.cr-main-nav {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cr-nav-link {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border: 2px solid #4444ff;
  background: #090f2e;
  color: #d3dcff;
  padding: 4px 8px;
  text-decoration: none;
  box-shadow: 0 0 6px rgba(68, 68, 255, 0.6);
}

.cr-nav-link--active,
.cr-nav-link:hover {
  border-color: #ff00ff;
  background: #1a0930;
  color: #fffb9c;
}

/* =========================
   Layout
   ========================== */

.cr-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 230px;
  gap: 10px;
  margin-top: 10px;
}

@media (max-width: 960px) {
  .cr-layout {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .cr-sidebar-right {
    display: none;
  }
}

@media (max-width: 720px) {
  .cr-layout {
    grid-template-columns: 1fr;
  }

  .cr-sidebar-left {
    order: -1;
  }
}

/* =========================
   Panels (sidebars)
   ========================== */

.cr-sidebar-left,
.cr-sidebar-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cr-panel {
  border: 2px solid #33ffcc;
  background: #050918;
  box-shadow: 0 0 10px rgba(0, 255, 204, 0.25);
  padding: 6px 8px;
  font-size: 0.78rem;
}

.cr-panel-title {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: #fffb9c;
  border-bottom: 1px dashed #33ffcc;
  padding-bottom: 3px;
  margin-bottom: 4px;
}

/* Side links */

.cr-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cr-link-list li {
  margin: 2px 0;
}

.cr-link-list a {
  color: #c7ffe9;
  text-decoration: none;
}

.cr-link-list a:hover {
  text-decoration: underline;
}

/* Status */

.cr-status-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cr-status-list li {
  margin: 2px 0;
}

.cr-status-ok {
  color: #7cffb5;
}

.cr-status-away {
  color: #ffd480;
}

/* Dots */

.cr-dot-online,
.cr-dot-away {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 4px;
}

.cr-dot-online {
  background: #33ff66;
  box-shadow: 0 0 4px #33ff66;
}

.cr-dot-away {
  background: #ffaa33;
  box-shadow: 0 0 4px #ffaa33;
}

/* Banner exchange */

.cr-88x31-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.cr-88x31 {
  width: 88px;
  height: 31px;
  border: 1px solid #999;
  background: linear-gradient(135deg, #111, #444);
  font-size: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.cr-banner-copy {
  margin-top: 4px;
  font-size: 0.7rem;
}

/* Who's online / stats */

.cr-online-list,
.cr-stats-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cr-online-list li,
.cr-stats-list li {
  margin: 2px 0;
}

/* Guestbook */

.cr-guestbook-copy {
  font-size: 0.75rem;
}

/* =========================
   Main modules
   ========================== */

.cr-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Module wrapper */

.cr-module {
  border: 2px solid #4444ff;
  background: #060b20;
  box-shadow: 0 0 12px rgba(68, 68, 255, 0.4);
  padding: 8px 10px;
}

.cr-module-header h1,
.cr-module-header h2 {
  margin: 0 0 4px;
  font-size: 1.3rem;
  text-transform: lowercase;
  text-shadow:
    2px 2px 0 #000,
    0 0 8px #ff00ff;
}

.cr-module-header p {
  margin: 0;
  font-size: 0.8rem;
  color: #d7dcff;
}

/* =========================
   Thread table (feed)
   ========================== */

.cr-thread-table {
  margin-top: 8px;
  border: 1px solid #555;
  font-size: 0.78rem;
}

.cr-thread-table-head,
.cr-thread-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px 140px;
}

.cr-thread-table-head {
  background: linear-gradient(90deg, #12173a, #1b2348);
  border-bottom: 1px solid #555;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #c7ffe9;
}

.cr-thread-col-title,
.cr-thread-col-stats,
.cr-thread-col-last {
  padding: 4px 6px;
}

.cr-thread-row:nth-child(even) {
  background: #05091c;
}

.cr-thread-row:nth-child(odd) {
  background: #090f29;
}

.cr-thread-row--pinned {
  background: #1a1030;
}

.cr-thread-row a {
  color: #fffb9c;
  text-decoration: none;
}

.cr-thread-row a:hover {
  text-decoration: underline;
}

.cr-thread-meta {
  font-size: 0.7rem;
  color: #a6afe6;
}

/* Thread tags */

.cr-tag {
  display: inline-block;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 1px 4px;
  border-radius: 2px;
  margin-right: 4px;
  border: 1px solid #999;
}

.cr-tag--pinned {
  background: #ff00ff;
  border-color: #ffb8ff;
  color: #050712;
}

.cr-tag--hot {
  background: #ff5500;
  border-color: #ffd480;
  color: #050712;
}

.cr-tag--new {
  background: #33ff66;
  border-color: #bxffd0;
  color: #050712;
}

/* Users */

.cr-user {
  font-weight: 700;
  color: #fffb9c;
}

.cr-user--tyler {
  color: #9fffe3;
}

.cr-user--molly {
  color: #ffb8ff;
}

.cr-user--clack {
  color: #8bff8b;
}

.cr-user--klick {
  color: #8bd6ff;
}

.cr-user--wash {
  color: #ff9bdc;
}

/* =========================
   Featured profiles
   ========================== */

.cr-profile-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.cr-profile-card {
  border: 1px solid #6666ff;
  background: #05091c;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 6px;
  padding: 6px;
  align-items: center;
  font-size: 0.78rem;
}

.cr-profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 3px;
  overflow: hidden;
  border: 2px solid #33ffcc;
  box-shadow: 0 0 8px rgba(51, 255, 204, 0.5);
}

.cr-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder avatar */

.cr-profile-avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #151e3d, #272f5d);
  border-color: #ff00ff;
  color: #fffb9c;
  font-weight: 700;
}

/* Profile body */

.cr-profile-body h3 {
  margin: 0;
  font-size: 0.9rem;
  text-transform: none;
  text-shadow: none;
}

.cr-profile-handle {
  margin: 1px 0 3px;
  font-size: 0.7rem;
  color: #c7ffe9;
}

.cr-profile-blurb {
  margin: 0 0 4px;
  font-size: 0.75rem;
  color: #d7dcff;
}

.cr-profile-link {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  border: 1px solid #ff00ff;
  padding: 2px 4px;
  background: #150925;
  color: #fffb9c;
}

.cr-profile-link:hover {
  background: #ff00ff;
  color: #050712;
}

/* Tiny tint variations per profile */

.cr-profile-card--clack {
  border-color: #33ff66;
}

.cr-profile-card--klick {
  border-color: #33b0ff;
}

.cr-profile-card--wash {
  border-color: #ff66cc;
}

.cr-profile-card--tyler {
  border-color: #ffcc33;
}

.cr-profile-card--molly {
  border-color: #ff99ff;
}

/* =========================
   Feline mods strip
   ========================== */

.cr-mod-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  font-size: 0.78rem;
}

.cr-mod-list li {
  margin: 2px 0;
}

.cr-mod-note {
  margin-left: 4px;
  color: #b7bfe9;
}

/* =========================
   FAQ / how this works
   ========================== */

.cr-faq-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  font-size: 0.8rem;
}

.cr-faq-item h3 {
  margin: 0 0 2px;
  font-size: 0.85rem;
  text-transform: none;
  text-shadow: none;
}

/* =========================
   Footer
   ========================== */

.cr-footer {
  margin-top: 12px;
  padding: 8px 10px;
  border: 2px solid #33ffcc;
  background: #050918;
  font-size: 0.75rem;
  text-align: center;
  color: #c7ffe9;
}