/* ═══════════════════════════════════════════
   Anime247 Users v3 — Front-end CSS
   Usa las variables CSS del theme (--bg, --bg-card, --text, --text-muted, --accent, --border)
   + variables propias de personalización
═══════════════════════════════════════════ */

/* ── Variables propias (defaults; el customizer las sobrescribe) ── */
:root {
    --a247u-vote-bg-light       : rgba(0,0,0,.06);
    --a247u-vote-text-light     : #374151;
    --a247u-vote-up-active-bg-l : #d1fae5;
    --a247u-vote-dn-active-bg-l : #fee2e2;
    --a247u-vote-pct-light      : #111827;
    --a247u-comment-input-bg-l  : #f9fafb;
    --a247u-comment-input-txt-l : #111827;
    --a247u-avatar-btn-bg-light : rgba(0,0,0,.07);
    --a247u-avatar-btn-txt-light: #374151;
    --a247u-cw-thumb-ratio      : 16/9;
}
html[data-theme='dark'] {
    --a247u-vote-bg-light       : rgba(255,255,255,.08);
    --a247u-vote-text-light     : #d1d5db;
    --a247u-vote-up-active-bg-l : #052e16;
    --a247u-vote-dn-active-bg-l : #1f0f0f;
    --a247u-vote-pct-light      : #f1f1f1;
    --a247u-comment-input-bg-l  : #1e1e2b;
    --a247u-comment-input-txt-l : #e4e0f5;
    --a247u-avatar-btn-bg-light : rgba(255,255,255,.08);
    --a247u-avatar-btn-txt-light: #d1d5db;
}

/* ══════════════════════════════════════
   MODAL LOGIN
══════════════════════════════════════ */
.a247u-modal-overlay {
    position:fixed; inset:0;
    background:rgba(0,0,0,.75);
    z-index:99999;
    display:flex; align-items:center; justify-content:center;
    padding:1rem;
}
.a247u-modal {
    background:var(--bg-card,#fff);
    border:1px solid var(--border,rgba(0,0,0,.1));
    border-radius:18px;
    padding:2.5rem 2rem;
    max-width:380px; width:100%;
    text-align:center;
    position:relative;
    color:var(--text,#111);
    box-shadow:0 30px 80px rgba(0,0,0,.3);
}
.a247u-modal__close {
    position:absolute; top:.75rem; right:.75rem;
    background:transparent; border:none;
    color:var(--text-muted,#6b7280); font-size:1.1rem;
    cursor:pointer; line-height:1; transition:color .2s;
}
.a247u-modal__close:hover { color:var(--text,#111); }
.a247u-modal__logo { margin-bottom:1.25rem; }
.a247u-modal__title { font-size:1.4rem; font-weight:700; margin:0 0 .4rem; color:var(--text,#111); }
.a247u-modal__sub   { color:var(--text-muted,#6b7280); font-size:.875rem; margin:0 0 1.5rem; }

.a247u-google-btn {
    display:inline-flex; align-items:center; gap:.65rem;
    background:#fff; color:#1a1a1a;
    padding:.75rem 1.5rem; border-radius:8px;
    font-weight:600; text-decoration:none; font-size:.95rem;
    transition:box-shadow .2s, transform .15s;
    margin-bottom:.75rem; border:1px solid #e5e7eb;
}
.a247u-google-btn:hover { box-shadow:0 4px 20px rgba(0,0,0,.15); transform:translateY(-1px); color:#1a1a1a; }

.a247u-modal__user-info {
    display:flex; flex-direction:column; align-items:center; gap:.6rem;
}
.a247u-modal__user-avatar {
    width:68px; height:68px; border-radius:50%;
    object-fit:cover; border:2px solid var(--accent,#e11d48);
}
.a247u-rank-badge {
    background:var(--accent,#e11d48); color:#fff;
    font-size:.72rem; padding:.2rem .65rem; border-radius:20px; font-weight:600;
}
.a247u-logout-link {
    display:inline-flex; align-items:center; gap:.4rem;
    color:var(--text-muted,#6b7280); font-size:.8rem; text-decoration:none;
    transition:color .2s; margin-top:.25rem;
}
.a247u-logout-link:hover { color:var(--accent,#e11d48); }

/* ══════════════════════════════════════
   TOAST
══════════════════════════════════════ */
.a247u-toast-wrap {
    position:fixed; bottom:1.5rem; right:1.5rem;
    z-index:99998; display:flex; flex-direction:column; gap:.5rem;
    pointer-events:none;
}
.a247u-toast {
    background:var(--bg-card,#fff);
    border:1px solid var(--border,rgba(0,0,0,.08));
    border-left:4px solid var(--accent,#e11d48);
    color:var(--text,#111); padding:.65rem 1rem; border-radius:8px;
    font-size:.875rem; min-width:220px;
    box-shadow:var(--shadow-lg,0 8px 30px rgba(0,0,0,.12));
    opacity:0; transform:translateX(16px);
    transition:all .3s ease; pointer-events:all;
}
.a247u-toast--show   { opacity:1; transform:translateX(0); }
.a247u-toast--error  { border-left-color:#dc2626; }
.a247u-toast--success{ border-left-color:#16a34a; }

/* ══════════════════════════════════════
   VOTOS — barra debajo del nav anterior/siguiente
══════════════════════════════════════ */
.a247u-action-bar {
    display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
    background:var(--bg-card,#fff);
    border:1px solid var(--border,rgba(0,0,0,.08));
    border-radius:12px;
    padding:.65rem 1rem; margin:.75rem 0;
}
.a247u-action-bar__right {
    margin-left:auto; display:flex; align-items:center; gap:.6rem;
}

.a247u-vote-up, .a247u-vote-down {
    display:inline-flex; align-items:center; gap:.4rem;
    background:var(--a247u-vote-bg-light);
    border:1.5px solid var(--border,rgba(0,0,0,.1));
    color:var(--a247u-vote-text-light);
    padding:.45rem .9rem; border-radius:50px;
    cursor:pointer; font-size:.875rem; font-weight:600;
    transition:all .2s; user-select:none;
}
.a247u-vote-up:hover,
.a247u-vote-up.active   { border-color:#22c55e; color:#16a34a; background:var(--a247u-vote-up-active-bg-l); }
.a247u-vote-down:hover,
.a247u-vote-down.active { border-color:#ef4444; color:#dc2626; background:var(--a247u-vote-dn-active-bg-l); }
.a247u-vote-pct-wrap {
    display:flex; flex-direction:column; align-items:center; gap:.05rem; min-width:64px;
}
.a247u-vote-pct   { font-size:1.2rem; font-weight:800; color:var(--a247u-vote-pct-light); line-height:1; }
.a247u-vote-count { font-size:.68rem; color:var(--text-muted,#6b7280); }

/* Botón de descarga */
.a247u-dl-trigger {
    display:inline-flex; align-items:center; gap:.45rem;
    background:var(--a247u-vote-bg-light);
    border:1.5px solid var(--border,rgba(0,0,0,.1));
    color:var(--a247u-vote-text-light);
    padding:.45rem .9rem; border-radius:50px;
    cursor:pointer; font-size:.875rem; font-weight:600;
    transition:all .2s;
}
.a247u-dl-trigger:hover { border-color:var(--accent,#e11d48); color:var(--accent,#e11d48); }
.a247u-dl-count {
    background:var(--border,rgba(0,0,0,.08));
    font-size:.68rem; padding:.1rem .4rem; border-radius:10px;
    color:var(--text-muted,#6b7280);
}

/* ══════════════════════════════════════
   MODAL DESCARGAS
══════════════════════════════════════ */
.a247u-dl-modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.65);
    z-index:99998; display:flex; align-items:center; justify-content:center; padding:1rem;
}
.a247u-dl-modal {
    background:var(--bg-card,#fff);
    border:1px solid var(--border,rgba(0,0,0,.08));
    border-radius:14px; max-width:480px; width:100%;
    box-shadow:var(--shadow-lg,0 16px 48px rgba(0,0,0,.2));
}
.a247u-dl-modal__head {
    display:flex; align-items:center; justify-content:space-between;
    padding:.9rem 1.2rem;
    border-bottom:1px solid var(--border,rgba(0,0,0,.08));
    font-weight:700; font-size:.95rem; color:var(--text,#111);
}
.a247u-dl-modal__head button {
    background:transparent; border:none;
    color:var(--text-muted,#6b7280); font-size:1rem; cursor:pointer; transition:color .2s;
}
.a247u-dl-modal__head button:hover { color:var(--text,#111); }
.a247u-dl-modal-list { padding:.75rem; }
.a247u-dl-modal-item {
    display:flex; align-items:center; gap:.6rem;
    padding:.65rem .75rem; border-radius:8px;
    text-decoration:none; color:var(--text,#111); transition:background .15s;
}
.a247u-dl-modal-item:hover { background:var(--border,rgba(0,0,0,.05)); color:var(--text,#111); }
.a247u-dl-badge  { background:color-mix(in srgb, var(--accent,#e11d48) 15%, transparent); color:var(--accent,#e11d48); font-size:.7rem; padding:.1rem .45rem; border-radius:4px; font-weight:700; }
.a247u-dl-server { font-size:.85rem; font-weight:600; }
.a247u-dl-type   { font-size:.75rem; color:var(--text-muted,#6b7280); }
.a247u-dl-size   { font-size:.72rem; color:var(--text-muted,#6b7280); }
.a247u-dl-arrow  { margin-left:auto; color:var(--text-muted,#6b7280); }

/* ══════════════════════════════════════
   COMENTARIOS
══════════════════════════════════════ */
.a247u-comments-section { margin-top:1.5rem; }
.a247u-comments-section h3 { font-size:1rem; font-weight:700; margin-bottom:.9rem; color:var(--text,#111); }

.a247u-comment-form {
    display:flex; gap:.75rem; margin-bottom:1.25rem; align-items:flex-start;
}
.a247u-comment-input {
    flex:1;
    background:var(--a247u-comment-input-bg-l) !important;
    border:1.5px solid var(--border,rgba(0,0,0,.1)) !important;
    border-radius:10px; padding:.7rem 1rem;
    color:var(--a247u-comment-input-txt-l) !important;
    font-size:.875rem; resize:vertical; min-height:80px;
    font-family:inherit; outline:none; transition:border-color .2s;
}
.a247u-comment-input:focus { border-color:var(--accent,#e11d48) !important; }
.a247u-comment-input::placeholder { color:var(--text-muted,#6b7280) !important; opacity:1 !important; }

.a247u-comment-submit {
    background:var(--accent,#e11d48); color:#fff;
    border:none; border-radius:8px;
    padding:.7rem 1.25rem; cursor:pointer;
    font-size:.875rem; font-weight:600; white-space:nowrap;
    transition:opacity .2s;
}
.a247u-comment-submit:hover   { opacity:.85; }
.a247u-comment-submit:disabled{ opacity:.5; cursor:default; }

.a247u-comment {
    background:var(--bg-card,#fff);
    border:1px solid var(--border,rgba(0,0,0,.07));
    border-radius:10px; padding:1rem; margin-bottom:.6rem;
}
.a247u-comment__head {
    display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.5rem;
}
.a247u-comment__avatar {
    width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0;
}
.a247u-comment__avatar--default {
    width:36px; height:36px; border-radius:50%;
    background:var(--accent,#e11d48); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:.9rem; flex-shrink:0;
}
.a247u-comment__name  { font-weight:600; font-size:.875rem; color:var(--text,#111); }
.a247u-comment__rank  {
    background:color-mix(in srgb, var(--accent,#e11d48) 15%, transparent);
    color:var(--accent,#e11d48);
    font-size:.65rem; padding:.1rem .45rem; border-radius:20px; font-weight:600;
}
.a247u-comment__date  { color:var(--text-muted,#6b7280); font-size:.72rem; margin-left:auto; }
.a247u-comment__body  { font-size:.875rem; line-height:1.6; margin:0 0 .4rem; color:var(--text,#111); }
.a247u-report-btn, .a247u-reported {
    background:transparent; border:none; color:var(--text-muted,#6b7280);
    font-size:.75rem; cursor:pointer; padding:0; transition:color .2s;
}
.a247u-report-btn:hover { color:#dc2626; }
.a247u-load-more {
    display:block; margin:1rem auto;
    background:transparent; border:1px solid var(--border,rgba(0,0,0,.1));
    color:var(--text-muted,#6b7280); padding:.6rem 1.5rem; border-radius:8px;
    cursor:pointer; font-size:.875rem; transition:all .2s;
}
.a247u-load-more:hover { border-color:var(--accent,#e11d48); color:var(--accent,#e11d48); }
.a247u-empty   { color:var(--text-muted,#6b7280); font-size:.875rem; padding:.5rem 0; }
.a247u-loading { color:var(--text-muted,#6b7280); font-size:.875rem; padding:.75rem 0; }

/* ══════════════════════════════════════
   PUNTUACIÓN ANIME (single-anime)
══════════════════════════════════════ */
.a247u-anime-avg-big {
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-card,#fff); border-radius:14px;
    padding:1.5rem; margin-bottom:1rem; gap:.2rem;
    border:1px solid var(--border,rgba(0,0,0,.08));
}
.a247u-anime-avg-big__label { font-size:.75rem; color:var(--text-muted,#6b7280); text-transform:uppercase; letter-spacing:.06em; }
.a247u-anime-avg-big__pct   { font-size:3.2rem; font-weight:800; color:var(--accent,#e11d48); line-height:1; }


/* ── Badge NEW! episodio nuevo para animes seguidos ── */
.mis-item__new-badge {
    display: inline-block;
    margin-top: 5px;
    padding: 2px 8px;
    background: #22c55e;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 20px;
    text-decoration: none;
    letter-spacing: 0.5px;
    animation: mis-badge-pulse 1.8s infinite;
}
.mis-item__new-badge:hover {
    background: #16a34a;
    color: #fff;
}
@keyframes mis-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
    50%       { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}



/* ── Badge "Mis Animes" (reutiliza .a247u-notif-badge) ── */
#mis-animes-badge {
    position: absolute;
    top: 2px;
    right: 2px;
}
/* ══════════════════════════════════════
   CONTINUAR VIENDO — en el home, horizontal
══════════════════════════════════════ */
.a247u-cw-item {
    display:flex; gap:.75rem; align-items:center;
    background:var(--bg-card,#fff);
    border:1px solid var(--border,rgba(0,0,0,.08));
    border-radius:10px; overflow:hidden;
    text-decoration:none; color:var(--text,#111);
    transition:box-shadow .2s, transform .15s;
}
.a247u-cw-item:hover { box-shadow:var(--shadow,0 4px 14px rgba(0,0,0,.08)); transform:translateY(-2px); color:var(--text,#111); }
.a247u-cw-item__thumb {
    width:130px; flex-shrink:0;
    aspect-ratio:16/9; object-fit:cover; display:block;
}
.a247u-cw-item__info { flex:1; min-width:0; padding:.6rem .75rem .6rem 0; }
.a247u-cw-item__title { font-size:.875rem; font-weight:600; color:var(--text,#111); margin-bottom:.2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.a247u-cw-item__sub   { font-size:.75rem; color:var(--text-muted,#6b7280); }
.a247u-cw-list { display:flex; flex-direction:column; gap:.5rem; }

/* ══════════════════════════════════════
   PERFIL
══════════════════════════════════════ */
.a247u-profile { max-width:920px; margin:0 auto; padding:1rem 0; }
.a247u-profile__header {
    display:flex; gap:1.5rem; align-items:flex-start;
    padding:1.5rem 0; margin-bottom:1.25rem;
    border-bottom:1px solid var(--border,rgba(0,0,0,.08));
}
.a247u-profile__avatar-wrap { position:relative; flex-shrink:0; width:100px; }
.a247u-profile__avatar {
    width:100px; height:100px; border-radius:50%;
    object-fit:cover; border:3px solid var(--accent,#e11d48); display:block;
}
.a247u-avatar-fallback {
    width:100px; height:100px; border-radius:50%;
    background:var(--accent,#e11d48); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:2.5rem; font-weight:700;
    border:3px solid var(--accent,#e11d48);
}
.a247u-avatar-upload-btn {
    display:block; margin-top:.5rem; width:100%;
    background:var(--a247u-avatar-btn-bg-light);
    border:1px solid var(--border,rgba(0,0,0,.1));
    color:var(--a247u-avatar-btn-txt-light);
    font-size:.7rem; padding:.3rem .5rem;
    border-radius:6px; cursor:pointer; text-align:center; transition:all .2s;
}
.a247u-avatar-upload-btn:hover { background:var(--bg-card,#fff); color:var(--accent,#e11d48); border-color:var(--accent,#e11d48); }

.a247u-profile__info { flex:1; min-width:0; }
.a247u-profile__name { font-size:1.5rem; font-weight:800; margin:0 0 .3rem; color:var(--text,#111); }
.a247u-profile__rank { font-size:.9rem; color:var(--accent,#e11d48); font-weight:600; margin-bottom:.6rem; }
.a247u-xp-bar {
    background:var(--border,rgba(0,0,0,.08)); border-radius:20px;
    height:8px; margin:.4rem 0 .3rem; overflow:hidden;
}
.a247u-xp-bar__fill { height:100%; background:var(--accent,#e11d48); border-radius:20px; transition:width .6s ease; }
.a247u-xp-label { font-size:.75rem; color:var(--text-muted,#6b7280); display:block; margin-bottom:.6rem; }

/* Stats */
.a247u-profile__stats { display:flex; gap:.75rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.a247u-stat {
    flex:1; min-width:80px;
    background:var(--bg-card,#fff); border:1px solid var(--border,rgba(0,0,0,.08));
    border-radius:10px; padding:.9rem; text-align:center;
}
.a247u-stat__val { display:block; font-size:1.9rem; font-weight:800; color:var(--accent,#e11d48); line-height:1.1; }
.a247u-stat__lbl { font-size:.72rem; color:var(--text-muted,#6b7280); margin-top:.2rem; display:block; }

/* Tabs */
.a247u-profile__tabs { display:flex; gap:.4rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.a247u-tab {
    background:var(--bg-card,#fff); border:1px solid var(--border,rgba(0,0,0,.1));
    color:var(--text-muted,#6b7280); padding:.45rem .9rem; border-radius:8px;
    cursor:pointer; font-size:.82rem; font-weight:600; transition:all .2s;
}
.a247u-tab:hover  { color:var(--text,#111); border-color:var(--text-muted,#6b7280); }
.a247u-tab.active { background:var(--accent,#e11d48); border-color:var(--accent,#e11d48); color:#fff; }
.a247u-tab-content { display:none; }
.a247u-tab-content.active { display:block; }

/* Grid favoritos/later (covers, portrait) */
.a247u-pitem-grid { display:flex; flex-wrap:wrap; gap:.5rem; }
.a247u-pitem {
    width:120px; background:var(--bg-card,#fff);
    border:1px solid var(--border,rgba(0,0,0,.08)); border-radius:8px;
    overflow:hidden; transition:transform .2s, box-shadow .2s;
}
.a247u-pitem:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg,0 8px 24px rgba(0,0,0,.12)); }
.a247u-pitem a { text-decoration:none; color:inherit; display:block; }
.a247u-pitem img { width:100%; aspect-ratio:2/3; object-fit:cover; display:block; }
.a247u-pitem span { font-size:.72rem; display:block; padding:.35rem .5rem; color:var(--text,#111); line-height:1.3; }
/* Botón eliminar en items del perfil */
.a247u-pitem__del {
    width:100%; background:transparent; border:none; border-top:1px solid var(--border,rgba(0,0,0,.08));
    color:var(--text-muted,#6b7280); font-size:.7rem; padding:.3rem; cursor:pointer; transition:all .2s;
}
.a247u-pitem__del:hover { background:#fee2e2; color:#dc2626; }

/* Grid CW (landscape thumbnails) */
.a247u-cw-grid { display:flex; flex-direction:column; gap:.5rem; }
.a247u-cw-grid-item {
    display:flex; gap:.75rem; align-items:center;
    background:var(--bg-card,#fff); border:1px solid var(--border,rgba(0,0,0,.08));
    border-radius:10px; overflow:hidden; transition:box-shadow .2s;
}
.a247u-cw-grid-item:hover { box-shadow:var(--shadow,0 4px 14px rgba(0,0,0,.08)); }
.a247u-cw-grid-item a { display:flex; text-decoration:none; color:inherit; flex:1; gap:.75rem; align-items:center; }
.a247u-cw-grid-item img { width:128px; aspect-ratio:16/9; object-fit:cover; flex-shrink:0; }
.a247u-cw-grid-item__info { padding:.5rem .5rem .5rem 0; min-width:0; flex:1; }
.a247u-cw-grid-item__title { font-size:.85rem; font-weight:600; color:var(--text,#111); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.a247u-cw-grid-item__sub   { font-size:.72rem; color:var(--text-muted,#6b7280); }
.a247u-cw-grid-item__del   {
    flex-shrink:0; background:transparent; border:none; border-left:1px solid var(--border,rgba(0,0,0,.08));
    color:var(--text-muted,#6b7280); padding:.5rem .75rem; cursor:pointer; transition:all .2s; align-self:stretch; display:flex; align-items:center;
}
.a247u-cw-grid-item__del:hover { background:#fee2e2; color:#dc2626; }

/* Logros */
.a247u-achiev {
    display:flex; gap:1rem; align-items:flex-start;
    background:var(--bg-card,#fff); border:1px solid var(--border,rgba(0,0,0,.08));
    border-radius:10px; padding:.9rem; margin-bottom:.5rem;
}
.a247u-achiev__icon { font-size:2rem; flex-shrink:0; line-height:1; }
.a247u-achiev p { margin:.2rem 0 0; color:var(--text-muted,#6b7280); font-size:.8rem; }
.a247u-achiev strong { color:var(--text,#111); }
.a247u-achiev__xp { margin-left:auto; color:var(--accent,#e11d48); font-weight:700; font-size:.85rem; white-space:nowrap; }

/* Retos */
.a247u-chal-group { margin-bottom:1.5rem; }
.a247u-chal-group__title { font-size:.8rem; font-weight:700; color:var(--text-muted,#6b7280); text-transform:uppercase; letter-spacing:.06em; margin:0 0 .75rem; }
.a247u-chal {
    display:flex; gap:.75rem; align-items:center;
    background:var(--bg-card,#fff); border:1px solid var(--border,rgba(0,0,0,.08));
    border-radius:10px; padding:.85rem; margin-bottom:.5rem; transition:border-color .2s;
}
.a247u-chal--done { border-color:color-mix(in srgb, #22c55e 40%, transparent); }
.a247u-chal__icon { font-size:1.6rem; flex-shrink:0; line-height:1; }
.a247u-chal__info { flex:1; min-width:0; }
.a247u-chal__info strong { font-size:.9rem; color:var(--text,#111); display:block; margin-bottom:.2rem; }
.a247u-chal__info p { font-size:.78rem; color:var(--text-muted,#6b7280); margin:0 0 .5rem; }
.a247u-chal__bar { background:var(--border,rgba(0,0,0,.08)); border-radius:20px; height:5px; overflow:hidden; margin-bottom:.25rem; }
.a247u-chal__fill { height:100%; background:var(--accent,#e11d48); border-radius:20px; transition:width .4s; }
.a247u-chal--done .a247u-chal__fill { background:#22c55e; }
.a247u-chal__prog { font-size:.7rem; color:var(--text-muted,#6b7280); }
.a247u-chal__xp { color:var(--accent,#e11d48); font-weight:700; font-size:.82rem; white-space:nowrap; flex-shrink:0; }

/* ══════════════════════════════════════
   HEADER NAV USER BUTTON
══════════════════════════════════════ */
.a247u-nav-user img { vertical-align:middle; }

/* ══════════════════════════════════════
   CROP MODAL
══════════════════════════════════════ */
.a247u-crop-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.8);
    z-index:100000; display:flex; align-items:center; justify-content:center; padding:1rem;
}
.a247u-crop-modal {
    background:var(--bg-card,#fff); border-radius:14px;
    padding:1.5rem; max-width:460px; width:100%;
    box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.a247u-crop-modal h3 { font-size:1rem; font-weight:700; margin:0 0 1rem; color:var(--text,#111); }
.a247u-crop-canvas-wrap {
    width:100%; aspect-ratio:1/1; position:relative;
    overflow:hidden; border-radius:50%; border:2px solid var(--accent,#e11d48);
    background:#111; cursor:crosshair;
}
#a247u-crop-canvas { display:block; width:100%; height:100%; }
.a247u-crop-actions { display:flex; gap:.6rem; margin-top:1rem; }
.a247u-crop-accept {
    flex:1; background:var(--accent,#e11d48); color:#fff;
    border:none; border-radius:8px; padding:.65rem; cursor:pointer;
    font-size:.9rem; font-weight:600; transition:opacity .2s;
}
.a247u-crop-accept:hover { opacity:.85; }
.a247u-crop-cancel {
    background:var(--border,rgba(0,0,0,.08)); color:var(--text,#111);
    border:1px solid var(--border,rgba(0,0,0,.1));
    border-radius:8px; padding:.65rem 1rem; cursor:pointer;
    font-size:.9rem; transition:background .2s;
}
.a247u-crop-cancel:hover { background:var(--border,rgba(0,0,0,.15)); }
.a247u-crop-hint { font-size:.75rem; color:var(--text-muted,#6b7280); text-align:center; margin-top:.5rem; }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width:640px) {
    .a247u-profile__header { flex-direction:column; align-items:center; text-align:center; }
    .a247u-profile__info { text-align:center; }
    .a247u-profile__stats { gap:.5rem; }
    .a247u-comment-form { flex-direction:column; }
    .a247u-action-bar { gap:.4rem; }
    .a247u-pitem { width:100px; }
    .a247u-cw-item__thumb { width:100px; }
}

/* ── Edit username ── */
.a247u-profile__name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.a247u-edit-name-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted, #9ca3af);
    padding: 2px;
    display: flex;
    align-items: center;
    transition: color .18s;
}
.a247u-edit-name-btn:hover { color: var(--accent, #7c3aed); }
.a247u-edit-name-form {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.a247u-edit-name-input {
    background: var(--bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 13px;
    color: var(--text, #111);
    width: 180px;
}
.a247u-edit-name-save {
    background: var(--accent, #7c3aed);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer;
}
.a247u-edit-name-cancel {
    background: none;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    color: var(--text-muted, #9ca3af);
}
.a247u-edit-name-msg {
    font-size: 11px;
    color: var(--accent, #7c3aed);
}
.a247u-edit-name-msg.error { color: #ef4444; }

/* ── Votes 1-10 star picker ── */
.a247u-vote-score-picker {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.a247u-score-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--border, #e5e7eb);
    background: var(--bg-card, #fff);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    color: var(--text-muted, #9ca3af);
    transition: background .15s, color .15s, border-color .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.a247u-score-btn:hover,
.a247u-score-btn.active {
    background: var(--accent, #7c3aed);
    color: #fff;
    border-color: var(--accent, #7c3aed);
}
.a247u-score-display {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent, #7c3aed);
    min-width: 36px;
}
.a247u-score-label {
    font-size: 10px;
    color: var(--text-muted, #9ca3af);
}

/* ── CW home grid size fix ── */
.a247u-cw-section .cw-grid .cw-card__thumb {
    aspect-ratio: 16/9;
}
.a247u-cw-section .cw-grid .cw-card__title {
    font-size: 11px;
}

/* ══════════════════════════════════════
   NOTIFICACIONES — botón + panel
══════════════════════════════════════ */
.a247u-notif-wrap {
    position: relative;
}
.a247u-notif-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted, #9ca3af);
    padding: 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    position: relative;
    transition: color .18s;
}
.a247u-notif-btn:hover { color: var(--accent, #7c3aed); }
.a247u-notif-badge {
    position: absolute;
    top: 2px; right: 2px;
    min-width: 16px; height: 16px;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 999px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
}
.a247u-notif-badge.visible { display: flex; }
.a247u-notif-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    max-height: 420px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.15);
    z-index: 9999;
    overflow: hidden;
    flex-direction: column;
}
.a247u-notif-panel.visible { display: flex; }

@media (max-width: 768px) {
    .a247u-notif-panel {
        position: fixed !important;
        bottom: 70px !important;
        right: 8px !important;
        left: 8px !important;
        top: auto !important;
        width: auto !important;
        max-height: 60vh !important;
    }
}
.a247u-notif-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    color: var(--text, #111);
}
.a247u-notif-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted, #9ca3af); font-size: 14px;
}
.a247u-notif-list {
    overflow-y: auto;
    max-height: 360px;
}
.a247u-notif-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border, #f3f4f6);
    transition: background .12s;
}
.a247u-notif-item:hover { background: var(--bg, #f9fafb); }
.a247u-notif-item.unread { background: rgba(124,58,237,.06); }
.a247u-notif-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.a247u-notif-avatar--default {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--accent, #7c3aed);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.a247u-notif-content { flex: 1; min-width: 0; }
.a247u-notif-msg {
    margin: 0 0 3px;
    font-size: 12px;
    color: var(--text, #111);
    line-height: 1.4;
    word-break: break-word;
}
.a247u-notif-time { font-size: 10px; color: var(--text-muted, #9ca3af); }
.a247u-notif-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted, #9ca3af);
    font-size: 13px;
    margin: 0;
}

/* Mobile notif badge in bottom nav */
.bottom-nav__notif-badge {
    position: absolute;
    top: -2px; right: -4px;
    min-width: 14px; height: 14px;
    font-size: 8px;
}

/* ══════════════════════════════════════
   COMENTARIOS — replies, likes, reporte
══════════════════════════════════════ */
.a247u-comment__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}
.a247u-cmt-like-btn,
.a247u-cmt-dislike-btn,
.a247u-cmt-reply-btn,
.a247u-report-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 11px;
    color: var(--text-muted, #9ca3af);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color .15s, background .15s;
}
.a247u-cmt-like-btn:hover    { color: #22c55e; }
.a247u-cmt-dislike-btn:hover { color: #ef4444; }
.a247u-cmt-reply-btn:hover   { color: var(--accent, #7c3aed); }
.a247u-report-btn:hover      { color: #f59e0b; }
.a247u-cmt-like-btn.cmt-liked    { color: #22c55e; font-weight: 600; }
.a247u-cmt-dislike-btn.cmt-disliked { color: #ef4444; font-weight: 600; }

.a247u-reply-form {
    margin-top: 8px;
    padding: 8px;
    background: var(--bg, #f9fafb);
    border-radius: 8px;
    border: 1px solid var(--border, #e5e7eb);
}
.a247u-reply-input {
    width: 100%;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--text, #111);
    resize: vertical;
    box-sizing: border-box;
}
.a247u-reply-form__btns { display: flex; gap: 6px; margin-top: 6px; }
.a247u-reply-submit {
    background: var(--accent, #7c3aed);
    color: #fff; border: none; border-radius: 6px;
    padding: 5px 12px; font-size: 12px; cursor: pointer;
}
.a247u-reply-cancel {
    background: none; border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px; padding: 5px 10px; font-size: 12px;
    cursor: pointer; color: var(--text-muted, #9ca3af);
}
.a247u-replies { margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--border, #e5e7eb); }
.a247u-reply { opacity: .95; }

/* ══════════════════════════════════════
   VOTOS — dislike rojo, like verde
══════════════════════════════════════ */
.a247u-vote-down.active-dislike,
.a247u-vote-down.active { color: #ef4444 !important; }
.a247u-vote-up.active   { color: #22c55e !important; }

/* ══════════════════════════════════════
   MIS ANIMES — solo desktop
══════════════════════════════════════ */
@media (max-width: 768px) {
    .nav-desktop-only { display: none !important; }
}