/* ===========================================
   catsrun.life profile theme
   Early-internet social profile vibes
   =========================================== */

.crp-body {
  margin: 0;
  padding: 0;
  font-family: "Verdana", "Tahoma", system-ui, sans-serif;
  color: #fdfdfd;
  background:
    repeating-linear-gradient(
      45deg,
      #050713,
      #050713 8px,
      #07091a 8px,
      #07091a 16px
    );
}

/* Page shell */

.crp-page {
  max-width: 980px;
  margin: 8px auto 16px;
  border: 3px solid #33ffcc;
  box-shadow: 0 0 14px rgba(51, 255, 204, 0.6);
  background: #050713;
  padding: 8px;
}

/* Header */

.crp-header {
  border: 2px solid #ff00ff;
  padding: 6px 8px;
  background: linear-gradient(90deg, #150828, #211546, #150828);
  position: relative;
}

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

.crp-username-block {
  display: flex;
  align-items: center;
  gap: 8px;
}

.crp-avatar-frame {
  width: 72px;
  height: 72px;
  border-radius: 3px;
  border: 3px solid #33ffcc;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(51, 255, 204, 0.8);
  background: #000;
}

.crp-avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Initials avatar (for Tyler / Molly) */

.crp-avatar-initial {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.8rem;
  color: #fffb9c;
  background: radial-gradient(circle at 20% 0, #ff00ff, #161b3c);
}

/* Username text */

.crp-username-main {
  font-family: "Courier New", monospace;
  font-size: 1.8rem;
  text-transform: lowercase;
  color: #fffb9c;
  text-shadow:
    2px 2px 0 #000,
    0 0 8px #ff00ff;
}

.crp-username-handle {
  font-size: 0.8rem;
  color: #c7ffe9;
}

/* Status badge + network label */

.crp-status-block {
  text-align: right;
}

.crp-status-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  border: 1px solid #33ff66;
  background: #050f20;
  color: #9dffbf;
  margin-bottom: 4px;
  animation: crp-pulse 1.4s ease-in-out infinite alternate;
}

@keyframes crp-pulse {
  from {
    box-shadow: 0 0 5px rgba(51, 255, 102, 0.6);
  }
  to {
    box-shadow: 0 0 12px rgba(51, 255, 102, 1);
  }
}

.crp-network-label {
  font-size: 0.72rem;
  color: #e0dfff;
}

/* Header nav */

.crp-header-nav {
  margin-top: 6px;
  border-top: 1px dashed #ffb8ff;
  padding-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 0.74rem;
}

.crp-header-nav a {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  padding: 3px 6px;
  border: 1px solid #ff00ff;
  background: #0d0820;
  color: #fffb9c;
}

.crp-header-nav a:hover {
  background: #ff00ff;
  color: #050713;
}

/* Layout */

.crp-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 8px;
  margin-top: 8px;
}

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

/* Sidebar blocks */

.crp-sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.crp-box {
  border: 2px solid #33ffcc;
  background: #050918;
  padding: 6px 7px;
  font-size: 0.78rem;
}

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

/* Basic info */

.crp-basic-info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.crp-basic-info-table th,
.crp-basic-info-table td {
  padding: 2px 3px;
  vertical-align: top;
}

.crp-basic-info-table th {
  text-align: right;
  width: 35%;
  color: #c7ffe9;
}

.crp-basic-info-table td {
  text-align: left;
}

/* “Now playing” style */

.crp-now-playing {
  font-size: 0.76rem;
}

.crp-now-playing strong {
  color: #ffb8ff;
}

/* Links list */

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

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

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

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

/* Main content */

.crp-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.crp-section {
  border: 2px solid #4444ff;
  background: #050b20;
  padding: 7px 8px;
  font-size: 0.8rem;
  box-shadow: 0 0 10px rgba(68, 68, 255, 0.4);
}

.crp-section-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #fffb9c;
  border-bottom: 1px dotted #8888ff;
  padding-bottom: 3px;
  margin-bottom: 4px;
}

/* About text */

.crp-about-text p {
  margin: 0 0 4px;
}

/* Lists */

.crp-list {
  list-style: square;
  padding-left: 18px;
  margin: 2px 0 4px;
}

.crp-list li {
  margin: 1px 0;
}

/* “Stats” table */

.crp-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 4px;
  font-size: 0.78rem;
}

.crp-stats-card {
  border: 1px solid #6666ff;
  padding: 4px 5px;
  background: #05091c;
}

.crp-stats-card h4 {
  margin: 0 0 2px;
  font-size: 0.78rem;
  color: #d7dcff;
}

/* Top friends */

.crp-friends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 4px;
  font-size: 0.76rem;
}

.crp-friend-card {
  border: 1px solid #33ffcc;
  background: #050918;
  text-align: center;
  padding: 4px 3px;
}

.crp-friend-avatar {
  width: 64px;
  height: 64px;
  margin: 0 auto 2px;
  border-radius: 3px;
  overflow: hidden;
  border: 2px solid #ff00ff;
  background: #000;
}

.crp-friend-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.crp-friend-name {
  font-weight: 700;
  color: #fffb9c;
}

/* Guestbook */

.crp-guestbook-entry {
  border-bottom: 1px dashed #4444ff;
  padding-bottom: 4px;
  margin-bottom: 4px;
}

.crp-guestbook-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.76rem;
}

.crp-guestbook-user {
  font-weight: 700;
  color: #c7ffe9;
}

.crp-guestbook-time {
  color: #a6afe6;
  font-size: 0.7rem;
}

.crp-guestbook-message {
  margin-top: 3px;
}

.crp-guestbook-form {
  margin-top: 4px;
  font-size: 0.76rem;
}

.crp-guestbook-form textarea {
  width: 100%;
  min-height: 60px;
  background: #050713;
  color: #fdfdfd;
  border: 1px inset #444;
  font-size: 0.75rem;
}

.crp-guestbook-form button {
  margin-top: 3px;
  font-size: 0.74rem;
  padding: 3px 6px;
  border: 2px outset #ff00ff;
  background: #0c0820;
  color: #fffb9c;
  cursor: pointer;
}

.crp-guestbook-form button:hover {
  background: #ff00ff;
  color: #050713;
}

/* Footer */

.crp-footer {
  margin-top: 8px;
  border-top: 1px dashed #33ffcc;
  padding-top: 4px;
  font-size: 0.72rem;
  text-align: center;
  color: #c7ffe9;
}

/* Profile-specific accent helpers (optional) */

.crp-accent-clack .crp-section,
.crp-accent-clack .crp-box {
  border-color: #33ff66;
}

.crp-accent-klick .crp-section,
.crp-accent-klick .crp-box {
  border-color: #33b0ff;
}

.crp-accent-wash .crp-section,
.crp-accent-wash .crp-box {
  border-color: #ff66cc;
}

.crp-accent-tyler .crp-section,
.crp-accent-tyler .crp-box {
  border-color: #ffcc33;
}

.crp-accent-molly .crp-section,
.crp-accent-molly .crp-box {
  border-color: #ff99ff;
}

/* Links */

a {
  color: #c7ffe9;
}

a:hover {
  color: #ffffff;
}