/* =========================================================================

   Mural de Ideias · ATD — estética iOS 26 "Liquid Glass"

   ========================================================================= */



:root {

    color-scheme: light dark;



    /* Tipografia estilo Apple */

    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",

            "Segoe UI", Roboto, Helvetica, Arial, sans-serif;



    /* Raios e transições */

    --r-lg: 26px;

    --r-md: 18px;

    --r-sm: 12px;

    --ease: cubic-bezier(.22, 1, .36, 1);

    --spring: cubic-bezier(.34, 1.56, .64, 1);

}



/* ---- Tema claro (padrão) ------------------------------------------------- */

:root, :root[data-theme="light"] {

    --bg-0: #eef0f6;

    --bg-1: #e3e7f2;

    --blob-a: #7aa8ff;

    --blob-b: #b58bff;

    --blob-c: #6ee7d7;



    --glass-bg: rgba(255, 255, 255, .55);

    --glass-brd: rgba(255, 255, 255, .7);

    --glass-hi: rgba(255, 255, 255, .9);

    --glass-shadow: 0 8px 30px rgba(31, 38, 75, .12), 0 2px 8px rgba(31, 38, 75, .08);



    --text: #1a1a1f;

    --text-2: #62636b;

    --text-3: #8a8b94;



    --field-bg: rgba(255, 255, 255, .6);

    --field-brd: rgba(20, 20, 40, .1);

    --field-brd-focus: var(--accent);



    --accent: #0a84ff;

    --accent-ink: #fff;

    --accent-soft: rgba(10, 132, 255, .12);



    --danger: #ff453a;

}



/* ---- Tema escuro --------------------------------------------------------- */

:root[data-theme="dark"] {

    --bg-0: #06070c;

    --bg-1: #0d1018;

    --blob-a: #2a5bd7;

    --blob-b: #7d3ff0;

    --blob-c: #128b7a;



    --glass-bg: rgba(28, 30, 40, .55);

    --glass-brd: rgba(255, 255, 255, .12);

    --glass-hi: rgba(255, 255, 255, .16);

    --glass-shadow: 0 10px 34px rgba(0, 0, 0, .5), 0 2px 10px rgba(0, 0, 0, .35);



    --text: #f4f5f8;

    --text-2: #a9abb6;

    --text-3: #74767f;



    --field-bg: rgba(255, 255, 255, .06);

    --field-brd: rgba(255, 255, 255, .12);



    --accent: #0a84ff;

    --accent-ink: #fff;

    --accent-soft: rgba(10, 132, 255, .2);



    --danger: #ff6961;

}



/* Segue o sistema quando data-theme="auto" */

@media (prefers-color-scheme: dark) {

    :root[data-theme="auto"] {

        --bg-0: #06070c; --bg-1: #0d1018;

        --blob-a: #2a5bd7; --blob-b: #7d3ff0; --blob-c: #128b7a;

        --glass-bg: rgba(28, 30, 40, .55);

        --glass-brd: rgba(255, 255, 255, .12);

        --glass-hi: rgba(255, 255, 255, .16);

        --glass-shadow: 0 10px 34px rgba(0, 0, 0, .5), 0 2px 10px rgba(0, 0, 0, .35);

        --text: #f4f5f8; --text-2: #a9abb6; --text-3: #74767f;

        --field-bg: rgba(255, 255, 255, .06);

        --field-brd: rgba(255, 255, 255, .12);

        --accent-soft: rgba(10, 132, 255, .2);

        --danger: #ff6961;

    }

}



* { box-sizing: border-box; }



/* Garante que o atributo `hidden` sempre esconda (regras de display abaixo

   têm mais especificidade que o padrão do navegador e o anulariam). */

[hidden] { display: none !important; }



html, body { height: 100%; }



body {

    margin: 0;

    font-family: var(--font);

    color: var(--text);

    background: linear-gradient(160deg, var(--bg-0), var(--bg-1));

    background-attachment: fixed;

    min-height: 100vh;

    -webkit-font-smoothing: antialiased;

    line-height: 1.5;

    letter-spacing: -0.01em;

}



/* ---- Blobs de fundo (fluidez) ------------------------------------------- */

.bg-blobs {

    position: fixed;

    inset: 0;

    overflow: hidden;

    z-index: -1;

    filter: blur(60px);

    opacity: .55;

}

.bg-blobs span {

    position: absolute;

    width: 46vmax;

    height: 46vmax;

    border-radius: 50%;

    mix-blend-mode: normal;

    animation: float 22s var(--ease) infinite alternate;

}

.bg-blobs span:nth-child(1) { background: var(--blob-a); top: -14vmax; left: -8vmax; }

.bg-blobs span:nth-child(2) { background: var(--blob-b); bottom: -18vmax; right: -10vmax; animation-delay: -7s; }

.bg-blobs span:nth-child(3) { background: var(--blob-c); top: 30vmax; left: 40vmax; animation-delay: -13s; }



@keyframes float {

    from { transform: translate(0, 0) scale(1); }

    to   { transform: translate(6vmax, -5vmax) scale(1.15); }

}

@media (prefers-reduced-motion: reduce) {

    .bg-blobs span { animation: none; }

}



/* ---- Vidro (glass) ------------------------------------------------------- */

.glass {

    background: var(--glass-bg);

    -webkit-backdrop-filter: blur(30px) saturate(180%);

    backdrop-filter: blur(30px) saturate(180%);

    border: 1px solid var(--glass-brd);

    box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);

}

.card { border-radius: var(--r-lg); }



/* ---- Botão de tema ------------------------------------------------------- */

.theme-toggle {

    display: grid;

    place-items: center;

    width: 42px; height: 42px;

    border-radius: 50%;

    border: 1px solid var(--glass-brd);

    background: var(--glass-bg);

    -webkit-backdrop-filter: blur(20px);

    backdrop-filter: blur(20px);

    color: var(--text);

    cursor: pointer;

    transition: transform .3s var(--spring), background .3s;

}

.theme-toggle:hover { transform: scale(1.08); }

.theme-toggle:active { transform: scale(.94); }

.theme-toggle .ico-moon { display: none; }

:root[data-theme="dark"] .theme-toggle .ico-sun { display: none; }

:root[data-theme="dark"] .theme-toggle .ico-moon { display: block; }

@media (prefers-color-scheme: dark) {

    :root[data-theme="auto"] .theme-toggle .ico-sun { display: none; }

    :root[data-theme="auto"] .theme-toggle .ico-moon { display: block; }

}



/* =========================================================================

   Página de login

   ========================================================================= */

.auth-page .theme-toggle {

    position: fixed;

    top: 20px; right: 20px;

    z-index: 5;

}

.auth-wrap {

    min-height: 100vh;

    display: grid;

    place-items: center;

    padding: 24px;

}

.auth-card {

    width: 100%;

    max-width: 380px;

    padding: 38px 32px 32px;

    animation: rise .6s var(--ease) both;

}

.brand { text-align: center; margin-bottom: 24px; }

.brand-mark {

    width: 60px; height: 60px;

    margin: 0 auto 14px;

    display: grid; place-items: center;

    font-size: 28px;

    border-radius: 20px;

    color: var(--accent-ink);

    background: linear-gradient(140deg, var(--accent), #6a5cff);

    box-shadow: 0 8px 22px var(--accent-soft);

}

.brand-mark.sm { width: 34px; height: 34px; font-size: 17px; border-radius: 11px; margin: 0; }

.brand h1 { font-size: 21px; margin: 0 0 6px; letter-spacing: -.02em; }

.muted { color: var(--text-2); font-size: 14px; margin: 0; }



/* =========================================================================

   Formulários

   ========================================================================= */

.form { display: flex; flex-direction: column; gap: 14px; }

.field { display: flex; flex-direction: column; gap: 6px; }

.field > span { font-size: 13px; color: var(--text-2); padding-left: 4px; }



input, textarea {

    font-family: inherit;

    font-size: 16px;

    color: var(--text);

    background: var(--field-bg);

    border: 1px solid var(--field-brd);

    border-radius: var(--r-sm);

    padding: 13px 15px;

    width: 100%;

    outline: none;

    transition: border-color .2s, box-shadow .2s, background .2s;

    resize: vertical;

}

input::placeholder, textarea::placeholder { color: var(--text-3); }

input:focus, textarea:focus {

    border-color: var(--accent);

    box-shadow: 0 0 0 4px var(--accent-soft);

    background: var(--field-bg);

}



/* ---- Botões -------------------------------------------------------------- */

.btn {

    font-family: inherit;

    font-size: 15px;

    font-weight: 600;

    border: none;

    border-radius: var(--r-md);

    padding: 12px 20px;

    cursor: pointer;

    transition: transform .2s var(--spring), filter .2s, background .2s, opacity .2s;

    letter-spacing: -.01em;

}

.btn:active { transform: scale(.96); }

.btn[disabled] { opacity: .5; cursor: default; }

.btn-primary {

    color: var(--accent-ink);

    background: linear-gradient(140deg, var(--accent), #4f7dff);

    box-shadow: 0 6px 18px var(--accent-soft);

}

.btn-primary:hover:not([disabled]) { filter: brightness(1.06); }

.btn-block { width: 100%; }

.btn-ghost {

    background: transparent;

    color: var(--accent);

    padding: 6px 10px;

}

.btn-ghost:hover { background: var(--accent-soft); }

.btn-sm { font-size: 13px; padding: 7px 12px; border-radius: var(--r-sm); }



.alert {

    background: color-mix(in srgb, var(--danger) 14%, transparent);

    color: var(--danger);

    border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);

    padding: 11px 14px;

    border-radius: var(--r-sm);

    font-size: 14px;

    margin-bottom: 16px;

    text-align: center;

}



/* =========================================================================

   Topbar

   ========================================================================= */

.topbar {

    position: sticky;

    top: 0;

    z-index: 10;

    border-radius: 0;

    border-left: none; border-right: none; border-top: none;

}

.topbar-inner {

    max-width: 720px;

    margin: 0 auto;

    padding: 12px 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

}

.brand-row { display: flex; align-items: center; gap: 10px; font-size: 16px; letter-spacing: -.02em; }

.topbar-actions { display: flex; align-items: center; gap: 10px; }

.user-chip {

    display: flex; align-items: center; gap: 8px;

    padding: 5px 8px 5px 5px;

    border-radius: 999px;

    font-size: 13px;

    font-weight: 600;

}

.user-chip .uname { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.avatar {

    width: 28px; height: 28px;

    border-radius: 50%;

    display: grid; place-items: center;

    color: #fff;

    font-size: 13px; font-weight: 700;

    background: linear-gradient(140deg, var(--accent), #6a5cff);

    flex: none;

}

.logout {

    text-decoration: none;

    color: var(--text-2);

    font-size: 16px;

    padding: 0 4px;

    border-radius: 8px;

    transition: color .2s, background .2s;

}

.logout:hover { color: var(--danger); }



/* =========================================================================

   Feed + Compositor

   ========================================================================= */

.feed-wrap {

    max-width: 720px;

    margin: 0 auto;

    padding: 22px 18px 60px;

    display: flex;

    flex-direction: column;

    gap: 18px;

}



.composer { padding: 20px; animation: rise .5s var(--ease) both; }

.composer-title { margin: 0 0 14px; font-size: 15px; color: var(--text-2); font-weight: 600; }

.input-title { font-size: 18px; font-weight: 600; }

.input-body { min-height: 76px; }



.links-block { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

.links-list { display: flex; flex-direction: column; gap: 8px; width: 100%; }

.link-row { display: flex; gap: 8px; align-items: center; }

.input-link { font-size: 14px; padding: 10px 13px; }

.link-del {

    flex: none;

    width: 34px; height: 34px;

    border-radius: 10px;

    border: 1px solid var(--field-brd);

    background: var(--field-bg);

    color: var(--text-3);

    cursor: pointer;

    transition: color .2s, transform .15s;

}

.link-del:hover { color: var(--danger); }

.link-row:only-child .link-del { visibility: hidden; }

.image-ref .link-del { visibility: visible; }

.ref-thumb {

    display: flex; align-items: center; gap: 10px;

    width: 100%; min-width: 0;

    color: var(--text); text-decoration: none;

    background: var(--field-bg);

    border: 1px solid var(--field-brd);

    border-radius: var(--r-sm);

    padding: 6px 8px;

}

.ref-thumb img {

    width: 42px; height: 42px; border-radius: 8px;

    object-fit: cover; flex: none;

}

.ref-thumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }



.composer-actions {

    display: flex; align-items: center; justify-content: space-between;

    gap: 12px; margin-top: 4px;

}

.hint { font-size: 13px; color: var(--text-3); }


.upload-hint { display: block; font-size: 12px; color: var(--text-3); padding-left: 4px; }

.hint.err { color: var(--danger); }

.hint.ok { color: #30b565; }



/* ---- Cartão de ideia ----------------------------------------------------- */

.feed { display: flex; flex-direction: column; gap: 14px; }

.feed-loading, .feed-empty { text-align: center; padding: 30px 10px; font-size: 14px; }



.idea {

    padding: 18px 18px 16px;

    animation: rise .45s var(--ease) both;

}

.idea.enter { animation: pop .5s var(--spring) both; }

.idea-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

.idea-meta { display: flex; flex-direction: column; line-height: 1.2; margin-right: auto; }

.idea-author { font-weight: 600; font-size: 14px; }

.idea-time { font-size: 12px; color: var(--text-3); }

.idea-title { margin: 0 0 6px; font-size: 18px; letter-spacing: -.02em; }

.idea-body { margin: 0 0 12px; color: var(--text); white-space: pre-wrap; word-wrap: break-word; }

.idea-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.idea-links a {

    display: inline-flex; align-items: center; gap: 7px;

    max-width: 100%;

    color: var(--accent);

    text-decoration: none;

    font-size: 14px;

    background: var(--accent-soft);

    padding: 7px 12px;

    border-radius: 10px;

    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

    transition: filter .2s;

}

.idea-links a:hover { filter: brightness(1.05); text-decoration: underline; }

.idea-links a::before { content: ""; font-size: 12px; }

.idea-links a.ref-image {

    padding: 6px 8px 6px 6px;

    color: var(--text);

    background: var(--field-bg);

}

.idea-links a.ref-image::before { content: none; }

.idea-links a.ref-image img {

    width: 34px; height: 34px; border-radius: 7px;

    object-fit: cover; flex: none;

}

.idea-links a.ref-image.compact img { width: 26px; height: 26px; }

.idea-links a.ref-image span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }



.pill {

    font-size: 11px; font-weight: 700; letter-spacing: .02em;

    text-transform: uppercase;

    padding: 4px 9px; border-radius: 999px;

    background: var(--accent-soft); color: var(--accent);

    flex: none;

}

.idea-del {

    flex: none;

    background: none; border: none;

    font-size: 15px; cursor: pointer;

    opacity: .45; padding: 4px;

    border-radius: 8px;

    transition: opacity .2s, transform .15s;

}

.idea-del:hover { opacity: 1; transform: scale(1.1); }



/* ---- Animações ----------------------------------------------------------- */

@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@keyframes pop  { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }



/* =========================================================================

   Logo + marca

   ========================================================================= */

.brand-row { text-decoration: none; color: inherit; }

.brand-logo { display: flex; align-items: center; color: var(--text); }

.logo { height: 24px; width: auto; display: block; }

.brand-name { font-size: 15px; letter-spacing: -.02em; white-space: nowrap; }



/* =========================================================================

   Menu do usuário (dropdown)

   ========================================================================= */

.user-menu { position: relative; }

.user-chip {

    display: flex; align-items: center; gap: 8px;

    padding: 5px 10px 5px 5px;

    border-radius: 999px;

    font-size: 13px; font-weight: 600;

    color: var(--text); cursor: pointer;

}

.user-chip .uname { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.user-chip .chev { color: var(--text-3); font-size: 12px; }

.menu-pop {

    position: absolute; right: 0; top: calc(100% + 8px);

    min-width: 190px; padding: 6px;

    border-radius: 16px; z-index: 20;

    display: flex; flex-direction: column; gap: 2px;

    animation: pop .25s var(--spring) both;

}

.menu-item {

    display: block; text-decoration: none;

    color: var(--text); font-size: 14px; font-weight: 500;

    padding: 10px 12px; border-radius: 10px;

    transition: background .15s;

}

.menu-item:hover { background: var(--accent-soft); }

.menu-item.active { color: var(--accent); }

.menu-item.danger:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }



/* =========================================================================

   Avatares (variações)

   ========================================================================= */

.avatar.has-img { background-size: cover; background-position: center; color: transparent; }

.avatar.sm { width: 32px; height: 32px; font-size: 14px; }

.avatar.xl { width: 88px; height: 88px; font-size: 34px; border-radius: 24px; }



/* =========================================================================

   Filtros

   ========================================================================= */

.filters { display: flex; flex-direction: column; gap: 12px; }

.search-wrap {

    display: flex; align-items: center; gap: 10px;

    padding: 0 14px; border-radius: 14px;

}

.search-ico { color: var(--text-3); font-size: 18px; }

.search-wrap input {

    border: none; background: transparent; box-shadow: none;

    padding: 13px 0;

}

.search-wrap input:focus { box-shadow: none; }

.filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.group-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-right: auto; }

.chip {

    --chip: var(--accent);

    display: inline-flex; align-items: center; gap: 7px;

    font-family: inherit; font-size: 13px; font-weight: 600;

    color: var(--text-2);

    background: var(--field-bg);

    border: 1px solid var(--field-brd);

    padding: 7px 13px; border-radius: 999px;

    cursor: pointer; transition: all .2s var(--ease);

}

.chip:hover { color: var(--text); }

.chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--chip); flex: none; }

.chip .chip-n { color: var(--text-3); font-size: 12px; }

.chip.active {

    color: var(--accent-ink);

    background: var(--chip, var(--accent));

    border-color: transparent;

}

.chip.active .dot { background: rgba(255,255,255,.85); }

.chip.active .chip-n { color: rgba(255,255,255,.8); }



.input-filter, .input-group {

    font-family: inherit; font-size: 13px; font-weight: 500;

    color: var(--text); background: var(--field-bg);

    border: 1px solid var(--field-brd); border-radius: 12px;

    padding: 9px 12px; cursor: pointer; width: auto;

}



/* =========================================================================

   Compositor (rodapé com grupo)

   ========================================================================= */

.composer-footer {

    display: flex; align-items: center; justify-content: space-between;

    gap: 12px; flex-wrap: wrap; margin-top: 4px;

}

.group-pick { display: flex; align-items: center; gap: 8px; }

.composer-actions { display: flex; align-items: center; gap: 12px; }



/* =========================================================================

   Modal (novo grupo)

   ========================================================================= */

.modal-backdrop {

    position: fixed; inset: 0; z-index: 50;

    background: rgba(0,0,0,.35);

    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);

    display: grid; place-items: center; padding: 20px;

    animation: fade .2s ease both;

}

.modal { width: 100%; max-width: 380px; padding: 24px; animation: pop .35s var(--spring) both; }

.modal h3 { margin: 0 0 4px; font-size: 18px; }

.modal .muted { margin-bottom: 14px; }

.color-picker { display: flex; gap: 10px; margin: 14px 0; flex-wrap: wrap; }

.swatch {

    width: 30px; height: 30px; border-radius: 50%;

    border: 2px solid transparent; cursor: pointer;

    transition: transform .15s var(--spring);

}

.swatch:hover { transform: scale(1.12); }

.swatch.active { border-color: var(--text); transform: scale(1.12); }

.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }



/* =========================================================================

   Card de ideia — rodapé, grupo, status

   ========================================================================= */

.idea-titlelink { text-decoration: none; color: inherit; }

.idea-titlelink:hover .idea-title { color: var(--accent); }

.group-pill { background: var(--accent-soft); color: var(--accent); }

.idea-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }

.idea-open {

    display: inline-flex; align-items: center; gap: 6px;

    font-size: 13px; font-weight: 600; color: var(--text-2);

    text-decoration: none; padding: 6px 10px; border-radius: 10px;

    transition: background .2s, color .2s;

}

.idea-open:hover { background: var(--accent-soft); color: var(--accent); }



.status[data-status="discussao"], .status-opt[data-set="discussao"].active { background: rgba(255,159,10,.16); color: #ff9f0a; }

.status[data-status="aprovada"],  .status-opt[data-set="aprovada"].active  { background: rgba(48,209,88,.16);  color: #2bb155; }

.status[data-status="arquivada"], .status-opt[data-set="arquivada"].active { background: rgba(142,142,147,.18); color: var(--text-2); }



/* =========================================================================

   Página de discussão (thread)

   ========================================================================= */

.thread-wrap, .settings-wrap {

    max-width: 720px; margin: 0 auto; padding: 22px 18px 60px;

    display: flex; flex-direction: column; gap: 16px;

}

.back-link {

    color: var(--text-2); text-decoration: none; font-size: 14px; font-weight: 500;

    width: fit-content; transition: color .2s;

}

.back-link:hover { color: var(--accent); }

.idea.detail { padding: 22px; animation: rise .4s var(--ease) both; }

.idea-title.big { font-size: 24px; margin: 4px 0 12px; }

.status-bar {

    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;

    margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--field-brd);

}

.status-opt {

    font-family: inherit; font-size: 12px; font-weight: 600;

    color: var(--text-2); background: var(--field-bg);

    border: 1px solid var(--field-brd); border-radius: 999px;

    padding: 6px 12px; cursor: pointer; transition: all .2s;

}

.status-opt:hover { color: var(--text); }

.status-opt.active { border-color: transparent; }

.status-opt.active[data-set="nova"] { background: var(--accent); color: #fff; }

.idea-del-btn { margin-left: auto; }



.discussion { display: flex; flex-direction: column; gap: 14px; }

.disc-title { font-size: 16px; margin: 6px 2px; color: var(--text-2); }

.comments { display: flex; flex-direction: column; gap: 12px; }

.comment { display: flex; gap: 10px; animation: rise .35s var(--ease) both; }

.comment.enter { animation: pop .4s var(--spring) both; }

.comment-main {

    flex: 1; background: var(--glass-bg);

    border: 1px solid var(--glass-brd); border-radius: 16px;

    padding: 12px 14px;

    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);

}

.comment-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }

.comment-author { font-weight: 600; font-size: 13px; }

.comment-time { font-size: 12px; color: var(--text-3); margin-right: auto; }

.comment-edited { font-size: 11px; color: var(--text-3); }

.comment-edit, .comment-del { background: none; border: none; cursor: pointer; opacity: .5; font-size: 13px; color: var(--text-2); }

.comment-edit:hover, .comment-del:hover { opacity: 1; }

.comment-body { margin: 0; white-space: pre-wrap; word-wrap: break-word; }

.comment-edit-form { display: flex; flex-direction: column; gap: 8px; }

.comment-edit-form textarea { min-height: 82px; font-size: 14px; padding: 10px 12px; }

.comment-edit-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

.comment-edit-actions .hint { margin-right: auto; }

.no-comments { padding: 8px 2px; }

.comment-form { padding: 12px; display: flex; flex-direction: column; gap: 10px; }

.comment-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }



/* =========================================================================

   Configurações

   ========================================================================= */

.page-title { font-size: 26px; margin: 0; letter-spacing: -.02em; }

.settings-card { padding: 22px; }

.settings-card h2 { font-size: 15px; margin: 0 0 14px; color: var(--text-2); }

.avatar-edit { display: flex; align-items: center; gap: 20px; }

.avatar-controls { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

.row-end { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }

.small { font-size: 13px; }

.settings-card .muted.small { margin-top: 12px; }



/* =========================================================================

   Responsivo

   ========================================================================= */

@media (max-width: 560px) {

    .user-chip .uname, .user-chip .chev { display: none; }

    .brand-name { display: none; }

    .feed-wrap, .thread-wrap, .settings-wrap { padding: 16px 12px 50px; }

    .idea-title { font-size: 17px; }

    .idea-title.big { font-size: 21px; }

    .filter-row { gap: 8px; }

    .group-chips { width: 100%; }

    .input-filter { flex: 1; }

    .avatar-edit { flex-direction: column; align-items: flex-start; }

}



/* =========================================================================

   ======================  APP v2 — LAYOUT 3 PAINÉIS  ======================

   ========================================================================= */

body.app { height: 100vh; overflow: hidden; display: grid; grid-template-columns: 268px minmax(0, 1fr); }

.bg-blobs.subtle { opacity: .28; }

[data-admin="0"] .admin-only { display: none !important; }



/* ---- Sidebar ------------------------------------------------------------- */

.sidebar {

    grid-column: 1; display: flex; flex-direction: column; min-height: 0;

    background: var(--glass-bg);

    -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);

    border-right: 1px solid var(--glass-brd);

}

.side-brand { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--field-brd); }

.side-brand .brand-logo { color: var(--text); display: flex; }

.side-brand .logo { height: 26px; }

.side-brand-txt { display: flex; flex-direction: column; line-height: 1.1; }

.side-brand-txt strong { font-size: 14px; letter-spacing: -.01em; }

.side-brand-txt small { font-size: 11px; color: var(--text-3); }



.side-nav { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }

.nav-item {

    display: flex; align-items: center; gap: 10px; width: 100%;

    font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text-2);

    background: transparent; border: none; border-radius: 10px; padding: 10px 12px;

    cursor: pointer; text-align: left; transition: background .15s, color .15s;

}

.nav-item .ni-ico { font-size: 15px; }

.nav-item:hover { background: var(--field-bg); color: var(--text); }

.nav-item.active { background: var(--accent-soft); color: var(--accent); }

.nav-sec { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 6px; }

.nav-sec span { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--text-3); }

.nav-sec-add {

    background: transparent; border: none; color: var(--text-3); cursor: pointer;

    font-size: 16px; line-height: 1; width: 22px; height: 22px; border-radius: 6px;

}

.nav-sec-add:hover { background: var(--field-bg); color: var(--accent); }

.side-groups { display: flex; flex-direction: column; gap: 1px; }

.side-group {

    display: flex; align-items: center; gap: 9px; width: 100%;

    font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--text-2);

    background: transparent; border: none; border-radius: 8px; padding: 8px 12px;

    cursor: pointer; text-align: left; transition: background .15s, color .15s;

}

.side-group:hover { background: var(--field-bg); color: var(--text); }

.side-group.active { background: var(--accent-soft); color: var(--text); }

.side-group .g-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

.side-group .g-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.side-group .g-count { font-size: 11px; color: var(--text-3); }

.side-empty, .side-loading { font-size: 12px; color: var(--text-3); padding: 6px 12px; }



.side-user {

    display: flex; align-items: center; gap: 8px; padding: 10px 12px;

    border-top: 1px solid var(--field-brd);

}

.su-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }

.su-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.su-role { font-size: 11px; color: var(--accent); font-weight: 600; }

.side-user .theme-toggle.sm { width: 32px; height: 32px; }

.su-icon {

    display: grid; place-items: center; width: 30px; height: 30px; flex: none;

    color: var(--text-2); text-decoration: none; border-radius: 8px; font-size: 15px;

    transition: background .15s, color .15s;

}

.su-icon:hover { background: var(--field-bg); color: var(--text); }



/* ---- Content ------------------------------------------------------------- */

.content { grid-column: 2; display: flex; flex-direction: column; min-height: 0; min-width: 0; }

.content-top {

    display: flex; align-items: center; gap: 12px; padding: 14px 22px;

    border-bottom: 1px solid var(--field-brd); flex-wrap: wrap;

}

.view-title { font-size: 18px; margin: 0; letter-spacing: -.02em; margin-right: auto; }

.content-top .search-wrap { flex: 0 1 280px; padding: 0 12px; border-radius: 12px; }

.content-top .search-wrap input { padding: 9px 0; font-size: 14px; }

.new-idea-btn { white-space: nowrap; }

.side-toggle { display: none; background: transparent; border: none; font-size: 20px; color: var(--text); cursor: pointer; }



.content-filters { display: flex; gap: 10px; padding: 12px 22px 0; flex-wrap: wrap; }

.content-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px 60px; display: flex; flex-direction: column; gap: 14px; }

.content-body.is-ranking { gap: 10px; }



/* ---- Card de ideia ------------------------------------------------------- */

.idea-card { position: relative; border-radius: var(--r-lg); padding: 16px 18px; animation: rise .4s var(--ease) both; }

.idea-card .idea-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }

.idea-card .idea-meta { display: flex; flex-direction: column; line-height: 1.15; margin-right: auto; }

.idea-card .idea-author { font-weight: 600; font-size: 13.5px; }

.idea-card .idea-time { font-size: 11.5px; color: var(--text-3); }

.rank-badge {

    display: grid; place-items: center; min-width: 34px; height: 26px; padding: 0 8px;

    border-radius: 999px; font-size: 13px; font-weight: 800; margin-right: 4px;

    background: var(--field-bg); color: var(--text-2);

}

.rank-badge.top { background: linear-gradient(140deg, #ffce55, #ff9f0a); color: #4a2c00; }

.idea-title { margin: 0 0 6px; font-size: 17px; letter-spacing: -.02em; }

.idea-titlelink { text-decoration: none; color: inherit; cursor: pointer; }

.idea-titlelink:hover .idea-title { color: var(--accent); }

.idea-card .idea-body { margin: 0 0 10px; color: var(--text-2); font-size: 14px;

    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.idea-card .idea-links { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }

.idea-card .idea-links a { font-size: 12.5px; padding: 5px 10px; background: var(--accent-soft); color: var(--accent);

    border-radius: 8px; text-decoration: none; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.idea-card .idea-links a.ref-image {

    padding: 5px 8px 5px 5px;

    background: var(--field-bg);

    color: var(--text);

}



.rating-row { display: flex; align-items: center; gap: 12px; padding-top: 4px; }

.rating-avg { font-size: 12.5px; color: var(--text-2); }

.rating-avg b { color: var(--text); }

.idea-foot { display: flex; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--field-brd); }

.idea-open { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;

    color: var(--text-2); text-decoration: none; cursor: pointer; }

.idea-open:hover { color: var(--accent); }



/* Menu ⋯ do card */

.card-menu { position: relative; }

.card-menu-btn { background: transparent; border: none; color: var(--text-3); cursor: pointer; font-size: 18px; line-height: 1;

    width: 28px; height: 28px; border-radius: 8px; }

.card-menu-btn:hover { background: var(--field-bg); color: var(--text); }

.card-menu-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 15; padding: 5px; border-radius: 12px;

    display: flex; flex-direction: column; min-width: 140px; }

.card-menu-pop button { background: transparent; border: none; text-align: left; font-family: inherit; font-size: 13px;

    color: var(--text); padding: 8px 10px; border-radius: 8px; cursor: pointer; }

.card-menu-pop button:hover { background: var(--field-bg); }

.card-menu-pop .danger:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }



/* ---- Estrelas ------------------------------------------------------------ */

.stars { display: inline-flex; gap: 2px; }

.stars .star { font-size: 17px; color: var(--text-3); line-height: 1; transition: color .1s, transform .1s; }

.stars .star.on { color: #ffc83d; }

.stars.big .star { font-size: 24px; }

.stars .star:hover { transform: scale(1.15); }



/* ---- Moderação de grupos ------------------------------------------------- */

.modgroups { display: flex; flex-direction: column; gap: 10px; }

.modgroup { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-md); }

.modgroup .g-dot { width: 12px; height: 12px; border-radius: 50%; }

.modgroup .mg-name { font-weight: 600; }

.modgroup .mg-count { font-size: 12.5px; color: var(--text-3); margin-right: auto; }



/* ---- Painel de discussão ------------------------------------------------- */

.thread-scrim { position: fixed; inset: 0; z-index: 39; background: rgba(0,0,0,.35);

    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

.thread-panel {

    position: fixed; top: 0; right: 0; height: 100vh; width: min(460px, 100%); z-index: 40;

    overflow-y: auto; border-left: 1px solid var(--glass-brd);

    background: var(--glass-bg);

    -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%);

    box-shadow: -12px 0 40px rgba(0,0,0,.18);

    animation: slideIn .3s var(--ease) both;

}

@keyframes slideIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }

.thread-inner { padding: 16px 20px 40px; }

.thread-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }

.thread-close { background: var(--field-bg); border: 1px solid var(--field-brd); color: var(--text-2);

    width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 14px; }

.thread-close:hover { color: var(--danger); }

.thread-panel .idea.detail { padding: 4px 0 0; border: none; background: none; box-shadow: none; }

.thread-panel .idea-title.big { font-size: 21px; margin: 6px 0 10px; }

.rate-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0;

    padding: 12px 14px; background: var(--field-bg); border-radius: 14px; }

.thread-admin { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.thread-panel .discussion { margin-top: 18px; }

.thread-panel .comment-form { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }



/* ---- Modal composer mais largo ------------------------------------------ */

#ideaModal .modal { max-width: 480px; }

#ideaModal .form { gap: 12px; }



/* ---- Responsivo (app) ---------------------------------------------------- */

@media (max-width: 860px) {

    body.app { grid-template-columns: 1fr; }

    .sidebar {

        position: fixed; top: 0; left: 0; bottom: 0; width: 268px; z-index: 60;

        transform: translateX(-100%); transition: transform .28s var(--ease);

    }

    .sidebar.open { transform: none; box-shadow: 12px 0 40px rgba(0,0,0,.25); }

    .content { grid-column: 1; }

    .side-toggle { display: block; }

    .thread-panel { width: 100%; }

    .content-top .search-wrap { flex: 1 1 140px; order: 3; }

    .view-title { order: 1; }

    .new-idea-btn { order: 2; }

}



/* =========================================================================

   Logo TD (PNG transparente, silhueta preta) — inverte p/ branco no escuro

   ========================================================================= */

img.logo { display: block; height: auto; }

.side-brand .logo, .brand-row .logo { width: auto; }

:root[data-theme="dark"] img.logo { filter: invert(1); }

:root[data-theme="light"] img.logo { filter: none; }

@media (prefers-color-scheme: dark) {

    :root[data-theme="auto"] img.logo { filter: invert(1); }

}



/* =========================================================================

   Scrim da sidebar no mobile (foco + toque-fora-fecha)

   ========================================================================= */

.side-scrim {

    position: fixed; inset: 0; z-index: 55;

    background: rgba(0, 0, 0, .45);

    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);

}

@media (min-width: 861px) { .side-scrim { display: none !important; } }



/* =========================================================================

   Ajustes finos de visualização/navegação no celular

   ========================================================================= */

@media (max-width: 560px) {

    /* Cabeçalho do card: evita o nome do autor quebrar em 3 linhas quando

       há pills de grupo/status; mantém tudo em uma linha limpa. O autor

       trunca com "…" e os pills encolhem para caber. */

    .idea-card .idea-head { gap: 6px; flex-wrap: nowrap; align-items: center; }

    .idea-card .idea-meta { min-width: 0; flex: 1 1 auto; }

    .idea-card .idea-author {

        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;

    }

    .idea-card .pill {

        font-size: 9.5px; padding: 2px 6px; letter-spacing: .01em; flex: none;

    }

    /* Alvos de toque mais confortáveis */

    .nav-item, .side-group { padding-top: 11px; padding-bottom: 11px; }

    /* Modais ocupam melhor a largura do celular */

    #ideaModal .modal, #groupModal .modal { max-width: calc(100vw - 24px); }

}






.ref-file-badge {

    display: inline-flex; align-items: center; justify-content: center;

    width: 34px; height: 34px; border-radius: 7px;

    background: var(--accent-soft); color: var(--accent);

    font-size: 10px; font-weight: 800; flex: none;

}

.idea-links a.ref-image.compact .ref-file-badge { width: 26px; height: 26px; font-size: 9px; }



.thread-lock {

    padding: 12px 14px;

    margin: 14px 0;

    border-radius: 14px;

    border: 1px solid rgba(48,209,88,.22);

    background: rgba(48,209,88,.10);

    color: var(--text-2);

    font-size: 13px;

    font-weight: 600;

}

.thread-lock.small { margin-top: 8px; }






.idea-card { cursor: pointer; }

.idea-card .card-menu,

.idea-card .stars,

.idea-card a,

.idea-card button { cursor: auto; }

.idea-card.is-completed {

    border-color: rgba(48,209,88,.34);

    background: linear-gradient(110deg, rgba(48,209,88,.09), rgba(10,132,255,.04) 42%, rgba(142,142,147,.08)), var(--glass-bg);

    box-shadow: var(--glass-shadow), inset 4px 0 0 rgba(48,209,88,.55), inset 0 1px 0 var(--glass-hi);

}

.idea-card.is-completed .idea-title {

    color: var(--text);

}

.idea-card.is-completed .idea-body,

.idea-card.is-completed .rating-row,

.idea-card.is-completed .idea-foot {

    opacity: .78;

}

.idea-card.is-completed .idea-open {

    color: var(--text-3);

}

.idea-card.is-completed .stars .star {

    cursor: default !important;

}

/* --- Hotfix social/upload/notificacoes --- */

select, select.input-filter, select.input-group {

    color: var(--text);

    background: var(--field-bg);

    border-color: var(--field-brd);

    color-scheme: light dark;

}

select option {

    color: var(--text);

    background: var(--bg-0);

}

:root[data-theme="dark"] select option,

:root[data-theme="auto"] select option {

    color: #f4f5f8;

    background: #171923;

}

.nav-badge {

    margin-left: auto;

    min-width: 18px;

    height: 18px;

    padding: 0 5px;

    border-radius: 999px;

    background: var(--danger);

    color: #fff;

    font-size: 11px;

    line-height: 18px;

    text-align: center;

}

.category-pill[data-category="Dúvida"] { background: rgba(100,210,255,.18); color: #1c8fb8; }

.category-pill[data-category="Crítica"] { background: rgba(255,69,58,.16); color: #d93b32; }

.category-pill[data-category="Melhoria"] { background: rgba(255,159,10,.18); color: #c87500; }

.category-pill[data-category="Sugestão"] { background: rgba(94,92,230,.16); color: #5e5ce6; }

.rating-clear {

    border: 0;

    background: transparent;

    color: var(--text-3);

    font: inherit;

    font-size: 12px;

    cursor: pointer;

    padding: 4px 6px;

    border-radius: 8px;

}

.rating-clear:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }

.stars .star {

    border: 0;

    background: transparent;

    padding: 0 1px;

    cursor: pointer;

}

.stars .star:disabled { cursor: default; opacity: .68; }

.comment-head { flex-wrap: wrap; }

.comment-reply, .comment-react, .comment-edit, .comment-del {

    background: transparent;

    border: none;

    cursor: pointer;

    opacity: .65;

    font-size: 13px;

    color: var(--text-2);

    border-radius: 8px;

    padding: 3px 5px;

}

.comment-reply:hover, .comment-react:hover, .comment-edit:hover, .comment-del:hover { opacity: 1; background: var(--accent-soft); }

.reply-preview, .reply-context {

    display: flex;

    gap: 8px;

    align-items: stretch;

    width: 100%;

    border: 1px solid var(--field-brd);

    border-left: 3px solid var(--accent);

    background: var(--field-bg);

    color: var(--text-2);

    border-radius: 10px;

    padding: 8px 10px;

    margin: 6px 0 8px;

    text-align: left;

}

.reply-preview strong, .reply-context strong { display: block; color: var(--text); font-size: 12px; }

.reply-preview span, .reply-context span { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.reply-preview { cursor: pointer; }

.reply-context { justify-content: space-between; align-items: center; }

.reply-context > div { min-width: 0; }

.reply-context button {

    border: none;

    background: transparent;

    color: var(--text-3);

    cursor: pointer;

    font-size: 18px;

}

.comment.flash .comment-main { box-shadow: 0 0 0 3px var(--accent-soft), var(--glass-shadow); }

.comment-refs:empty, .comment-reactions:empty { display: none; }

.comment-reactions {

    display: flex;

    flex-wrap: wrap;

    gap: 5px;

    margin-top: 8px;

}

.reaction-chip {

    border: 1px solid var(--field-brd);

    background: var(--field-bg);

    color: var(--text);

    border-radius: 999px;

    padding: 3px 8px;

    cursor: pointer;

    font-size: 12px;

}

.reaction-chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.reaction-panel, .emoji-panel, .mention-pop {

    display: flex;

    flex-wrap: wrap;

    gap: 4px;

    padding: 8px;

    border-radius: 14px;

    margin-top: 6px;

    z-index: 4;

}

.reaction-panel button, .emoji-panel button, .mention-pop button {

    border: 0;

    background: var(--field-bg);

    color: var(--text);

    border-radius: 9px;

    padding: 6px 8px;

    cursor: pointer;

}

.mention-pop { flex-direction: column; align-items: stretch; }

.mention-pop button { text-align: left; font-size: 13px; }

.reaction-remove { font-size: 12px; color: var(--danger) !important; }

.comment-tools { display: flex; align-items: center; gap: 6px; }

.icon-btn {

    width: 32px;

    height: 32px;

    display: inline-grid;

    place-items: center;

    border: 1px solid var(--field-brd);

    background: var(--field-bg);

    color: var(--text);

    border-radius: 10px;

    cursor: pointer;

}

.comment-attachments { display: flex; flex-direction: column; gap: 6px; }

.mention { color: var(--accent); font-weight: 700; }

.notifications-head { display: flex; justify-content: flex-end; }

.notifications-list { display: flex; flex-direction: column; gap: 10px; }

.notification-item {

    display: flex;

    gap: 10px;

    width: 100%;

    text-align: left;

    border-radius: var(--r-md);

    padding: 12px 14px;

    color: var(--text);

    cursor: pointer;

}

.notification-item p { margin: 2px 0 4px; color: var(--text-2); }

.notification-item small { color: var(--text-3); }

.notification-dot {

    width: 9px;

    height: 9px;

    border-radius: 50%;

    margin-top: 7px;

    background: transparent;

    flex: none;

}

.notification-item.unread .notification-dot { background: var(--accent); }

.notification-item.unread { border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-brd)); }

@media (prefers-color-scheme: dark) {

    :root[data-theme="auto"] select option { color: #f4f5f8; background: #171923; }

}




.upload-progress {

    width: 180px;

    height: 6px;

    border-radius: 999px;

    overflow: hidden;

    background: var(--field-bg);

    border: 1px solid var(--field-brd);

    margin-left: auto;

}

.upload-progress span {

    display: block;

    height: 100%;

    width: 0;

    border-radius: inherit;

    background: linear-gradient(90deg, var(--accent), #64d2ff);

    transition: width .18s ease;

}


/* Ranking vencedor: tema dourado no card inteiro */
.content-body.is-ranking .idea-card.rank-winner {
    border-color: rgba(255, 202, 58, .55);
    background: linear-gradient(110deg, rgba(255, 202, 58, .16), rgba(255, 159, 10, .08) 42%, rgba(28, 30, 40, .42)), var(--glass-bg);
    box-shadow: var(--glass-shadow), inset 4px 0 0 rgba(255, 202, 58, .72), inset 0 1px 0 rgba(255,255,255,.24);
}
.content-body.is-ranking .idea-card.rank-1 {
    border-color: rgba(255, 214, 74, .72);
    background: linear-gradient(110deg, rgba(255, 214, 74, .22), rgba(255, 179, 0, .10) 44%, rgba(28,30,40,.42)), var(--glass-bg);
}
.content-body.is-ranking .idea-card.rank-winner .rank-badge {
    position: absolute;
    top: 14px;
    right: 18px;
    z-index: 2;
    min-width: 38px;
    height: 28px;
    margin: 0;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 202, 58, .18);
    border: 1px solid rgba(255, 202, 58, .44);
    color: #ffd76a;
    box-shadow: none;
}
.content-body.is-ranking .idea-card.rank-winner .idea-head { padding-right: 58px; }
:root[data-theme="light"] .content-body.is-ranking .idea-card.rank-winner .rank-badge { color: #7a4c00; background: rgba(255, 202, 58, .45); }


/* final-user-fixes-20260708 */
.ni-ico svg,
.ui-icon svg,
.icon-btn svg {
    width: 17px;
    height: 17px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.icon-btn { font-size: 0; }
.side-brand-txt .side-last-login {
    display: block;
    margin-top: 2px;
    color: var(--text-3);
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
}
.side-user-stats-sec { margin-top: 8px; }
.side-user-stats {
    margin: 2px 8px 10px;
    padding: 10px 12px;
    border: 1px solid var(--field-brd);
    border-radius: 14px;
    background: color-mix(in srgb, var(--field-bg) 86%, transparent);
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.side-user-stats div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-2);
    font-size: 12px;
}
.side-user-stats strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.category-pill.cat-duvida,
.category-pill[data-category*="vida"] { background: rgba(100,210,255,.20); color: #1688ad; }
.category-pill.cat-critica,
.category-pill[data-category*="tica"] { background: rgba(255,69,58,.18); color: #d93b32; }
.category-pill.cat-melhoria,
.category-pill[data-category="Melhoria"] { background: rgba(48,209,88,.18); color: #218a3f; }
.category-pill.cat-sugestao,
.category-pill[data-category*="Sugest"] { background: rgba(94,92,230,.18); color: #5e5ce6; }
.idea-links a.ref-image {
    width: 54px;
    height: 54px;
    padding: 4px;
    border-radius: 12px;
    justify-content: center;
}
.idea-links a.ref-image span { display: none !important; }
.idea-links a.ref-image img,
.idea-links a.ref-image .ref-file-badge {
    width: 46px;
    height: 46px;
    border-radius: 9px;
}
.idea-links a.ref-image.compact {
    width: 42px;
    height: 42px;
}
.idea-links a.ref-image.compact img,
.idea-links a.ref-image.compact .ref-file-badge {
    width: 34px;
    height: 34px;
}
.image-lightbox[hidden] { display: none !important; }
.image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 28px;
    background: rgba(0,0,0,.62);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.image-lightbox img {
    max-width: min(980px, 94vw);
    max-height: 88vh;
    object-fit: contain;
    border-radius: 16px;
    box-shadow: 0 18px 60px rgba(0,0,0,.42);
}
.image-lightbox-close {
    position: fixed;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.34);
    background: rgba(20,20,24,.72);
    color: #fff;
    cursor: pointer;
    font-size: 18px;
}
.comment-main { display: flex; flex-direction: column; }
.comment-head .comment-reply,
.comment-head .comment-react { display: none !important; }
.comment-actions-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid color-mix(in srgb, var(--field-brd) 70%, transparent);
}
.comment-actions-bottom .comment-reply,
.comment-actions-bottom .comment-react {
    display: inline-flex !important;
    align-items: center;
    color: var(--accent);
    opacity: .9;
    font-weight: 600;
}
.app-toast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 130;
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: min(360px, calc(100vw - 36px));
    padding: 12px 14px;
    border-radius: 16px;
    color: var(--text);
    border: 1px solid var(--glass-brd);
    text-align: left;
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease;
}
.app-toast.show { opacity: 1; transform: none; }
.app-toast strong { font-size: 13px; }
.app-toast span { color: var(--text-2); font-size: 13px; }
.thread-panel .idea-head {
    flex-wrap: wrap;
    align-items: flex-start;
}
.thread-panel .idea-head .idea-meta { min-width: 0; }
.thread-panel .idea-head .pill {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* final-icon-stability */
.ui-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
}
.new-idea-btn .ui-icon,
.idea-open .ui-icon,
.search-ico.ui-icon,
.nav-sec-add .ui-icon,
.side-toggle .ui-icon {
    color: currentColor;
}
.search-ico.ui-icon {
    font-size: 15px;
}
.nav-sec-add .ui-icon,
.side-toggle .ui-icon {
    font-size: 18px;
}
/* archived-notification-hotfix */
.idea-card.is-archived {
    border-color: rgba(142,142,147,.34);
    background: linear-gradient(110deg, rgba(142,142,147,.16), rgba(90,90,96,.08) 42%, rgba(10,132,255,.04)), var(--glass-bg);
    box-shadow: var(--glass-shadow), inset 4px 0 0 rgba(142,142,147,.62), inset 0 1px 0 var(--glass-hi);
}
.idea-card.is-archived .idea-title {
    color: var(--text);
}
.idea-card.is-archived .idea-body,
.idea-card.is-archived .rating-row,
.idea-card.is-archived .idea-foot {
    opacity: .68;
}
.idea-card.is-archived .idea-open {
    color: var(--text-3);
}
.idea-card.is-archived .stars .star {
    cursor: default !important;
}
.thread-lock.archived {
    border-color: rgba(142,142,147,.28);
    background: rgba(142,142,147,.13);
}
.notifications-head {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}
.notification-item {
    position: relative;
    overflow: hidden;
}
.notification-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--notif-color, var(--accent));
    opacity: .85;
}
.notification-item .notification-dot {
    background: var(--notif-color, var(--accent));
}
.notification-item.type-comment { --notif-color: #0a84ff; }
.notification-item.type-reply { --notif-color: #5e5ce6; }
.notification-item.type-mention { --notif-color: #ff9f0a; }
.notification-item.type-reaction,
.notification-item.type-interaction { --notif-color: #ff375f; }
.notification-item.type-rating { --notif-color: #ffd60a; }
.notification-item.type-status { --notif-color: #30d158; }
.notification-item.type-default { --notif-color: #8e8e93; }
.notification-item.unread {
    border-color: color-mix(in srgb, var(--notif-color) 35%, var(--glass-brd));
}
/* notification-preferences-hotfix */
.notification-prefs {
    margin: 0 0 14px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--glass-brd);
}
.notification-prefs header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.notification-prefs header strong {
    color: var(--text);
    font-size: 14px;
}
.notification-prefs header span,
.notification-pref-hint {
    color: var(--text-3);
    font-size: 12px;
}
.notification-pref-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
}
.notification-pref {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 8px 10px;
    border: 1px solid var(--field-brd);
    border-radius: 12px;
    background: var(--field-bg);
    color: var(--text-2);
    font-size: 13px;
}
.notification-pref input {
    accent-color: var(--accent);
}
.notification-pref.required {
    opacity: .82;
}
.notification-pref small {
    color: var(--text-3);
    font-size: 11px;
}
.notification-pref-hint {
    min-height: 16px;
    margin-top: 8px;
}
.notification-item.type-new_idea { --notif-color: #ff453a; }
/* rating-anonymous-icons-hotfix */
.su-icon .ui-icon {
    font-size: 18px;
    color: currentColor;
}
.side-user-stats div span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.side-user-stats .stat-icon {
    width: 14px;
    height: 14px;
    color: var(--accent);
}
.side-user-stats .stat-icon svg {
    width: 14px;
    height: 14px;
}
.idea-links a::before {
    content: "" !important;
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.07 0l3.54-3.54a5 5 0 0 0-7.07-7.07L11.5 4.43'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.07 0L3.39 14.54a5 5 0 0 0 7.07 7.07l2.04-2.04'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.07 0l3.54-3.54a5 5 0 0 0-7.07-7.07L11.5 4.43'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.07 0L3.39 14.54a5 5 0 0 0 7.07 7.07l2.04-2.04'/%3E%3C/svg%3E") center / contain no-repeat;
}
.idea-links a.ref-image::before {
    display: none !important;
    content: none !important;
}
.notification-item.type-rating {
    display: none !important;
}


/* layout-sidebar-thread-hotfix */
body.app {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    align-content: stretch;
}
body.app.sidebar-collapsed { grid-template-columns: 74px minmax(0, 1fr); }
body.app .content { align-self: stretch; }
body.app .side-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
}
body.app .side-toggle:hover { background: var(--field-bg); }
.content-body.notifications-view,
.content-body.modgroups-view { padding-top: 12px; }
.thread-panel { width: min(90vw, 100%); }
@media (max-width: 860px) {
    .thread-panel { width: 100%; }
    body.app.sidebar-collapsed { grid-template-columns: 1fr; }
}
body.app.sidebar-collapsed .sidebar { align-items: stretch; }
body.app.sidebar-collapsed .side-brand {
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
}
body.app.sidebar-collapsed .side-brand-txt,
body.app.sidebar-collapsed .nav-sec span,
body.app.sidebar-collapsed .nav-sec-add,
body.app.sidebar-collapsed .nav-item span:not(.ni-ico):not(.nav-badge),
body.app.sidebar-collapsed .side-group .g-name,
body.app.sidebar-collapsed .side-group .g-count,
body.app.sidebar-collapsed .side-user-stats-sec,
body.app.sidebar-collapsed .side-user-stats,
body.app.sidebar-collapsed .su-info { display: none !important; }
body.app.sidebar-collapsed .nav-item,
body.app.sidebar-collapsed .side-group {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    min-height: 42px;
}
body.app.sidebar-collapsed .nav-item .ni-ico,
body.app.sidebar-collapsed .side-group .g-dot { margin: 0; }
body.app.sidebar-collapsed .nav-badge {
    position: absolute;
    right: 7px;
    top: 7px;
}
body.app.sidebar-collapsed .side-user {
    justify-content: center;
    flex-wrap: wrap;
    padding-left: 8px;
    padding-right: 8px;
}
body.app.sidebar-collapsed .side-user .avatar { margin: 0 auto; }
body.app.sidebar-collapsed .side-user .theme-toggle.sm,
body.app.sidebar-collapsed .side-user .su-icon {
    width: 30px;
    height: 30px;
}


/* collapsed-sidebar-icons-fix */
body.app.sidebar-collapsed { grid-template-columns: 82px minmax(0, 1fr); }
body.app.sidebar-collapsed .sidebar {
    width: 82px;
    min-width: 82px;
    overflow-x: hidden;
}
body.app.sidebar-collapsed .side-brand {
    height: 74px;
    justify-content: center;
    padding: 14px 8px;
}
body.app.sidebar-collapsed .side-brand .brand-logo,
body.app.sidebar-collapsed .side-brand .logo {
    width: 34px;
    max-width: 34px;
    height: auto;
}
body.app.sidebar-collapsed .side-nav {
    padding: 12px 8px;
    align-items: center;
    gap: 8px;
}
body.app.sidebar-collapsed .nav-sec {
    width: 100%;
    min-height: 14px;
    padding: 8px 0 2px;
    justify-content: center;
}
body.app.sidebar-collapsed .nav-sec::after {
    content: "";
    width: 18px;
    height: 1px;
    border-radius: 999px;
    background: var(--field-brd);
}
body.app.sidebar-collapsed .nav-item,
body.app.sidebar-collapsed .side-group {
    position: relative;
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0 !important;
    gap: 0;
    justify-content: center;
    align-items: center;
    border-radius: 14px;
    font-size: 0 !important;
    line-height: 0;
    overflow: visible;
}
body.app.sidebar-collapsed .nav-item .ni-ico,
body.app.sidebar-collapsed .nav-item .ni-ico svg,
body.app.sidebar-collapsed .side-group .g-dot {
    display: inline-flex !important;
    flex: 0 0 auto;
    margin: 0 !important;
}
body.app.sidebar-collapsed .nav-item .ni-ico {
    width: 22px;
    height: 22px;
    font-size: 22px;
    align-items: center;
    justify-content: center;
}
body.app.sidebar-collapsed .nav-item .ni-ico svg {
    width: 20px;
    height: 20px;
}
body.app.sidebar-collapsed .side-group .g-dot {
    width: 10px;
    height: 10px;
}
body.app.sidebar-collapsed .nav-badge {
    display: inline-grid !important;
    place-items: center;
    min-width: 18px;
    height: 18px;
    margin: 0;
    padding: 0 5px;
    position: absolute;
    right: -4px;
    top: -4px;
    font-size: 10px !important;
    line-height: 1;
    z-index: 2;
}
body.app.sidebar-collapsed .nav-badge[hidden] { display: none !important; }
body.app.sidebar-collapsed .side-user {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 8px;
}
body.app.sidebar-collapsed .side-user .avatar {
    width: 32px;
    height: 32px;
    margin: 0;
}
body.app.sidebar-collapsed .side-user .theme-toggle.sm,
body.app.sidebar-collapsed .side-user .su-icon {
    width: 34px;
    height: 34px;
    margin: 0;
    font-size: 18px;
}
body.app.sidebar-collapsed .side-user .theme-toggle.sm svg,
body.app.sidebar-collapsed .side-user .su-icon svg {
    width: 18px;
    height: 18px;
}
body.app.sidebar-collapsed .content-top {
    padding-left: 16px;
}
@media (max-width: 860px) {
    body.app.sidebar-collapsed .sidebar {
        width: 268px;
        min-width: 268px;
    }
    body.app.sidebar-collapsed .nav-item,
    body.app.sidebar-collapsed .side-group {
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 42px;
        font-size: 14px !important;
        line-height: 1.5;
        justify-content: flex-start;
        padding: 10px 12px !important;
        gap: 10px;
    }
}


/* top-anchor-empty-pages-hotfix */
html,
body.app {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
body.app {
    position: fixed;
    inset: 0;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-height: 0 !important;
    max-height: 100dvh;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    align-content: stretch;
    justify-items: stretch;
    justify-content: stretch;
    transform: none !important;
}
body.app .sidebar,
body.app .content {
    align-self: stretch;
    min-height: 0;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    margin-top: 0 !important;
    transform: none;
}
body.app .sidebar {
    grid-row: 1;
    position: relative;
    top: 0 !important;
    left: 0 !important;
}
body.app .content {
    grid-row: 1;
    overflow: hidden;
}
body.app .content-top {
    flex: 0 0 auto;
    margin-top: 0 !important;
}
body.app .content-filters {
    flex: 0 0 auto;
}
body.app .content-body {
    flex: 1 1 auto;
    min-height: 0;
}
@media (max-width: 860px) {
    body.app .sidebar {
        position: fixed;
        height: 100dvh;
        transform: translateX(-100%);
    }
    body.app .sidebar.open { transform: none; }
}