/* ============================================================
   Temas de cor da plataforma: [data-cor="menino"] e [data-cor="menina"]
   Combina com data-theme="dark|light" (modo escuro/claro)
   ============================================================ */

/* ---------- MENINO (azul) ---------- */
:root[data-cor="menino"] {
    --primary: #2f8cff;
    --primary-dark: #1c6fe0;
    --primary-light: rgba(47,140,255,0.16);
    --accent: #38d9f5;
    --accent-light: rgba(56,217,245,0.15);
    --bg: #0b1424;
    --bg2: #0f1c33;
    --topbar-bg: rgba(11,20,36,0.88);
    --modal-bg: #12223d;
    --tip-text: #9cc9ff;
}
:root[data-theme="light"][data-cor="menino"] {
    --primary: #1e6fe8;
    --primary-dark: #1558c0;
    --primary-light: rgba(30,111,232,0.12);
    --accent: #0891b2;
    --accent-light: rgba(8,145,178,0.12);
    --bg: #eaf3ff;
    --bg2: #dbeafe;
    --topbar-bg: rgba(255,255,255,0.9);
    --modal-bg: #ffffff;
    --tip-text: #1558c0;
}
:root[data-cor="menino"] body {
    background-image:
        radial-gradient(ellipse at 15% 0%, rgba(47,140,255,0.22) 0%, transparent 55%),
        radial-gradient(ellipse at 90% 100%, rgba(56,217,245,0.14) 0%, transparent 50%);
    background-attachment: fixed;
}
:root[data-theme="light"][data-cor="menino"] body {
    background-image:
        radial-gradient(ellipse at 15% 0%, rgba(30,111,232,0.16) 0%, transparent 55%),
        radial-gradient(ellipse at 90% 100%, rgba(8,145,178,0.12) 0%, transparent 50%);
}

/* ---------- MENINA (floral: rosa e vermelho) ---------- */
:root[data-cor="menina"] {
    --primary: #ff5c93;
    --primary-dark: #e63e78;
    --primary-light: rgba(255,92,147,0.16);
    --accent: #ff7a7a;
    --accent-light: rgba(255,122,122,0.16);
    --bg: #1f0f18;
    --bg2: #2a1421;
    --topbar-bg: rgba(31,15,24,0.88);
    --modal-bg: #2b1522;
    --tip-text: #ffb3cd;
}
:root[data-theme="light"][data-cor="menina"] {
    --primary: #e0457b;
    --primary-dark: #c22d62;
    --primary-light: rgba(224,69,123,0.12);
    --accent: #dc2626;
    --accent-light: rgba(220,38,38,0.10);
    --bg: #fff1f5;
    --bg2: #ffe4ec;
    --topbar-bg: rgba(255,255,255,0.9);
    --modal-bg: #ffffff;
    --tip-text: #c22d62;
}

/* Padrao floral em SVG (flores rosa/vermelhas), bem suave */
:root[data-cor="menina"] body {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg opacity='0.16'%3E%3Cg transform='translate(40 45)'%3E%3Ccircle cx='0' cy='-11' r='8' fill='%23ff5c93'/%3E%3Ccircle cx='10.5' cy='-3.4' r='8' fill='%23ff5c93'/%3E%3Ccircle cx='6.5' cy='9' r='8' fill='%23ff5c93'/%3E%3Ccircle cx='-6.5' cy='9' r='8' fill='%23ff5c93'/%3E%3Ccircle cx='-10.5' cy='-3.4' r='8' fill='%23ff5c93'/%3E%3Ccircle r='5' fill='%23ffd166'/%3E%3C/g%3E%3Cg transform='translate(130 120) scale(0.8)'%3E%3Ccircle cx='0' cy='-11' r='8' fill='%23e63946'/%3E%3Ccircle cx='10.5' cy='-3.4' r='8' fill='%23e63946'/%3E%3Ccircle cx='6.5' cy='9' r='8' fill='%23e63946'/%3E%3Ccircle cx='-6.5' cy='9' r='8' fill='%23e63946'/%3E%3Ccircle cx='-10.5' cy='-3.4' r='8' fill='%23e63946'/%3E%3Ccircle r='5' fill='%23ffd166'/%3E%3C/g%3E%3Cg transform='translate(135 30) scale(0.55)'%3E%3Ccircle cx='0' cy='-11' r='8' fill='%23ff8fb1'/%3E%3Ccircle cx='10.5' cy='-3.4' r='8' fill='%23ff8fb1'/%3E%3Ccircle cx='6.5' cy='9' r='8' fill='%23ff8fb1'/%3E%3Ccircle cx='-6.5' cy='9' r='8' fill='%23ff8fb1'/%3E%3Ccircle cx='-10.5' cy='-3.4' r='8' fill='%23ff8fb1'/%3E%3Ccircle r='5' fill='%23fff'/%3E%3C/g%3E%3Cg transform='translate(45 135) scale(0.6)'%3E%3Ccircle cx='0' cy='-11' r='8' fill='%23ff5c93'/%3E%3Ccircle cx='10.5' cy='-3.4' r='8' fill='%23ff5c93'/%3E%3Ccircle cx='6.5' cy='9' r='8' fill='%23ff5c93'/%3E%3Ccircle cx='-6.5' cy='9' r='8' fill='%23ff5c93'/%3E%3Ccircle cx='-10.5' cy='-3.4' r='8' fill='%23ff5c93'/%3E%3Ccircle r='5' fill='%23ffd166'/%3E%3C/g%3E%3Cpath d='M85 80 q10 -14 22 0 q-10 12 -22 0z' fill='%2340916c'/%3E%3C/g%3E%3C/svg%3E"),
        radial-gradient(ellipse at 10% 0%, rgba(255,92,147,0.20) 0%, transparent 55%),
        radial-gradient(ellipse at 95% 100%, rgba(230,57,70,0.14) 0%, transparent 50%);
    background-attachment: fixed;
}
:root[data-theme="light"][data-cor="menina"] body {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg opacity='0.22'%3E%3Cg transform='translate(40 45)'%3E%3Ccircle cx='0' cy='-11' r='8' fill='%23ff5c93'/%3E%3Ccircle cx='10.5' cy='-3.4' r='8' fill='%23ff5c93'/%3E%3Ccircle cx='6.5' cy='9' r='8' fill='%23ff5c93'/%3E%3Ccircle cx='-6.5' cy='9' r='8' fill='%23ff5c93'/%3E%3Ccircle cx='-10.5' cy='-3.4' r='8' fill='%23ff5c93'/%3E%3Ccircle r='5' fill='%23ffd166'/%3E%3C/g%3E%3Cg transform='translate(130 120) scale(0.8)'%3E%3Ccircle cx='0' cy='-11' r='8' fill='%23e63946'/%3E%3Ccircle cx='10.5' cy='-3.4' r='8' fill='%23e63946'/%3E%3Ccircle cx='6.5' cy='9' r='8' fill='%23e63946'/%3E%3Ccircle cx='-6.5' cy='9' r='8' fill='%23e63946'/%3E%3Ccircle cx='-10.5' cy='-3.4' r='8' fill='%23e63946'/%3E%3Ccircle r='5' fill='%23ffd166'/%3E%3C/g%3E%3Cg transform='translate(135 30) scale(0.55)'%3E%3Ccircle cx='0' cy='-11' r='8' fill='%23ff8fb1'/%3E%3Ccircle cx='10.5' cy='-3.4' r='8' fill='%23ff8fb1'/%3E%3Ccircle cx='6.5' cy='9' r='8' fill='%23ff8fb1'/%3E%3Ccircle cx='-6.5' cy='9' r='8' fill='%23ff8fb1'/%3E%3Ccircle cx='-10.5' cy='-3.4' r='8' fill='%23ff8fb1'/%3E%3Ccircle r='5' fill='%23fff'/%3E%3C/g%3E%3Cg transform='translate(45 135) scale(0.6)'%3E%3Ccircle cx='0' cy='-11' r='8' fill='%23ff5c93'/%3E%3Ccircle cx='10.5' cy='-3.4' r='8' fill='%23ff5c93'/%3E%3Ccircle cx='6.5' cy='9' r='8' fill='%23ff5c93'/%3E%3Ccircle cx='-6.5' cy='9' r='8' fill='%23ff5c93'/%3E%3Ccircle cx='-10.5' cy='-3.4' r='8' fill='%23ff5c93'/%3E%3Ccircle r='5' fill='%23ffd166'/%3E%3C/g%3E%3Cpath d='M85 80 q10 -14 22 0 q-10 12 -22 0z' fill='%2340916c'/%3E%3C/g%3E%3C/svg%3E"),
        radial-gradient(ellipse at 10% 0%, rgba(224,69,123,0.14) 0%, transparent 55%),
        radial-gradient(ellipse at 95% 100%, rgba(220,38,38,0.10) 0%, transparent 50%);
}

/* Barra de topo e botao principal acompanham a cor do tema */
:root[data-cor="menina"] .topbar { border-bottom-color: rgba(255,92,147,0.35); }
:root[data-cor="menino"] .topbar { border-bottom-color: rgba(47,140,255,0.35); }

/* ---------- Avatar com foto (compartilhado) ---------- */
.user-avatar.has-photo { background-size: cover; background-position: center; color: transparent; }