@property --angle { syntax:'<angle>'; initial-value:0deg; inherits:false; }

    :root {
      --bg:          #000000;
      --surface:     #0d0d0d;
      --surface-2:   #141414;
      --surface-3:   #1a1a1a;
      --fire-orange: #FF4500;
      --fire-yellow: #FFB800;
      --fire-red:    #CC1100;
      --fire-deep:   #8B1A00;
      --text:        #F0EAE0;
      --text-dim:    #888888;
      --text-muted:  #444444;
      --border:      #1f1f1f;
      --border-hot:  rgba(255,69,0,0.2);
      --nav-h:       56px;
      --safe-bottom: env(safe-area-inset-bottom, 0px);
      --font-d:      'Bebas Neue', Impact, sans-serif;
      --font-b:      'DM Sans', Arial, sans-serif;
      --font-it:     'Playfair Display', Georgia, serif;
      --ease:        cubic-bezier(0.16,1,0.3,1);
      --ease-bounce: cubic-bezier(0.34,1.56,0.64,1);
    }

    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    html { background:#000; height:100%; }
    #app { max-width:480px; margin:0 auto; }

    /* ============================================================
       ESCRITORIO — antes de esto, #app quedaba siempre fijo a 480px
       sin importar el ancho real de la pantalla (estilo en linea
       removido de index.html). De aca en adelante: nav lateral fija
       en vez de barra inferior, y el contenido usa el espacio real
       en vez de quedar como un celular flotando en el medio.
       ============================================================ */
    @media (min-width:900px) {
      #app {
        max-width:none; margin:0;
        padding-left:240px;
      }
      #top-strip { left:240px; }
      .bottom-nav {
        position:fixed; left:0; top:0; right:auto; bottom:0;
        width:240px; height:100vh;
        flex-direction:column; align-items:stretch; justify-content:flex-start;
        gap:0.3rem; padding:1.6rem 0.9rem; padding-bottom:1.6rem;
        border-top:none; border-right:0.5px solid rgba(255,255,255,0.12);
        transform:none !important;
      }
      .bottom-nav.hidden { transform:none; }
      .nav-item {
        flex-direction:row; justify-content:flex-start; align-items:center;
        gap:0.85rem; width:100%; padding:0.7rem 0.9rem; min-width:0;
      }
      .nav-item svg { width:22px; height:22px; flex-shrink:0; }
      .nav-item span:not(.nav-dot) {
        font-size:0.8rem; text-transform:none; letter-spacing:0.01em; font-weight:600;
      }
      .page { padding-bottom:1.5rem; }
      /* El contenido de cada pagina no se estira sin limite en monitores anchos */
      .page > * { max-width:720px; margin-left:auto; margin-right:auto; }
      #top-strip > * { max-width:720px; margin-left:auto; margin-right:auto; }

      /* Los botones flotantes (postear admin, Telegram) quedaban anclados al
         borde derecho del VIEWPORT con right:, lejos del contenido real una
         vez que el contenido vive dentro de la sidebar+columna central. Se
         anclan del lado izquierdo (la franja de la sidebar) en su lugar, sin
         mover nada en el HTML — evita que la animacion de ocultar la nav
         (que usa transform) los arrastre por accidente si quedaran anidados
         adentro de .bottom-nav. */
      #new-post-fab { right:auto !important; left:14px !important; bottom:5rem !important; }
      .tg-float { right:auto !important; left:14px !important; bottom:1.5rem !important; }
      .ce-fab { right:auto !important; left:14px !important; bottom:9rem !important; }
      #save-link-fab { right:auto !important; left:14px !important; bottom:13rem !important; }

      /* THREADS/COMMUNITIES — las categorias pasan de pildoras con scroll
         horizontal a una lista fija al costado, permanentemente visible.
         Se hace con CSS Grid (grid-template-areas), que reubica visualmente
         los elementos SIN necesidad de moverlos en el HTML — el orden real
         del DOM no cambia, solo donde se ven. */
      #page-bulge {
        max-width:960px; margin:0 auto;
        display:grid;
        grid-template-columns:200px minmax(0,1fr);
        grid-template-areas:
          "title   title"
          "catside search"
          "catside tabs"
          "catside tags"
          "catside feed";
        gap:0 1.75rem;
      }
      #page-bulge > * { max-width:none !important; margin:0 !important; }
      #page-bulge .page-title-bar { grid-area:title; }
      #page-bulge .comm-cat-pills {
        grid-area:catside; flex-direction:column; align-items:stretch;
        overflow:visible; padding:0.5rem 0 0; gap:0.4rem;
        position:sticky; top:1rem; align-self:start;
      }
      #page-bulge .comm-cat-pill { text-align:left; padding:0.5rem 0.9rem; }
      #page-bulge .comm-search-bar { grid-area:search; margin:0.6rem 0; }
      #page-bulge .thread-sort-tabs { grid-area:tabs; }
      #page-bulge .thread-tags-row { grid-area:tags; }
      #page-bulge #comm-feed {
        grid-area:feed;
        display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
        gap:0.85rem; align-content:start;
      }
      #page-bulge .comm-card { margin:0; }
      #page-bulge .comm-loading { grid-column:1 / -1; }

      /* El panel de un thread abierto (#comm-detail-page) vive AFUERA del
         grid, como overlay independiente (position:fixed) con su propio
         max-width:480px y centrado al viewport completo - el mismo patron
         del bug original del dia, en un elemento distinto que no vimos
         antes. Se corre para alinear con el contenido en vez de quedar
         flotando angosto en el medio de toda la pantalla. */
      #comm-detail-page {
        left:240px !important; transform:none !important;
        max-width:none !important; width:calc(100% - 240px) !important;
      }
      #comm-detail-page .comm-detail-info,
      #comm-detail-page #comm-posts-inner {
        max-width:720px; margin-left:auto; margin-right:auto;
      }

      /* PROFILE — las grillas de Clips/Collections/Coleccion-abierta tenian
         un numero fijo de columnas pensado para celular; con mas ancho
         disponible, suman columnas en vez de solo ensanchar cada una. */
      .clips-grid { grid-template-columns:repeat(4,1fr); }
      .my-cols-grid { grid-template-columns:repeat(3,1fr); }
      .cv-grid { grid-template-columns:repeat(4,1fr); }

      /* PROFILE — de bloque centrado tipo celular a 2 columnas estilo
         Instagram/X desktop: info fija a la izquierda (avatar, nombre, bio,
         stats), tabs+contenido a la derecha. El banner sigue ocupando todo
         el ancho arriba de las dos columnas. */
      #page-more {
        max-width:960px; margin:0 auto !important;
        display:grid;
        grid-template-columns:280px minmax(0,1fr);
        grid-template-areas:
          "banner banner"
          "info   tabs"
          "info   content"
          "footer footer";
        gap:0 2rem;
        align-items:start;
      }
      #page-more > * { max-width:none !important; margin:0 !important; }

      #prof-banner-wrap { grid-area:banner; }
      #prof-avatar-spacer { display:none; }
      /* El avatar deja de estar centrado sobre el banner y pasa a quedar
         arriba de la columna de info, para que se sientan conectados */
      #prof-avatar-overlay { left:24px !important; transform:none !important; }

      #prof-info-block {
        grid-area:info; text-align:left !important; padding-top:3.5rem;
      }
      #prof-info-block .prof-username-wrap,
      #prof-info-block .prof-badge,
      #prof-info-block .prof-bio-area {
        justify-content:flex-start !important; text-align:left !important;
      }

      #prof-ig-stats {
        grid-area:info; justify-content:flex-start !important;
        flex-direction:column; align-items:flex-start; gap:0.5rem;
        margin-top:1.2rem !important;
      }
      #prof-ig-stats .prof-ig-stat { flex-direction:row; gap:0.4rem; align-items:center; }

      #prof-signin-card { grid-area:info; margin-top:1rem !important; }

      #prof-tabs { grid-area:tabs; }
      .prof-tab-pane { grid-area:content; }

      #prof-footer-copyright, #prof-footer-legal {
        grid-area:footer; max-width:720px !important; margin:1.5rem auto 0 !important;
      }
    }
    body {
      font-family: var(--font-b);
      background: #000;
      color: var(--text);
      height: 100%;
      overflow: hidden;
      -webkit-tap-highlight-color: transparent;
      -webkit-font-smoothing: antialiased;
    }

    /* APP SHELL */
    #app { display:flex; flex-direction:column; height:100%; height:100dvh; overflow:hidden; }

    /* AGE GATE */
    #age-gate {
      position:fixed; inset:0; z-index:9999;
      background:#000;
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      text-align:center; padding:2rem;
      transition:opacity 0.6s ease, visibility 0.6s ease;
      opacity:0; visibility:hidden; pointer-events:none;
    }
    #age-gate.visible { opacity:1; visibility:visible; pointer-events:all; }
    #age-gate.hidden { opacity:0; visibility:hidden; pointer-events:none; }
    .ag-logo { font-family:var(--font-d); font-size:clamp(2.8rem,13vw,5rem); color:#fff; letter-spacing:0.04em; line-height:0.9; margin-bottom:0.3rem; position:relative; display:inline-block; padding:0.3rem 0.8rem; }
    .ag-logo::before { content:''; position:absolute; inset:-2px; border-radius:10px; background:conic-gradient(from var(--angle), transparent 70%, var(--fire-orange) 80%, var(--fire-yellow) 87%, var(--fire-orange) 93%, transparent); animation:borderTrace 2.5s linear infinite; z-index:-1; }
    .ag-logo::after { content:''; position:absolute; inset:1px; border-radius:9px; background:#000; z-index:-1; }
    .ag-logo span { display:block; background:linear-gradient(135deg,var(--fire-yellow),var(--fire-orange),var(--fire-red)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:flicker 2.5s ease-in-out infinite; position:relative; z-index:1; }
    @keyframes flicker { 0%,100%{filter:drop-shadow(0 0 20px rgba(255,100,0,0.6));} 40%{filter:drop-shadow(0 0 35px rgba(255,180,0,0.9));} 70%{filter:drop-shadow(0 0 12px rgba(204,17,0,0.8));} }
    .ag-divider { width:60px; height:2px; background:linear-gradient(90deg,transparent,var(--fire-orange),transparent); margin:1rem auto; animation:divpulse 2s ease-in-out infinite; }
    @keyframes divpulse { 0%,100%{width:60px;opacity:0.5;} 50%{width:100px;opacity:1;} }
    .ag-sub { color:var(--text-dim); font-size:0.82rem; letter-spacing:0.15em; text-transform:uppercase; margin-bottom:2.5rem; max-width:260px; line-height:1.6; }
    .ag-enter {
      background:rgba(255,69,0,0.08); border:2px solid var(--fire-orange); color:var(--fire-yellow);
      padding:1rem 2.8rem; font-family:var(--font-d); font-size:1.2rem; letter-spacing:0.12em;
      text-transform:uppercase; cursor:pointer; border-radius:6px; box-shadow:0 0 30px rgba(255,69,0,0.2);
      transition:all 0.3s ease; position:relative; overflow:hidden;
    }
    .ag-enter::before { content:''; position:absolute; inset:-2px; border-radius:8px; background:conic-gradient(from var(--angle),transparent 0deg,var(--fire-red) 30deg,var(--fire-orange) 60deg,var(--fire-yellow) 80deg,transparent 110deg,transparent 360deg); animation:borderTrace 2s linear infinite; z-index:-1; }
    .ag-enter::after { content:''; position:absolute; inset:1px; border-radius:5px; background:#000; z-index:-1; }
    @keyframes borderTrace { to { --angle:360deg; } }
    .ag-enter:active { transform:scale(0.96); }
    .ag-leave { background:transparent; border:1px solid #222; color:#555; padding:0.5rem 1.5rem; margin-top:1rem; cursor:pointer; border-radius:5px; font-size:0.75rem; font-family:var(--font-b); }
    .ag-legal { margin-top:1.5rem; font-size:0.55rem; color:#333; line-height:1.6; max-width:280px; font-family:var(--font-b); }
    .ag-legal a { color:#555; text-decoration:underline; }

    /* TOP BAR */
    /* TOP STRIP — fixed container for header + pills */
    #top-strip {
      display:none;
      position:fixed; top:0; left:0; right:0; z-index:50;
      background:#000;
      will-change:transform;
    }
    #top-strip.hidden { transform:translateY(-100%); }
    #app.visible #top-strip { display:block; }
    .top-bar {
      height:54px;
      display:flex; align-items:center; justify-content:space-between; padding:0 1rem;
      border-bottom:0.5px solid rgba(255,255,255,0.12);
      background:rgba(10,10,10,0.72);
      backdrop-filter:blur(22px) saturate(180%);
      -webkit-backdrop-filter:blur(22px) saturate(180%);
    }
    .top-logo { font-family:var(--font-d); font-size:1.65rem; letter-spacing:0.06em; color:#fff; text-decoration:none; line-height:1; }
    .top-logo span { background:linear-gradient(135deg,var(--fire-yellow),var(--fire-orange),var(--fire-red)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:pulseGlow 2.5s ease-in-out infinite; }
    @keyframes pulseGlow { 0%,100%{filter:drop-shadow(0 0 4px rgba(255,69,0,0.4));} 50%{filter:drop-shadow(0 0 16px rgba(255,184,0,0.95)) drop-shadow(0 0 28px rgba(255,69,0,0.5));} }
    .top-actions { display:flex; gap:0.3rem; align-items:center; }
    .top-btn { background:rgba(255,255,255,0.045); border:none; color:var(--text-dim); width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform 0.3s var(--ease-bounce), background 0.2s var(--ease), color 0.2s var(--ease); }
    .top-btn:active { color:var(--fire-orange); background:rgba(255,69,0,0.12); transform:scale(0.86); }
    .top-btn svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    .pwa-btn { background:rgba(255,69,0,0.1); border:1px solid rgba(255,69,0,0.3); border-radius:7px; padding:0.3rem 0.65rem; color:var(--fire-orange); font-family:var(--font-d); font-size:0.7rem; letter-spacing:0.08em; cursor:pointer; display:none; align-items:center; gap:0.3rem; }
    .pwa-btn.visible { display:flex; }
    /* Admin buttons */
    .admin-login-btn{display:none;background:none;border:1px solid #333;border-radius:6px;padding:0.25rem 0.6rem;color:#555;font-size:0.65rem;font-family:var(--font-b);letter-spacing:0.06em;text-decoration:none;text-transform:uppercase;}
    .admin-logout-btn{display:none;background:rgba(255,69,0,0.1);border:1px solid rgba(255,69,0,0.3);border-radius:6px;padding:0.25rem 0.6rem;color:var(--fire-orange);font-size:0.65rem;font-family:var(--font-b);letter-spacing:0.06em;text-decoration:none;text-transform:uppercase;}
    body:not(.is-admin) #admin-login-btn{display:none;}
    body.show-admin-btn:not(.is-admin) #admin-login-btn{display:flex;align-items:center;}
    body.is-admin #admin-logout-btn{display:flex;align-items:center;}
    /* New post FAB */
    #new-post-fab{display:none;position:fixed;bottom:calc(var(--nav-h) + var(--safe-bottom) + 4rem);right:1rem;width:48px;height:48px;background:linear-gradient(135deg,var(--fire-red),var(--fire-orange));border-radius:50%;border:none;color:#fff;font-size:1.5rem;cursor:pointer;z-index:101;box-shadow:0 4px 20px rgba(255,69,0,0.4);align-items:center;justify-content:center;transition:transform 0.2s var(--ease);}
    #new-post-fab:active{transform:scale(0.9);}
    body.is-admin #new-post-fab{display:flex;}

    /* Boton "Save a Link" - visible para CUALQUIER usuario (a diferencia
       de #new-post-fab que es solo admin), parte de la mecanica tipo
       MyVidster: guardar un video de otra pagina con un toque. */
    #save-link-fab{display:flex;position:fixed;bottom:calc(var(--nav-h) + var(--safe-bottom) + 4rem);right:1rem;width:48px;height:48px;background:linear-gradient(135deg,#1a8fd1,#0d6fb8);border-radius:50%;border:none;color:#fff;cursor:pointer;z-index:101;box-shadow:0 4px 20px rgba(13,111,184,0.4);align-items:center;justify-content:center;transition:transform 0.2s var(--ease);}
    #save-link-fab:active{transform:scale(0.9);}
    body.is-admin #save-link-fab{bottom:calc(var(--nav-h) + var(--safe-bottom) + 12rem);}

    /* PAGES */
    .pages { flex:1; overflow:hidden; position:relative; }
    .page { position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; background:var(--bg); opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity 0.3s var(--ease),transform 0.3s var(--ease); padding-bottom:calc(var(--nav-h) + var(--safe-bottom) + 1rem); scrollbar-width:none; }
    .page::-webkit-scrollbar { display:none; }
    .page.active { opacity:1; pointer-events:all; transform:translateY(0); }

    /* BOTTOM NAV */
    .bottom-nav { height:calc(var(--nav-h) + var(--safe-bottom)); padding-bottom:var(--safe-bottom); background:rgba(10,10,10,0.72); backdrop-filter:blur(22px) saturate(180%); -webkit-backdrop-filter:blur(22px) saturate(180%); border-top:0.5px solid rgba(255,255,255,0.12); display:flex; align-items:flex-start; justify-content:space-around; padding-top:0.5rem; position:fixed; bottom:0; left:0; right:0; z-index:50; transition:transform 0.3s cubic-bezier(0.4,0,0.2,1); }
    .bottom-nav.hidden { transform:translateY(100%); }
    .nav-item { display:flex; flex-direction:column; align-items:center; gap:0.2rem; cursor:pointer; padding:0.32rem 0.6rem; border-radius:14px; transition:transform 0.3s var(--ease-bounce), color 0.25s var(--ease), background 0.25s var(--ease); background:none; border:none; color:#999; position:relative; min-width:44px; }
    .nav-item svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; transition:all 0.25s var(--ease); }
    .nav-item svg.filled { fill:currentColor; stroke:none; }
    .nav-item span:not(.nav-dot) { font-size:0.52rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; line-height:1; color:inherit; }
    .nav-item.active { color:var(--fire-orange); background:rgba(255,69,0,0.1); }
    .nav-item.active svg { filter:drop-shadow(0 0 6px rgba(255,69,0,0.55)); stroke:var(--fire-orange); }
    .nav-item.active svg.filled { filter:drop-shadow(0 0 6px rgba(255,69,0,0.55)); stroke:none; fill:var(--fire-orange); }
    .nav-item:active { transform:scale(0.88); }
    .nav-dot { position:absolute; top:0.2rem; right:0.2rem; width:5px; height:5px; background:var(--fire-orange); border-radius:50%; animation:pulse-dot 2s ease-in-out infinite; }
    @keyframes pulse-dot { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.4);opacity:0.7;} }

    /* ADULT CONTENT BLUR */
    .adult-blur { position:relative; }
    .adult-blur .card-media-wrap img,
    .adult-blur .card-first-photo { filter:blur(18px); transform:scale(1.05); }
    .adult-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.5rem; z-index:5; cursor:pointer; }
    .adult-overlay-icon { font-size:2rem; line-height:1; }
    .adult-overlay-text { font-family:var(--font-d); font-size:0.85rem; color:#fff; letter-spacing:0.08em; text-align:center; text-shadow:0 2px 8px rgba(0,0,0,0.8); padding:0 1rem; }
    .adult-overlay-btn { background:rgba(255,69,0,0.9); border:none; border-radius:20px; padding:0.4rem 1rem; font-family:var(--font-d); font-size:0.75rem; color:#fff; letter-spacing:0.1em; cursor:pointer; margin-top:0.25rem; }

    /* AUTH MODAL */
    .auth-modal { position:fixed; inset:0; z-index:900; display:flex; align-items:flex-end; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.3s var(--ease); }
    .auth-modal.open { opacity:1; pointer-events:all; }
    .auth-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.75); }
    .auth-modal-card { position:relative; z-index:1; width:100%; max-width:480px; background:var(--surface-2); border-radius:20px 20px 0 0; border-top:1px solid var(--border); padding:2rem 1.5rem 3rem; text-align:center; transform:translateY(30px); transition:transform 0.35s var(--ease); }
    .auth-modal.open .auth-modal-card { transform:translateY(0); }
    .auth-modal-icon { font-size:2.5rem; line-height:1; margin-bottom:0.75rem; }
    .auth-modal-title { font-family:var(--font-d); font-size:2rem; color:#fff; letter-spacing:0.06em; margin-bottom:0.4rem; }
    .auth-modal-sub { font-size:0.85rem; color:var(--text-dim); margin-bottom:1.5rem; line-height:1.6; }
    .auth-google-btn { display:flex; align-items:center; justify-content:center; gap:0.75rem; width:100%; padding:0.9rem; background:#fff; border:none; border-radius:12px; font-size:0.95rem; font-weight:600; color:#1a1a1a; cursor:pointer; transition:all 0.2s var(--ease); margin-bottom:0.75rem; }
    .auth-google-btn:active { transform:scale(0.97); }
    .auth-google-btn svg { width:20px; height:20px; flex-shrink:0; }
    .auth-modal-close { background:none; border:none; color:var(--text-muted); font-size:0.8rem; cursor:pointer; margin-top:0.5rem; }

    /* USER PROFILE in More */
    .user-profile-section { padding:1.25rem 1rem; display:flex; align-items:center; gap:0.85rem; border-bottom:1px solid var(--border); }
    .user-avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid var(--fire-orange); flex-shrink:0; }
    .user-avatar-placeholder { width:48px; height:48px; border-radius:50%; background:var(--surface-3); border:2px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .user-avatar-placeholder svg { width:24px; height:24px; fill:none; stroke:var(--text-muted); stroke-width:1.5; }
    .user-info { flex:1; }
    .user-name { font-size:0.9rem; font-weight:600; color:var(--text); }
    .user-email { font-size:0.72rem; color:var(--text-muted); margin-top:0.1rem; }
    .user-login-btn { background:var(--fire-orange); border:none; border-radius:20px; padding:0.45rem 1rem; font-family:var(--font-d); font-size:0.75rem; color:#fff; letter-spacing:0.08em; cursor:pointer; }
    .user-logout-btn { background:none; border:1px solid var(--border); border-radius:20px; padding:0.45rem 1rem; font-size:0.72rem; color:var(--text-muted); cursor:pointer; }

    /* CATEGORY PILLS */
    .feed-tabs { display:flex; background:#000; border-bottom:2px solid var(--border); }
    .feed-tab { flex:1; padding:0.85rem 0; background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-2px; font-family:var(--font-d); font-size:0.82rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-muted); cursor:pointer; transition:color 0.2s var(--ease), border-color 0.2s var(--ease); }
    .feed-tab:active { opacity:0.7; }
    .feed-tab.active { color:var(--fire-orange); border-bottom-color:var(--fire-orange); }
    /* keep old cat-pill for wrestlers/studs pages */
    .cat-pills { display:flex; gap:0.5rem; padding:0.65rem 1rem; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid rgba(255,69,0,0.08); background:#000; }
    .cat-pills::-webkit-scrollbar { display:none; }
    .cat-pill { flex-shrink:0; padding:0.42rem 1rem; border-radius:20px; font-size:0.65rem; font-family:var(--font-d); font-weight:400; letter-spacing:0.12em; text-transform:uppercase; cursor:pointer; border:1px solid #2a2a2a; background:#111; color:#666; transition:all 0.2s var(--ease); white-space:nowrap; }
    .cat-pill:active { transform:scale(0.93); }
    .cat-pill.active { background:linear-gradient(135deg,var(--fire-red),var(--fire-orange)); border-color:transparent; color:#fff; box-shadow:0 0 16px rgba(255,69,0,0.4), 0 2px 8px rgba(0,0,0,0.5); }

    /* ── TUMBLR-STYLE POST CARD ── */
    .post-card {
      background: #1a1a1a;
      border: none;
      border-radius: 0;
      margin: 0 0 30px 0;
      overflow: hidden;
      opacity: 1;
      position: relative;
    }
    .post-card.animate { opacity:0; transform:translateY(20px); transition:opacity 0.5s var(--ease),transform 0.5s var(--ease); }
    .post-card.animate.visible { opacity:1; transform:translateY(0); }

    /* Card header */
    .card-header { display:flex; align-items:center; gap:0.65rem; padding:1rem 1.1rem 0.7rem; }
    .card-avatar {
      width:38px; height:38px; border-radius:50%; flex-shrink:0;
      background:linear-gradient(135deg,var(--fire-deep),var(--fire-red));
      display:flex; align-items:center; justify-content:center;
      font-family:var(--font-d); font-size:0.75rem; letter-spacing:0.05em; color:#fff;
      border:2px solid rgba(255,69,0,0.35);
      box-shadow: 0 0 10px rgba(255,69,0,0.15);
      overflow:hidden;
    }
    .card-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
    .card-meta { flex:1; }
    .card-author { font-size:0.88rem; font-weight:700; color:#fff; text-decoration:none; display:block; letter-spacing:0.01em; }
    .card-author:hover { color:var(--fire-orange); }
    .card-cat-label { font-size:0.62rem; color:var(--fire-orange); letter-spacing:0.14em; text-transform:uppercase; margin-top:0.06rem; opacity:0.8; font-family:var(--font-d); }
    .card-date { font-size:0.6rem; color:var(--text-muted); }

    /* PHOTOS — feed card layouts — edge to edge */
    .card-media-wrap { width:100%; background:#111 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22a%22%20x1%3D%2212.96%22%20y1%3D%2222.25%22%20x2%3D%229.46%22%20y2%3D%22-3.13%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23FF0000%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FF4C00%22/%3E%3C/linearGradient%3E%3ClinearGradient%20id%3D%22b%22%20x1%3D%2212.05%22%20y1%3D%2220.12%22%20x2%3D%2212.64%22%20y2%3D%229.21%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23FFBC47%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FFBC47%22%20stop-opacity%3D%220%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d%3D%22M15.74%2010.51C15.81%207.35%2011%207.78%2012.24%202.29c0%200-3.22%201.27-2.66%205.16.19%201.34-.33%202.34-.33%202.34-.47.1-1.21-.84-.95-2.3%200%200-1.69%201.26-1.69%202.89s.78%203.34.78%203.34c-1.95-.42-1.75-3.05-1.75-3.05S4.46%2012.31%204.46%2015.42c0%202.42%202.73%206.29%207.14%206.29s7.44-3.42%207.44-6.46c0-1.33-.45-3.05-1.43-3.99%200%200%20.13%202.66-1.18%202.53%200%200%201.09-3.47-.05-5.05%200%200-.55%201.71-1.14%201.77z%22%20fill%3D%22url%28%23a%29%22/%3E%3Cpath%20d%3D%22M4.85%2014.1c.13%203.23%202.78%207.09%206.94%207.09s6.07-4.38%206.3-6.94c0%200-.78%201.51-2.53%201.81s1.87-3.32.66-5.28c0%200-1.09%203.42-2.63%203.55-1.54.13-2.85-2.26-2.85-3.55%200%200-.95%202.31-.71%204.15.36%202.79-3.18-1.83-3.18-1.83z%22%20fill%3D%22url%28%23b%29%22/%3E%3C/svg%3E") center/30% no-repeat; display:block; text-decoration:none; cursor:pointer; position:relative; min-height:200px; }
    .card-first-photo { width:100%; display:block; height:auto; object-fit:cover; background:transparent; position:relative; z-index:1; }

    /* Mosaico — 2+ fotos, todas visibles, recortadas cuadradas */
    .card-mosaic-grid { display:grid; grid-template-columns:1fr 1fr; gap:2px; background:#111; }
    .card-mosaic-grid img { width:100%; aspect-ratio:1; object-fit:cover; display:block; background:#111 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22a%22%20x1%3D%2212.96%22%20y1%3D%2222.25%22%20x2%3D%229.46%22%20y2%3D%22-3.13%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23FF0000%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FF4C00%22/%3E%3C/linearGradient%3E%3ClinearGradient%20id%3D%22b%22%20x1%3D%2212.05%22%20y1%3D%2220.12%22%20x2%3D%2212.64%22%20y2%3D%229.21%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23FFBC47%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FFBC47%22%20stop-opacity%3D%220%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d%3D%22M15.74%2010.51C15.81%207.35%2011%207.78%2012.24%202.29c0%200-3.22%201.27-2.66%205.16.19%201.34-.33%202.34-.33%202.34-.47.1-1.21-.84-.95-2.3%200%200-1.69%201.26-1.69%202.89s.78%203.34.78%203.34c-1.95-.42-1.75-3.05-1.75-3.05S4.46%2012.31%204.46%2015.42c0%202.42%202.73%206.29%207.14%206.29s7.44-3.42%207.44-6.46c0-1.33-.45-3.05-1.43-3.99%200%200%20.13%202.66-1.18%202.53%200%200%201.09-3.47-.05-5.05%200%200-.55%201.71-1.14%201.77z%22%20fill%3D%22url%28%23a%29%22/%3E%3Cpath%20d%3D%22M4.85%2014.1c.13%203.23%202.78%207.09%206.94%207.09s6.07-4.38%206.3-6.94c0%200-.78%201.51-2.53%201.81s1.87-3.32.66-5.28c0%200-1.09%203.42-2.63%203.55-1.54.13-2.85-2.26-2.85-3.55%200%200-.95%202.31-.71%204.15.36%202.79-3.18-1.83-3.18-1.83z%22%20fill%3D%22url%28%23b%29%22/%3E%3C/svg%3E") center/45% no-repeat; }

    /* CARD BODY */
    .card-body { padding:1.1rem 1.1rem 0.6rem; }
    .card-title { font-family:var(--font-d); font-size:1.25rem; color:#fff; letter-spacing:0.05em; margin-bottom:0.45rem; text-shadow:0 1px 8px rgba(0,0,0,0.5); }
    .card-title a { color:#fff; text-decoration:none; }
    .card-desc { font-size:0.88rem; color:#aaa; line-height:1.75; overflow:hidden; }
    .card-desc.collapsed { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
    .card-desc .htag { color:#aaa; opacity:1; font-weight:500; }
    .card-read-more { background:none; border:none; color:#999; font-size:0.75rem; cursor:pointer; padding:0.15rem 0; font-family:var(--font-b); display:none; margin-top:0.2rem; }
    .card-read-more.visible { display:inline; }
    .card-read-more:active { color:var(--fire-orange); }

    /* CARD ACTIONS */
    .card-actions { display:flex; align-items:center; padding:0.5rem 0.6rem 1rem; border-top:1px solid rgba(255,255,255,0.07); margin-top:0.5rem; gap:0; }
    .card-act-btn { flex:1; background:rgba(255,255,255,0.045); border:none; display:flex; align-items:center; justify-content:center; gap:0.45rem; padding:0.6rem 0; margin:0 0.15rem; color:#C0C0C0; font-size:0.85rem; font-family:var(--font-b); cursor:pointer; border-radius:18px; transition:transform 0.3s var(--ease-bounce), background 0.2s var(--ease); }
    .card-act-btn:active { background:rgba(255,255,255,0.11); transform:scale(0.86); }
    .card-act-btn svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:all 0.2s; }
    .like-btn:active { color:#ff3b5c; }
    .like-btn.liked { color:#ff3b5c; }
    .like-btn.liked svg { fill:#ff3b5c; stroke:#ff3b5c; }
    .save-btn.saved { color:var(--fire-orange); }
    .save-btn.saved svg { fill:var(--fire-orange); stroke:var(--fire-orange); }
    .comment-toggle-btn:active { color:#5b9cf6; }
    .comment-toggle-btn.open { color:#5b9cf6; }
    .share-btn:active { color:#bbb; }
    .card-spacer { flex:1; }

    /* INLINE COMMENTS */
    .card-comments { border-top:1px solid var(--border); padding:0.6rem 0.9rem 0.7rem; display:none; }
    .card-comments.open { display:block; }
    .comment-item { display:flex; gap:0.5rem; margin-bottom:0.5rem; }
    .comment-av { width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,var(--fire-deep),var(--fire-red)); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-d); font-size:0.5rem; color:#fff; }
    .comment-text { font-size:0.78rem; color:var(--text-dim); line-height:1.45; padding-top:0.15rem; }
    .comment-form { display:flex; gap:0.5rem; align-items:center; margin-top:0.5rem; }
    .comment-field { flex:1; background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:0.45rem 0.85rem; color:var(--text); font-family:var(--font-b); font-size:0.8rem; outline:none; }
    .comment-field:focus { border-color:rgba(255,69,0,0.3); }
    .comment-field::placeholder { color:var(--text-muted); }
    .comment-send { background:none; border:none; color:var(--fire-orange); font-family:var(--font-d); font-size:0.78rem; letter-spacing:0.06em; cursor:pointer; flex-shrink:0; }

    /* ADMIN EDIT */
    .admin-edit-btn{display:none;background:none;border:none;color:#555;width:32px;height:32px;border-radius:6px;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all 0.2s;}
    .admin-edit-btn svg{width:16px;height:16px;}
    .admin-edit-btn:active{color:var(--fire-orange);background:rgba(255,69,0,0.1);}
    body.is-admin .admin-edit-btn{display:flex;}

    /* EDIT MODAL */
    #edit-modal{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,0.88);display:none;align-items:flex-end;justify-content:center;}
    #edit-modal.open{display:flex;}
    .edit-sheet{background:#1a1a1a;border-radius:16px 16px 0 0;width:100%;max-height:85vh;overflow-y:auto;padding:1.25rem 1rem 4rem;}
    .edit-sheet-handle{width:36px;height:4px;background:#333;border-radius:2px;margin:0 auto 1.2rem;}
    .edit-sheet-title{font-family:var(--font-d);font-size:1.1rem;color:var(--text);letter-spacing:0.04em;margin-bottom:1.2rem;}
    .edit-field{margin-bottom:1rem;}
    .edit-label{font-size:0.65rem;color:#555;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:0.35rem;display:block;}
    .edit-input{width:100%;background:#111;border:1px solid #2a2a2a;border-radius:8px;padding:0.65rem 0.75rem;color:var(--text);font-size:0.9rem;font-family:var(--font-b);outline:none;box-sizing:border-box;}
    .edit-input:focus{border-color:var(--fire-orange);}
    .edit-textarea{width:100%;background:#111;border:1px solid #2a2a2a;border-radius:8px;padding:0.65rem 0.75rem;color:var(--text);font-size:0.85rem;font-family:var(--font-b);outline:none;resize:none;min-height:100px;box-sizing:border-box;line-height:1.6;}
    .edit-textarea:focus{border-color:var(--fire-orange);}
    .edit-actions{display:flex;gap:0.75rem;margin-top:1.25rem;}
    .edit-save-btn{flex:1;background:linear-gradient(135deg,var(--fire-red),var(--fire-orange));color:#fff;border:none;border-radius:10px;padding:0.85rem;font-family:var(--font-d);font-size:1rem;letter-spacing:0.06em;cursor:pointer;}
    .edit-save-btn:active{opacity:0.85;}
    .edit-cancel-btn{background:#222;color:#888;border:none;border-radius:10px;padding:0.85rem 1.25rem;font-family:var(--font-b);font-size:0.85rem;cursor:pointer;}
    .edit-saving{opacity:0.6;pointer-events:none;}
    .edit-status{text-align:center;font-size:0.75rem;margin-top:0.6rem;min-height:1rem;}
    /* Toggles */
    .edit-toggles{margin:0.5rem 0 1rem;display:flex;flex-direction:column;gap:0;}
    .edit-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:0.7rem 0;border-bottom:1px solid #222;cursor:pointer;position:relative;}
    .edit-toggle-label{font-size:0.82rem;color:#aaa;}
    .edit-toggle-check{position:absolute;opacity:0;width:0;height:0;}
    .edit-toggle-switch{width:42px;height:24px;background:#333;border-radius:12px;position:relative;flex-shrink:0;transition:background 0.2s;}
    .edit-toggle-switch::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform 0.2s;}
    .edit-toggle-check:checked + .edit-toggle-switch{background:var(--fire-orange);}
    .edit-toggle-check:checked + .edit-toggle-switch::after{transform:translateX(18px);}
    /* Delete */
    .edit-delete-btn{width:100%;background:none;border:1px solid #3a1010;border-radius:10px;padding:0.75rem;color:#883333;font-family:var(--font-b);font-size:0.82rem;cursor:pointer;margin-top:0.75rem;transition:all 0.2s;}
    .edit-delete-btn:active{background:#3a1010;color:#ff5252;}

    /* EMPTY STATE */
    .empty-feed { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4rem 2rem; gap:1rem; text-align:center; }
    .empty-feed svg { width:48px; height:48px; opacity:0.15; fill:none; stroke:var(--fire-orange); stroke-width:1.2; }
    .empty-feed p { color:var(--text-muted); font-size:0.88rem; line-height:1.6; }

    /* PAGE TITLE BAR */
    .page-title-bar { padding:1rem 1rem 0.75rem; border-bottom:1px solid var(--border); background:#000; margin-top:0; display:flex; align-items:center; }
    /* Section new button */
    .section-new-btn{display:none;background:none;border:1px solid rgba(255,69,0,0.3);border-radius:8px;padding:0.3rem 0.65rem;color:var(--fire-orange);font-size:0.7rem;font-family:var(--font-b);letter-spacing:0.06em;cursor:pointer;margin-left:auto;}
    .section-new-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;vertical-align:middle;margin-right:3px;}
    body.is-admin .section-new-btn{display:flex;align-items:center;}
    .page-title-bar{display:flex;align-items:center;flex-wrap:wrap;}
    .page-title-bar .page-title{flex:1;}
    .page-title { font-family:var(--font-d); font-size:2rem; color:#fff; letter-spacing:0.06em; line-height:1; }
    .page-title span { background:linear-gradient(135deg,var(--fire-yellow),var(--fire-orange),var(--fire-red)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    .page-subtitle { font-size:0.62rem; color:var(--text-muted); letter-spacing:0.18em; text-transform:uppercase; margin-top:0.2rem; }

    /* THE RING */
    .wrestlers-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); }
    .wrestler-card { background:#000; cursor:pointer; overflow:hidden; }
    .wrestler-thumb { position:relative; aspect-ratio:3/4; overflow:hidden; }
    .wrestler-thumb img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; transition:transform 0.4s var(--ease); }
    .wrestler-card:active .wrestler-thumb img { transform:scale(1.04); }
    .wrestler-thumb-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,0.9) 0%,transparent 55%); display:flex; flex-direction:column; justify-content:flex-end; padding:0.8rem 0.7rem; }
    .wrestler-name { font-family:var(--font-d); font-size:1.2rem; color:#fff; letter-spacing:0.05em; line-height:1.1; margin-bottom:0.2rem; text-shadow:0 2px 10px rgba(0,0,0,0.8); }
    .wrestler-tag { font-size:0.62rem; color:var(--fire-orange); letter-spacing:0.18em; text-transform:uppercase; font-weight:700; text-shadow:0 1px 6px rgba(0,0,0,0.7); }
    .wrestler-stats { padding:0.5rem 0.7rem; }
    .wstat { font-size:0.68rem; color:var(--text-muted); }
    .ring-empty { padding:3rem 1.5rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:1rem; }
    .ring-empty svg { opacity:0.15; }
    .ring-empty p { color:var(--text-muted); font-size:0.85rem; line-height:1.7; }

    /* BAD BOYS */
    .badboy-card { display:flex; border-bottom:1px solid var(--border); cursor:pointer; }
    .badboy-card:active { background:var(--surface); }
    .mugshot-wrap { flex-shrink:0; width:100px; aspect-ratio:3/4; overflow:hidden; position:relative; }
    .mugshot-wrap img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; filter:grayscale(15%) contrast(1.05); }
    .mugshot-label { position:absolute; bottom:0; left:0; right:0; background:rgba(204,17,0,0.85); padding:0.2rem 0.4rem; text-align:center; font-family:var(--font-d); font-size:0.55rem; letter-spacing:0.15em; color:#fff; }
    .badboy-info { flex:1; padding:0.85rem; display:flex; flex-direction:column; justify-content:space-between; }
    .badboy-name { font-family:var(--font-d); font-size:1.15rem; color:#fff; letter-spacing:0.05em; margin-bottom:0.25rem; }
    .badboy-desc { font-size:0.78rem; color:var(--text-dim); line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
    .badboy-meta { display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:0.5rem; }
    .badboy-tag { font-size:0.6rem; padding:0.18rem 0.45rem; border-radius:4px; background:rgba(255,69,0,0.08); border:1px solid rgba(255,69,0,0.2); color:var(--fire-orange); letter-spacing:0.08em; text-transform:uppercase; font-weight:600; }
    .badboys-empty { padding:3rem 1.5rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:1rem; }
    .badboys-empty svg { opacity:0.15; }
    .badboys-empty p { color:var(--text-muted); font-size:0.85rem; line-height:1.7; }

    /* AUDIO */
    .audio-header { padding:1.5rem 1rem 1rem; text-align:center; border-bottom:1px solid var(--border); }
    .audio-eyebrow { font-size:0.55rem; letter-spacing:0.35em; color:var(--fire-orange); text-transform:uppercase; margin-bottom:0.4rem; opacity:0.7; }
    .audio-main-title { font-family:var(--font-d); font-size:2.4rem; color:#fff; letter-spacing:0.05em; }
    .audio-main-title span { background:linear-gradient(135deg,var(--fire-yellow),var(--fire-orange)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    .audio-sub { font-family:var(--font-it); font-size:0.78rem; color:var(--text-muted); font-style:italic; margin-top:0.3rem; }
    .audio-empty { padding:3rem 1.5rem; text-align:center; color:var(--text-muted); font-size:0.85rem; line-height:1.7; }

    /* MINI PLAYER */
    .mini-player { position:fixed; bottom:calc(var(--nav-h) + var(--safe-bottom) + 8px); left:0.75rem; right:0.75rem; background:rgba(13,13,13,0.97); backdrop-filter:blur(20px); border:1px solid var(--border-hot); border-radius:12px; padding:0.65rem 0.9rem; display:none; align-items:center; gap:0.8rem; z-index:40; }
    .mini-player.visible { display:flex; }
    .mini-player-thumb { width:38px; height:38px; border-radius:6px; overflow:hidden; flex-shrink:0; }
    .mini-player-thumb img { width:100%; height:100%; object-fit:cover; }
    .mini-player-info { flex:1; min-width:0; }
    .mini-player-title { font-family:var(--font-d); font-size:0.82rem; color:#fff; letter-spacing:0.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mini-player-progress { margin-top:0.3rem; height:2px; background:var(--border); border-radius:2px; overflow:hidden; }
    .mini-player-bar { height:100%; width:35%; background:linear-gradient(90deg,var(--fire-red),var(--fire-orange)); border-radius:2px; animation:progressAnim 60s linear infinite; }
    @keyframes progressAnim { to { width:100%; } }
    .mini-play-btn { background:none; border:none; color:var(--fire-orange); cursor:pointer; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .mini-play-btn svg { width:18px; height:18px; fill:currentColor; }
    .mini-close-btn { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:1.1rem; padding:0.2rem; }

    /* SEARCH */
    .search-bar-wrap { padding:0.75rem 1rem; position:sticky; top:0; z-index:10; background:#000; border-bottom:1px solid var(--border); }
    .search-bar { display:flex; align-items:center; gap:0.6rem; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:0.55rem 0.9rem; }
    .search-bar svg { width:15px; height:15px; flex-shrink:0; fill:none; stroke:var(--text-muted); stroke-width:2; stroke-linecap:round; }
    .search-input { flex:1; background:none; border:none; outline:none; color:var(--text); font-family:var(--font-b); font-size:0.88rem; }
    .search-input::placeholder { color:var(--text-muted); }
    .search-tags-title { padding:0.75rem 1rem 0.4rem; font-size:0.58rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--text-muted); }
    .search-tags { display:flex; flex-wrap:wrap; gap:0.45rem; padding:0 1rem 0.8rem; }
    .search-tag { font-size:0.75rem; padding:0.28rem 0.75rem; border-radius:20px; border:1px solid var(--border); color:var(--text-dim); cursor:pointer; transition:all 0.2s; }
    .search-tag:active { background:rgba(255,69,0,0.08); color:var(--fire-orange); border-color:rgba(255,69,0,0.3); }
    .feed-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); }
    .grid-thumb { position:relative; aspect-ratio:1; overflow:hidden; cursor:pointer; background:var(--surface); }
    .grid-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
    .grid-thumb-cat { position:absolute; bottom:3px; left:3px; background:rgba(255,69,0,0.85); color:#fff; font-size:0.4rem; letter-spacing:0.08em; text-transform:uppercase; padding:0.12rem 0.3rem; border-radius:3px; font-weight:700; }

    /* MORE PAGE */
    .profile-header { padding:2rem 1rem 1.5rem; text-align:center; border-bottom:1px solid var(--border); }
    .profile-logo { font-family:var(--font-d); font-size:2.2rem; letter-spacing:0.04em; color:#fff; }
    .profile-logo span { background:linear-gradient(135deg,var(--fire-yellow),var(--fire-orange)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    .profile-tagline { font-family:var(--font-it); font-style:italic; color:var(--text-muted); font-size:0.78rem; margin-top:0.4rem; }
    .menu-section { padding:0.4rem 0; border-bottom:1px solid var(--border); }
    .menu-label { font-size:0.52rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--text-muted); padding:0.75rem 1rem 0.35rem; }
    .menu-item { display:flex; align-items:center; gap:0.85rem; padding:0.8rem 1rem; cursor:pointer; transition:background 0.2s; text-decoration:none; color:var(--text); }
    .menu-item:active { background:var(--surface); }
    .menu-icon { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .menu-icon svg { width:17px; height:17px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    .menu-icon svg.filled { fill:#fff; stroke:none; }
    .menu-icon.orange { background:rgba(255,69,0,0.12); border:1px solid rgba(255,69,0,0.25); }
    .menu-icon.orange svg { stroke:var(--fire-orange); }
    .menu-icon.orange svg.filled { fill:var(--fire-orange); stroke:none; }
    .menu-icon.yellow { background:rgba(255,184,0,0.1); border:1px solid rgba(255,184,0,0.2); }
    .menu-icon.yellow svg { stroke:var(--fire-yellow); }
    .menu-icon.yellow svg.filled { fill:var(--fire-yellow); stroke:none; }
    .menu-icon.gray { background:var(--surface); border:1px solid var(--border); }
    .menu-text { flex:1; }
    .menu-title { font-size:0.86rem; font-weight:600; color:var(--text); }
    .menu-desc { font-size:0.65rem; color:var(--text-muted); margin-top:0.08rem; }
    .menu-chevron svg { width:14px; height:14px; fill:none; stroke:var(--text-muted); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
    .menu-divider { height:1px; background:var(--border); margin:0 1rem; }

    /* PHOTO VIEWER */
    .photo-viewer { position:fixed; inset:0; z-index:500; background:#000; transform:translateY(100%); transition:transform 0.38s var(--ease); }
    .photo-viewer.open { transform:translateY(0); }
    .viewer-topbar { position:absolute; top:0; left:0; right:0; z-index:10; padding:env(safe-area-inset-top,0) 1rem 0.7rem; padding-top:calc(env(safe-area-inset-top,0px) + 0.7rem); display:flex; align-items:center; gap:0.7rem; background:linear-gradient(to bottom,rgba(0,0,0,0.85),transparent); }
    .viewer-back { background:rgba(0,0,0,0.5); border:none; border-radius:50%; width:36px; height:36px; display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer; }
    .viewer-back svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
    .viewer-counter { font-size:0.75rem; color:rgba(255,255,255,0.7); background:rgba(0,0,0,0.5); padding:0.25rem 0.65rem; border-radius:12px; }
    .viewer-photo-wrap { position:absolute; top:0; left:0; right:0; bottom:120px; overflow:hidden; }
    .viewer-photo-track { position:absolute; top:0; left:0; height:100%; display:flex; transition:transform 0.3s var(--ease); will-change:transform; }
    .viewer-slide { width:100vw; min-width:100vw; max-width:100vw; height:100%; flex-shrink:0; flex-grow:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
    .viewer-slide img { width:100%; height:100%; object-fit:contain; display:block; transform-origin:center center; will-change:transform; touch-action:none; user-select:none; }
    .viewer-bottom { position:absolute; bottom:0; left:0; right:0; height:120px; background:linear-gradient(transparent,rgba(0,0,0,0.95)); padding:1rem 1rem calc(env(safe-area-inset-bottom,0px) + 0.75rem); z-index:10; display:flex; flex-direction:column; justify-content:flex-end; }
    .viewer-desc { font-size:0.78rem; color:#aaa; line-height:1.5; margin-bottom:0.5rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .viewer-desc .htag { color:var(--text-muted); }
    .viewer-actions { display:flex; align-items:center; gap:0.5rem; }
    .viewer-act { background:rgba(255,255,255,0.07); border:none; border-radius:8px; display:flex; align-items:center; gap:0.3rem; padding:0.45rem 0.65rem; color:#aaa; font-size:0.75rem; cursor:pointer; }
    .viewer-act svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    .viewer-act.liked { color:#ff3b5c; }
    .viewer-act.liked svg { fill:#ff3b5c; stroke:#ff3b5c; }
    .viewer-spacer { flex:1; }
    .viewer-heart { position:absolute; top:40%; left:50%; transform:translate(-50%,-50%) scale(0); font-size:5rem; opacity:0; pointer-events:none; transition:transform 0.15s ease,opacity 0.5s ease 0.15s; z-index:20; }
    .viewer-heart.pop { transform:translate(-50%,-50%) scale(1.4); opacity:1; }

    /* TELEGRAM FLOAT */
    .tg-float { position:fixed; right:16px; bottom:calc(var(--nav-h) + var(--safe-bottom) + 14px); z-index:100; width:46px; height:46px; border-radius:50%; background:rgba(0,0,0,0.9); backdrop-filter:blur(10px); border:1px solid rgba(255,69,0,0.25); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 20px rgba(0,0,0,0.6); transition:all 0.3s var(--ease); text-decoration:none; }
    .tg-float:active { transform:scale(0.92); }
    .tg-float svg { width:22px; height:22px; fill:none; stroke:var(--fire-orange); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    .tg-float-pulse { position:absolute; inset:-4px; border-radius:50%; border:1.5px solid rgba(255,69,0,0.25); animation:tgPulse 2.5s ease-in-out infinite; }
    @keyframes tgPulse { 0%,100%{transform:scale(1);opacity:0.4;} 50%{transform:scale(1.15);opacity:0;} }

    /* TOAST */
    .toast { position:fixed; bottom:calc(var(--nav-h) + var(--safe-bottom) + 16px); left:50%; transform:translateX(-50%) translateY(10px); background:rgba(30,30,30,0.95); border:1px solid var(--border); backdrop-filter:blur(10px); color:var(--text); font-size:0.72rem; letter-spacing:0.05em; padding:0.5rem 1.1rem; border-radius:20px; opacity:0; transition:all 0.3s var(--ease); z-index:300; white-space:nowrap; pointer-events:none; }
    .toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

    /* REVEAL */
    .reveal { opacity:1; transform:none; }
    .reveal.animate { opacity:0; transform:translateY(14px); transition:opacity 0.5s var(--ease),transform 0.5s var(--ease); }
    .reveal.animate.visible { opacity:1; transform:translateY(0); }
    /* ── LOCKER ROOM ── */
    .lr-hero { padding:1.75rem 1rem 1.25rem; border-bottom:1px solid var(--border); background:linear-gradient(to bottom,#050000,#000); }
    .lr-eyebrow { font-size:0.6rem; letter-spacing:0.4em; color:var(--fire-orange); text-transform:uppercase; margin-bottom:0.4rem; opacity:0.75; }
    .lr-title { font-family:var(--font-d); font-size:clamp(2.8rem,11vw,3.8rem); color:#fff; letter-spacing:0.04em; line-height:0.9; margin-bottom:0.5rem; }
    .lr-title span { background:linear-gradient(135deg,var(--fire-yellow),var(--fire-orange)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    .lr-sub { font-family:var(--font-it); font-style:italic; font-size:0.82rem; color:var(--text-muted); line-height:1.5; }

    .lr-pills { display:flex; gap:0.4rem; padding:0.65rem 1rem; overflow-x:auto; scrollbar-width:none; background:#000; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; }
    .lr-pills::-webkit-scrollbar { display:none; }
    .lr-pill { flex-shrink:0; padding:0.28rem 0.75rem; border-radius:20px; font-size:0.6rem; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--text-dim); transition:all 0.2s; white-space:nowrap; }
    .lr-pill.active { background:var(--fire-orange); border-color:var(--fire-orange); color:#fff; }

    .lr-card { border-bottom:1px solid var(--border); cursor:pointer; opacity:1; }
    .lr-card:active { background:var(--surface); }
    .lr-cover { width:100%; aspect-ratio:16/7; object-fit:cover; display:block; filter:brightness(0.8); }
    .lr-info { padding:0.85rem 1rem 0.8rem; }
    .lr-meta-top { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.45rem; }
    .lr-cat { font-size:0.58rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--fire-orange); font-weight:600; }
    .lr-dot { width:3px; height:3px; border-radius:50%; background:var(--text-muted); }
    .lr-read-time { font-size:0.56rem; color:var(--text-muted); }
    .lr-title-card { font-family:var(--font-it); font-size:1.2rem; font-weight:700; color:#fff; line-height:1.2; margin-bottom:0.4rem; }
    .lr-preview { font-size:0.8rem; color:var(--text-dim); line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:0.65rem; }
    .lr-langs { display:flex; gap:0.35rem; flex-wrap:wrap; margin-bottom:0.65rem; }
    .lr-lang-btn { font-size:0.55rem; font-weight:700; letter-spacing:0.08em; padding:0.2rem 0.5rem; border-radius:4px; border:1px solid var(--border); background:transparent; color:var(--text-muted); cursor:pointer; transition:all 0.2s; }
    .lr-lang-btn.active { background:rgba(255,69,0,0.1); border-color:rgba(255,69,0,0.35); color:var(--fire-orange); }
    .lr-footer { display:flex; align-items:center; gap:0.65rem; }
    .lr-read-btn { background:var(--fire-orange); border:none; border-radius:20px; padding:0.35rem 1.1rem; color:#fff; font-family:var(--font-d); font-size:0.7rem; letter-spacing:0.1em; cursor:pointer; transition:all 0.2s; }
    .lr-read-btn:active { opacity:0.85; transform:scale(0.95); }
    .lr-listen-btn { background:none; border:1px solid var(--border); border-radius:20px; padding:0.3rem 0.75rem; color:var(--text-dim); font-size:0.6rem; cursor:pointer; display:flex; align-items:center; gap:0.3rem; transition:all 0.2s; }
    .lr-listen-btn svg { width:11px; height:11px; fill:currentColor; }
    .lr-listen-btn:active { border-color:var(--fire-orange); color:var(--fire-orange); }
    .lr-likes { display:flex; align-items:center; gap:0.3rem; font-size:0.7rem; color:var(--text-muted); margin-left:auto; }
    .lr-likes svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    .lr-empty { padding:3.5rem 2rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:1rem; }
    .lr-empty svg { opacity:0.15; }
    .lr-empty p { color:var(--text-muted); font-size:0.85rem; line-height:1.7; }

    /* STORY READER */
    .lr-reader { position:fixed; inset:0; z-index:400; background:#000; transform:translateY(100%); transition:transform 0.42s var(--ease); display:flex; flex-direction:column; }
    .lr-reader.open { transform:translateY(0); }
    .lr-reader-topbar { flex-shrink:0; height:48px; background:rgba(0,0,0,0.97); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:0.75rem; padding:0 1rem; }
    .lr-reader-back { background:none; border:none; color:var(--text-dim); width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
    .lr-reader-back svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
    .lr-reader-title-sm { font-family:var(--font-it); font-size:0.82rem; color:var(--text-dim); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .lr-tts-bar { flex-shrink:0; display:flex; align-items:center; gap:0.65rem; padding:0.65rem 1rem; background:var(--surface); border-bottom:1px solid var(--border); }
    .lr-tts-play { width:36px; height:36px; border-radius:50%; background:var(--fire-orange); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:all 0.2s; }
    .lr-tts-play:active { opacity:0.85; transform:scale(0.92); }
    .lr-tts-play svg { width:14px; height:14px; fill:#fff; }
    .lr-tts-info { flex:1; }
    .lr-tts-info strong { display:block; font-size:0.78rem; color:var(--text); font-weight:600; }
    .lr-tts-info span { font-size:0.62rem; color:var(--text-muted); }
    .lr-tts-speed { background:var(--surface-2); border:1px solid var(--border); border-radius:6px; padding:0.2rem 0.5rem; color:var(--text-dim); font-size:0.65rem; cursor:pointer; flex-shrink:0; }
    .lr-reader-scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
    .lr-reader-scroll::-webkit-scrollbar { display:none; }
    .lr-reader-cover { width:100%; max-height:55vw; object-fit:cover; display:block; }
    .lr-reader-body { padding:1.5rem 1.25rem 2rem; max-width:680px; margin:0 auto; }
    .lr-reader-cat { font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--fire-orange); margin-bottom:0.65rem; }
    .lr-reader-title { font-family:var(--font-d); font-size:clamp(1.8rem,7vw,2.4rem); font-weight:700; color:#fff; line-height:1.15; margin-bottom:0.5rem; }
    .lr-reader-meta { display:flex; gap:1rem; font-size:0.62rem; color:var(--text-muted); margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:1px solid var(--border); }
    .lr-chapter-title { font-family:var(--font-d); font-size:1rem; letter-spacing:0.06em; color:var(--fire-orange); margin-bottom:1.25rem; }
    /* Reading typography — comfortable like Kindle/Wattpad */
    .lr-reader-text {
      font-family: Georgia, 'Times New Roman', serif;
      font-size: 1.05rem;
      line-height: 1.9;
      color: #ddd;
      font-style: normal;
      font-weight: 400;
      letter-spacing: 0.01em;
    }
    .lr-reader-text p { margin-bottom: 1.4rem; }
    .lr-reader-text p:first-child::first-letter {
      font-size: 3.2rem;
      font-weight: 700;
      color: var(--fire-orange);
      float: left;
      line-height: 0.75;
      margin: 0.1rem 0.25rem 0 0;
      font-family: Georgia, serif;
    }
    .lr-chapter-nav { padding:1.5rem 1.25rem; display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--border); }
    .lr-chapter-btn { background:none; border:1px solid var(--border); border-radius:8px; padding:0.5rem 1rem; color:var(--text-dim); font-size:0.75rem; cursor:pointer; transition:all 0.2s; }
    .lr-chapter-btn:active { border-color:var(--fire-orange); color:var(--fire-orange); }
    .lr-chapter-btn.primary { background:var(--fire-orange); border-color:var(--fire-orange); color:#fff; }
    .lr-chapter-counter { font-size:0.65rem; color:var(--text-muted); }

    /* Locker Room Comments */
    .lr-comments-section { padding:1.25rem; border-top:1px solid var(--border); }
    .lr-comments-title { font-family:var(--font-d); font-size:0.95rem; letter-spacing:0.06em; color:var(--text-dim); margin-bottom:0.75rem; text-transform:uppercase; }
    .lr-comment-item { display:flex; gap:0.5rem; margin-bottom:0.65rem; align-items:flex-start; }
    .lr-comment-av { width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,var(--fire-deep),var(--fire-red)); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-d); font-size:0.5rem; color:#fff; overflow:hidden; }
    .lr-comment-av img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
    .lr-comment-body { flex:1; }
    .lr-comment-username { font-size:0.68rem; font-weight:600; color:var(--fire-orange); margin-bottom:0.12rem; }
    .lr-comment-text { font-size:0.8rem; color:var(--text-dim); line-height:1.45; }
    .lr-comment-form { display:flex; gap:0.5rem; align-items:center; margin-top:0.75rem; }
    .lr-comment-input { flex:1; background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:0.45rem 0.85rem; color:var(--text); font-family:var(--font-b); font-size:0.8rem; outline:none; }
    .lr-comment-input:focus { border-color:rgba(255,69,0,0.3); }
    .lr-comment-input::placeholder { color:var(--text-muted); }
    .lr-comment-send { background:none; border:none; color:var(--fire-orange); font-family:var(--font-d); font-size:0.78rem; letter-spacing:0.06em; cursor:pointer; flex-shrink:0; }

/* ── POST OVERLAY (Tumblr-style) — feed Home, capa intermedia entre la
   card y el HWViewer. Sin nav, sin header de la app, solo X + gesto
   swipe-down para cerrar. Construido en hw-feed.js (_openPostOverlay). */
body.po-open { overflow:hidden; }

.post-overlay {
  position:fixed; inset:0; z-index:8000;
  background:var(--bg);
  opacity:0; transform:scale(0.97);
  transition:opacity 0.32s var(--ease), transform 0.38s var(--ease-bounce);
  pointer-events:none;
}
.post-overlay.visible { opacity:1; transform:scale(1); pointer-events:auto; }

.po-close {
  position:fixed; top:calc(env(safe-area-inset-top,0px) + 0.7rem); left:0.85rem; z-index:8010;
  width:38px; height:38px; border-radius:50%; border:none;
  background:rgba(20,20,20,0.55); backdrop-filter:blur(14px);
  color:var(--text); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:transform 0.2s var(--ease);
}
.po-close:active { transform:scale(0.88); }

.po-scroll { width:100%; height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; }

.po-media { width:100%; background:#000; }
.po-media .card-media-wrap { min-height:auto; }
.po-media .card-first-photo { width:100%; height:auto; max-height:80vh; object-fit:contain; background:#000; }
.po-media-multi .card-media-wrap { display:block; }
.po-media-multi .card-first-photo { max-height:none; }

.po-body { padding:1.5rem 1.1rem 0.4rem; background:var(--surface); border-radius:24px 24px 0 0; margin-top:-22px; position:relative; z-index:2; box-shadow:0 -10px 28px rgba(0,0,0,0.55); }
.po-body::before { content:''; position:absolute; top:0.55rem; left:50%; transform:translateX(-50%); width:36px; height:4px; border-radius:2px; background:rgba(255,255,255,0.18); }
.po-title { font-family:var(--font-d); font-size:1.5rem; letter-spacing:0.03em; color:var(--text); margin-bottom:0.5rem; }
.po-meta { display:flex; align-items:center; gap:0.5rem; font-size:0.68rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; font-family:var(--font-b); margin-bottom:0.75rem; }
.po-meta .po-cat { color:var(--fire-orange); }
.po-desc { font-size:0.92rem; line-height:1.85; color:var(--text-dim); font-family:var(--font-b); white-space:pre-wrap; }

.po-actions { padding-left:0.6rem; padding-right:0.6rem; background:var(--surface); }

.po-related { padding:1rem 1.1rem calc(2rem + var(--safe-bottom)); border-top:1px solid var(--border); margin-top:0.6rem; background:var(--surface); }
.po-related-title { font-family:var(--font-d); font-size:0.95rem; letter-spacing:0.06em; color:var(--text-dim); margin-bottom:0.7rem; text-transform:uppercase; }
.po-related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0.4rem; }
.po-related-thumb { aspect-ratio:1; border-radius:14px; overflow:hidden; background:var(--surface-2); cursor:pointer; }
.po-related-thumb img { width:100%; height:100%; object-fit:cover; display:block; }