:root {
      --font-family-sans-serif: 'Poppins', sans-serif;
      --gold-primary: #f59e0b;
      --gold-secondary: #d97706;
      --gold-light: #fef3c7;
      --gold-glow: rgba(245, 158, 11, 0.28);
      --gold-glow-subtle: rgba(251, 191, 36, 0.15);
      
      --salmon-primary: #ff7675;
      --salmon-hover: #e84393;
      
      --nav-hero-top: #0f172a;
      --nav-hero-mid: #1e1b4b;
      --bg-light-body: #f8fafc;
      --bg-light-card: #ffffff;
      --border-light: #e2e8f0;
      --text-dark: #0f172a;
      --text-muted: #64748b;
    }

    body {
      font-family: 'Poppins', sans-serif;
      background-color: var(--bg-light-body);
      color: var(--text-dark);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    .main-content {
      flex: 1 0 auto;
    }

    .navbar.is-streamcito {
      background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.90) 100%);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(14px);
      transition: all 0.3s ease;
    }

    .brand-logo {
      font-weight: 800;
      font-size: 1.6rem;
      letter-spacing: -0.5px;
      color: #ffffff;
      display: inline-flex;
      align-items: center;
      text-decoration: none;
    }

    
    .navbar-item.brand-logo:hover,
    .navbar-item.brand-logo:focus {
      background-color: transparent !important;
      color: #ffffff !important;
      opacity: 0.95;
    }

    .brand-logo span.dot-net {
      color: var(--gold-primary);
      font-weight: 900;
      margin-left: 0;
      padding-left: 0;
    }

    .brand-logo i {
      color: var(--gold-primary);
      filter: drop-shadow(0 2px 4px var(--gold-glow));
    }

    
    .nav-explorar-btn {
      background-color: var(--salmon-primary) !important;
      color: #ffffff !important;
      font-weight: 600 !important;
      border-radius: 12px !important;
      padding: 0.5rem 1.15rem !important;
      transition: all 0.25s ease !important;
      display: inline-flex !important;
      align-items: center !important;
      border: none !important;
      height: 40px !important;
    }

    .nav-explorar-btn:hover {
      background-color: var(--salmon-hover) !important;
      color: #ffffff !important;
      box-shadow: 0 4px 14px rgba(232, 67, 147, 0.35) !important;
    }

    
    .hero-banner-image {
      position: relative;
      background: linear-gradient(180deg, rgba(15, 23, 42, 0.94) 0%, rgba(30, 27, 75, 0.90) 100%),
                  url('https://images.unsplash.com/photo-1542751371-adc38448a05e?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
      padding: 6.5rem 1.5rem 7.5rem 1.5rem;
      text-align: center;
      color: #ffffff;
      overflow: hidden;
    }

    
    .custom-shape-divider-bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      overflow: hidden;
      line-height: 0;
    }

    .custom-shape-divider-bottom svg {
      position: relative;
      display: block;
      width: calc(100% + 1.3px);
      height: 55px;
    }

    .custom-shape-divider-bottom .shape-fill {
      fill: var(--bg-light-body);
    }

    .hero-banner-image .hero-title {
      color: #ffffff;
      font-weight: 900;
      letter-spacing: 0.5px;
      text-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
      text-transform: uppercase;
    }

    .hero-banner-image .hero-subtitle {
      color: #cbd5e1;
      max-width: 720px;
      margin: 0 auto 2.25rem auto;
      font-size: 1.15rem;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    }

    .top-toolbar-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1rem;
      margin-top: 1rem;
      margin-bottom: 1.75rem;
    }

    .pub-counter-badge {
      background: #ffffff;
      border: 1px solid var(--border-light);
      color: var(--text-dark);
      padding: 0 1.25rem;
      border-radius: 12px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      height: 44px;
      font-size: 0.9rem;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
    }

    .search-control-wrapper {
      position: relative;
      display: inline-flex;
      align-items: center;
    }

    .search-input-aligned {
      height: 44px !important;
      border-radius: 12px !important;
      min-width: 280px;
      font-size: 0.9rem !important;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03) !important;
      border: 1px solid var(--border-light) !important;
      background-color: #ffffff !important;
    }

    .search-input-aligned:focus {
      border-color: var(--gold-primary) !important;
      box-shadow: 0 0 12px var(--gold-glow) !important;
    }

    .page-loader {
      align-items: center;
      background: rgba(15, 23, 42, 0.94);
      display: flex;
      inset: 0;
      justify-content: center;
      opacity: 1;
      position: fixed;
      transition: opacity 0.2s ease, visibility 0.2s ease;
      visibility: visible;
      z-index: 9999;
    }

    .page-loader.is-hidden {
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
    }

    .loader {
      --color-1: #fff;
      --color-2: #ff3d00;
      --size: 1px;
      width: calc(48 * var(--size));
      height: calc(48 * var(--size));
      border: calc(3 * var(--size)) solid var(--color-1);
      border-radius: 50%;
      box-sizing: border-box;
      display: inline-block;
      position: relative;
      animation: rotation 1s linear infinite;
    }

    .loader::after {
      content: '';
      box-sizing: border-box;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: calc(40 * var(--size));
      height: calc(40 * var(--size));
      border-radius: 50%;
      border: calc(3 * var(--size)) solid;
      border-color: var(--color-2) transparent;
    }

    @keyframes rotation {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    .streamer-box-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 1.75rem;
      width: 100%;
    }

    .streamer-box {
      background: var(--bg-light-card);
      border: 1px solid var(--border-light);
      border-radius: 20px;
      padding: 1.75rem;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03);
    }

    .streamer-box:hover {
      transform: translateY(-6px);
      border-color: var(--gold-primary);
      box-shadow: 0 16px 32px -6px var(--gold-glow), 0 0 16px var(--gold-glow-subtle);
    }

    .streamer-box::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, var(--gold-primary), var(--gold-secondary));
      opacity: 0.7;
      transition: opacity 0.3s ease;
    }

    .streamer-box:hover::before {
      opacity: 1;
    }

    .streamer-avatar-wrapper {
      position: relative;
      width: 90px;
      height: 90px;
      margin: 0 auto 1.25rem auto;
    }

    .streamer-avatar {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      object-fit: cover;
      border: 4px solid #f1f5f9;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
      transition: border-color 0.3s ease;
    }

    .streamer-box:hover .streamer-avatar {
      border-color: var(--gold-primary);
    }

    .rank-badge {
      position: absolute;
      top: -2px;
      right: -2px;
      background: linear-gradient(135deg, var(--gold-primary), var(--gold-secondary));
      color: #ffffff;
      font-weight: 700;
      font-size: 0.75rem;
      padding: 0.25rem 0.65rem;
      border-radius: 20px;
      box-shadow: 0 3px 8px rgba(217, 119, 6, 0.3);
    }

    .category-tag {
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 0.35em 0.85em;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
    }

    .cat-youtube { background: #fee2e2; color: #dc2626; border: 1px solid #fca5a5; }
    .cat-twitch { background: #f3e8ff; color: #7e22ce; border: 1px solid #d8b4fe; }
    .cat-kick { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
    .cat-instagram { background: #fce7f3; color: #db2777; border: 1px solid #fbcfe8; }
    .cat-tiktok { background: #e0f2fe; color: #0284c7; border: 1px solid #bae6fd; }
    .cat-facebook { background: #dbeafe; color: #2563eb; border: 1px solid #bfdbfe; }
    .cat-x { background: #f1f5f9; color: #0f172a; border: 1px solid #cbd5e1; }
    .cat-onlyfans { background: #e0f2fe; color: #0284c7; border: 1px solid #7dd3fc; }

    .streamer-name {
      font-weight: 700;
      font-size: 1.25rem;
      color: var(--text-dark);
      margin-bottom: 0.25rem;
      text-align: center;
    }

    .streamer-desc {
      font-size: 0.85rem;
      color: var(--text-muted);
      text-align: center;
      margin-bottom: 0.85rem;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      min-height: 2.4em;
    }

    .channel-link-btn {
      background-color: #f1f5f9;
      color: #334155;
      border: 1px solid #e2e8f0;
      font-weight: 600;
      border-radius: 12px;
      transition: all 0.25s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 0.6rem 1rem;
      text-decoration: none;
      font-size: 0.875rem;
    }

    .channel-link-btn:hover {
      background-color: var(--gold-primary);
      color: #ffffff;
      border-color: var(--gold-primary);
      box-shadow: 0 4px 12px var(--gold-glow);
    }

    .vote-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      background-color: #f8fafc;
      padding: 0.4rem 0.8rem;
      border-radius: 30px;
      border: 1px solid #e2e8f0;
      margin-top: 1rem;
    }

    .vote-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #64748b;
      cursor: pointer;
      font-size: 0.9rem;
      transition: all 0.2s ease;
      padding: 0.4rem 0.8rem;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .vote-btn.btn-like:hover {
      color: #059669;
      background: #ecfdf5;
      border-color: #10b981;
      transform: translateY(-1px);
    }

    .vote-btn.btn-dislike:hover {
      color: #dc2626;
      background: #fef2f2;
      border-color: #ef4444;
      transform: translateY(-1px);
    }

    .vote-score {
      font-weight: 800;
      font-size: 1rem;
      min-width: 36px;
      text-align: center;
      color: var(--gold-secondary);
    }

    .custom-tabs-container {
      overflow-x: auto;
      padding-bottom: 0.5rem;
      margin-bottom: 1.5rem;
    }

    .custom-tabs {
      display: flex;
      gap: 0.6rem;
      justify-content: center;
      flex-wrap: wrap;
    }

    .tab-item {
      padding: 0.65rem 1.25rem;
      border-radius: 14px;
      background: #ffffff;
      border: 1px solid var(--border-light);
      color: var(--text-muted);
      font-weight: 600;
      font-size: 0.9rem;
      cursor: pointer;
      transition: all 0.25s ease;
      display: flex;
      align-items: center;
      user-select: none;
      box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    }

    .tab-item:hover {
      border-color: var(--gold-primary);
      color: var(--gold-secondary);
      background: var(--gold-light);
    }

    .tab-item.is-active {
      background: linear-gradient(135deg, var(--gold-primary), var(--gold-secondary));
      color: #ffffff;
      font-weight: 700;
      border-color: var(--gold-primary);
      box-shadow: 0 4px 14px var(--gold-glow);
    }

    .tab-item.is-active i {
      color: #ffffff !important;
    }

    .form-card {
      background: var(--bg-light-card);
      border: 1px solid var(--border-light);
      border-radius: 24px;
      padding: 2.5rem;
      max-width: 650px;
      margin: 0 auto;
      box-shadow: 0 20px 40px rgba(15, 23, 42, 0.05);
    }

    .form-card:hover {
      border-color: var(--gold-primary);
      box-shadow: 0 10px 30px var(--gold-glow-subtle);
    }

    .input, .select select {
      background-color: #f8fafc !important;
      border-color: #cbd5e1 !important;
      color: var(--text-dark) !important;
      border-radius: 12px !important;
    }

    .input:focus, .select select:focus {
      border-color: var(--gold-primary) !important;
      box-shadow: 0 0 10px var(--gold-glow) !important;
      background-color: #ffffff !important;
    }

    .label {
      color: var(--text-dark) !important;
      font-weight: 600;
    }

    .btn-gold {
      background: linear-gradient(135deg, var(--gold-primary), var(--gold-secondary));
      color: #ffffff;
      font-weight: 700;
      border: none;
      border-radius: 12px;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.75rem 1.5rem;
    }

    .btn-gold:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px var(--gold-glow);
      color: #ffffff;
    }

    .footer-streamcito {
      background: #ffffff;
      border-top: 1px solid var(--border-light);
      padding: 3.5rem 1.5rem;
      margin-top: 5rem;
    }

    
    .footer-nav-link {
      color: #475569 !important;
      transition: color 0.25s ease, transform 0.25s ease;
      display: inline-flex;
      align-items: center;
      text-decoration: none;
    }

    .footer-nav-link:hover {
      color: var(--gold-primary) !important;
      transform: translateY(-1px);
    }

    .footer-share-button {
      align-items: center;
      background: #f8fafc;
      border: 1px solid var(--border-light);
      border-radius: 999px;
      color: #475569;
      display: inline-flex;
      height: 2.5rem;
      justify-content: center;
      text-decoration: none;
      transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
      width: 2.5rem;
    }

    .footer-share-button:hover,
    .footer-share-button:focus-visible {
      background: var(--gold-primary);
      border-color: var(--gold-primary);
      color: #ffffff;
      transform: translateY(-2px);
    }

    .content-category-filter {
      margin-left: auto;
      max-width: 320px;
    }

    .content-category-filter select {
      border-color: var(--border-light);
      border-radius: 10px;
      color: var(--text-muted);
      font-weight: 600;
    }

    .content-category-tag {
      align-items: center;
      color: #64748b;
      display: inline-flex;
      font-size: 0.75rem;
      font-weight: 700;
      margin-top: 0.55rem;
    }

    @media (max-width: 768px) {
      .content-category-filter {
        margin-left: 0;
        max-width: none;
      }

      .top-toolbar-container > div,
      .search-control-wrapper {
        width: 100%;
      }

      .pub-counter-badge,
      .search-input-aligned {
        justify-content: center;
        min-width: 0;
        width: 100%;
      }
    }

    .avatar-preview-box {
      width: 95px;
      height: 95px;
      border-radius: 50%;
      border: 2px dashed var(--gold-primary);
      margin: 1rem auto;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: #f8fafc;
    }

    .avatar-preview-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .icon-space-right {
      margin-right: 0.55rem;
    }

    .icon-space-left {
      margin-left: 0.55rem;
    }

    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    ::-webkit-scrollbar-track {
      background: #f1f5f9;
    }
    ::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: var(--gold-primary);
    }

    .profile-link-btn {
      align-items: center;
      background: #fffaf0;
      border: 1px solid #fde68a;
      border-radius: 12px;
      color: #92400e;
      display: flex;
      font-size: 0.83rem;
      font-weight: 700;
      justify-content: center;
      min-height: 2.7rem;
      padding: 0.65rem 0.85rem;
      text-decoration: none;
      transition: background 0.2s ease, transform 0.2s ease;
      width: 100%;
    }

    .profile-link-btn:hover,
    .profile-link-btn:focus-visible {
      background: #fef3c7;
      color: #78350f;
      transform: translateY(-1px);
    }

    .comment-total {
      color: #64748b;
      font-size: 0.76rem;
      margin-left: auto;
    }

    .profile-page {
      min-height: 70vh;
    }

    .profile-hero,
    .comments-section,
    .related-section {
      background: #ffffff;
      border: 1px solid var(--border-light);
      border-radius: 24px;
      box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05);
      padding: 2rem;
    }

    .profile-hero {
      align-items: flex-start;
      display: flex;
      gap: 1.75rem;
    }

    .profile-avatar {
      border: 4px solid #fef3c7;
      border-radius: 50%;
      height: 150px;
      object-fit: cover;
      width: 150px;
    }

    .profile-main {
      flex: 1;
      min-width: 0;
    }

    .profile-tags {
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
      margin-bottom: 0.9rem;
    }

    .profile-description {
      color: var(--text-muted);
      font-size: 1.02rem;
      line-height: 1.7;
      max-width: 760px;
    }

    .profile-stats {
      color: #475569;
      display: flex;
      flex-wrap: wrap;
      font-weight: 700;
      gap: 1.25rem;
      margin-top: 1rem;
    }

    .profile-stats i {
      color: var(--gold-primary);
      margin-right: 0.3rem;
    }

    .section-heading {
      align-items: center;
      display: flex;
      justify-content: space-between;
      margin-bottom: 1.25rem;
    }

    .section-heading .title {
      margin-bottom: 0;
    }

    .eyebrow {
      color: var(--gold-secondary);
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      margin-bottom: 0.25rem;
      text-transform: uppercase;
    }

    .comments-count {
      align-items: center;
      background: #fef3c7;
      border-radius: 999px;
      color: #92400e;
      display: inline-flex;
      font-weight: 800;
      justify-content: center;
      min-height: 2.2rem;
      min-width: 2.2rem;
      padding: 0.25rem 0.6rem;
    }

    .comment-form {
      border: 1px solid var(--border-light);
      box-shadow: none;
      margin-bottom: 1.25rem;
    }

    .comment-form .textarea {
      background: #f8fafc;
      border-color: #cbd5e1;
      border-radius: 12px;
      color: var(--text-dark);
    }

    .comment-honeypot {
      height: 1px;
      left: -10000px;
      overflow: hidden;
      position: absolute;
      width: 1px;
    }

    .comments-list {
      display: grid;
      gap: 0.8rem;
    }

    .comment-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      display: flex;
      gap: 0.85rem;
      padding: 1rem;
    }

    .comment-card strong {
      color: var(--text-dark);
      display: block;
    }

    .comment-card time {
      color: #94a3b8;
      display: block;
      font-size: 0.77rem;
      margin: 0.15rem 0 0.4rem;
    }

    .comment-card p {
      color: #475569;
      line-height: 1.55;
      margin: 0;
      white-space: pre-wrap;
    }

    .comment-avatar {
      align-items: center;
      background: linear-gradient(135deg, var(--gold-primary), var(--gold-secondary));
      border-radius: 50%;
      color: #ffffff;
      display: flex;
      flex: 0 0 2.4rem;
      font-weight: 800;
      height: 2.4rem;
      justify-content: center;
    }

    .empty-state {
      color: #64748b;
      padding: 1.25rem;
      text-align: center;
    }

    .empty-state i {
      color: var(--gold-primary);
      font-size: 1.7rem;
      margin-bottom: 0.5rem;
    }

    .related-grid {
      display: grid;
      gap: 0.9rem;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .related-card {
      align-items: center;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      color: var(--text-dark);
      display: flex;
      gap: 0.7rem;
      min-width: 0;
      padding: 0.75rem;
      text-decoration: none;
      transition: border-color 0.2s ease, transform 0.2s ease;
    }

    .related-card:hover,
    .related-card:focus-visible {
      border-color: var(--gold-primary);
      color: var(--text-dark);
      transform: translateY(-2px);
    }

    .related-card img {
      border-radius: 50%;
      height: 2.75rem;
      object-fit: cover;
      width: 2.75rem;
    }

    .related-card div {
      display: grid;
      min-width: 0;
    }

    .related-card strong,
    .related-card span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .related-card span {
      color: #64748b;
      font-size: 0.75rem;
    }

    .related-card > i {
      color: var(--gold-primary);
      margin-left: auto;
    }

    @media (max-width: 768px) {
      .profile-hero,
      .comments-section,
      .related-section {
        padding: 1.25rem;
      }

      .profile-hero {
        align-items: center;
        flex-direction: column;
      }

      .profile-avatar {
        height: 112px;
        width: 112px;
      }

      .profile-main {
        text-align: center;
      }

      .profile-tags,
      .profile-stats {
        justify-content: center;
      }

      .profile-main .buttons {
        justify-content: center;
      }

      .related-grid {
        grid-template-columns: 1fr;
      }
    }

    .profile-page .profile-hero,
    .profile-page .comments-section,
    .profile-page .related-section {
      background: #ffffff !important;
      color: #0f172a !important;
      border-color: #dbe3ee;
      box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
    }

    .profile-page .section-heading {
      border-bottom: 1px solid #e2e8f0;
      gap: 1rem;
      padding-bottom: 1rem;
    }

    .profile-page .section-heading .title,
    .profile-page .comment-form h3 {
      color: #0f172a !important;
      font-weight: 800;
      letter-spacing: -0.02em;
    }

    .profile-page .eyebrow {
      color: #b45309 !important;
    }

    .profile-page .comments-count {
      background: #fff7ed !important;
      border: 1px solid #fed7aa;
      color: #9a3412 !important;
      font-size: 0.9rem;
      min-width: 2.5rem;
    }

    .profile-page .comment-form.box {
      background: #f8fafc !important;
      border: 1px solid #dbe3ee !important;
      border-radius: 18px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045) !important;
      color: #0f172a !important;
      padding: 1.35rem;
    }

    .comment-form-intro {
      align-items: center;
      display: flex;
      gap: 0.75rem;
      margin-bottom: 1.25rem;
    }

    .comment-form-icon {
      align-items: center;
      background: #fff7ed;
      border: 1px solid #fed7aa;
      border-radius: 12px;
      color: #c2410c;
      display: inline-flex;
      flex: 0 0 2.6rem;
      font-size: 1.05rem;
      height: 2.6rem;
      justify-content: center;
    }

    .profile-page .comment-form h3 {
      font-size: 1rem;
      line-height: 1.25;
      margin: 0 0 0.18rem;
    }

    .comment-form-intro p,
    .profile-page .comment-form .help {
      color: #475569 !important;
      font-size: 0.82rem;
      line-height: 1.45;
    }

    .comment-form-intro p {
      margin: 0;
    }

    .profile-page .comment-form .label {
      color: #1e293b !important;
      font-size: 0.9rem;
      font-weight: 700;
      margin-bottom: 0.42rem;
    }

    .profile-page .comment-form .input,
    .profile-page .comment-form .textarea {
      background: #ffffff !important;
      border: 1px solid #94a3b8 !important;
      box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.025) !important;
      color: #0f172a !important;
      font-size: 0.95rem;
    }

    .profile-page .comment-form .textarea {
      line-height: 1.55;
      min-height: 8.25rem;
      resize: vertical;
    }

    .profile-page .comment-form .input::placeholder,
    .profile-page .comment-form .textarea::placeholder {
      color: #64748b !important;
      opacity: 1;
    }

    .profile-page .comment-form .input:focus,
    .profile-page .comment-form .textarea:focus {
      background: #ffffff !important;
      border-color: #f59e0b !important;
      box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2) !important;
      outline: none;
    }

    .profile-page .comment-form .btn-gold {
      box-shadow: 0 4px 12px rgba(217, 119, 6, 0.22);
      min-height: 2.75rem;
    }

    .profile-page .comment-form .btn-gold:focus-visible,
    .profile-page .related-card:focus-visible,
    .profile-page .profile-share-btn:focus-visible {
      outline: 3px solid rgba(245, 158, 11, 0.45);
      outline-offset: 3px;
    }

    .profile-page .comment-card {
      background: #ffffff !important;
      border-color: #dbe3ee;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.035);
    }

    .profile-page .comment-card strong {
      color: #0f172a !important;
      font-weight: 750;
    }

    .profile-page .comment-card time {
      color: #64748b !important;
    }

    .profile-page .comment-card p {
      color: #334155 !important;
    }

    .profile-page .empty-state {
      background: #fffdf8;
      border: 1px dashed #facc6b;
      border-radius: 14px;
      color: #475569 !important;
    }

    .profile-page .empty-state p {
      margin-bottom: 0;
    }

    .profile-page .related-card {
      background: #ffffff !important;
      border-color: #dbe3ee;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.035);
      color: #0f172a !important;
    }

    .profile-page .related-card:hover {
      background: #fffdf8 !important;
      border-color: #f59e0b;
      box-shadow: 0 10px 20px rgba(245, 158, 11, 0.14);
    }

    .profile-page .related-card strong {
      color: #0f172a !important;
      font-weight: 750;
    }

    .profile-page .related-card span {
      color: #475569 !important;
      font-weight: 500;
    }

    @media (max-width: 768px) {
      .profile-page .section-heading {
        align-items: flex-start;
      }

      .profile-page .comment-form.box {
        padding: 1rem;
      }

      .profile-page .comment-form .btn-gold {
        width: 100%;
      }

      .profile-page .comment-card {
        gap: 0.7rem;
        padding: 0.9rem;
      }

      .profile-page .comment-avatar {
        flex-basis: 2.15rem;
        height: 2.15rem;
      }
    }

    .discovery-section {
      background: linear-gradient(180deg, #fffdf8 0%, var(--bg-light-body) 100%);
    }

    .discovery-hero {
      align-items: center;
      background: #ffffff;
      border: 1px solid #fde68a;
      border-radius: 24px;
      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
      display: flex;
      gap: 1.5rem;
      justify-content: space-between;
      margin-bottom: 2.5rem;
      padding: 2rem;
    }

    .discovery-hero .title,
    .discovery-section-heading .title,
    .taxonomy-page .title {
      color: #0f172a !important;
      font-weight: 800;
    }

    .discovery-hero .subtitle,
    .taxonomy-hero p:not(.eyebrow) {
      color: #475569;
      line-height: 1.65;
      margin-bottom: 0;
      max-width: 740px;
    }

    .discovery-section-heading {
      align-items: end;
      display: flex;
      gap: 1rem;
      justify-content: space-between;
      margin-bottom: 1.2rem;
    }

    .discovery-section-heading .title {
      margin-bottom: 0;
    }

    .discovery-inline-link {
      color: #b45309;
      font-size: 0.9rem;
      font-weight: 700;
      text-decoration: none;
    }

    .discovery-inline-link:hover,
    .discovery-inline-link:focus-visible {
      color: #92400e;
      text-decoration: underline;
    }

    .discovery-columns {
      margin-top: -0.5rem;
    }

    .discovery-card {
      background: #ffffff;
      border: 1px solid #dbe3ee;
      border-radius: 18px;
      box-shadow: 0 5px 16px rgba(15, 23, 42, 0.045);
      height: 100%;
      overflow: hidden;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }

    .discovery-card:hover {
      border-color: #f59e0b;
      box-shadow: 0 12px 24px rgba(245, 158, 11, 0.14);
      transform: translateY(-3px);
    }

    .discovery-card .card-content {
      padding: 1rem;
    }

    .discovery-card .media {
      align-items: center;
      margin-bottom: 0.8rem;
    }

    .discovery-card .media-content {
      overflow: hidden;
    }

    .discovery-card .title {
      color: #0f172a !important;
      font-weight: 750;
      margin-bottom: 0.15rem !important;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .discovery-card .subtitle {
      color: #64748b !important;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .discovery-context-tag {
      background: #fff7ed;
      color: #9a3412;
      font-size: 0.66rem;
      font-weight: 800;
    }

    .discovery-card-stats,
    .vote-summary {
      color: #475569;
      display: flex;
      flex-wrap: wrap;
      font-size: 0.75rem;
      font-weight: 650;
      gap: 0.65rem;
    }

    .discovery-card-stats i,
    .vote-summary i {
      color: #d97706;
      margin-right: 0.25rem;
    }

    .discovery-card .card-footer {
      border-top: 1px solid #e2e8f0;
    }

    .discovery-card .card-footer-item {
      color: #b45309;
      font-size: 0.85rem;
      font-weight: 750;
      text-decoration: none;
    }

    .discovery-card .card-footer-item:hover {
      background: #fffaf0;
      color: #92400e;
    }

    .discovery-taxonomy-grid {
      display: grid;
      gap: 0.75rem;
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .taxonomy-link {
      align-items: center;
      background: #ffffff;
      border: 1px solid #dbe3ee;
      border-radius: 14px;
      color: #1e293b;
      display: flex;
      font-size: 0.88rem;
      font-weight: 700;
      gap: 0.55rem;
      min-height: 3.2rem;
      padding: 0.75rem;
      text-decoration: none;
      transition: border-color 0.2s ease, transform 0.2s ease;
    }

    .taxonomy-link:hover,
    .taxonomy-link:focus-visible {
      border-color: #f59e0b;
      color: #92400e;
      transform: translateY(-2px);
    }

    .taxonomy-link > i:last-child {
      color: #94a3b8;
      margin-left: auto;
    }

    .streamer-games,
    .profile-games {
      color: #475569;
      font-size: 0.78rem;
      font-weight: 650;
      margin: 0.25rem 0 0.8rem;
      text-align: center;
    }

    .profile-games {
      text-align: left;
    }

    .profile-social-links {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
      margin-top: 1rem;
    }

    .profile-social-links a {
      background: #f8fafc;
      border: 1px solid #dbe3ee;
      border-radius: 999px;
      color: #334155;
      font-size: 0.78rem;
      font-weight: 700;
      padding: 0.4rem 0.7rem;
      text-decoration: none;
    }

    .profile-social-links a:hover,
    .profile-social-links a:focus-visible {
      border-color: #f59e0b;
      color: #92400e;
    }

    .vote-summary {
      align-items: center;
      background: #fffdf8;
      border: 1px solid #fde68a;
      border-radius: 10px;
      justify-content: space-between;
      margin-bottom: 0.75rem;
      padding: 0.42rem 0.55rem;
    }

    .vote-summary .positive i { color: #059669; }
    .vote-summary .negative i { color: #dc2626; }

    .claim-box {
      background: #ffffff;
      border: 1px solid #dbe3ee;
      border-radius: 18px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
      color: #1e293b;
      padding: 1.1rem 1.25rem;
    }

    .claim-box summary {
      color: #0f172a;
      cursor: pointer;
      font-weight: 800;
    }

    .claim-box summary i { color: #d97706; }
    .claim-form { margin-top: 1.25rem; }
    .claim-form > p { color: #475569; font-size: 0.9rem; margin-bottom: 1rem; }
    .claim-form .input { background: #ffffff !important; border-color: #94a3b8 !important; color: #0f172a !important; }
    .claim-submit { border-color: #f59e0b; color: #92400e; font-weight: 700; }

    .taxonomy-hero {
      background: linear-gradient(135deg, #fff7ed 0%, #ffffff 72%);
      border-bottom: 1px solid #fed7aa;
      padding: 2.25rem 0;
    }

    @media (max-width: 768px) {
      .discovery-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 1.25rem;
      }

      .discovery-hero .btn-gold { width: 100%; }
      .discovery-section-heading { align-items: flex-start; }
      .discovery-inline-link { font-size: 0.78rem; }
      .discovery-taxonomy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .taxonomy-link { font-size: 0.78rem; }
      .profile-games { text-align: center; }
      .profile-social-links { justify-content: center; }
      .claim-box { padding: 1rem; }
    }

/* Community layouts and accessible light components. */
:root { --bulma-text: #334155; --bulma-text-strong: #182338; --bulma-scheme-main: #fff; --bulma-scheme-main-bis: #f8fafc; --bulma-border: #ccd5e2; }
body { overflow-wrap: break-word; }
.title, .label, .section-heading h2, .discovery-section-heading h2 { color: #182338; }
.input, .textarea, .select select { background: #fff; color: #182338; border-color: #bcc9d9; box-shadow: none; }
.input::placeholder, .textarea::placeholder { color: #677589; opacity: 1; }
.input:focus, .textarea:focus, .select select:focus { border-color: #bd5800; box-shadow: 0 0 0 3px #f59e0b26; }
.input[readonly] { background: #f1f5f9; color: #475569; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #b95300; outline-offset: 4px; }
.button { min-height: 42px; font-weight: 600; }
.button.is-light { background: #f0f4f8; color: #27354a; border: 1px solid #d6dfea; }
.button.btn-gold { background: #ef9200; color: #211900; border: 1px solid #ef9200; }
.button.btn-gold:hover { background: #ffae2b; color: #211900; }
.help, .section-copy { color: #526176; line-height: 1.7; }
.eyebrow { color: #a64900; font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-bottom: .6rem; }
.navbar.is-streamcito .navbar-item { color: #f1f5f9; font-size: .9rem; }
.navbar.is-streamcito .navbar-item:hover, .navbar.is-streamcito .navbar-item:focus { background: #26334a; color: #fff; }
.navbar.is-streamcito .navbar-item.nav-access { display: flex; align-items: center; gap: .55rem; padding-left: .55rem; padding-right: .55rem; }
.navbar.is-streamcito .navbar-item.nav-access:hover { background: transparent; }
.navbar .nav-login, .navbar .nav-register { min-height: 38px; border-radius: 9px; font-size: .84rem; font-weight: 700; padding: .45rem .9rem; transition: transform .2s ease, background-color .2s ease, border-color .2s ease; }
.navbar .nav-login { color: #fff; background: transparent; border: 1px solid #7f8da3; }
.navbar .nav-register { color: #211900; background: #f6a11a; border: 1px solid #f6a11a; }
.navbar .nav-login:hover, .navbar .nav-login:focus { color: #fff; background: #31405a; border-color: #b7c2d1; transform: translateY(-1px); }
.navbar .nav-register:hover, .navbar .nav-register:focus { color: #211900; background: #ffb23e; border-color: #ffb23e; transform: translateY(-1px); }
.navbar.is-streamcito .navbar-burger { color: #fff; background: transparent; border: 0; }
.navbar .nav-logout { color: #fff; background: transparent; border: 1px solid #64748b; }
.navbar-brand .brand-logo { font-size: 1.5rem !important; }
.navbar form { margin: 0; }
.directory-heading, .community-heading { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; margin-bottom: 1.6rem; }
.directory-heading .title, .community-heading .title { margin-bottom: .6rem; }
.directory-heading .pub-counter-badge { display: flex; gap: .4rem; flex-shrink: 0; padding: .85rem 1rem; border: 1px solid #e2e8f0; background: #fff; }
.directory-filters { display: grid; grid-template-columns: minmax(360px, 1.7fr) minmax(210px, 1fr) minmax(210px, 1fr); align-items: end; gap: 1.25rem; padding: 1.3rem; border: 1px solid #e0e7ef; border-radius: 16px; background: #fff; box-shadow: 0 8px 28px #142b4510; margin-bottom: 1.2rem; }
.directory-filters .field { margin: 0; min-width: 0; }
.directory-filters .label { font-size: .78rem; margin-bottom: .5rem; }
.directory-filters input, .directory-filters select { width: 100%; height: 46px; font-size: .85rem; }
.directory-filters .icon { color: #63748b; height: 46px; }
.community-main .directory-filters { display: grid !important; grid-template-columns: minmax(330px, 1.65fr) minmax(220px, 1fr) minmax(220px, 1fr) !important; }
.custom-tabs-container { margin: 0 0 1.5rem; width: 100%; }
.custom-tabs { justify-content: flex-start; flex-wrap: wrap; gap: .5rem; }
.custom-tabs .tab-item { font-family: inherit; font-size: .82rem; min-height: 44px; border-radius: 10px; padding: .6rem .95rem; color: #46546a; background: #fff; border: 1px solid #d9e2ee; cursor: pointer; }
.custom-tabs .tab-item.is-active { color: #211900; background: #f6a11a; border-color: #f6a11a; }
#ranking { padding-top: 2rem; padding-bottom: 1rem; scroll-margin-top: 5rem; }
.hero-banner-image { min-height: auto; padding-top: 4rem; padding-bottom: 5rem; }
.streamer-box { border-radius: 18px; border: 1px solid #dde5ee; box-shadow: 0 6px 24px #18334e09; }
.streamer-name { color: #182338; }
.streamer-desc { color: #526176; }
.streamer-box-grid { gap: 1.2rem; }
.community-main { flex: 1; width: 100%; padding: 6.5rem 1.5rem 4rem; max-width: 1200px; }
.community-card { background: #fff; border: 1px solid #dfe6ef; border-radius: 18px; padding: 1.6rem; box-shadow: 0 6px 30px #18334e09; min-width: 0; }
.community-card .title a { color: #182338; }
.community-card a:not(.button):not(.tag):not(.account-list-item) { color: #9f4900; }
.community-heading .section-copy { max-width: 730px; }
.community-heading > .button { flex-shrink: 0; }
.community-page .notification { border-radius: 12px; }
.community-page .notification ul { margin-top: .5rem; }
.community-page .field { margin-bottom: 1.2rem; }
.community-page .label { font-size: .87rem; font-weight: 600; }
.community-page .input, .community-page .select select { height: 46px; }
.community-page .checkbox { color: #334155; line-height: 1.7; }
.community-page input[type=checkbox] { accent-color: #b95800; width: 17px; height: 17px; vertical-align: middle; margin-right: .3rem; }
.community-page .title { line-height: 1.3; }
.auth-card { max-width: 510px; margin: 1rem auto; padding: 2.3rem; }
.password-card { max-width: 960px; margin-left: auto; margin-right: auto; }
#publicar-servidor { max-width: 960px; margin-left: auto; margin-right: auto; }
.comment-form { max-width: 820px; margin-left: auto; margin-right: auto; }
.stats-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card span { color: #526176; font-size: .82rem; }
.stat-card strong { display: block; color: #182338; font-size: 2.3rem; margin-top: .5rem; }
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.account-list-item { display: flex; justify-content: space-between; gap: .75rem; color: #26374d; padding: 1rem 0; border-bottom: 1px solid #e5ebf2; }
.activity-list { max-height: 440px; overflow-y: auto; }
.activity-list li { border-bottom: 1px solid #e5ebf2; padding: .9rem 0; color: #334155; font-size: .9rem; }
.activity-list time { font-size: .75rem; color: #63748b; }
.form-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.server-hero { padding: 1.9rem 2rem; border: 1px solid #e2e8f0; border-radius: 20px; background: linear-gradient(115deg, #ffffff 5%, #fff4e3 100%); box-shadow: 0 10px 32px rgba(30, 41, 59, .06); }
.server-hero .title { margin-bottom: .55rem; }
.server-filters { display: grid; grid-template-columns: minmax(300px, 1.7fr) minmax(220px, 1fr) auto auto; align-items: end; gap: 1rem; padding: 1.25rem 1.35rem; background: #fff; }
.server-filters .field { min-width: 0; margin: 0; }
.server-filters .label { margin-bottom: .5rem; }
.server-filters .control, .server-filters .select, .server-filters .select select { width: 100%; }
.server-filters .input, .server-filters .select select { height: 46px; }
.server-filters .icon { height: 46px; color: #6b7b90; }
.server-filter-submit, .server-filter-reset { min-width: 106px; }
.server-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.3rem; }
.server-card { display: flex; flex-direction: column; align-items: flex-start; }
.server-card .server-description { color: #526176; line-height: 1.7; flex: 1; }
.server-symbol { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; font-size: 1.6rem; color: #a64900; background: #fff1dc; border-radius: 15px; margin-bottom: 1rem; }
.server-votes { border-top: 1px solid #e5ebf2; padding-top: 1rem; width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; justify-content: space-between; font-size: .8rem; color: #526176; }
.server-votes form { display: flex; gap: .5rem; }
.server-detail { max-width: 840px; margin-left: auto; margin-right: auto; }
.server-detail-copy { white-space: normal; line-height: 1.85; color: #334155; margin: 2rem 0; overflow-wrap: anywhere; }
#publicar-servidor { scroll-margin-top: 6rem; }
.admin-nav { display: flex; flex-wrap: wrap; gap: .6rem; }
.admin-nav a { color: #334155; border: 1px solid #d4deea; background: #fff; border-radius: 10px; padding: .7rem 1rem; font-size: .84rem; }
.admin-nav a.is-active { color: #763900; background: #fff0d8; border-color: #e6a648; }
.admin-record { border-bottom: 1px solid #dfe6ef; padding: 1rem 0; }
.admin-record summary { cursor: pointer; color: #182338; display: flex; align-items: center; justify-content: space-between; gap: .8rem; font-weight: 600; }
.admin-record summary::before { content: '+'; color: #a64900; }
.admin-record[open] summary::before { content: '−'; }
.admin-record summary > span:first-child { flex: 1; }
.admin-record[open] { padding-bottom: 1.5rem; }
.permission-grid { border: 1px solid #dfe6ef; border-radius: 12px; padding: 1rem; display: grid; grid-template-columns: repeat(3,1fr); gap: .7rem; }
.moderation-text { background: #f5f7fa; color: #26374d; padding: 1rem; border-radius: 10px; margin-top: 1rem; overflow-wrap: anywhere; }
.empty-state { color: #526176; background: #fff; border: 1px dashed #ccd8e6; border-radius: 16px; padding: 2.25rem 1.5rem; text-align: center; box-shadow: 0 8px 24px rgba(30, 41, 59, .04); }
.pagination-list { flex-wrap: wrap; gap: .25rem; }
.pagination-link.is-current { background: #ab4e00; border-color: #ab4e00; color: #fff; }
.discovery-hero.box { color: #182338; background: #fff; }
.discovery-hero .title { color: #182338; }
.discovery-hero .subtitle { color: #526176; }
@media (max-width: 1023px) {
  .navbar.is-streamcito .navbar-menu { background: #142036; padding: 1rem; border-bottom: 1px solid #334155; }
  .navbar.is-streamcito .navbar-item { padding: .8rem; }
  .navbar-end .button { width: 100%; }
  .navbar.is-streamcito .navbar-item.nav-access { display: grid; grid-template-columns: 1fr 1fr; width: 100%; padding: .5rem 0; }
  .navbar-end form { width: 100%; }
  .directory-filters { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .community-main .directory-filters { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
  .directory-search { grid-column: 1 / -1; }
  .server-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .server-filters { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .server-filter-submit, .server-filter-reset { width: 100%; }
}
@media (max-width: 767px) {
  .community-main { padding: 5.5rem 1rem 2.5rem; }
  .community-heading, .directory-heading { flex-direction: column; align-items: stretch; gap: 1rem; }
  .community-heading .title, .directory-heading .title { font-size: 1.7rem; }
  .directory-heading .pub-counter-badge { width: 100%; justify-content: center; white-space: normal; }
  .directory-filters { grid-template-columns: minmax(0,1fr); padding: 1rem; gap: 1rem; width: 100%; }
  .community-main .directory-filters { grid-template-columns: minmax(0,1fr) !important; }
  .directory-search { grid-column: auto; }
  .directory-filters .select, .directory-filters .control, .directory-filters input { width: 100%; max-width: none; }
  .custom-tabs { flex-wrap: nowrap; overflow-x: auto; padding: .2rem .1rem .75rem; justify-content: flex-start; }
  .custom-tabs .tab-item { flex: 0 0 auto; }
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; }
  .stat-card { padding: 1rem; }
  .stat-card strong { font-size: 1.8rem; }
  .account-grid, .form-grid, .server-grid { grid-template-columns: minmax(0,1fr); }
  .streamer-box-grid { grid-template-columns: minmax(0,1fr); }
  .streamer-box { padding: 1.25rem; }
  .permission-grid { grid-template-columns: 1fr; }
  .community-card, .auth-card { padding: 1.25rem; }
  .navbar.is-streamcito .navbar-item.nav-access { grid-template-columns: 1fr; }
  .server-hero { padding: 1.35rem; }
  .server-filters { display: grid; grid-template-columns: minmax(0,1fr); align-items: stretch; padding: 1rem; }
  .server-filter-submit, .server-filter-reset { width: 100%; }
  .admin-record summary { flex-wrap: wrap; }
  .admin-record .buttons > .button { flex: 1 1 auto; white-space: normal; height: auto; }
  .hero-banner-image { padding: 3rem 1rem 4rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}