.creator-page>header{height:64px;display:flex;align-items:center;gap:20px;padding:0 18px;background:#0b1725}
.creator-page a{color:#fff;font-weight:900;text-decoration:none}
.creator-page header div{display:grid}
.creator-page header small{color:#9fb4c7}
.creator-page main{display:grid;grid-template-columns:minmax(0,1fr)330px;gap:14px;padding:14px}
.creator-page main>section,
.creator-page aside{background:#0b1725;border:1px solid #1c3853;border-radius:12px;padding:12px}
.creator-page nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.creator-page aside{display:grid;grid-template-rows:auto 1fr auto}
.creator-page aside input{padding:12px;background:#06101d;border:1px solid #294864;color:#fff}.creator-wood-page .creator-profile>div{min-width:0}.creator-wood-page .creator-profile em{display:none}.creator-wood-page .creator-header-numbers>span>span,.creator-wood-page .creator-header-numbers>span>svg{color:#a7ff3d}.creator-wood-page #creator-live-toggle{background:#dc3539;color:white;border:0;font-weight:900}.creator-wood-page #creator-owner-toggle{background:#130c08;color:#fff;border:1px solid #77431a}.creator-wood-page .creator-media>span{color:#b2c4ae}.creator-wood-page .creator-video-info p{margin:5px 0 0;color:#ddd0c8}.creator-wood-page .creator-content-tabs{display:flex;flex-wrap:wrap;align-items:center;width:auto;gap:4px;margin:0;padding:0;border-radius:0;background:transparent}.creator-wood-page .creator-content-tabs button svg,.creator-wood-page .creator-content-tabs [data-morph-icone]{width:17px;height:17px}
.creator-wood-page .creator-content-tabs button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0!important;border-radius:9px;background:transparent!important;box-shadow:none!important;color:#8fe84f!important;position:relative}
.creator-wood-page .creator-count{position:absolute;right:-2px;bottom:-2px;padding:0 4px;border-radius:8px;background:#0e1b0a;border:1px solid #579c22;color:#c8ffa0;font-size:9px;font-weight:700;line-height:14px;min-width:14px;text-align:center}
.creator-wood-page .creator-count[hidden]{display:none}.creator-wood-page .creator-content-tabs button.active{color:#c8ffa0!important;background:transparent!important}.creator-wood-page .creator-content-tabs button.active svg{fill:currentColor!important}.creator-wood-page .creator-content-tabs button:disabled{opacity:.4;cursor:default}.creator-wood-page .creator-content-tabs button:hover:not(:disabled){color:#c8ffa0!important}.creator-wood-page .creator-comments>header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #50341d}.creator-wood-page .creator-comments>header b{font-size:18px;color:#a8ff4c}.creator-wood-page .creator-comment-filter{display:flex!important;align-items:center;justify-content:center;width:30px;height:30px;margin:8px 0 0 14px;padding:0!important;color:#c9bcae!important;border:0!important;border-radius:8px!important;background:transparent!important;box-shadow:none!important;cursor:pointer}
.creator-wood-page .creator-comment-filter:hover{color:#a8ff4c!important}.creator-wood-page #creator-comment-list{min-height:0;overflow:auto;padding:12px 14px}.creator-wood-page #creator-comment-list article{display:flex;gap:8px;align-items:flex-start;padding:12px 0;border-bottom:1px solid #2a2925;background:none}.creator-wood-page #creator-comment-list article .creator-comment-body{flex:1;min-width:0}.creator-wood-page #creator-comment-list article b{color:#a8ff4c}.creator-wood-page #creator-comment-list article p{margin:5px 0 0;color:#f1efeb}.creator-wood-page .creator-comment-actions{display:flex;gap:4px;flex:none}.creator-wood-page .creator-comment-like,.creator-wood-page .creator-comment-delete{display:grid;place-items:center;width:26px;height:26px;padding:0;border:0!important;border-radius:7px;background:transparent!important;box-shadow:none!important;color:#8a7c6a!important;cursor:pointer}.creator-wood-page .creator-comment-like:hover{color:#8fe84f!important}.creator-wood-page .creator-comment-like.active{color:#8fe84f!important}.creator-wood-page .creator-comment-like.active svg{fill:currentColor}.creator-wood-page .creator-comment-delete:hover{color:#ff8b96!important}.creator-wood-page .creator-comments form{display:flex;gap:8px;padding:12px;border-top:1px solid #403020}.creator-wood-page .creator-comments input{min-width:0;flex:1;border:1px solid #5c4026;border-radius:10px;background:#14110e;color:white;padding:11px}.creator-wood-page .creator-comments form button{display:grid;place-items:center;width:40px;height:40px;flex:none;border:1px solid #579c22!important;border-radius:50%!important;background:#0e1b0a!important;box-shadow:none!important;color:#a8ff4c!important;padding:0!important}
.creator-wood-page .creator-comments form button:hover{background:#15280f!important;border-color:#8fe84f!important}
.creator-wood-page .creator-comments form button svg{width:17px;height:17px}.creator-wood-page .creator-comments footer{padding:11px 15px;background:#0e170b;color:#b8c9ae;font-size:12px}.creator-page button{padding:10px;border:0;border-radius:8px;background:#0878e8;color:#fff;border-color:transparent!important;
    color:#061408!important;
    background:linear-gradient(135deg,var(--gaba3-verde-brillante),var(--gaba3-verde))!important;
    box-shadow:0 9px 22px rgba(85,201,0,.22)!important;
    transition:transform .22s ease,box-shadow .22s ease,filter .22s ease,background .22s ease}
.creator-page button:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 12px 28px rgba(85,201,0,.32)!important}.creator-page{margin:0;background:#07111f;color:#fff;font-family:Arial;background-color:#050a10}
.creator-public-page{background:#050a10;color:#fff;min-height:100dvh}
.creator-top{min-height:72px;display:flex;align-items:center;gap:15px;padding:10px 4vw;background:#09120c;border-bottom:1px solid #28422c;position:relative}
.creator-profile{display:flex;gap:10px;align-items:center;min-width:0;flex:1}
.creator-profile div{min-width:0}
.creator-profile b,
.creator-profile small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.creator-profile p{margin:3px 0 0;color:#aec3b0;font-size:13px;max-width:420px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.creator-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#397a31;color:#fff;font-weight:900;border:2px solid #91e868}
.creator-top button,
.creator-top a,
.creator-owner button,
.creator-comments button{border:1px solid #3f6e44;border-radius:9px;background:#102313;color:#fff;padding:9px 12px;font-weight:750;text-decoration:none;cursor:pointer}
/* Cabeçalho ao estilo da sala de comércio: identidade à esquerda, nav ao
   centro (Início/Vídeos longos/Vídeos curtos), configurações à direita. */
.creator-nav{display:flex;align-items:center;gap:6px;flex:1;justify-content:center;flex-wrap:wrap}
/* !important pra vencer a regra antiga ".creator-page button{background:
   linear-gradient(...)!important}" (herdada do painel genérico) — sem
   isso todo botão do cabeçalho vira um gradiente sólido, apagando a
   distinção visual entre aba ativa e inativa. */
.creator-top .creator-nav-link{display:flex;align-items:center;gap:7px;padding:10px 14px;border-radius:0!important;color:#cfe8c9!important;font-weight:800;font-size:14px;text-decoration:none;border:none!important;background:transparent!important;box-shadow:none!important;cursor:pointer;transition:color .18s ease,transform .12s ease}
.creator-nav-link svg{flex:none;width:26px;height:26px}
.creator-nav-link b{font-weight:900;font-size:14px}
.creator-top .creator-nav-link:hover{color:#fff!important;transform:scale(1.08)}
.creator-top .creator-nav-link.active{color:#9dff6f!important}
.creator-controles{display:flex!important;align-items:center;gap:10px;margin-left:auto}
#creator-owner-toggle,
#creator-live-toggle{display:grid;place-items:center;width:auto;height:auto;padding:6px!important;border-radius:0!important;background:transparent!important;border:none!important;color:#fff!important;box-shadow:none!important;flex:0 0 auto;transition:color .18s ease,transform .12s ease}
#creator-owner-toggle svg,
#creator-live-toggle svg{width:26px;height:26px}
#creator-owner-toggle:hover,
#creator-live-toggle:hover{color:#9dff6f!important;transform:scale(1.08)}
#creator-owner-toggle[aria-expanded="true"]{color:#9dff6f!important}
.creator-main{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;max-width:1300px;margin:auto;padding:20px}
.creator-watch{min-width:0}
.creator-player-shell{display:grid;grid-template-columns:46px minmax(0,1fr) 46px;align-items:center;gap:10px}
.creator-player-shell[hidden]{display:none!important}
.creator-current{min-width:0;background:#08120c;border:1px solid #24442a;border-radius:16px;overflow:hidden}
.creator-media{height:min(62vh,680px);display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#284b28,#071008 70%)}
.creator-media video{width:100%;height:100%;object-fit:contain;background:#000}
.creator-video-info{padding:14px 18px}
.creator-video-info h1{margin:0;font-size:clamp(22px,3vw,34px)}
.creator-video-info p{color:#c3d2c2}
.creator-video-info small{color:#9ab09b}
.creator-empty{padding:70px 20px;text-align:center;background:#08120c;border:1px dashed #38623d;border-radius:16px}
.creator-comments{background:#09120c;border:1px solid #28422c;border-radius:16px;padding:14px 14px 0;display:grid;grid-template-rows:auto 1fr auto;min-height:470px}
/* Trampa já documentada nesta sala (".creator-page main>section,
   .creator-page aside" no topo do arquivo tem mais especificidade —
   1 classe+1 tag — que ".creator-comments" sozinho, 1 classe — e ganhava
   de volta o padding-bottom:12px que acabamos de tirar acima). ID vence
   qualquer combinação de classe+tag, decisivo. */
#creator-comments{padding-bottom:0!important}
/* SEGUNDA trampa da mesma família, achada só depois que o dono insistiu que
   "ainda tem espaço" e eu fui olhar com cuidado de novo: uma regra bem
   mais antiga, de antes de qualquer trabalho nesta píldora
   (".creator-wood-page .creator-comments form", linha ~16, legado de
   quando o form não tinha nenhuma píldora), tem 2 classes — mais
   especificidade que ".creator-comments form" (1 classe) — e continuava
   dando padding:12px NOS QUATRO LADOS do form, incluindo embaixo, mais um
   border-top que também podia ler como "uma linha de separação". Isso é
   que estava realmente segurando a píldora longe do limite, apesar do
   #creator-comments acima já estar com padding-bottom:0 de verdade. */
#creator-comment-form{padding-bottom:0!important}
.creator-comments header{display:flex;justify-content:space-between}
.creator-comments header button{padding:3px 9px}
.creator-comments article{padding:9px 0;border-bottom:1px solid #1a3420}
.creator-comments article p{margin:4px 0;color:#d7e5d4}
.creator-wood-page .creator-comment-report{flex:none;align-self:flex-start;width:22px;height:22px;padding:0!important;border:0!important;border-radius:7px!important;background:transparent!important;box-shadow:none!important;color:#8a7c6a!important;font-size:11px;cursor:pointer;opacity:.7}
.creator-wood-page .creator-comment-report:hover{opacity:1;color:#ff8b96!important}
/* o dono (2026-09-07): a píldora tem que ficar bem no limite de baixo do
   painel, sem NENHUM espaço/linha sobrando debaixo dela (zero, nem um
   respiro) — por isso o painel perdeu o padding-bottom (regra acima) e o
   form não ganha nenhum de volta, a píldora termina exatamente na borda
   real do painel. */
.creator-comments form{display:flex;align-items:center;gap:8px;margin:10px 0 0}
/* Píldora WhatsApp (2026-09-07, pedido do dono): carita+campo dentro de UM
   só recipiente, mesmo padrão já usado na Sala Pública
   (".publica-mensagem-pill") — antes eram dois elementos soltos lado a
   lado (emoji sem caixa, input com sua própria caixa). */
.creator-comments .creator-message-pill{display:flex;align-items:center;flex:1 1 auto;min-width:0;gap:2px;background:#071008;border:1px solid #315c36;border-radius:22px;padding:2px 4px 2px 8px}
.creator-comments .creator-message-pill input{min-width:0;flex:1;height:38px;padding:0 4px;border:none!important;background:transparent!important;color:#fff;border-radius:0}
.creator-comments .creator-message-pill input:focus{border:none!important;box-shadow:none!important}
.creator-emoji-wrap{position:relative;flex:0 0 auto}
#creator-emoji-toggle{width:30px;height:30px;flex:0 0 auto;border-radius:0!important;border:none!important;background:transparent!important;box-shadow:none!important;display:grid;place-items:center;padding:0;color:#8fd858!important;cursor:pointer;transition:color .18s ease,transform .12s ease}
#creator-emoji-toggle:hover,#creator-emoji-toggle:focus-visible{color:#e8ffb8!important;transform:scale(1.08);outline:none}
#creator-emoji-toggle[aria-expanded="true"]{color:#f2ffd0!important}
.creator-emoji-panel{position:fixed;z-index:9999;width:220px;display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:8px;border-radius:12px;background:#0a150d;border:1px solid #294d2f;box-shadow:0 12px 30px #0007}
.creator-emoji-panel[hidden]{display:none!important}
.creator-emoji-panel button{border:0!important;background:transparent!important;box-shadow:none!important;font-size:19px;padding:4px;border-radius:8px!important;cursor:pointer}
.creator-emoji-panel button:hover{background:#132a17!important}
.creator-owner{max-width:1260px;margin:0 auto 28px;padding:15px;background:#09120c;border:1px solid #28422c;border-radius:14px;font-size:12.5px}
.creator-owner summary{cursor:pointer;font-weight:900}
.creator-owner form{display:grid;gap:10px;max-width:620px;margin-top:14px}
.creator-owner label{display:grid;gap:5px;font-size:12.5px}
.creator-upload-hint{margin:-4px 0 0;font-size:11.5px;color:#9ab09b}
.creator-upload-duration-hint{font-size:11.5px;font-weight:700;color:#a8ff4c}
.creator-owner input,
.creator-owner textarea{padding:8px 10px;border-radius:8px;border:1px solid #315c36;background:#071008;color:#fff;font-size:12.5px}
.creator-owner button{font-size:12.5px;padding:8px 12px}
.creator-owner output{font-size:11.5px}
.creator-owner .creator-file-picker{display:inline-grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid #315c36!important;border-radius:9px;background:#071008!important;color:#8fe84f!important;cursor:pointer}
.creator-owner .creator-file-picker svg,.creator-owner .creator-file-picker [data-morph-icone]{width:17px;height:17px}
.creator-owner .creator-file-picker:hover{border-color:#75bf31!important;color:#c8ffa0!important}
.creator-owner .creator-file-picker.has-file{border-color:#75bf31!important;background:#0e1b0a!important;color:#c8ffa0!important}
#creator-owner-library{display:grid;gap:10px;margin-top:16px}
.creator-owner-lookup{display:flex;gap:10px;align-items:flex-end;margin-top:16px}
.creator-owner-lookup label{flex:1;display:grid;gap:5px;font-size:12.5px}
.creator-owner-lookup input{width:100%;padding:8px 10px;border-radius:8px;border:1px solid #315c36;background:#071008;color:#fff;font-size:12.5px}
.creator-owner-lookup button{flex:none;font-size:12.5px;padding:8px 14px}
.creator-owner-item{border:1px solid #28422c;border-radius:10px;padding:10px 12px;background:#0c150e;cursor:pointer}
.creator-owner-item.selected{border-color:#75bf31;background:#0e1b0a;box-shadow:0 0 0 1px #75bf3155}
.creator-owner-delete-confirm{display:grid;gap:8px;margin-top:10px;padding:10px 12px;border:1px solid #c0202066;border-radius:10px;background:#2a0d10}
.creator-owner-delete-confirm[hidden]{display:none}
.creator-owner-delete-confirm label{color:#ffd7db}
.creator-owner-delete-confirm>b{color:#ffb3ba;font-size:13px}
.creator-password-field{position:relative}
.creator-password-field input{width:100%;padding-right:36px!important}
.creator-password-field button{position:absolute;right:2px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:28px;height:28px;padding:0;border:0!important;background:transparent!important;box-shadow:none!important;color:#c9bcae!important;cursor:pointer}
.creator-password-field button:hover{color:#fff!important}
.creator-password-field button.active{color:#8fe84f!important}
.creator-owner-delete-confirm output{color:#ffb3ba}
.creator-owner-item-head{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.creator-owner-item-head>div{display:flex;gap:8px;align-items:center;min-width:0}
.creator-owner-item-head b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px;font-size:13px}
.creator-owner-item-actions button{font-size:11.5px;padding:6px 10px}
.creator-owner-item-head small{color:#9ab09b;white-space:nowrap}
.creator-owner-item-actions{display:flex;gap:6px;flex-wrap:wrap}
.creator-owner-item-edit{display:grid;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid #28422c}
.creator-owner-item-edit[hidden]{display:none}
.creator-owner-item-edit label{display:grid;gap:4px;font-size:13px;color:#9ab09b}
.creator-notice{position:fixed;z-index:50;top:84px;left:50%;transform:translateX(-50%);padding:10px 14px;border-radius:10px;background:#112817;border:1px solid #4c9753}
.creator-notice[data-kind="error"]{background:#3a1920;border-color:#c3505c}.creator-wood-page{padding:10px;background:#030403;color:#f7f5ef;overflow-x:hidden;background-color:#020604;
    background-image:
        radial-gradient(circle at 15% 0%,rgba(85,201,0,.18),transparent 32%),
        linear-gradient(180deg,rgba(2,6,4,.32),rgba(2,6,4,.42)),
        url("/assets/brand/fondo-piedra-gaba3.png?v=1");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;
    color:#fff;
    min-height:100dvh;
    padding:0;
    box-sizing:border-box}
.creator-wood-page .creator-profile small{display:block;color:#f7bd22;font-size:14px;margin:3px 0;color:#ffc928;font-size:15px}
/* Estatísticas do dono — cartão próprio, não espremido junto do nome. */
.creator-stats{display:flex!important;gap:8px;margin-top:4px}
.creator-stats[hidden]{display:none!important}
.creator-stats span{display:inline-flex!important;width:fit-content!important;flex:0 0 auto!important;align-items:center;gap:4px;padding:0;border-radius:0;background:transparent;border:0;color:#a9a29a;font-size:11px;font-weight:600;white-space:nowrap}
.creator-stats b{font-weight:600}.creator-stats svg{width:12px;height:12px;flex:none;opacity:.9}.creator-wood-page .creator-main{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(340px,29vw);gap:12px;align-items:stretch;max-width:none;margin:0;padding:0;display:block;max-width:1520px;margin:auto;padding:0!important}
.creator-wood-page .creator-watch{min-width:0;padding:6px;border:1px solid #70401c;border-radius:16px;background:linear-gradient(145deg,#52280d,#211007);box-shadow:0 12px 28px #0008;position:relative;width:100%;max-width:none;box-sizing:border-box;padding:0!important;border:0!important;background:transparent!important;margin:0!important}.creator-wood-page .creator-player-shell{margin:0;min-height:0;display:block}
.creator-wood-page .creator-player-shell[hidden]{display:none!important}.creator-wood-page .creator-current{border-radius:12px;overflow:hidden;min-width:0;border:1px solid #594426;border-radius:28px;background:#000;overflow:hidden}.creator-wood-page .creator-media{height:min(55dvh,680px);min-height:400px;background:#090c0a;height:min(58dvh,760px);min-height:420px;background:#000}
.creator-wood-page .creator-media video{object-fit:contain}

/* "Excluir" precisa se destacar de "Editar"/"Permitir download" — ação
   destrutiva nunca deveria ter o mesmo verde "seguro" das outras (evita
   clique errado, mesmo princípio já usado no painel de comércio). */
.creator-owner .creator-btn-perigo{background:#2a0d10!important;border:1px solid #c0202066!important;color:#ffb3ba!important;box-shadow:none!important}
.creator-owner .creator-btn-perigo:hover{background:#3a1216!important;border-color:#e0505c!important}

/* Botões de fechar ("X") também caíam no verde-CTA global sem querer —
   fechar/dispensar não é uma ação principal, tem que ficar discreto. */
.creator-wood-page .creator-owner>header button,
.creator-wood-page .creator-comments>header button{background:transparent!important;border:0!important;box-shadow:none!important;color:#c9bcae!important}
.creator-wood-page .creator-owner>header button:hover,
.creator-wood-page .creator-comments>header button:hover{color:#a8ff4c!important}
/* Fileira única, logo abaixo da tela principal — sem tabela nem caixa,
   ícones soltos lado a lado (pedido do dono). */
.creator-wood-page #creator-live-info:empty{display:none}
/* Franja de madeira abaixo da tela principal — só ícones, sem nenhuma
   letra (pedido do dono). Some inteira quando não há links. Administrar
   (adicionar/remover, com nome e endereço escritos) é lá na configuração,
   não aqui na tela que todo mundo vê. */
.creator-links-strip{max-width:1520px;margin:16px auto 0;padding:14px 20px;border:1px solid #70431e;border-radius:20px;background:linear-gradient(180deg, rgba(4,6,4,.32), rgba(4,6,4,.42)),url("/assets/brand/fondo-madera-oscura-gaba3.png") center/cover no-repeat;box-shadow:inset 0 1px #c2874a66,0 12px 30px #0006}
.creator-links-strip[hidden]{display:none!important}
.creator-links-strip-lista{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.creator-links-strip-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#1a1108;color:#ffd75e;border:1px solid #6b4a22}
.creator-links-strip-icon:hover{background:#251808;color:#fff}
.creator-invite-block{margin:14px 0 18px;padding:14px;border-radius:14px;background:linear-gradient(160deg,#132312,#0a150a);border:1px solid #2f5a30}
.creator-invite-block>b{display:block;margin-bottom:10px;font-size:13px;color:#c8ffa0}
.creator-invite-preview{display:flex;gap:12px;align-items:stretch;padding:10px;border-radius:10px;background:#081208;border:1px solid #1f3a20}
.creator-invite-preview-thumb{width:120px;flex:0 0 120px;border-radius:8px;overflow:hidden;display:grid;place-items:center;font-size:26px;background:#0a0705}
.creator-invite-preview-thumb .creator-published-thumb{border-radius:8px}
.creator-invite-preview-text{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px}
#creator-invite-preview-title{font-size:12.5px;color:#e8ffb8}
#creator-invite-preview-desc{margin:0;font-size:11px;line-height:1.5;color:#9ab09b;white-space:pre-line}
#creator-invite-share{width:100%;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:8px;background:#25d366!important;color:#052b12!important;border:0!important;font-weight:750}
#creator-invite-share:hover{background:#1fbd5a!important}
.creator-owner-links{margin:14px 0;padding-top:14px;border-top:1px solid #28422c}
.creator-owner-links>b{display:block;margin-bottom:8px;font-size:13px}
.creator-owner-links p{display:flex;gap:8px;align-items:center;padding:6px 0;font-size:12.5px}
.creator-owner-links p small{color:#9ab09b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}.creator-wood-page .creator-comments{display:grid!important;grid-template-rows:auto auto minmax(0,1fr) auto auto;width:auto!important;height:calc(100dvh - 132px);min-height:580px;margin:0;border:1px solid #613616;border-radius:16px;background:linear-gradient(160deg,#11120f,#090a09);overflow:hidden;box-shadow:0 12px 28px #0008;position:fixed;z-index:30;right:20px;top:134px;bottom:20px;width:min(380px,calc(100vw - 40px));min-height:0;display:none;background:linear-gradient(180deg,rgba(4,6,4,.4),rgba(4,6,4,.58)),url("/assets/brand/fondo-madera-oscura-gaba3.png") center/cover no-repeat!important;border:1px solid #70431e!important;box-shadow:inset 0 1px #c2874a66,0 20px 60px #000b}
.creator-wood-page .creator-comments.open{display:grid}
body.creator-ao-vivo #creator-live-toggle::after{content:'';position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;background:#ff3b4a;box-shadow:0 0 0 2px #1d0d05}body.creator-ao-vivo #creator-live-toggle{background:transparent!important;border:none!important;color:#ff5b6b!important;background:#c0202033!important;border-color:#e0505c!important;color:#ff8b96!important;position:relative}
body.creator-ao-vivo .creator-links-strip,
body.creator-ao-vivo .creator-video-info{display:none!important}
body.creator-ao-vivo #creator-published-heading,
body.creator-ao-vivo .creator-published-track{display:none!important}
body.creator-ao-vivo .creator-published header{justify-content:flex-end}
body.creator-ao-vivo.creator-wood-page .creator-main{display:grid!important;grid-template-columns:minmax(0,1fr) min(380px,34vw)!important;gap:14px!important;align-items:stretch!important;max-width:none!important;height:calc(100dvh - 130px)!important}
body.creator-ao-vivo .creator-watch{min-height:0;display:flex;flex-direction:column}
body.creator-ao-vivo .creator-player-shell{flex:1;min-height:0}
body.creator-ao-vivo .creator-current{height:100%!important}
body.creator-ao-vivo .creator-media{height:100%!important;min-height:0!important}
body.creator-ao-vivo .creator-comments{position:static!important;display:grid!important;width:auto!important;height:100%!important;top:auto!important;right:auto!important;bottom:auto!important;box-shadow:none!important}
/* Espaço reservado abaixo do vídeo ao vivo — igual ao YouTube, que deixa
   uma área ali pra descrição/link do criador. Fica vazio de propósito:
   o dono ainda não pediu pra preencher, só reservar o lugar. */
.creator-live-info{display:none}
body.creator-ao-vivo .creator-live-info{display:block;flex:0 0 auto;min-height:90px;margin-top:10px;border:1px dashed #4a3418;border-radius:14px;background:#0d0a06}
@media(max-width:900px){
body.creator-ao-vivo.creator-wood-page .creator-main{grid-template-columns:1fr!important;grid-template-rows:minmax(0,1fr) 320px!important;height:calc(100dvh - 118px)!important}
}
.creator-wood-page .creator-owner{position:fixed;z-index:40;top:12px;right:12px;bottom:12px;width:min(440px,calc(100vw - 24px));overflow:auto;margin:0;border-radius:22px;box-shadow:-18px 0 55px #000b}
.creator-wood-page .creator-owner>header{display:flex;justify-content:space-between;gap:10px;align-items:center}
.creator-wood-page .creator-owner>header b{font-size:15px}
.creator-wood-page .creator-owner>header button{font-size:22px;padding:3px 10px}
/* Aviso de "ao vivo agora" — aparece pra QUALQUER pessoa vendo o canal,
   mas não empurra ninguém pra dentro da transmissão sozinho: só entra
   quem tocar aqui. Continua olhando os vídeos normalmente se quiser. */
.creator-watch .creator-live-badge{display:flex!important;align-items:center;gap:8px;width:100%;margin:0 0 12px;padding:10px 16px;border:1px solid #c0202066!important;border-radius:14px!important;background:#2a0d10!important;color:#ffd7db!important;font-weight:800;font-size:13px;cursor:pointer;text-align:left;box-shadow:none!important}
.creator-live-badge[hidden]{display:none!important}
.creator-watch .creator-live-badge:hover{background:#3a1216!important}
.creator-live-dot{width:9px;height:9px;border-radius:50%;background:#ff3b4a;flex:none;animation:creatorLivePulse 1.4s ease-in-out infinite}
@keyframes creatorLivePulse{0%,100%{opacity:1}50%{opacity:.35}}
.creator-wood-page .creator-empty{min-height:60dvh;display:grid;place-items:center}
.creator-wood-page .creator-empty[hidden]{display:none!important}
.creator-wood-page .creator-empty h1{font-size:20px}
.creator-wood-page .creator-notice{z-index:70}@media(max-width:760px){.creator-page main{grid-template-columns:1fr}
.creator-top{padding:calc(env(safe-area-inset-top) + 6px) 12px 7px;gap:8px;flex-wrap:wrap}
.creator-profile{order:3;flex-basis:100%}
.creator-profile p{display:none}
.creator-top button,
.creator-top a{padding:7px 9px;font-size:12px}
.creator-main{display:block;padding:10px 10px calc(20px + env(safe-area-inset-bottom))}
.creator-player-shell{grid-template-columns:1fr}
.creator-media{height:62dvh;min-height:360px}
.creator-comments{position:fixed;z-index:30;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));min-height:44dvh;transform:translateY(110%);transition:transform .22s ease;box-shadow:0 18px 50px #000c}
.creator-comments.open{transform:translateY(0)}
.creator-owner{margin:10px}
.creator-notice{top:calc(env(safe-area-inset-top) + 75px);max-width:86vw}

.creator-wood-page{padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
/* Cabeçalho compacto: 1ª fila = avatar + nome + ações (tudo numa linha
   só, nome truncado se precisar); 2ª fila = estatísticas; 3ª fila = nav.
   Antes cada bloco quebrava numa linha própria e o cabeçalho ficava com
   quase metade da altura da tela só de vazio. */
.creator-wood-page .creator-top{height:auto;min-height:0;margin:0 -8px 8px!important;width:calc(100% + 16px)!important;padding:10px 14px;border-radius:16px;gap:6px 10px;flex-wrap:wrap;align-items:center}
.creator-wood-page .creator-avatar{width:44px;height:44px;font-size:16px}
.creator-wood-page .creator-profile{order:1;flex:1 1 auto;min-width:0}
.creator-wood-page .creator-profile b{font-size:16px}
.creator-wood-page .creator-profile small{font-size:12px}
.creator-wood-page .creator-profile p{display:none}
.creator-wood-page #creator-owner-toggle{width:30px;height:30px}
.creator-wood-page #creator-owner-toggle svg,
.creator-wood-page #creator-live-toggle svg{width:22px;height:22px}
.creator-controles{order:2;flex:0 0 auto;gap:6px}
.creator-stats{order:3;flex-basis:100%;flex-wrap:nowrap;gap:6px;margin-top:0}
.creator-nav{order:4;flex-basis:100%;justify-content:flex-start;gap:2px;padding-top:2px;border-top:1px solid rgba(255,255,255,.08)}
.creator-nav-link{padding:7px 9px;font-size:11.5px}
.creator-nav-link svg{width:20px;height:20px}
.creator-nav-link span{white-space:nowrap}
.creator-stats span{font-size:10.5px;padding:0}
.creator-wood-page .creator-media{height:calc(100dvh - 135px - env(safe-area-inset-bottom));min-height:420px}
.creator-wood-page .creator-watch{margin:0 -10px!important;width:calc(100% + 20px)}
.creator-wood-page .creator-current{border-radius:16px}
.creator-wood-page .creator-content-tabs{gap:4px!important;padding:2px 0}
.creator-wood-page .creator-content-tabs button{width:36px;height:36px}
.creator-wood-page .creator-content-tabs button svg,.creator-wood-page .creator-content-tabs [data-morph-icone]{width:18px;height:18px}
.creator-wood-page .creator-content-tabs button.active{color:#c8ffa0!important}
.creator-wood-page .creator-comments{top:auto;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));width:auto;min-height:48dvh}
.creator-wood-page .creator-owner{top:calc(8px + env(safe-area-inset-top));bottom:calc(8px + env(safe-area-inset-bottom));right:8px;width:calc(100vw - 16px)}
.creator-wood-page .creator-notice{top:calc(12px + env(safe-area-inset-top))}
}.creator-wood-page .creator-top{display:grid!important;grid-template-columns:minmax(280px,1fr) auto auto;align-items:center;max-width:1520px;margin:0 auto;height:auto;border:1px solid #70431e;border-radius:24px;box-shadow:inset 0 1px #c2874a66,0 18px 40px #0008;gap:12px!important;padding:10px 16px!important;min-height:92px!important;background:url("/assets/brand/fondo-madera-oscura-gaba3.png") center/cover no-repeat!important}.creator-wood-page .creator-controles button{min-width:45px;height:43px;border-radius:12px;width:auto!important;min-width:34px!important;height:34px!important;padding:2px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#f8f4eb!important}.creator-wood-page .creator-controles button:hover{color:#a8ff4c!important;transform:scale(1.08)}.creator-wood-page .creator-avatar{width:48px;height:48px;border:2px solid #f7bc22;background:#101914;font-size:19px;flex:0 0 auto}.creator-wood-page .creator-profile b{display:block;line-height:1.05;font-size:22px}.creator-wood-page .creator-profile p{margin:4px 0;color:#f5e9df;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f0e6d2;font-size:14px;max-width:520px;opacity:.85;font-size:13px}/* Cada grupo de estatística fica em 2 linhas, igual à referência real:
   ícone+número em cima (centralizado), legenda pequena embaixo — antes
   era só ícone+número lado a lado, sem nenhum texto explicando o que é
   cada número (".creator-header-numbers small" ficava com display:none
   mesmo sem existir nenhum <small> no HTML pra esconder). */
.creator-wood-page .creator-header-numbers>span{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;grid-template-areas:"icon num" "label label";align-items:center;justify-items:center;column-gap:4px;row-gap:2px;min-width:0;padding:3px 10px;background:transparent!important;border:0!important}
.creator-wood-page .creator-header-numbers>span>svg{grid-area:icon;color:#a7ff3d}
.creator-wood-page .creator-header-numbers>span>b{grid-area:num;font-size:16px;color:#fff}
.creator-wood-page .creator-header-numbers small{grid-area:label;color:#a9a29a;font-size:10px;font-weight:700;text-transform:lowercase;white-space:nowrap}.creator-wood-page #creator-live-toggle[hidden],.creator-wood-page #creator-owner-toggle[hidden]{display:none!important}.creator-wood-page .creator-video-info{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:10px 14px 13px;background:#0a0b09;border-radius:12px;display:none!important;padding:10px 14px!important;background:#090b09!important}.creator-wood-page .creator-video-info h1{margin:0;font-size:22px;font-size:20px}.creator-wood-page .creator-published{margin-top:8px;padding:0}.creator-wood-page .creator-published header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:#b6fb68}.creator-wood-page #creator-published-heading{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#8fe84f}
/* Referência real: "Vídeos recentes" em branco, negrito, tamanho normal —
   nunca a legenda pequena verde maiúscula que tínhamos antes. */
.creator-wood-page #creator-published-heading{font-size:16px!important;font-weight:800!important;letter-spacing:normal!important;text-transform:none!important;color:#fff!important}.creator-wood-page .creator-published-empty{margin:5px 0;color:#bdb6ad;font-size:13px}.creator-wood-page .creator-conversation-tabs{display:flex;gap:18px}.creator-wood-page .creator-conversation-tabs b{color:#a8ff4c}.creator-wood-page .creator-comments>header button{color:#ddd;display:none!important}.creator-wood-page .creator-published-list{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(146px,20%);gap:8px;overflow-x:auto;scrollbar-width:none;grid-auto-columns:minmax(150px,168px);
    padding-bottom:2px;
    scroll-snap-type:x proximity;
    cursor:grab}
.creator-wood-page .creator-published-list.arrastando{cursor:grabbing;scroll-snap-type:none}.creator-wood-page .creator-published-card{padding:0;border-radius:8px;color:#f1ece4!important;text-align:left;white-space:normal;cursor:pointer;position:relative;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:0;
    scroll-snap-align:start;
    transition:border-color .18s ease,transform .18s ease}
.creator-wood-page .creator-published-number{position:absolute;left:5px;top:5px;z-index:1;padding:1px 5px;border-radius:4px;background:#000000b3;color:#a8ff4c;font-size:10px;font-weight:700;letter-spacing:.02em}.creator-wood-page .creator-published-card:hover{color:#baff70!important}
.creator-published-thumb{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    background:#0a0705;
    overflow:hidden;
    flex:none;
}
.creator-published-thumb video{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease}
.creator-published-thumb.pronta video{opacity:1}
.creator-published-thumb-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:#8a7c6a;font-size:11px;background:linear-gradient(145deg,#1a1108,#241708)}
.creator-published-duration{position:absolute;right:5px;bottom:5px;padding:1px 5px;border-radius:4px;background:#000000b3;color:#fff;font-size:10px;font-weight:700;letter-spacing:.02em}
.creator-published-duration[hidden]{display:none}
.creator-published-card-title{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    padding:8px 9px;
    font-size:12.5px;
    line-height:1.3;
    color:#f1ece4;
}

/* ── Setas da fileira "Vídeos publicados" (2026-08-25) — a tela principal
   NÃO navega mais sozinha (nada de seta ali); escolher vídeo é só por
   aqui. Setas só na versão web — no celular o dedo já desliza nativo,
   por isso ficam escondidas abaixo de 821px. Só aparecem quando a
   fileira realmente tem mais vídeo do que cabe (JS decide, via
   `hidden`) — nunca uma seta morta que não faz nada ao clicar. */
.creator-wood-page .creator-published-track{position:relative}
.creator-wood-page .creator-published-arrow{
    display:none;
    position:absolute;
    z-index:5;
    top:50%;
    transform:translateY(-50%);
    width:26px;
    height:26px;
    padding:0;
    border:0!important;
    border-radius:0!important;
    background:none!important;
    box-shadow:none!important;
    color:#c8ffa0!important;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.9)) drop-shadow(0 0 4px rgba(0,0,0,.7));
    cursor:pointer;
    align-items:center;
    justify-content:center;
    transition:transform .15s ease,color .15s ease;
}
.creator-wood-page .creator-published-arrow:hover{color:#fff!important;transform:translateY(-50%) scale(1.15)}
.creator-wood-page .creator-published-arrow:disabled{opacity:.3;cursor:default}
.creator-wood-page .creator-published-arrow-prev{left:2px}
.creator-wood-page .creator-published-arrow-next{right:2px}
.creator-wood-page #creator-stats[hidden]{display:none!important}
.creator-wood-page #creator-stats span{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#c9bcae;white-space:nowrap}
.creator-wood-page #creator-stats svg{width:12px;height:12px;opacity:.8;flex:none}
.creator-wood-page #creator-stats b{font-weight:700;color:#f1ece4}.creator-wood-page .creator-profile{min-width:0;display:flex;align-items:center;gap:11px;order:1}.creator-wood-page .creator-header-numbers{display:flex;align-items:center;gap:5px;order:2}.creator-wood-page #creator-stats{display:flex!important;
    flex-direction:column;
    align-items:flex-end;
    gap:2px;
    margin:0 6px 0 0;
    padding:0;order:4}.creator-wood-page .creator-controles{display:flex;align-items:center;gap:8px;order:5}.creator-wood-page .creator-nav{display:none!important;order:3;display:flex!important;
    align-items:center;
    justify-content:flex-end!important;
    flex:none!important;
    gap:4px;
    margin:0!important}
.creator-wood-page .creator-nav-link{
    display:grid!important;
    place-items:center;
    width:30px;
    height:30px;
    padding:0!important;
    border:0!important;
    border-radius:8px!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#8fe84f!important;
    position:relative;
    transition:transform .15s ease,color .15s ease;
}
.creator-wood-page .creator-nav-link svg{width:18px;height:18px}
/* Contador de vídeos/curtos: nesta fileira compacta de ícones não sobra
   espaço pra mostrar um número sem estourar a caixa do ícone (ficava
   flutuando torto entre um ícone e outro) — tirado daqui; continua
   existindo no HTML/JS, só não aparece nesta posição específica. */
.creator-wood-page .creator-nav-link b{display:none}
.creator-wood-page .creator-nav-link.active{color:#c8ffa0!important}
.creator-wood-page .creator-nav-link:hover:not(:disabled){color:#c8ffa0!important;transform:scale(1.1)}
.creator-wood-page .creator-nav-link:disabled{opacity:.4;cursor:default}@media(min-width:821px){
  .creator-wood-page #creator-comment-list{min-height:0!important;overflow:auto!important}

    .creator-wood-page .creator-published-arrow:not([hidden]){display:flex}

    body.creator-wood-page{display:flex!important;flex-direction:column;align-items:stretch;height:100dvh;overflow:hidden}.creator-wood-page .creator-top{display:grid!important;grid-template-columns:auto minmax(280px,1fr) auto auto!important;min-height:112px!important;padding:15px 20px!important;gap:16px!important;grid-template-columns:minmax(220px,1fr) auto auto auto auto auto!important;flex:0 0 auto;width:100%;box-sizing:border-box}
    /* Ordem do cabeçalho, igual à referência real: identidade → estatísticas
       → Seguir → ícones de navegação (início/vídeos/vivo/sino/pessoas) →
       engrenagem (só dono). ".creator-header-actions" hoje só carrega o
       botão Seguir (o resto das ações voltou pro lugar natural junto de
       "Vídeos publicados", ver syncActionsPlacement em creatorRoom.js). */
    .creator-wood-page .creator-profile{order:1}
    .creator-wood-page .creator-header-numbers{order:2}
    .creator-wood-page .creator-header-actions{display:flex;align-items:center;gap:6px;order:3}
    .creator-wood-page .creator-header-actions:empty{display:none;padding:0;border:0}
    .creator-wood-page .creator-nav{order:4}
    .creator-wood-page .creator-controles{order:5}
    .creator-wood-page .creator-published header{justify-content:flex-start;gap:10px}
    .creator-wood-page .creator-published header .creator-content-tabs{margin-left:auto}
    .creator-wood-page .creator-ribbon{display:flex;flex:0 0 auto;overflow:hidden;white-space:nowrap;padding:9px 0;background:linear-gradient(90deg,#241006cc,#51270c99,#1e0d05cc),repeating-linear-gradient(3deg,#3a1906 0 2px,#251005 3px 7px);border-top:1px solid #70431e;border-bottom:1px solid #70431e;box-shadow:inset 0 1px #c2874a40}
    .creator-wood-page .creator-ribbon-track{display:inline-flex;width:max-content;animation:creator-ribbon-scroll 28s linear infinite}
    .creator-wood-page .creator-ribbon-track span{padding:0 40px;font-size:13px;font-weight:800;letter-spacing:.03em;color:#ffd75e;text-transform:uppercase;flex:0 0 auto}
    @keyframes creator-ribbon-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
    .creator-wood-page .creator-links-strip{flex:0 0 auto}.creator-wood-page .creator-main{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(340px,29vw)!important;gap:12px!important;align-items:stretch!important;max-width:none!important;padding:0!important;flex:1 1 auto!important;min-height:0!important;height:auto!important;overflow:hidden}
    .creator-wood-page .creator-watch{display:flex!important;flex-direction:column;height:100%;min-height:0;overflow:hidden}
    .creator-wood-page .creator-player-shell{flex:1 1 auto;min-height:180px;height:100%}
    .creator-wood-page .creator-current{height:100%!important}.creator-wood-page .creator-media{height:min(55dvh,680px)!important;min-height:400px!important;height:100%!important;min-height:0!important}
    .creator-wood-page .creator-published{flex:0 0 auto;overflow:visible}.creator-wood-page .creator-comments{position:static!important;display:grid!important;width:auto!important;height:100%!important;min-height:0!important;margin:0!important;overflow:hidden!important}
}
/* Ícones da cabeçalho: todos verdes, mesmo tamanho, sem caixa preta —
   pedido explícito do dono ("bien visible... quítaselos [as caixas]...
   todos de un mismo tamaño"). Vale pra navegação, transmissão e
   configurar por igual. */
.creator-wood-page .creator-controles button,
.creator-wood-page #creator-live-toggle,
.creator-wood-page #creator-owner-toggle{color:#8fe84f!important}
.creator-wood-page .creator-controles button svg{width:24px!important;height:24px!important}
.creator-wood-page .creator-controles button:hover,
.creator-wood-page #creator-live-toggle:hover,
.creator-wood-page #creator-owner-toggle:hover{color:#c8ffa0!important}
body.creator-ao-vivo .creator-wood-page #creator-live-toggle{color:#ff8b96!important}@media(max-width:820px){.creator-wood-page{padding:8px}.creator-wood-page .creator-profile p{display:none}.creator-wood-page .creator-header-numbers>span{display:none}.creator-wood-page .creator-controles button{min-width:37px;height:37px;padding:0 8px}.creator-wood-page .creator-video-info h1{font-size:18px}.creator-wood-page .creator-video-info p{font-size:13px}.creator-wood-page .creator-comments>header button{display:none}.creator-wood-page .creator-header-actions{display:none}.creator-wood-page .creator-ribbon{display:none}

    body.creator-ao-vivo .creator-top{display:none!important}
    body.creator-ao-vivo.creator-wood-page .creator-main{height:100dvh!important}
    body.creator-ao-vivo .creator-comments>header button{display:grid!important;place-items:center;width:32px;height:32px;color:#a8ff4c!important}.creator-wood-page .creator-comments{height:min(62dvh,560px);min-height:390px;grid-template-rows:auto auto minmax(0,1fr) auto auto!important;width:auto!important;height:min(62dvh,560px)!important;min-height:390px!important;overflow:hidden!important}
  .creator-wood-page #creator-comment-list{min-height:0!important;overflow:auto!important}.creator-wood-page .creator-avatar{width:50px;height:50px;font-size:19px;width:36px;height:36px;font-size:15px}.creator-wood-page .creator-published header{justify-content:center}.creator-wood-page #creator-published-heading{display:none}.creator-wood-page .creator-content-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;gap:16px}.creator-wood-page .creator-content-tabs button{width:30px;height:30px;flex:0 0 auto}
    .creator-published-card-title{padding:6px 7px;font-size:11.5px}.creator-wood-page .creator-top{grid-template-columns:minmax(0,1fr) auto;gap:9px;padding:11px 12px;min-height:0;min-height:68px!important;padding:8px 10px!important;gap:7px!important;min-height:0!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important}.creator-wood-page .creator-profile{gap:9px;flex:1 1 auto!important;order:1!important;min-width:90px!important}
    .creator-wood-page .creator-profile>div{min-width:0!important}.creator-wood-page .creator-profile b{font-size:18px;font-size:16px;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.creator-wood-page .creator-profile small{font-size:11px;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:block!important}
    .creator-wood-page .creator-nav{order:2!important;flex:0 0 auto!important;justify-content:flex-end!important;gap:4px!important;margin:0 0 0 auto!important;padding-top:0!important;border-top:0!important}
    .creator-wood-page .creator-nav .creator-nav-link{width:26px!important;height:26px!important}
    .creator-wood-page .creator-header-numbers{order:3!important;flex:0 0 auto!important}.creator-wood-page #creator-stats{flex-direction:row;align-items:center;gap:10px;order:3;flex-basis:100%;margin:0;display:none!important}.creator-wood-page .creator-controles{gap:2px;order:5!important;flex:0 0 auto!important}

    body.creator-wood-page{display:flex!important;flex-direction:column;height:100dvh!important;overflow:hidden!important}.creator-wood-page .creator-main{grid-template-columns:1fr;display:grid!important;grid-template-columns:1fr!important;padding:0!important;flex:1 1 auto!important;min-height:0!important;height:auto!important;overflow:hidden!important;display:block!important}
    .creator-wood-page .creator-watch{display:flex!important;flex-direction:column;height:100%;min-height:0;overflow:hidden}
    .creator-wood-page .creator-player-shell{flex:1 1 auto!important;min-height:110px!important;height:auto!important}
    .creator-wood-page .creator-current{height:100%!important}.creator-wood-page .creator-media{height:52dvh;min-height:300px;height:52dvh!important;min-height:300px!important;height:100%!important;min-height:0!important}.creator-wood-page .creator-published{margin-top:3px!important;flex:0 0 auto!important;margin-top:4px!important}.creator-wood-page .creator-published-list{grid-auto-columns:132px;grid-auto-columns:130px;cursor:auto;grid-auto-columns:104px!important}.creator-wood-page .creator-published-card{min-height:58px;font-size:12px;min-height:48px!important}
    .creator-wood-page #creator-comments-inline-anchor{flex:0 0 auto}.creator-wood-page .creator-comments.creator-comments-inline{position:static!important;left:auto!important;right:auto!important;bottom:auto!important;transform:none!important;width:100%!important;margin:8px 0 0!important;box-shadow:0 12px 28px #0008;height:auto!important;min-height:0!important;background:linear-gradient(180deg,rgba(4,6,4,.28),rgba(4,6,4,.46)),url("/assets/brand/fondo-madera-oscura-gaba3.png") center/cover no-repeat!important;border:1px solid #70431e!important;box-shadow:inset 0 1px #c2874a4d,0 12px 28px #0008!important}
    .creator-wood-page .creator-comments.creator-comments-inline input{background:#1a100ad9!important;border-color:#c2874a66!important}
    .creator-wood-page .creator-comments.creator-comments-inline>header,
    .creator-wood-page .creator-comments.creator-comments-inline .creator-comment-filter{display:none!important}
    /* Dono pediu: no mobile só a caixinha de escrever aparece — nada de
       "espiar" o último comentário acima dela (era isso que sobrava
       espaço, uma prévia de 34px sempre reservada mesmo sem nada útil
       ali pra quem só quer mandar uma mensagem). */
    .creator-wood-page .creator-comments.creator-comments-inline #creator-comment-list{display:none!important}
    .creator-wood-page .creator-comments.creator-comments-inline .creator-published-empty{display:none}.creator-wood-page .creator-comments.creator-comments-inline form{background:transparent!important;border-top:0!important;padding:8px 12px!important;margin:0!important}
}
/* Modo "tela cheia" próprio, tipo vídeo curto — pedido explícito do dono:
   vídeo cobre a cabecera inteira, sobra só curtir + configurar flutuando
   por cima. Só faz sentido no celular (retrato), onde tem sentido virar
   "modo reels" — no desktop não muda nada. */
#creator-player-shell{position:relative}
.creator-immersive-overlay{display:none;position:absolute;top:12px;right:12px;z-index:20;flex-direction:column;gap:12px;align-items:center}
.creator-immersive-overlay[hidden]{display:none!important}
#creator-immersive-toggle{display:none!important}
/* max-width:820px cobre celular em pé; a segunda condição (paisagem +
   baixo) cobre celular deitado — que costuma ser bem mais LARGO que
   820px, por isso não dava pra confiar só na largura aqui. */
@media(max-width:820px),(orientation:landscape) and (max-height:500px){
    #creator-immersive-toggle{display:grid!important}
    /* Pedido do dono 2026-09-13: "esa franja negra" — .creator-wood-page
       tem padding:8px sempre no celular (linha ~449), pensado pro layout
       normal (com cabecera/margem). Em tela cheia esse respiro vira uma
       moldura preta em volta do vídeo, encolhendo ele à toa. Zerado só
       aqui, o vídeo ocupa a tela de ponta a ponta de verdade. */
    body.creator-immersive.creator-wood-page{padding:0!important}
    /* Pedido do dono 2026-09-13 (2ª volta): a franja preta de baixo era
       o gradiente escuro atrás da legenda (pensado pra legibilidade nas
       outras telas) — em tela cheia ele cobria uma faixa grande e
       chapada de preto, cortando o vídeo. Tirado o gradiente; o texto
       continua legível com sombra própria (já aplicada abaixo). */
    body.creator-immersive #creator-current #creator-video-info{background:none!important}
    body.creator-immersive #creator-current #creator-video-info h1,
    body.creator-immersive #creator-current #creator-video-info p{text-shadow:0 1px 4px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.7)!important}
    body.creator-immersive .creator-top,
    body.creator-immersive .creator-published,
    body.creator-immersive .creator-live-badge{display:none!important}
    body.creator-immersive .creator-main{height:100dvh!important}
    /* Bug real (2026-09-13): .creator-watch tem margin:0 -10px + width:
       calc(100% + 20px) pra "sangrar" até a borda no layout normal — em
       tela cheia isso sobrava 10px de vídeo cortado fora de cada lado da
       tela (e empurrava o cálculo de altura junto). Zerado aqui. */
    body.creator-immersive .creator-watch{height:100%!important;margin:0!important;width:100%!important}
    body.creator-immersive .creator-player-shell{height:100%!important;min-height:0!important}
    body.creator-immersive .creator-current{height:100%!important;border-radius:0!important;border:0!important}
    body.creator-immersive .creator-media{height:100%!important;position:relative!important}
    /* Pedido do dono 2026-09-13 (versão final de verdade — ele simplificou
       de novo): tela cheia no celular fica TOTALMENTE limpa — nada de
       curtir/comentar/compartilhar/salvar/baixar/denunciar, nada de
       legenda, nada de cinta/assinatura embaixo. Um criador publicando
       um filme não quer nenhuma dessas "portadas" no meio da tela cheia.
       Sobra só o vídeo + 1 ícone pequeno pra sair e voltar à sala normal. */
    body.creator-immersive .creator-immersive-overlay{display:block!important}
    body.creator-immersive .creator-immersive-overlay [data-action="like"],
    body.creator-immersive .creator-immersive-overlay #creator-owner-toggle,
    body.creator-immersive #creator-current .creator-content-tabs,
    body.creator-immersive #creator-current #creator-video-info,
    body.creator-immersive .creator-footer4,
    body.creator-immersive .creator-ribbon{display:none!important}
    body.creator-immersive #creator-immersive-exit{
        display:grid!important;
        position:fixed!important;top:calc(12px + env(safe-area-inset-top,0px))!important;left:12px!important;right:auto!important;bottom:auto!important;
        width:36px!important;height:36px!important;min-width:0!important;padding:0!important;
        place-items:center;border-radius:50%!important;
        background:#000000a6!important;border:0!important;box-shadow:none!important;color:#8fe84f!important;
        z-index:50;
    }
    /* Pedido do dono 2026-09-13: em tela cheia no celular só pode sobrar,
       embaixo, a cinta com a assinatura — nada de barra nativa do player
       (play/tempo/volume) criando uma faixa extra entre o vídeo e a
       cinta. Tocar no próprio vídeo já dá play/pause (controle já
       existente); a barra nativa só sobrava clutter aqui. */
    body.creator-immersive .creator-media video::-webkit-media-controls-enclosure{display:none!important}
    /* Pedido do dono 2026-09-13 (3ª volta): mesmo com o gap de baixo já
       corrigido, "contain" sempre pode sobrar uma linha de arredondamento
       (a proporção do vídeo raramente bate exata com a da tela). "cover"
       preenche 100% da tela garantido, sem nenhuma folga — só corta as
       bordas laterais, nunca deixa tira preta em cima/embaixo. */
    /* Bug real (2026-09-13): height:100% num <video> às vezes perde pro
       cálculo de proporção intrínseca do próprio elemento (efeito mais
       forte no desktop, mas corrigido aqui também por segurança) — a
       altura calculada ficava enorme (bem mais que a tela), sobrando só
       um pedaço visível e "franja preta" no resto. position:absolute com
       inset:0 fixa as 4 bordas direto, sem depender desse cálculo. */
    body.creator-immersive .creator-media video{pointer-events:auto;object-fit:cover!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
}
@media(orientation:landscape) and (max-height:500px){
    .creator-immersive-overlay{top:50%!important;transform:translateY(-50%)}
}
/* Bug real encontrado numa auditoria (2026-09-04, verificação visual em
   celular): ".creator-published-list" é um grid de colunas estreitas
   (104-168px, pensado pra carrossel de cartões de vídeo). Quando não há
   nenhum vídeo publicado ainda, a MESMA mensagem de texto longo
   (".creator-published-empty") entra como filho único desse grid e
   herda uma única coluna estreita — o texto quebra dentro de ~104px e
   fica cortado nas bordas ("s vídeos / ublicados..." em vez de "Os
   vídeos / publicados..."). Corrigido sem tocar o grid do carrossel
   real (que continua certo com vídeos de verdade): quando o único
   filho é a mensagem vazia, o contêiner vira um bloco normal, largura
   cheia. */
.creator-wood-page .creator-published-list:has(> .creator-published-empty:only-child){
    display:block!important;
}
.creator-wood-page .creator-published-list > .creator-published-empty{
    width:100%;
}
/* Segunda parte do mesmo bug: ".creator-watch" (a seção que contém o
   vídeo + a lista de publicados) tem margin-left:-10px de propósito —
   um "bleed" pra imagem/vídeo de fundo chegar até a borda da tela. Isso
   é certo pro vídeo, mas o TEXTO dessa mesma mensagem vazia herdava o
   mesmo deslocamento sem nenhum respiro, cortando a primeira letra
   ("Os" virava "s") contra a borda real da tela. Corrigido com um
   respiro só nesta seção de texto, sem tirar o bleed de quem precisa
   dele (o vídeo continua igual). */
.creator-wood-page .creator-published{
    padding-left:10px;
    padding-right:10px;
    box-sizing:border-box;
}
/* Rediseño "duas telas" no celular (2026-09-07, pedido do dono): Seguir
   sempre na cabecera (nunca mais dentro da fileira de ícones), tela cheia
   vira um botão que só aparece ao tocar o vídeo (não fica fixo o tempo
   todo), e o carrossel de outros vídeos ganha uma altura garantida — pelo
   menos ~30% da altura da tela principal, nunca só o tamanho intrínseco
   do conteúdo. Bloco no final do arquivo de propósito, mesma disciplina já
   usada nesta sessão pra vencer a cascata sem duplicar !important nas
   regras antigas (ex.: linha 411 escondia ".creator-header-actions" no
   celular — aqui ela volta a aparecer, só com o Seguir dentro). */
@media(max-width:820px){
    .creator-wood-page .creator-header-actions{display:flex!important;align-items:center;order:4;flex:0 0 auto}
    .creator-wood-page .creator-header-actions #creator-follow{width:auto!important;min-width:0;padding:0 12px!important;font-size:12px}
    /* Bug real de auditoria (2026-09-14): a proporção 100:35 foi calibrada
       antes da píldora de comentário inline existir dentro de
       ".creator-published" (ver "#creator-comments-inline-anchor" no
       HTML) — o box de comentário nunca cabia nos 35, ficava empurrado
       pra fora da tela (sem scroll pra alcançar, corpo com overflow:
       hidden). Corrigido: ".creator-published" passa a ocupar só a
       altura real do que tem dentro (carrossel + comentário), nunca
       cortada; o vídeo (100) absorve o espaço que sobra. */
    .creator-wood-page .creator-player-shell{flex:1 1 0!important;min-height:0!important}
    .creator-wood-page .creator-published{flex:0 0 auto!important;min-height:150px!important}
    .creator-wood-page .creator-published-list{grid-auto-columns:172px!important}
    .creator-wood-page .creator-content-tabs{margin:6px 0 8px}
}
/* Seta "Voltar" também sem caixa verde no desktop (só mobile tinha esse
   fix até agora) — mesma trampa de sempre (".creator-page button{...}"
   genérico ganhando por especificidade), regra sem @media pra valer nos
   dois tamanhos de tela de uma vez. */
.creator-wood-page .creator-top .gaba3-header-back{background:transparent!important;border:0!important;box-shadow:none!important;color:#fff!important}
.creator-fullscreen-hint{position:absolute;top:10px;right:10px;z-index:15;opacity:0;transition:opacity .2s ease;pointer-events:none}
.creator-fullscreen-hint.creator-fullscreen-hint-visivel,
#creator-player-shell:hover .creator-fullscreen-hint,
.creator-fullscreen-hint:focus-within{opacity:1;pointer-events:auto}
.creator-fullscreen-hint #creator-immersive-toggle{width:38px;height:38px;border-radius:0;background:transparent!important;border:0!important;color:#8fe84f!important;box-shadow:none!important;filter:drop-shadow(0 1px 3px rgba(0,0,0,.85));display:grid!important;place-items:center}
body.creator-ao-vivo .creator-fullscreen-hint,
body.creator-immersive .creator-fullscreen-hint{display:none!important}
/* Tela cheia também no desktop (2026-09-07, corrigindo o que o dono pediu:
   antes "Meus vídeos" abria uma galeria em grade — ele corrigiu, quer o
   MESMO modo imersivo de sempre (só a tela principal, cobrindo a fileira
   de vídeos pequenos debaixo), só que também funcionando em telas largas,
   com deslizar pra trocar de vídeo — ver bindImmersiveSwipe() no JS).
   Reusa a MESMA classe/overlay do celular (".creator-immersive-overlay",
   "body.creator-immersive"), só estende pra telas ≥821px. */
@media(min-width:821px){
    body.creator-immersive .creator-top,
    body.creator-immersive .creator-subnav,
    body.creator-immersive .creator-featured-badge,
    body.creator-immersive .creator-published,
    body.creator-immersive .creator-ribbon,
    body.creator-immersive .creator-comments{display:none!important}
    body.creator-immersive .creator-main{grid-template-columns:1fr!important;height:100dvh!important}
    body.creator-immersive .creator-watch{height:100%!important}
    body.creator-immersive .creator-player-shell{height:100%!important;min-height:0!important}
    body.creator-immersive .creator-current{height:100%!important;border-radius:0!important;border:0!important}
    body.creator-immersive .creator-media{height:100%!important;position:relative!important}
    /* Pedido do dono 2026-09-13: o mesmo pedido do celular vale pra tela
       cheia no computador/TV (é onde ele espera que as pessoas realmente
       assistam) — 100% limpo, só o vídeo + 1 ícone pequeno pra sair. */
    body.creator-immersive .creator-immersive-overlay{display:block!important}
    body.creator-immersive .creator-immersive-overlay [data-action="like"],
    body.creator-immersive .creator-immersive-overlay #creator-owner-toggle,
    body.creator-immersive #creator-current .creator-content-tabs,
    body.creator-immersive #creator-current #creator-video-info,
    body.creator-immersive .creator-footer4{display:none!important}
    body.creator-immersive .creator-media video::-webkit-media-controls-enclosure{display:none!important}
    /* Mesmo bug do celular (height:100% perdendo pro cálculo intrínseco
       do <video>, deixando a altura enorme e sobrando só um pedaço
       visível): position:absolute+inset:0 corrige, fixando as 4 bordas
       direto na tela em vez de depender do cálculo de porcentagem. */
    body.creator-immersive .creator-media video{object-fit:cover!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
    body.creator-immersive #creator-immersive-exit{
        position:fixed!important;top:16px!important;left:16px!important;right:auto!important;bottom:auto!important;
        width:44px!important;height:44px!important;min-width:0!important;display:grid!important;place-items:center;
        border-radius:0!important;background:transparent!important;border:0!important;box-shadow:none!important;color:#8fe84f!important;filter:drop-shadow(0 1px 3px rgba(0,0,0,.85));
        z-index:50;
    }

/* 2026-09-08 (referência real, Ana Ferreira / Cozinha da Ana) — bloco novo
   no fim do arquivo de propósito: ganha da cascata sem precisar mexer nas
   regras antigas já testadas. */
#creator-notif-bell{position:relative;display:inline-flex;color:#cfe8c9}
/* Vídeos/Playlist/Ao vivo dentro da cabeceira — só existe no celular
   (@media(max-width:820px) mais abaixo troca pra display:flex). Precisa de
   !important: ".creator-page nav{display:flex}" (genérico, 1 classe+tag)
   vence uma regra de 1 classe só sem !important. */
.creator-header-mobile-nav{display:none!important}
#creator-notif-bell svg{width:19px;height:19px}
.creator-subnav{display:flex;align-items:stretch;gap:4px;padding:0 clamp(10px,4vw,24px);background:#0a150d;border-bottom:1px solid #1c3621;flex-wrap:wrap}
/* ".creator-page button{background:linear-gradient(...)!important;color:#061408!important;
   box-shadow:...!important}" (topo do arquivo) vence QUALQUER regra sem
   !important, não importa a especificidade — mesma trampa já documentada
   e corrigida em ".creator-nav-link" (linha 45), replicada aqui porque
   esses botões da subnav são mais novos e nunca ganharam o mesmo fix
   (renderizavam como blocos verdes sólidos, ícone/texto invisíveis). */
/* Aba ativa vira sublinhado fino (igual à referência), não mais uma caixa
   verde sólida — mais discreto e profissional. Borda transparente na base
   sempre presente (mesma altura pros dois estados), só troca de cor.
   IMPORTANTE: ".creator-page button{color:#061408!important}" (topo do
   arquivo) é classe+tag (especificidade 0-1-1) — um !important sozinho
   numa regra de 1 classe só (0-1-0) NUNCA vence isso, mesmo os dois tendo
   !important (quando os dois são !important, desempate é por
   especificidade, não por ordem — a mesma trampa já documentada, só que
   dessa vez eu mesmo caí nela de novo). Por isso aqui SEMPRE com o
   ancestral ".creator-subnav" junto (2 classes = 0-2-0, vence de verdade). */
.creator-subnav .creator-subnav-link{display:inline-flex!important;align-items:center;gap:6px;padding:12px 12px 10px;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;background:transparent!important;color:#9bb59a!important;font-weight:800;font-size:13px;text-decoration:none;cursor:pointer;box-shadow:none!important}
.creator-subnav .creator-subnav-link svg{flex:0 0 auto;width:16px;height:16px}
.creator-subnav .creator-subnav-link:hover{color:#fff!important}
.creator-subnav .creator-subnav-link.active,
.creator-subnav .creator-subnav-link-active{color:#68d428!important;border-bottom-color:#68d428!important}
.creator-subnav .creator-subnav-external-icon{width:11px!important;height:11px!important;opacity:.65;margin-left:-2px}
.creator-subnav .creator-subnav-link-external:hover .creator-subnav-external-icon{opacity:1}
.creator-subnav-search{margin-left:auto;align-self:center;display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #294d2f;border-radius:999px;background:#07100a;color:#9bb59a;min-width:200px}
.creator-subnav-search svg{flex:0 0 auto}
.creator-subnav-search input{border:0;background:transparent;color:#fff;font-size:13px;flex:1;min-width:0;outline:none}

.creator-side-panel{max-width:1300px;margin:10px auto;padding:14px clamp(10px,4vw,24px);background:#0a150d;border:1px solid #1c3621;border-radius:12px}
.creator-side-panel header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.creator-side-panel header h2{margin:0 0 10px;font-size:16px;color:#fff}
/* Mesma trampa de sempre: ".creator-page button{background:linear-gradient!important}"
   (classe+tag, 0-1-1) vence uma regra de 1 classe só, mesmo com !important —
   por isso o seletor sempre leva ".creator-side-panel header" na frente. */
.creator-side-panel header .creator-side-panel-close{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0!important;border-radius:8px!important;background:transparent!important;box-shadow:none!important;color:#9bb59a!important;font-size:16px;cursor:pointer}
.creator-side-panel header .creator-side-panel-close:hover{color:#fff!important;background:#132a17!important}
.creator-sobre-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #1c3621;font-size:13px}
.creator-sobre-row b{color:#9bb59a;font-weight:700}
.creator-sobre-row p{margin:0;color:#fff;text-align:right}
.creator-playlists-list{display:grid;gap:12px}
.creator-playlist-card{padding:10px;border:1px solid #1c3621;border-radius:10px;background:#07100a}
.creator-playlist-card>b{display:block;margin-bottom:8px;color:#fff}
.creator-playlist-videos{display:flex;gap:10px;overflow-x:auto}
.creator-community-form{display:flex;gap:8px;margin-bottom:12px}
.creator-community-form input{flex:1;min-width:0;padding:10px;border:1px solid #294d2f;border-radius:10px;background:#07100a;color:#fff}
.creator-community-list article{padding:10px 0;border-bottom:1px solid #1c3621}
.creator-playlist-picker-item{display:block;font-size:12px;padding:3px 0;color:#c9d8c7}
.creator-owner-playlist-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:12.5px;border-bottom:1px solid #1c3621}

/* Badge "Destaque" + texto grande sobreposto — só o vídeo com mais
   engajamento real (curtida+compartilhar+salvar), nunca escolhido à mão. */
.creator-featured-badge{position:absolute;top:14px;right:14px;z-index:3;display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;background:#caa23cdd;color:#1a1206;font-weight:900;font-size:11.5px}
.creator-hero-overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:32px clamp(16px,4vw,48px);max-width:56%;pointer-events:none;background:linear-gradient(90deg,rgba(5,10,7,.72) 0%,rgba(5,10,7,.35) 60%,transparent 100%)}
.creator-hero-overlay p{margin:0}
#creator-hero-headline{font-size:clamp(22px,3.2vw,34px);font-weight:800;color:#fff;line-height:1.15;text-shadow:0 2px 8px #000a}
#creator-hero-tagline{font-size:14px;color:#e3f4de;text-shadow:0 1px 4px #000a}
.creator-current{position:relative}
/* Botão de play grande centralizado — referência real mostra o vídeo em
   destaque com uma miniatura rica + play antes de tocar, não um <video>
   cru já com barra de controles nativa visível. Some assim que o vídeo
   começa a tocar (JS liga controls=true e chama play()). */
/* Cobre até 46px do fundo, nunca a barra de controles nativa do vídeo
   (que agora fica sempre visível, igual à referência) — senão o clique
   pra arrastar a barra de progresso/volume nunca alcançava o vídeo. */
.creator-play-overlay{position:absolute;top:0;left:0;right:0;bottom:46px;z-index:1;display:grid;place-items:center;padding:0;border:0!important;background:rgba(4,8,5,.18)!important;box-shadow:none!important;cursor:pointer}
.creator-play-overlay[hidden]{display:none!important}
.creator-play-overlay svg{width:66px;height:66px;padding:18px;border-radius:50%;background:#000000b3;color:#fff}
.creator-play-overlay:hover svg{background:#000000d9}

/* Rodapé de 4 frases + assinatura cursiva */
/* Mesmo tom de madeira do cabeçalho (a referência real usa a mesma cor
   nos dois — antes o rodapé usava um asset bem mais escuro/quase preto,
   destoando do cabeçalho). */
/* Grid igual ao ".creator-main" (mesmas colunas vídeo/comentários) — as 4
   frases se espalham só até onde a coluna do vídeo termina, a assinatura
   fica na coluna dos comentários, igual à referência real. */
.creator-wood-page .creator-footer4{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(220px,18vw);gap:12px;align-items:center;padding:2px clamp(16px,4vw,32px);background:url("/assets/brand/fondo-madera-oscura-gaba3.png") center/cover no-repeat!important;border-top:1px solid #caa23c}
.creator-footer4-phrases{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 18px;min-width:0}
/* JS duplica as 4 frases (pra cinta correr sem emenda no celular) — no
   desktop a cópia extra nunca aparece, só as 4 originais. */
.creator-footer4-phrases>*:nth-child(n+5){display:none}
/* Frase quebra em 2 linhas curtas (igual à referência real: "Receitas
   para / todos os momentos") — largura máxima força a quebra, nunca uma
   linha só comprida. */
.creator-footer4-phrase{display:flex;align-items:center;gap:9px;font-size:13px;color:#dce8da;font-weight:600;letter-spacing:.01em}
.creator-footer4-phrase b{white-space:normal;max-width:140px;line-height:1.3;font-weight:600}
.creator-footer4-phrase [data-morph-icone]{width:38px;height:38px;flex:0 0 38px;color:#8fff67}
.creator-footer4-phrase [data-morph-icone] svg{width:100%!important;height:100%!important}
/* Assinatura maior e "decolando" — leve giro pra cima, tipo rubrica real,
   pedido do dono. */
.creator-footer4-signature{text-align:right;font-family:"Brush Script MT",cursive;font-size:34px;color:#e0c477;white-space:nowrap;display:inline-block;transform:rotate(-7deg) translateY(-4px);transform-origin:bottom right}

/* Dropdown de ordenar comentários (era um botão de alternar) */
select.creator-comment-filter{display:inline-block!important;width:auto!important;height:auto!important;margin:8px 0 0 14px!important;padding:6px 10px!important;border:1px solid #3f6e44!important;border-radius:8px!important;background:#102313!important;color:#cfe8c9!important;font-size:12px;font-weight:700;cursor:pointer}

/* Cartão do carrossel: legenda de visualizações+data, e grade fixa de 4
   quando expandido por "Ver todos". */
.creator-published-card-meta{display:block;color:#8fae8f;font-size:10.5px;margin-top:2px;padding-right:20px}
.creator-ver-todos{margin-left:auto;background:transparent!important;border:0!important;color:#68d428!important;font-size:12px;font-weight:800;padding:6px!important;box-shadow:none!important}
/* "Ver todos" (ou o ícone de tela cheia, que só aparece ao passar o mouse
   por cima do setor) — mostra TODOS os vídeos da sala, num carrossel
   horizontal maior que ocupa mais espaço vertical (não uma grade), pra
   quem quiser escolher entre muitos vídeos sem perder o "deslizar" que já
   existe. Clicar num vídeo troca o de cima, igual a hoje. */
/* Ícone fica na TELA PRINCIPAL (pedido explícito do dono), aparece só ao
   aproximar o mouse dela — clicar expande o setor de "Vídeos recentes"
   aqui embaixo, não a tela principal em si (isso já é o outro botão de
   tela cheia, canto oposto). */
#creator-published-expand-hint{position:absolute;top:14px;left:14px;z-index:6;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0!important;border-radius:8px!important;background:#000000a6!important;box-shadow:none!important;color:#fff!important;opacity:0;transition:opacity .18s ease;cursor:pointer}
#creator-published-expand-hint svg{width:16px!important;height:16px!important}
#creator-player-shell:hover .creator-published-expand-hint,
.creator-published-expand-hint:focus-visible{opacity:1}
body.creator-published-list-open .creator-published-expand-hint{opacity:1;color:#c8ffa0!important}


/* Bug real: o grid de ".creator-comments" tinha 5 trilhas definidas
   ("auto auto minmax(0,1fr) auto auto") pensadas pra um número de filhos
   que nunca bateu de verdade com os 4 filhos reais (header/lista/form/
   rodapé) — o encaixe automático (auto-placement) jogava a lista pra uma
   trilha "auto" (fica do tamanho do conteúdo) e o FORM pra trilha "1fr"
   (fica esticado, empurrando a píldora pro meio com um vão embaixo).
   Ficava mascarado por acaso até o form ganhar um filho novo (o aviso de
   "Respondendo a"), que expôs o problema de vez. Fix definitivo: nomear a
   trilha certa pra cada filho, não depender mais da ordem implícita. */
.creator-wood-page .creator-comments{grid-template-rows:auto minmax(0,1fr) auto auto!important}
.creator-comments>header{grid-row:1}
#creator-comment-list{grid-row:2;min-height:0;overflow:auto}
#creator-comment-form{grid-row:3}
#creator-conversation-footer{grid-row:4}
/* Linha marrom em cima da píldora (herança antiga, de antes de existir
   qualquer píldora) — pedido do dono, remover de vez, sem nenhuma linha
   separando os comentários do campo de escrever. */
.creator-wood-page .creator-comments form{border-top:0!important}
/* "Comentários" ocupa o mínimo possível — bem pequeno, colado na mesma
   margem esquerda da píldora, com uma linha fina embaixo (não uma faixa
   grande) pra ainda marcar o limite do cabeçalho sem tomar espaço. */
.creator-wood-page .creator-comments>header{padding:2px 0!important;margin:0!important;border-bottom:1px solid #24371f!important;line-height:1.2!important;min-height:0!important}
.creator-wood-page .creator-comments>header b{font-size:12px!important;font-weight:700!important;line-height:1.2!important;margin:0!important;padding:0!important}
/* "Ver todos" — mesma trampa de sempre (classe única perde do genérico
   ".creator-page button{background:linear-gradient!important}"), agora
   com o ID pra garantir. Vira link discreto com um chevron, sem caixa. */
#creator-published-ver-todos{display:inline-flex!important;align-items:center;gap:3px;background:transparent!important;border:0!important;box-shadow:none!important;color:#68d428!important;font-size:12px;font-weight:700;padding:4px 2px!important}
#creator-published-ver-todos:hover{color:#9dff6f!important}
#creator-published-ver-todos [data-morph-icone]{width:13px!important;height:13px!important;transition:transform .18s ease}
#creator-published-ver-todos [data-morph-icone] svg{width:100%!important;height:100%!important}
#creator-published-ver-todos.creator-ver-todos-aberto [data-morph-icone]{transform:rotate(180deg)}
.creator-wood-page .creator-comments>header b span{font-size:12px!important}
.creator-wood-page .creator-conversation-tabs{line-height:1.2!important}
.creator-published-expanded .creator-published-list{grid-auto-columns:minmax(220px,260px)!important;min-height:min(52vh,440px)!important}
.creator-published-expanded .creator-published-card-title{font-size:13px!important}
.creator-published-expanded .creator-published-card-meta{font-size:11px!important}
/* A cinta antiga (1 frase, marquesina) ficava redundante com o rodapé
   novo de 4 frases — referência real só mostra o rodapé. Some só no
   desktop (mobile ainda não foi redesenhado nesta fase). */
@media(min-width:821px){.creator-ribbon{display:none!important}}

/* 2026-09-09 (o dono: "idéntico, color por color, fondo, todo") — a área de
   conteúdo (subnav pra baixo, até o rodapé) herdava a pedra de fundo do
   body inteiro (".creator-wood-page", fondo-piedra-gaba3.png) atrás de
   qualquer seção sem fundo próprio (".creator-watch"/".creator-published"
   são transparentes) — a referência real não tem nenhuma pedra ali, é um
   verde bem escuro liso. O painel de comentários também herdava um fundo
   de madeira (regra antiga, pensada só pro modo "gaveta" do celular) —
   a referência mostra um painel liso, sem textura de madeira nenhuma. */
.creator-wood-page .creator-watch,
.creator-wood-page .creator-published{background:#0a120d}
.creator-wood-page .creator-comments{background:linear-gradient(180deg,rgba(4,6,4,.55),rgba(4,6,4,.72)),url("/assets/brand/fondo-madera-oscura-gaba3.png") center/cover no-repeat!important;border:1px solid #6b4a22!important;box-shadow:none!important}

/* "Seguir" na referência real é uma pílula VERDE (fundo verde escuro,
   borda verde clara, texto claro) — a regra antiga (linha 12) usava um
   fundo de madeira com texto dourado, sobrando de um estilo anterior a
   esta referência. Mesmo seletor exato da regra antiga (mesma
   especificidade, "#creator-follow" com 2 classes na frente) pra vencer
   de verdade — só !important não bastava aqui (a de baixo, mais nova no
   arquivo, ganha o empate). */
/* JS (syncActionsPlacement) move o botão real pra dentro de
   ".creator-name-row", colado no nome — deixou de existir dentro de
   ".creator-content-tabs" no desktop, por isso o seletor tem que mirar o
   lugar novo (senão a regra nunca casa com nada depois do JS rodar). */
.creator-wood-page .creator-name-row #creator-follow{display:inline-flex!important;align-items:center;justify-content:center;gap:4px;background:#0d2410!important;border:1px solid #4ea62f!important;color:#eaffdc!important;border-radius:999px!important;padding:0 10px!important;min-width:0;font-size:10.5px!important;height:24px!important;line-height:1!important}
.creator-wood-page .creator-name-row #creator-follow [data-morph-icone]{width:12px!important;height:12px!important;flex:0 0 auto}
.creator-wood-page .creator-name-row #creator-follow [data-morph-icone] svg{width:100%!important;height:100%!important}
.creator-wood-page .creator-name-row #creator-follow:hover{background:#123016!important}
.creator-name-row{display:flex!important;align-items:center;gap:10px;flex-wrap:wrap}
/* "Curtir" e "Compartilhar" no cabeçalho usam o mesmo estilo discreto dos
   ícones de navegação (verde, sem caixa, mesmo tamanho, alinhados numa
   linha reta só) — não a versão maior que tem lá embaixo. */
.creator-wood-page .creator-header-actions{align-items:center!important}
/* Achado real, auditoria 2026-09-20: sem `position:relative` aqui, o
   selo de contagem (.creator-count, `position:absolute;right:-2px`) não
   tinha ancestral posicionado próprio e "escapava" pro canto do
   `<header>` inteiro em vez do cantinho do ícone — sobrando pra fora da
   tela no celular (13px de scroll horizontal real). */
.creator-wood-page .creator-header-actions #creator-share-video,
.creator-wood-page .creator-header-actions [data-action="like"]{display:grid!important;place-items:center;width:22px!important;height:22px!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#8fe84f!important;vertical-align:middle;position:relative!important}
.creator-wood-page .creator-header-actions #creator-share-video [data-morph-icone],
.creator-wood-page .creator-header-actions [data-action="like"] [data-morph-icone]{width:18px!important;height:18px!important}
.creator-wood-page .creator-header-actions #creator-share-video [data-morph-icone] svg,
.creator-wood-page .creator-header-actions [data-action="like"] [data-morph-icone] svg{width:100%!important;height:100%!important;display:block!important}
.creator-wood-page .creator-header-actions #creator-share-video:hover,
.creator-wood-page .creator-header-actions [data-action="like"]:hover{color:#c8ffa0!important}
.creator-wood-page .creator-header-actions #creator-share-video small,
.creator-wood-page .creator-header-actions [data-action="like"] small{display:none!important}
.creator-wood-page .creator-header-actions [data-action="like"].active{color:#ff6b7d!important}
.creator-wood-page .creator-header-actions:empty{display:none!important}

/* Ícone "Comentários" na fileira de ações é redundante no desktop — o
   painel de comentários já fica sempre visível ao lado (referência real
   não mostra esse ícone nenhuma vez perto do vídeo). No celular continua
   necessário (é o que abre a gaveta de comentários), por isso só some
   aqui dentro do bloco ≥821px. */
#creator-comments-toggle{display:none!important}
/* Fileira junto de "Ver todos": só "Baixar" fica — "Guardar" some (sem
   outro lugar por pedido do dono) e "Denunciar" some daqui porque já mora
   de verdade no menu de 3 pontos de cada cartão de vídeo (não perde a
   função, só não fica duplicada aqui). */
.creator-published>header .creator-content-tabs [data-action="save"],
.creator-published>header .creator-content-tabs #creator-report{display:none!important}

/* Avatar/cabeçalho ficaram pequenos demais — a regra antiga tinha 3
   declarações da mesma propriedade empilhadas na história do arquivo
   (70px→76px→48px), a ÚLTIMA sempre vence, e alguém tinha encolhido pra
   48px por engano — bem menor que a referência real (avatar ocupa quase
   toda a altura do cabeçalho). Corrigido de volta pra um tamanho grande e
   proporcional, com o cabeçalho um pouco mais alto pra caber com folga. */
.creator-wood-page .creator-top{min-height:0!important;padding:10px 26px!important}
.creator-wood-page .creator-avatar{width:60px!important;height:60px!important;font-size:22px!important;border-width:2px!important}
.creator-wood-page .creator-profile b{font-size:26px!important}

/* Handle (@usuario) é cinza-bege discreto na referência, não dourado
   vibrante — a cor antiga (#ffc928) era herdada de um estilo anterior,
   antes desta referência existir. */
.creator-wood-page .creator-profile small{color:#b8ab97!important}

/* Ícone de avaliação (estrela) é dourado na referência — os outros 3
   (seguidores/vídeos/visualizações) continuam verdes. */
#creator-reputacao-wrap svg{color:#f2c94c!important}

/* Ícone "Início" fica com uma marcação sutil de "página atual" — na
   referência ele tem um fundo levemente destacado, os demais não. */
.creator-nav a.creator-nav-link{background:#132a17!important;border-radius:9px!important}

/* Sino de notificações com contador real — a referência mostra o número
   de notificações não lidas (mesmo dado que já alimenta a campainha do
   resto da plataforma), nunca inventado. */
#creator-notif-bell{cursor:pointer}
#creator-notif-bell .creator-notif-badge{position:absolute;top:-4px;right:-6px;min-width:14px;height:14px;padding:0 3px;border-radius:8px;background:#e5484d;color:#fff;font-size:9px;font-weight:800;line-height:14px;text-align:center}

/* Linha de comentário completa (avatar+nome+hora, curtir com contador) —
   referência real mostra os três; antes só tínhamos nome+texto. */
#creator-comment-list article{display:flex!important;gap:10px;align-items:flex-start!important}
.creator-comment-avatar{flex:0 0 32px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#1f3d24;color:#c8ffa0;font-weight:800;font-size:13px}
.creator-comment-head{display:flex;align-items:baseline;gap:8px}
.creator-comment-head small{color:#7f9a80;font-size:11px;font-weight:600}
.creator-comment-like-count{margin-left:3px;font-size:10.5px;font-weight:700;color:#8a7c6a}
.creator-comment-like.active .creator-comment-like-count{color:#8fe84f}
.creator-comment-reply-link{display:inline-block;margin-top:4px;padding:0;border:0!important;background:transparent!important;box-shadow:none!important;color:#7f9a80!important;font-size:11px;font-weight:700;cursor:pointer}
.creator-comment-reply-link:hover{color:#c8ffa0!important}
#creator-comment-list article.creator-comment-reply{margin-left:34px;padding-top:8px!important}
#creator-comment-list article.creator-comment-reply .creator-comment-avatar{width:26px;height:26px;font-size:11px}
.creator-reply-indicator{display:flex;align-items:center;gap:8px;margin:8px 0 0;padding:6px 10px;border-radius:8px;background:#132a17;color:#c8ffa0;font-size:12px}
.creator-reply-indicator[hidden]{display:none!important}
.creator-reply-indicator button{margin-left:auto;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;color:#7f9a80!important;cursor:pointer;font-size:13px}
.creator-reply-indicator button:hover{color:#fff!important}

/* Menu de 3 pontos por cartão de vídeo, igual à referência real. O cartão
   deixou de ser um <button> único (agora tem dois controles reais dentro —
   selecionar e o menu — e HTML não aceita botão dentro de botão), virou um
   <div> com posição relativa; o botão de seleção herda o mesmo visual em
   coluna que o cartão tinha antes. */
/* Cartões de "Vídeos recentes" ficaram grandes/pesados demais — reduzidos
   pra um tamanho mais compacto e leve, mais parecido com a proporção da
   referência real (miniatura pequena, texto discreto). */
.creator-wood-page .creator-published-list{grid-auto-columns:minmax(128px,142px)!important}
/* Cartão verde profissional (não mais marrom/madeira) — acende um verde
   real ao passar o mouse, pedido do dono. */
.creator-wood-page .creator-published-card{position:relative;background:#0d1a10!important;border:1px solid #1c3621!important;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease!important}
.creator-wood-page .creator-published-card:hover{border-color:#4ea62f!important;box-shadow:0 0 0 1px #4ea62f66,0 0 18px #4ea62f4d!important;transform:translateY(-2px)}
.creator-wood-page .creator-published-card.active{border-color:#68d428!important;box-shadow:0 0 0 1px #68d428!important}
.creator-wood-page .creator-published-card-title{font-size:11.5px!important;line-height:1.25!important;padding:6px 7px 2px!important}
.creator-published-card-meta{font-size:9.5px!important}
.creator-wood-page .creator-published-card-select{display:flex;flex-direction:column;width:100%;text-align:left;background:transparent!important;border:0!important;box-shadow:none!important;padding:0;margin:0;color:inherit;cursor:pointer;font:inherit}
/* Menu de 3 pontos embaixo (perto do título/data), plano — sem caixa
   escura por cima da miniatura (pedido do dono, "solo los tres puntitos"). */
.creator-card-menu-wrap{position:absolute;bottom:4px;right:4px;z-index:2}
.creator-published-card .creator-card-menu-trigger{display:grid;place-items:center;width:20px;height:20px;padding:0;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#7f9a80!important}
.creator-published-card .creator-card-menu-trigger:hover{color:#c8ffa0!important}
.creator-card-menu-trigger:hover{background:#000000d9!important}
.creator-card-menu{position:absolute;top:28px;right:0;z-index:3;min-width:130px;display:flex;flex-direction:column;padding:4px;border-radius:10px;background:#0e1b12;border:1px solid #294d2f;box-shadow:0 12px 28px #000a}
.creator-card-menu[hidden]{display:none!important}
.creator-card-menu button{width:100%;text-align:left;padding:7px 10px!important;border:0!important;border-radius:6px!important;background:transparent!important;box-shadow:none!important;color:#cfe8c9!important;font-size:12px;font-weight:700}
.creator-card-menu button:hover{background:#132a17!important}
.creator-card-menu button.creator-btn-perigo{color:#ffb3ba!important}
.creator-card-menu button.creator-btn-perigo:hover{background:#2a0d10!important}
}

/* 2026-09-09 (referência real, Ana Souza mobile) — vídeo em tela cheia
   tipo Reels: ações viram uma coluna flutuante à direita do vídeo,
   título/descrição/hashtags viram overlay no canto inferior esquerdo do
   mesmo vídeo. Só dentro de max-width:820px — desktop já fechado, zero
   mudança lá (bloco à parte, no fim do arquivo, ganha a cascata sem
   precisar tocar nas regras antigas). */
@media(max-width:820px){
  #creator-current{overflow:hidden}
  #creator-current .creator-content-tabs{position:absolute!important;bottom:78px;right:8px;z-index:8;display:flex!important;flex-direction:column!important;align-items:center;gap:16px;width:auto!important;background:transparent!important;padding:0!important;margin:0!important;overflow:visible!important;flex-wrap:nowrap!important}
  #creator-current .creator-content-tabs button{display:flex!important;flex-direction:column;align-items:center;gap:3px;width:auto!important;height:auto!important;color:#fff!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
  #creator-current .creator-content-tabs button [data-morph-icone],
  #creator-current .creator-content-tabs button svg{width:26px!important;height:26px!important;filter:drop-shadow(0 1px 3px rgba(0,0,0,.85))}
  #creator-current .creator-content-tabs .creator-count{position:static!important;display:block!important;background:transparent!important;border:0!important;color:#fff!important;font-size:11px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.85)}
  #creator-current .creator-content-tabs [data-action="like"].active{color:#ff5b6b!important}
  #creator-current .creator-content-tabs #creator-follow,
  #creator-current .creator-content-tabs #creator-immersive-toggle{display:none!important}

  #creator-current #creator-video-info{position:absolute!important;left:0;right:64px;bottom:0;z-index:7;padding:16px 12px 14px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.78) 55%)!important;display:block!important}
  #creator-current #creator-video-info h1{color:#fff!important;font-size:13px;margin:0 0 3px;font-weight:800}
  #creator-current #creator-video-info p{color:#eee!important;font-size:10.5px;margin:0 0 6px;opacity:.95}
  #creator-current #creator-video-info small{display:none}
  .creator-video-tags{display:flex;flex-wrap:wrap;gap:6px}
  .creator-video-tags:empty{display:none}
  .creator-video-tag{padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;font-size:11px;font-weight:700}

  /* Rodapé de 4 frases + assinatura — a versão bonita (madeira, grid) só
     existia pro desktop; no celular ficava uma lista de texto crua, sem
     nenhum estilo. Empilha em coluna, mesma madeira do cabeçalho. */
  .creator-footer4{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:6px!important;padding:12px 0 12px 16px!important;background:url("/assets/brand/fondo-madera-oscura-gaba3.png") center/cover no-repeat!important;border-top:1px solid #caa23c}
  /* Frases deslizam na horizontal (pedido do dono) — cada uma inteira,
     sem cortar palavra, arrastando com o dedo. A assinatura fica FORA
     dessa fileira, sempre visível por completo, nunca disputando espaço. */
  /* Cinta corre sozinha da direita pra esquerda (pedido do dono) — nunca
     mexe na assinatura, que fica fora desta fileira, sempre parada e
     inteira. JS duplica as 4 frases uma vez (updateFooter4); a animação
     anda só metade da largura real (as 2 cópias juntas), por isso o loop
     nunca mostra uma emenda/salto. */
  .creator-footer4{overflow:hidden}
  .creator-footer4-phrases{display:flex!important;flex-wrap:nowrap!important;overflow:visible!important;gap:22px!important;width:max-content;animation:creator-footer4-marquee 26s linear infinite}
  @keyframes creator-footer4-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .creator-footer4-phrase{flex:0 0 auto;font-size:12px;gap:8px;white-space:nowrap;scroll-snap-align:start}
  .creator-footer4-phrase b{white-space:nowrap!important;max-width:none!important}
  .creator-footer4-phrase [data-morph-icone]{width:18px!important;height:18px!important;color:#8fe84f!important}
  .creator-footer4-signature{align-self:flex-end;margin-right:16px;font-size:24px;transform:rotate(-6deg)}

  /* Cabeçalho: a referência real (Ana Souza) não mostra a fileira de
     ícones início/vídeo/sino/pessoas no topo — só nome+verificado, Seguir
     e o menu de 3 pontos. Essa fileira já existe embaixo, na segunda
     navegação (Início/Vídeos/Curtos/...). Escondendo aqui sobra espaço
     real pro nome, que hoje corta em "An..." sem nem caber 2 letras. */
  .creator-wood-page .creator-nav{display:none!important}
  .creator-wood-page .creator-profile{min-width:0!important;flex:1 1 auto!important}
  .creator-wood-page .creator-profile b{max-width:none!important;font-size:16px!important}
  .creator-wood-page .creator-profile small{max-width:none!important}
  .creator-wood-page .creator-header-actions{order:3!important;flex:0 0 auto!important}

  /* "Ver todos" some no celular — o dedo já desliza a fileira nativamente,
     a palavra só ocupava espaço à toa (pedido do dono). */
  #creator-published-ver-todos{display:none!important}

  /* Vídeos/Playlist/Ao vivo agora moram dentro da própria cabeceira (só
     ícones) — a segunda navegação inteira (2 linhas: Início/Vídeos/Curtos/
     Playlists/Ao vivo/Comunidade/Sobre + busca) some do celular, devolvendo
     essa altura pra tela principal do vídeo (pedido do dono: "sube más
     para arriba, se vea más grande, más limpio"). */
  .creator-subnav,
  .creator-subnav-search{display:none!important}
  .creator-header-mobile-nav{display:flex!important;align-items:center;gap:8px;order:4;flex:0 0 auto}
  .creator-header-mobile-nav button,.creator-header-mobile-nav a{display:grid!important;place-items:center;width:auto!important;height:auto!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#fff!important;text-decoration:none!important}
  .creator-header-mobile-nav button svg,.creator-header-mobile-nav a svg{width:21px!important;height:21px!important}
  .creator-wood-page .creator-controles{order:5!important}

  /* "Seguir" tava caindo no gradiente verde fluorescente genérico
     (".creator-page button{background:linear-gradient!important}", a
     mesma trampa de sempre) — mesmo verde discreto do desktop aqui. */
  #creator-header-actions #creator-follow{background:#fff!important;border:0!important;color:#4ea62f!important;border-radius:999px!important;font-size:11px!important;font-weight:800!important;padding:0 10px!important;height:26px!important;box-shadow:0 4px 12px rgba(0,0,0,.25)!important}
  #creator-header-actions #creator-follow [data-morph-icone]{width:12px!important;height:12px!important}
  #creator-header-actions #creator-follow [data-morph-icone] svg{width:100%!important;height:100%!important}

  /* Seta "Voltar" — mesma trampa, caía verde com caixa. Fica só a seta
     branca, sem fundo nenhum. */
  .creator-wood-page .creator-top .gaba3-header-back{background:transparent!important;border:0!important;box-shadow:none!important;color:#fff!important;padding:4px!important;width:26px!important;height:26px!important;margin:0!important}
  /* Avatar+nome mais colados na seta de voltar (pedido do dono: "llevarlo
     la bola y el nombre... para el lado izquierdo") — sobra espaço real
     pros 3 ícones novos da cabeceira ficarem um pouco maiores. */
  .creator-wood-page .creator-top{padding-left:6px!important;padding-right:6px!important}
  .creator-wood-page .creator-profile{gap:6px!important}

  /* Bug real encontrado na verificação: ".creator-side-panel" (Playlists/
     Comunidade/Sobre) só tinha estilo (fundo escuro, borda) dentro do bloco
     @media(min-width:821px) — no celular ficava sem nenhum visual próprio,
     e o botão ✕ novo caía no verde genérico ".creator-page button{...}"
     (mesma trampa de sempre). Réplica mobile do estilo real. */
  .creator-side-panel{margin:10px 8px;padding:14px;background:#0a150d;border:1px solid #1c3621;border-radius:12px}
  .creator-side-panel header{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .creator-side-panel header h2{margin:0 0 10px;font-size:15px;color:#fff}
  .creator-side-panel header .creator-side-panel-close{flex:0 0 auto;display:grid!important;place-items:center;width:30px!important;height:30px!important;padding:0!important;border:0!important;border-radius:8px!important;background:transparent!important;box-shadow:none!important;color:#9bb59a!important;font-size:16px}
}
/* Pedido do dono 2026-09-13: a palavra "Destaque" no vídeo principal não
   pode aparecer no celular — vem no FIM do arquivo de propósito, pra
   vencer por ordem de cascata qualquer regra anterior sem precisar
   reescrevê-la nem brigar de especificidade. */
@media(max-width:820px){
  .creator-featured-badge{display:none!important}
}