@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ====================================
   Café Matinal - Estilos Modernos
   Tema base: "Torra Escura" (do prototipo)
   ==================================== */

/* Variáveis CSS */
:root {
    --primary-color: #14100D;   /* fundo */
    --secondary-color: #1E1813; /* superficie elevada */
    --accent-color: #D08C4B;    /* acento */
    --accent-2: #E7C08B;        /* acento claro */
    --text-color: #F2E9DE;      /* texto */
    --text-muted: #B4A08C;      /* texto secundario */
    --text-faint: #8A7563;      /* texto terciario */
    --border-warm: #33281F;     /* bordas */
    --text-dark: #333333;
    --bg-light: #f5f5f5;
    --transition: all 0.3s ease;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Reset e Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.cm-html {
    scroll-behavior: smooth;
    font-size: 16px;
}

.cm-body {
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--primary-color);
    /* 'clip' evita rolagem horizontal SEM criar contexto de rolagem, o que
       preservaria o position:sticky da coluna lateral (hidden quebrava). */
    overflow-x: clip;
}

.cm-h1, .cm-h2, .cm-h3, .cm-h4 {
    font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
    font-weight: 500;
    line-height: 1.2;
}

.cm-a {
    text-decoration: none;
    color: inherit;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ====================================
   Banner de Cotações (Ticker)
   ==================================== */
.ticker-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, var(--accent-color), #c99a6b);
    color: var(--primary-color);
    z-index: 1001;
    overflow: hidden;
    height: 32px;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease;
}

.ticker-bar:hover {
    background: linear-gradient(90deg, #c99a6b, var(--accent-color));
}

.ticker-wrapper {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.ticker-content {
    display: flex;
    align-items: center;
    white-space: nowrap;
    animation: ticker-scroll 30s linear infinite;
    will-change: transform;
}

.ticker-bar:hover .ticker-content {
    animation-play-state: paused;
}

.ticker-items {
    display: flex;
    align-items: center;
    padding: 0 2rem;
}

.ticker-timestamp {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0.85;
    background: rgba(0, 0, 0, 0.15);
    height: 100%;
    flex-shrink: 0;
    z-index: 2;
}

.ticker-timestamp i {
    font-size: 0.7rem;
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-right: 1rem;
}

.ticker-separator {
    margin: 0 1.5rem;
    opacity: 0.6;
    font-size: 1.2rem;
}

@keyframes ticker-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* ====================================
   Navegação
   ==================================== */
.navbar {
    position: fixed;
    top: 32px; /* Altura do ticker */
    left: 0;
    right: 0;
    background: rgba(33, 33, 33, 0);
    backdrop-filter: blur(10px);
    z-index: 1000;
    transition: var(--transition);
    padding: 1rem 0;
}

.navbar.scrolled {
    background: rgba(33, 33, 33, 0.95);
    box-shadow: var(--shadow);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--text-color);
    font-family: 'Heebo', sans-serif;
    transition: var(--transition);
}

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

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2.5rem;
}

.nav-link {
    color: var(--text-color);
    font-weight: 400;
    position: relative;
    transition: var(--transition);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-color);
    transition: var(--transition);
}

.nav-link:hover,
.nav-link.active {
    color: var(--accent-color);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.menu-toggle span {
    width: 25px;
    height: 3px;
    background: var(--text-color);
    transition: var(--transition);
    border-radius: 2px;
}

/* ====================================
   Blog Section
   ==================================== */
.blog {
    padding: 6rem 0;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
}

.section-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: #b0b0b0;
    margin-top: -1rem;
    margin-bottom: 3rem;
    font-weight: 400;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.blog-card {
    background: linear-gradient(160deg, #eadccf 0%, #e1cfbd 100%);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.blog-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.blog-card:hover::before {
    transform: scaleX(1);
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.blog-card[data-tech="vba"] .blog-card-icon {
    background: linear-gradient(135deg, #217346 0%, #4CAF50 100%);
}

.blog-card[data-tech="powerbi"] .blog-card-icon {
    background: linear-gradient(135deg, #F2C811 0%, #FFA000 100%);
}

.blog-card[data-tech="python"] .blog-card-icon {
    background: linear-gradient(135deg, #306998 0%, #FFD43B 100%);
}

.blog-card[data-tech="contabilidade"] .blog-card-icon {
    background: linear-gradient(135deg, #0D47A1 0%, #42A5F5 100%);
}

.blog-card-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: white;
    transition: transform 0.3s ease;
}

.blog-card:hover .blog-card-icon {
    transform: scale(1.1) rotate(5deg);
}

.blog-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.blog-card-description {
    color: var(--secondary-color);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.blog-card-footer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.blog-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--accent-color), #e8b87f);
    color: white;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog-card {
    display: block;
    color: inherit;
}

/* ====================================
   News Section
   ==================================== */
.news {
    padding: 5rem 0;
    background: linear-gradient(180deg, #1b1b1b 0%, #232323 100%);
}

.news .section-subtitle {
    margin-bottom: 0.75rem;
}

.news-updated {
    text-align: center;
    color: #d4a574;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.news-sources {
    text-align: center;
    color: #b9b9b9;
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

.news-box {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(212, 165, 116, 0.24);
    border-radius: 14px;
    padding: 1.25rem 1.25rem 1rem;
}

.news-loading,
.news-error {
    color: #d6d6d6;
    text-align: center;
    font-size: 0.95rem;
}

.news-error {
    color: #ffb4b4;
}

.news-list {
    list-style: none;
    display: grid;
    gap: 0.6rem;
}

.news-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.6rem;
}

.news-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.news-link {
    color: #f2f2f2;
    font-weight: 600;
    line-height: 1.5;
    display: inline-block;
    transition: color 0.2s ease;
}

.news-source-tag {
    color: var(--accent-color);
    font-weight: 700;
}

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

/* ====================================
   Login Section
   ==================================== */
.login-section {
    padding: 5rem 0;
    background: linear-gradient(180deg, #252525 0%, #1f1f1f 100%);
}

.login-card {
    max-width: 520px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(212, 165, 116, 0.24);
    border-radius: 14px;
    padding: 1.5rem;
}

.login-form {
    display: grid;
    gap: 0.6rem;
}

.login-form .cm-label {
    font-weight: 600;
    color: #ebebeb;
}

.login-form .cm-input {
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.25);
    color: #f2f2f2;
    border-radius: 8px;
    padding: 0.7rem 0.8rem;
}

.login-button,
.logout-button,
.editor-button {
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.login-button,
.editor-button {
    margin-top: 0.5rem;
    background: linear-gradient(135deg, var(--accent-color), #e0b27b);
    color: #1b1b1b;
}

.logout-button {
    background: rgba(255, 255, 255, 0.1);
    color: #efefef;
}

.login-button:hover,
.logout-button:hover,
.editor-button:hover {
    opacity: 0.9;
}

.login-status {
    margin-top: 1rem;
    color: #d7d7d7;
    min-height: 1.2rem;
}

.login-actions {
    margin-top: 1rem;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

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

/* ====================================
   Editor Contabilidade
   ==================================== */
.editor-page {
    padding: 3rem 0 5rem;
}

.editor-panel {
    max-width: 900px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(212, 165, 116, 0.24);
    border-radius: 14px;
    padding: 1.5rem;
}

.editor-meta {
    color: #d0d0d0;
    margin-bottom: 1rem;
}

.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.editor-panel .cm-textarea {
    width: 100%;
    min-height: 260px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.28);
    color: #f0f0f0;
    padding: 0.9rem;
    resize: vertical;
}

.editor-rich {
    width: 100%;
    min-height: 280px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.28);
    color: #f0f0f0;
    padding: 0.9rem;
    margin-bottom: 0.9rem;
    overflow: auto;
}

.editor-rich:focus {
    outline: 2px solid rgba(212, 165, 116, 0.5);
}

#publicationTitleInput {
    width: 100%;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.25);
    color: #efefef;
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.8rem;
}

.topic-published-content .cm-img,
.topic-published-content .cm-video {
    display: block;
    float: none;
    max-width: 100%;
    width: min(100%, 860px);
    height: auto;
    border-radius: 8px;
    margin: 0.75rem auto;
}

.topic-published-content .cm-iframe {
    display: block;
    float: none;
    width: min(100%, 860px);
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 8px;
    margin: 0.75rem auto;
}

.topic-published-content {
    display: grid;
    gap: 0.85rem;
}

.topic-published-content > * {
    max-width: 100%;
}

.topic-published-content .cm-p {
    margin: 0;
}

.topic-publication-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(212, 165, 116, 0.24);
    border-radius: 12px;
    padding: 0.9rem;
}

.topic-publication-header {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

.topic-publication-meta {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.page-content .topic-publication-meta .topic-publication-title {
    margin: 0;
    font-weight: 700;
    font-size: 2.62rem;
    line-height: 1.08;
    color: #f5f5f5;
}

.topic-publication-author {
    margin: 0;
    color: #e9e9e9;
    font-size: 0.7rem;
}

.topic-publication-dates {
    margin: 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    color: #d7d7d7;
    font-size: 0.68rem;
}

.topic-publication-date {
    font-weight: 400;
}

.topic-publication-revision {
    color: #f2f2f2;
    font-weight: 400;
}

.topic-author-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    background: #2b2b2b;
}

.topic-author-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #c8c8c8;
}

.topic-author-info .cm-p {
    margin: 0.2rem 0;
}

.topic-publication-list {
    margin-bottom: 0;
    padding: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
}

.topic-sidebar .topic-publication-list > .cm-h2 {
    margin-bottom: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
}

.topic-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 268px;
    gap: 1.2rem;
    align-items: start;
}

.topic-main {
    min-width: 0;
}

.topic-sidebar {
    min-width: 0;
}

.publication-tree-year,
.publication-tree-month {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    margin-top: 0.55rem;
    background: rgba(0, 0, 0, 0.2);
}

.publication-tree-year > .cm-summary,
.publication-tree-month > .cm-summary {
    list-style: none;
    cursor: pointer;
    padding: 0.45rem 0.6rem;
    font-weight: 700;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.publication-tree-year > .cm-summary::-webkit-details-marker,
.publication-tree-month > .cm-summary::-webkit-details-marker {
    display: none;
}

.publication-tree-year > .cm-summary:hover,
.publication-tree-month > .cm-summary:hover {
    color: var(--accent-color);
}

.publication-tree-month {
    margin: 0.45rem;
}

.publication-tree-year > .cm-summary::before,
.publication-tree-month > .cm-summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 0.35rem;
    color: var(--accent-color);
    transition: transform 0.2s ease;
}

.publication-tree-year > .cm-summary::after,
.publication-tree-month > .cm-summary::after {
    content: 'Expandir';
    font-size: 0.72rem;
    font-weight: 700;
    color: #cfcfcf;
    margin-left: auto;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.publication-tree-year[open] > .cm-summary::before,
.publication-tree-month[open] > .cm-summary::before {
    transform: rotate(90deg);
}

.publication-tree-year[open] > .cm-summary::after,
.publication-tree-month[open] > .cm-summary::after {
    content: 'Recolher';
}

.publication-tree-year > .cm-summary::after,
.publication-tree-month > .cm-summary::after {
    content: 'Clique para expandir';
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #bfbfbf;
    margin-left: auto;
    text-transform: none;
}

.publication-tree-year[open] > .cm-summary::after,
.publication-tree-month[open] > .cm-summary::after {
    content: 'Clique para recolher';
}

.publication-tree-year[open] > .cm-summary,
.publication-tree-month[open] > .cm-summary {
    color: #ffffff;
}

.publication-tree-month .cm-ul {
    margin: 0 0.7rem 0.7rem;
    padding-left: 1rem;
}

.publication-tree-month .cm-li {
    margin: 0.3rem 0;
}

.topic-publication-list .publication-tree-month .cm-a {
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.3;
}

.publication-tree-month a[aria-current="page"] {
    color: var(--accent-color);
    font-weight: 700;
    text-decoration: underline;
}

.topic-publication-list .cm-li.publication-inactive .cm-a {
    text-decoration: line-through;
    opacity: 0.72;
}

.publication-meta {
    margin-left: 0.45rem;
    color: #c9c9c9;
    font-size: 0.9rem;
}

.editor-history {
    margin-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 1rem;
}

.editor-history .cm-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.6rem;
}

.editor-history-item {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 0.65rem;
    background: rgba(0, 0, 0, 0.18);
}

.editor-history-item-inactive .editor-history-title {
    text-decoration: line-through;
    opacity: 0.75;
}

.editor-history-actions {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.editor-rich .editor-media-selected {
    outline: 2px solid rgba(212, 165, 116, 0.95);
    outline-offset: 2px;
}

.profile-panel {
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 1rem;
}

.password-warning {
    margin-bottom: 1rem;
    background: rgba(255, 180, 120, 0.1);
    border: 1px solid rgba(255, 180, 120, 0.45);
    border-radius: 10px;
    padding: 1rem;
}

.password-warning .cm-h2 {
    margin-bottom: 0.5rem;
}

.password-form {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.password-form .cm-input {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    color: #efefef;
    padding: 0.65rem 0.75rem;
}

.profile-panel .cm-h2 {
    margin-bottom: 0.75rem;
}

.profile-grid {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 1rem;
    align-items: start;
}

.profile-photo-preview {
    width: 90px;
    height: 90px;
    border-radius: 10px;
    object-fit: cover;
    background: #222;
}

.profile-fields {
    display: grid;
    gap: 0.5rem;
}

.profile-fields .cm-input {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    color: #efefef;
    padding: 0.65rem 0.75rem;
}

.topic-published-content .cm-a {
    color: var(--accent-color);
    text-decoration: underline;
}

.editor-message {
    margin-top: 1rem;
    color: #d7d7d7;
}

.nav-menu-static {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-navbar {
    position: relative;
    top: 0;
    background: rgba(33, 33, 33, 0.95);
    box-shadow: var(--shadow);
}

.page-navbar .logo {
    display: none;
}

.page-navbar .container {
    justify-content: center;
}

.content-page {
    padding-top: 0;
    background: var(--primary-color);
    min-height: auto;
    color: var(--text-color);
}

.page-hero {
    padding: 3rem 0 2rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.90), rgba(0, 0, 0, 0.72));
    text-align: center;
}

.page-hero .cm-h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.page-hero .cm-p {
    max-width: 700px;
    margin: 0 auto;
    color: #d0d0d0;
    font-size: 1.1rem;
    line-height: 1.8;
}

.page-content {
    padding: 3rem 0 5rem;
    color: #eeeeee;
}

.page-content .cm-h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.page-content .cm-p,
.page-content .cm-ul {
    font-size: 1rem;
    line-height: 1.8;
}

.page-content .cm-ul {
    list-style: disc;
    padding-left: 1.25rem;
    margin-top: 1rem;
}

.page-content .cm-li {
    margin-bottom: 0.75rem;
}

.topics-navbar {
    position: relative;
    top: 0;
    z-index: 900;
    background: rgba(18, 18, 18, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.topics-list {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
    padding: 0.9rem 0;
    scrollbar-width: thin;
}

.topics-list .cm-a {
    color: #e3e3e3;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.topics-list .cm-a:hover {
    color: var(--accent-color);
}

.topics-list .cm-a[aria-current="page"] {
    color: #1b1b1b;
    background: linear-gradient(135deg, var(--accent-color), #e0b27b);
    border-color: rgba(224, 178, 123, 0.85);
}

@media (max-width: 980px) {
    .topic-layout {
        grid-template-columns: 1fr;
    }

    .topic-sidebar {
        order: 2;
    }
}

.topic-section {
    margin-bottom: 2.5rem;
    scroll-margin-top: 130px;
}

.topic-section .cm-h2 {
    margin-bottom: 0.75rem;
}

.footer.footer-compact {
    padding: 1.5rem 0;
    background: rgba(0, 0, 0, 0.88);
    color: #f3f3f3;
}

@media (max-width: 768px) {
    .page-navbar .container {
        flex-direction: column;
        gap: 0.8rem;
    }

    .page-navbar .nav-menu-static {
        gap: 1rem;
        justify-content: center;
        flex-wrap: wrap;
    }

    .page-hero .cm-h1 {
        font-size: 2.2rem;
    }

    .topics-navbar {
        top: 28px;
    }

    .topics-list {
        gap: 1rem;
        padding: 0.75rem 0;
    }
}

/* ====================================
   Hero Section
   ==================================== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: 32px; /* Compensar altura do ticker */
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(33, 33, 33, 0.7), rgba(80, 80, 80, 0.5));
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 2rem 0;
    animation: fadeInUp 1s ease;
}

.hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 1.5rem;
    color: var(--text-color);
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

.divider {
    width: 100px;
    height: 3px;
    background: var(--accent-color);
    border: none;
    margin: 1.5rem auto;
}

.hero-subtitle {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--accent-color);
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

.hero-description {
    font-size: clamp(1rem, 2vw, 1.125rem);
    max-width: 700px;
    margin: 2rem auto 0;
    line-height: 1.8;
    opacity: 0.95;
}

/* ====================================
   About Section
   ==================================== */
.about {
    position: relative;
    padding: 8rem 0;
    min-height: 80vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.about-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://images.builderservices.io/s/cdn/v1.0/i/m?url=https%3A%2F%2Fstorage.googleapis.com%2Fproduction-hostgator-brasil-v1-0-4%2F714%2F1581714%2FoWG0CoCj%2F4f484c3888844b46a2f226c056de958f&methods=resize%2C2000%2C5000');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #111111;
    background-attachment: fixed;
    z-index: 1;
}

.about-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(33, 33, 33, 0.85), rgba(33, 33, 33, 0.75));
}

.about .container {
    position: relative;
    z-index: 2;
}

.about-content {
    max-width: 600px;
    animation: fadeInLeft 1s ease;
}

.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1.5rem;
    color: var(--text-color);
}

.about-subtitle {
    font-size: clamp(1.125rem, 2.5vw, 1.375rem);
    margin-bottom: 1rem;
    color: var(--accent-color);
    font-style: italic;
}

.divider-small {
    width: 60px;
    height: 2px;
    background: var(--accent-color);
    border: none;
    margin: 1.5rem 0;
}

.about-description {
    font-size: clamp(1rem, 2vw, 1.125rem);
    line-height: 1.8;
    opacity: 0.95;
}

/* ====================================
   Footer
   ==================================== */
/* Rodape — tema "Folha de Cafe" */
.footer {
    background: linear-gradient(180deg, #1F1917 0%, #131010 100%);
    color: #C3B3AB;
    padding: 4rem 0 2rem;
    border-top: 1px solid #2A2320;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.footer-nav .cm-ul {
    display: flex;
    list-style: none;
    gap: 2rem;
    flex-wrap: wrap;
}

.footer-nav .cm-a {
    color: #C3B3AB;
    opacity: 1;
    transition: var(--transition);
}

.footer-nav .cm-a:hover {
    opacity: 1;
    color: #9CB07A;
}

.footer-logo .cm-h3 {
    font-size: 1.5rem;
    color: #F0E7DF;
}

.footer-divider {
    border: none;
    height: 1px;
    background: #2A2320;
    margin: 2rem 0;
}

.footer-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-column .cm-h4 {
    color: #F0E7DF;
    margin-bottom: 1rem;
    font-size: 1.125rem;
}

.footer-column .cm-p {
    color: #C3B3AB;
    opacity: 1;
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.footer-email {
    color: #9CB07A;
    font-size: 0.95rem;
    transition: var(--transition);
    display: inline-block;
    margin-top: 0.5rem;
}

.footer-email:hover {
    color: #B7C99A;
    text-decoration: underline;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    border-top: 1px solid #2A2320;
    font-size: 0.9rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-legal .cm-a {
    color: #8B7A74;
    opacity: 1;
    transition: var(--transition);
}

.footer-legal .cm-a:hover {
    opacity: 1;
    color: #9CB07A;
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.footer-social .footer-social-label {
    color: #8B7A74;
    font-size: 0.9rem;
}

.footer-social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(156, 176, 122, 0.12);
    color: #9CB07A;
    font-size: 1.15rem;
    transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.footer-social a:hover {
    background: #9CB07A;
    color: #131010;
    transform: translateY(-2px);
}

/* ====================================
   Animations
   ==================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* ====================================
   Responsividade
   ====================================== */
@media (max-width: 768px) {
    .navbar .container {
        position: relative;
    }

    .ticker-bar {
        font-size: 0.75rem;
        height: 28px;
    }
    
    .ticker-timestamp {
        font-size: 0.65rem;
        padding: 0 0.5rem;
        gap: 0.25rem;
    }
    
    .ticker-timestamp i {
        display: none;
    }
    
    .ticker-item {
        margin-right: 0.75rem;
        font-size: 0.7rem;
    }
    
    .ticker-separator {
        margin: 0 0.75rem;
        font-size: 1rem;
    }
    
    .ticker-items {
        padding: 0 1rem;
    }

    .navbar {
        top: 28px; /* Ajustar para altura do ticker no mobile */
    }

    .ticker-separator {
        margin: 0 1rem;
    }

    .menu-toggle {
        display: flex;
        z-index: 1001;
    }

    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        max-width: 300px;
        height: 100vh;
        background: var(--primary-color);
        flex-direction: column;
        padding: 5rem 2rem 2rem;
        gap: 2rem;
        transition: var(--transition);
        box-shadow: var(--shadow-lg);
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-link::after {
        display: none;
    }

    .hero {
        min-height: 90vh;
        padding-top: 28px; /* Ajustar para altura do ticker no mobile */
    }

    .hero-content {
        padding: 2rem 1rem;
    }

    .about {
        padding: 5rem 0;
    }

    .about-background {
        background-attachment: scroll;
    }

    .footer-top {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }

    .footer-nav .cm-ul {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }

    .footer-info {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .news {
        padding: 4rem 0;
    }

    .news-box {
        padding: 1rem;
    }

    .login-card,
    .editor-panel {
        padding: 1rem;
    }

    .topic-author-card {
        align-items: flex-start;
    }

    .profile-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }

    .hero-title {
        font-size: 1.75rem;
    }

    .divider {
        width: 60px;
    }
}

/* ====================================
   Scroll Reveal
   ==================================== */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ====================================
   Administracao de Usuarios
   ==================================== */
.admin-panel {
    max-width: 1000px;
}

.admin-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(212, 165, 116, 0.2);
}

.admin-section h2 {
    color: #fff;
    margin-bottom: 1rem;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.admin-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.admin-field label {
    color: #d7d7d7;
    font-weight: 600;
    font-size: 0.9rem;
}

.admin-field input,
.admin-field select,
.admin-field textarea {
    padding: 0.6rem 0.7rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    font-family: inherit;
    width: 100%;
}

.admin-field textarea {
    resize: vertical;
}

.admin-field input::placeholder,
.admin-field textarea::placeholder {
    color: #9a9a9a;
}

.admin-areas {
    margin: 1rem 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 0.75rem 1rem 1rem;
}

.admin-areas legend {
    color: #d7d7d7;
    font-weight: 600;
    padding: 0 0.4rem;
}

.admin-areas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.5rem;
}

.admin-checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #e6e6e6;
    font-size: 0.92rem;
    cursor: pointer;
}

.admin-table-wrapper {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}

.admin-table th,
.admin-table td {
    text-align: left;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #e6e6e6;
    font-size: 0.92rem;
    vertical-align: middle;
}

.admin-table th {
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
}

.admin-row-inactive td {
    opacity: 0.55;
}

.admin-tag {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(212, 165, 116, 0.25);
    color: var(--accent-color);
    font-size: 0.72rem;
    font-weight: 700;
}

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.admin-action-btn {
    border: none;
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.12);
    color: #f0f0f0;
    transition: opacity 0.2s ease;
}

.admin-action-btn:hover:not(:disabled) {
    opacity: 0.8;
}

.admin-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.admin-action-edit {
    background: rgba(212, 165, 116, 0.35);
    color: #1b1b1b;
}

.admin-action-delete {
    background: rgba(180, 35, 24, 0.5);
    color: #fff;
}

.admin-button-ghost {
    background: rgba(255, 255, 255, 0.1);
    color: #efefef;
}

.editor-message.is-error {
    color: #f2a59d;
}

.editor-message.is-success {
    color: #9fe0ad;
}

/* Modal de edicao */
.admin-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4rem 1rem;
    z-index: 1000;
    overflow-y: auto;
}

.admin-modal[hidden] {
    display: none;
}

.admin-modal-card {
    width: 100%;
    max-width: 560px;
    background: #232323;
    border: 1px solid rgba(212, 165, 116, 0.3);
    border-radius: 14px;
    padding: 1.5rem;
}

.admin-modal-card h2 {
    color: #fff;
    margin-bottom: 1rem;
}

.admin-modal-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

/* ====================================
   Editor de Perfil (tema escuro)
   ==================================== */
.profile-editor-panel {
    max-width: 1000px;
}

.admin-field-label {
    display: block;
    color: #d7d7d7;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}

.profile-media-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.profile-media-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

.profile-bg-preview {
    width: 100%;
    height: 90px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: #2b2f36;
    background-size: cover;
    background-position: center;
}

.profile-bg-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.profile-bg-controls label:first-child {
    color: #d7d7d7;
    font-size: 0.9rem;
}

.profile-bg-controls input[type="color"] {
    width: 44px;
    height: 34px;
    border: none;
    border-radius: 6px;
    background: none;
    cursor: pointer;
}

.profile-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.profile-repeater {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 0.75rem;
}

.profile-repeater-item {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    padding: 0.85rem;
    background: rgba(0, 0, 0, 0.15);
}

.profile-repeater-item .admin-field {
    margin-bottom: 0.5rem;
}

.profile-repeater-inline {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: 0.75rem;
    align-items: end;
}

.profile-repeater-inline .admin-field {
    margin-bottom: 0;
}

/* ====================================
   Perfil publico / Portfolio (tema claro)
   ==================================== */
.profile-page {
    background: #ffffff;
    color: #2b2f36;
    min-height: 60vh;
}

.profile-header {
    color: #ffffff;
    padding: 3rem 1.5rem;
}

.profile-header-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.75rem;
    flex-wrap: wrap;
}

.profile-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, 0.85);
    background: #444;
    flex-shrink: 0;
}

.profile-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.75);
}

.profile-header-text h1 {
    font-size: 2.4rem;
    margin: 0;
    line-height: 1.1;
}

.profile-quote {
    margin-top: 0.6rem;
    font-size: 1.1rem;
    font-style: italic;
    opacity: 0.92;
}

.profile-body {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2.5rem;
    padding-top: 2.5rem;
    padding-bottom: 3rem;
    align-items: start;
}

.profile-sidebar {
    background: #f2ede7;
    border-radius: 12px;
    padding: 1.5rem;
}

.profile-block {
    margin-bottom: 1.75rem;
}

.profile-block:last-child {
    margin-bottom: 0;
}

.profile-block h2 {
    font-size: 1.3rem;
    color: #2b2f36;
    border-bottom: 2px solid rgba(43, 47, 54, 0.15);
    padding-bottom: 0.4rem;
    margin-bottom: 0.9rem;
}

.profile-contact-list,
.profile-education-list,
.profile-skills-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.profile-contact-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    word-break: break-word;
}

.profile-contact-list i {
    color: var(--accent-color);
    width: 18px;
    text-align: center;
}

.profile-contact-list a {
    color: #2b2f36;
    text-decoration: none;
}

.profile-contact-list a:hover {
    text-decoration: underline;
}

.profile-education-list li {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    border-left: 2px solid var(--accent-color);
    padding-left: 0.75rem;
}

.profile-muted {
    color: #7a7a7a;
    font-size: 0.9rem;
}

.profile-skills-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px dashed rgba(43, 47, 54, 0.15);
    padding-bottom: 0.5rem;
}

.profile-skill-level {
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    background: var(--accent-color);
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.profile-main .profile-block h2 {
    font-size: 1.5rem;
}

.profile-bio {
    line-height: 1.7;
    color: #3d434c;
}

.profile-projects {
    display: grid;
    gap: 1rem;
}

.profile-project-card {
    border: 1px solid rgba(43, 47, 54, 0.12);
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    transition: box-shadow 0.2s ease;
}

.profile-project-card:hover {
    box-shadow: var(--shadow);
}

.profile-project-card h3 {
    margin: 0 0 0.4rem;
    font-size: 1.15rem;
}

.profile-project-card a {
    color: #2b2f36;
    text-decoration: none;
}

.profile-project-card a:hover {
    color: var(--accent-color);
}

.profile-project-card i {
    font-size: 0.8rem;
    opacity: 0.6;
}

.profile-project-card p {
    color: #4b5159;
    line-height: 1.6;
    margin: 0;
}

.profile-social-footer {
    background: #2b2f36;
    color: #fff;
    padding: 2rem 1.5rem;
    text-align: center;
}

.profile-social-icons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.profile-social-icons a {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.2rem;
    transition: background 0.2s ease, transform 0.2s ease;
}

.profile-social-icons a:hover {
    background: var(--accent-color);
    transform: translateY(-2px);
}

.profile-social-name {
    opacity: 0.85;
    margin: 0;
}

@media (max-width: 768px) {
    .profile-body {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .profile-header-inner {
        flex-direction: column;
        text-align: center;
    }

    .profile-header-text h1 {
        font-size: 1.9rem;
    }

    .profile-repeater-inline {
        grid-template-columns: 1fr;
    }
}

/* ====================================
   Forum (feed) e Comentarios
   ==================================== */
.forum-feed {
    display: grid;
    gap: 1rem;
    max-width: 820px;
    margin: 0 auto;
}

.forum-card {
    display: block;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(212, 165, 116, 0.2);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    color: inherit;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.forum-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

.forum-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.forum-badge {
    background: rgba(212, 165, 116, 0.25);
    color: var(--accent-color);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
}

.forum-date {
    color: #b8b8b8;
    font-size: 0.85rem;
}

.forum-card-title {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
    color: #fff;
}

.forum-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    color: #c4c4c4;
    font-size: 0.88rem;
}

.forum-card-meta i {
    color: var(--accent-color);
    margin-right: 0.3rem;
}

/* Comentarios */
.comments-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(212, 165, 116, 0.2);
}

.comments-title {
    font-size: 1.3rem;
    color: #fff;
    margin-bottom: 1rem;
}

.comments-loading,
.comments-empty {
    color: #b8b8b8;
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.comment-card {
    display: flex;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.9rem 1rem;
}

.comment-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    background: #3a3a3a;
    flex-shrink: 0;
}

.comment-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9a9a9a;
}

.comment-body {
    flex: 1;
    min-width: 0;
}

.comment-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.3rem;
    flex-wrap: wrap;
}

.comment-author {
    font-weight: 700;
    color: #fff;
}

.comment-anon {
    color: #9a9a9a;
    font-style: italic;
    font-weight: 500;
}

.comment-time {
    color: #a0a0a0;
    font-size: 0.82rem;
}

.comment-remove {
    margin-left: auto;
    background: rgba(180, 35, 24, 0.5);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.2rem 0.55rem;
    font-size: 0.78rem;
    cursor: pointer;
}

.comment-text {
    color: #e0e0e0;
    line-height: 1.6;
    word-wrap: break-word;
}

.comments-box {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(212, 165, 116, 0.2);
    border-radius: 12px;
    padding: 1rem 1.15rem;
}

.comments-login-hint {
    color: #cfcfcf;
    margin-bottom: 0.6rem;
}

.comment-google-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    color: #1b1b1b;
    font-weight: 700;
    padding: 0.6rem 1rem;
    border-radius: 8px;
}

.comment-google-btn i {
    color: #ea4335;
}

.comment-form textarea {
    width: 100%;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    padding: 0.65rem 0.75rem;
    font-family: inherit;
    resize: vertical;
}

.comment-consent {
    display: block;
    color: #d7d7d7;
    font-size: 0.9rem;
    margin: 0.6rem 0;
}

.comment-consent a {
    color: var(--accent-color);
}

.comment-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.comment-identity {
    color: #b0b0b0;
    font-size: 0.85rem;
}

.comment-identity a {
    color: var(--accent-color);
}

.comment-msg {
    color: #f2a59d;
    margin-top: 0.5rem;
    min-height: 1rem;
}

.legal-content h2 {
    color: #fff;
    margin: 1.4rem 0 0.5rem;
    font-size: 1.2rem;
}

.legal-content p {
    color: #d7d7d7;
    line-height: 1.7;
}

.legal-content a {
    color: var(--accent-color);
}

/* Respostas e voto "Util" */
.comment-thread {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.comment-replies {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-left: 2.2rem;
    border-left: 2px solid rgba(212, 165, 116, 0.25);
    padding-left: 0.9rem;
}

.comment-card-reply {
    background: rgba(255, 255, 255, 0.02);
}

.comment-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.comment-helpful,
.comment-action-btn {
    background: none;
    border: none;
    color: #b0b0b0;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.2rem 0.3rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.comment-helpful:hover,
.comment-action-btn:hover {
    color: var(--accent-color);
}

.comment-helpful.is-active {
    color: var(--accent-color);
}

/* GIF no comentário */
.comment-gif { max-width: 100%; width: auto; max-height: 260px; border-radius: 10px; display: block; margin-top: 0.2rem; }
/* Botões do composer (GIF + publicar) + painel de GIF */
.cf-actions-btns { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.cf-gif { background: none; border: 1px solid var(--border-warm); color: var(--accent-2); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.04em; border-radius: 8px; padding: 0.3rem 0.55rem; cursor: pointer; }
.cf-gif:hover { border-color: var(--accent-color); color: var(--text-color); }
.cf-gif-panel { margin-top: 0.5rem; background: var(--secondary-color); border: 1px solid var(--border-warm); border-radius: 12px; padding: 0.6rem; }
.cf-gif-search { width: 100%; box-sizing: border-box; background: var(--primary-color); border: 1px solid var(--border-warm); color: var(--text-color); border-radius: 999px; padding: 0.4rem 0.8rem; font: inherit; font-size: 0.85rem; margin-bottom: 0.5rem; }
.cf-gif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; max-height: 240px; overflow-y: auto; }
/* Edição inline de comentário */
.comment-edit { margin-top: 0.3rem; }
.comment-edit-body { width: 100%; box-sizing: border-box; background: var(--primary-color); border: 1px solid var(--border-warm); color: var(--text-color); border-radius: 10px; padding: 0.5rem 0.7rem; font: inherit; resize: vertical; }
.comment-edit-actions { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.4rem; }

/* Excluir Conta (zona de perigo no perfil) */
.vp-danger { margin-top: 2rem; border: 1px solid #7a3b34; background: rgba(178,42,32,0.08); border-radius: 14px; padding: 1.1rem 1.2rem; }
.vp-danger h2 { margin: 0 0 0.4rem; font-size: 1rem; color: #e5847b; display: flex; align-items: center; gap: 0.45rem; }
.vp-danger p { margin: 0 0 0.8rem; font-size: 0.88rem; color: var(--text-faint); line-height: 1.4; }
.vp-delete-account { background: #b3352e; border: none; color: #fff; font-weight: 700; border-radius: 10px; padding: 0.6rem 1rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; }
.vp-delete-account:hover { background: #c53f36; }
.vp-delete-account:disabled { opacity: 0.6; cursor: default; }

.comment-helpful-count {
    font-weight: 700;
}

.comment-reply-host:not(:empty) {
    margin-left: 2.2rem;
    margin-top: 0.4rem;
}

.comment-reply-head {
    font-size: 0.85rem;
    color: #b0b0b0;
    margin-bottom: 0.5rem;
}

.comment-reply-head a { color: var(--accent-color); }

.comment-form-reply {
    border-left: 2px solid var(--accent-color);
    padding-left: 0.9rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0 8px 8px 0;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    padding-right: 0.6rem;
}

.comments-box-title {
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.6rem;
}

/* Mensagens de contato (Admin) */
.contact-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.contact-card {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    background: rgba(255, 255, 255, 0.03);
}

.contact-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.contact-subject {
    display: block;
    font-weight: 700;
    color: #fff;
    font-size: 1.05rem;
}

.contact-meta {
    display: block;
    color: #a0a0a0;
    font-size: 0.85rem;
    margin-top: 0.2rem;
}

.contact-meta a { color: var(--accent-color); }

.contact-card-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.contact-card-actions form { margin: 0; }

.contact-body {
    color: #e0e0e0;
    line-height: 1.6;
    white-space: pre-line;
}

/* Comunidade — busca de publicacoes */
.community-search {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 820px;
    margin: 0 auto 1.25rem;
    padding: 0.75rem 1.15rem;
    border: 1px solid var(--border-warm);
    border-radius: 999px;
    background: var(--secondary-color);
}

.community-search i { color: var(--text-faint); }

.community-search input {
    flex: 1;
    border: none;
    background: none;
    color: var(--text-color);
    font-size: 1rem;
    outline: none;
    font-family: inherit;
}

.community-search input::placeholder { color: var(--text-faint); }

.community-count {
    max-width: 820px;
    margin: 0 auto 1rem;
    color: var(--text-faint);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.8rem;
}

.community-empty {
    max-width: 820px;
    margin: 1.5rem auto;
    color: var(--text-muted);
    text-align: center;
}

/* Feed estilo comunidade */
.community-page .page-content {
    max-width: 1120px;
    padding-top: 2.5rem;
    padding-bottom: 4rem;
}

/* Layout de duas colunas: feed + barra lateral */
.community-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1.75rem;
    align-items: start;
}

.community-main {
    min-width: 0;
}

.community-aside {
    position: sticky;
    top: 1rem;
    align-self: start;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.side-card {
    background: var(--secondary-color);
    border: 1px solid var(--border-warm);
    border-radius: 14px;
    padding: 1.1rem 1.15rem;
}

.side-title {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-color);
    margin: 0 0 0.75rem;
}

.side-text {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0 0 0.9rem;
}

.side-hint {
    font-size: 0.78rem;
    color: var(--text-faint);
    margin: 0.6rem 0 0;
    text-align: center;
}

.side-google,
.side-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 0.8rem;
    border-radius: 9px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    box-sizing: border-box;
}

.side-google {
    background: #fff;
    color: #1f1b16;
    border: 1px solid var(--border-warm);
}

.side-google:hover { filter: brightness(0.96); }

.side-cta {
    background: var(--accent-color);
    color: #1b1409;
    border: 1px solid var(--accent-color);
}

.side-cta:hover { filter: brightness(1.05); }

.side-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    text-align: center;
}

.side-stat-num {
    display: block;
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-color);
}

.side-stat-label {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-faint);
}

.side-areas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.side-area-chip {
    background: transparent;
    border: 1px solid var(--border-warm);
    color: var(--text-muted);
    border-radius: 999px;
    padding: 0.32rem 0.7rem;
    font-family: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.side-area-chip:hover {
    border-color: var(--accent-color);
    color: var(--text-color);
}

.side-area-chip.is-active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #1b1409;
    font-weight: 600;
}

.side-trending {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: trend;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.side-trending li {
    counter-increment: trend;
    display: grid;
    grid-template-columns: 1.4rem 1fr;
    gap: 0.5rem;
    align-items: start;
}

.side-trending li::before {
    content: counter(trend);
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.1rem;
    color: var(--accent-color);
    line-height: 1.2;
}

.side-trending a {
    display: block;
    font-size: 0.88rem;
    line-height: 1.35;
    color: var(--text-color);
    text-decoration: none;
    font-weight: 600;
}

.side-trending a:hover { color: var(--accent-color); }

.side-trending-meta {
    grid-column: 2;
    font-size: 0.72rem;
    color: var(--text-faint);
}

@media (max-width: 900px) {
    .community-layout {
        grid-template-columns: 1fr;
    }
    .community-aside {
        position: static;
        order: 2;
    }
}

/* ==========================================================================
   Menu lateral (app-shell) estilo Reddit — paginas de area e Comunidade
   ========================================================================== */
.app-shell {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}

.app-sidebar {
    flex: 0 0 244px;
    width: 244px;
    box-sizing: border-box;
    background: var(--secondary-color);
    border-right: 1px solid var(--border-warm);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 1rem 0.7rem;
    z-index: 40;
    transition: flex-basis 0.18s ease, width 0.18s ease;
}

.app-main {
    flex: 1 1 auto;
    min-width: 0;
}

/* Sem navbar no topo: o conteudo comeca alinhado ao cabecalho do menu. */
.app-main .page-content { padding-top: 1.15rem; }
.app-main .content-page > .topics-navbar { margin-top: 0.4rem; }

.app-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.2rem 0.5rem 1rem;
}

.app-logo {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.25rem;
    color: var(--text-color);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
}

.app-collapse {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.95rem;
    padding: 0.4rem;
    border-radius: 8px;
    line-height: 1;
    flex: 0 0 auto;
}

.app-collapse:hover { background: var(--primary-color); color: var(--text-color); }
.app-collapse i { transition: transform 0.18s ease; }

.app-nav {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.app-nav-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.58rem 0.7rem;
    border: none;
    background: transparent;
    border-radius: 9px;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.94rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.app-nav-link i {
    width: 1.25rem;
    flex: 0 0 auto;
    text-align: center;
    font-size: 1rem;
}

.app-nav-link:hover { background: var(--primary-color); color: var(--text-color); }

.app-nav-link.is-active {
    background: rgba(208, 140, 75, 0.16);
    color: var(--text-color);
    box-shadow: inset 3px 0 0 var(--accent-color);
}

.app-nav-me { cursor: default; }

.app-nav-sep {
    height: 1px;
    background: var(--border-warm);
    margin: 0.55rem 0.45rem;
}

.app-nav-heading {
    padding: 0.35rem 0.7rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
    white-space: nowrap;
}

.app-newpost {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.9rem 0.4rem 0;
    padding: 0.65rem;
    border-radius: 10px;
    background: var(--accent-color);
    color: #1b1409;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    white-space: nowrap;
}

.app-newpost:hover { filter: brightness(1.05); }
.app-newpost i { flex: 0 0 auto; }

.app-sidebar-foot {
    margin-top: auto;
    padding-top: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    border-top: 1px solid var(--border-warm);
}

/* --- Recolhido (desktop) --- */
.app-shell.is-collapsed .app-sidebar { flex-basis: 68px; width: 68px; }
.app-shell.is-collapsed .app-logo,
.app-shell.is-collapsed .app-nav-label,
.app-shell.is-collapsed .app-nav-heading,
.app-shell.is-collapsed .app-nav-sep { display: none; }
.app-shell.is-collapsed .app-sidebar-head { justify-content: center; padding-left: 0; padding-right: 0; }
.app-shell.is-collapsed .app-collapse i { transform: rotate(180deg); }
.app-shell.is-collapsed .app-nav-link,
.app-shell.is-collapsed .app-newpost { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
.app-shell.is-collapsed .app-nav-link i { width: auto; }

/* --- Mobile / off-canvas --- */
.app-mobile-toggle {
    display: none;
    position: fixed;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 45;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 9px;
    border: 1px solid var(--border-warm);
    background: var(--secondary-color);
    color: var(--text-color);
    font-size: 1.05rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.app-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 39;
}

@media (max-width: 900px) {
    .app-mobile-toggle { display: inline-flex; }
    .app-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-100%);
        transition: transform 0.24s ease;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
    }
    .app-shell.is-open .app-sidebar { transform: none; }
    .app-shell:not(.is-open) .app-overlay { display: none; }
    .app-main { padding-top: 3.4rem; }
    /* No mobile o menu abre sempre expandido */
    .app-shell.is-collapsed .app-sidebar { flex-basis: 244px; width: 244px; }
    .app-shell.is-collapsed .app-nav-label,
    .app-shell.is-collapsed .app-logo,
    .app-shell.is-collapsed .app-nav-heading { display: revert; }
}

/* Botao "criar publicacao" no topo do feed (visitante Google) */
.community-create {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    background: var(--secondary-color);
    border: 1px solid var(--border-warm);
    border-radius: 12px;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
}

.community-create:hover { border-color: var(--accent-color); color: var(--text-color); }
.community-create i { color: var(--accent-color); }

/* Modal generico */
.cm-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.cm-modal[hidden] { display: none; }
.cm-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }

.cm-modal-box {
    position: relative;
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--secondary-color);
    border: 1px solid var(--border-warm);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.cm-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.3rem;
    border-bottom: 1px solid var(--border-warm);
}

.cm-modal-head h2 {
    margin: 0;
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.4rem;
    color: var(--text-color);
}

.cm-modal-x {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.2rem 0.45rem;
    border-radius: 8px;
}

.cm-modal-x:hover { background: var(--primary-color); color: var(--text-color); }

.cm-modal-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.2rem 1.3rem 1.4rem;
}

.cm-modal-body > label {
    font-size: 0.72rem;
    color: var(--text-faint);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.5rem;
}

.cm-modal-body input[type="text"],
.cm-modal-body input[type="url"],
.cm-modal-body textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--primary-color);
    color: var(--text-color);
    border: 1px solid var(--border-warm);
    border-radius: 9px;
    padding: 0.6rem 0.75rem;
    font-family: inherit;
    font-size: 0.95rem;
}

.cm-modal-body textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.cm-modal-body input:focus, .cm-modal-body textarea:focus { outline: none; border-color: var(--accent-color); }

.cm-modal-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.7rem;
    text-transform: none;
    letter-spacing: 0;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.cm-modal-consent input { margin-top: 0.15rem; }
.cm-modal-msg { margin: 0.4rem 0 0; color: #e2a06a; font-size: 0.9rem; }
.cm-modal-note {
    margin: 0 0 0.3rem;
    padding: 0.6rem 0.75rem;
    background: rgba(226, 160, 106, 0.12);
    border: 1px solid var(--border-warm);
    border-radius: 9px;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.cm-modal-note i { color: #e2a06a; margin-right: 0.3rem; }

.cm-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1rem;
}

.cm-btn-ghost, .cm-btn-primary {
    padding: 0.6rem 1.1rem;
    border-radius: 9px;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border-warm);
}

.cm-btn-ghost { background: transparent; color: var(--text-muted); }
.cm-btn-ghost:hover { color: var(--text-color); }
.cm-btn-primary { background: var(--accent-color); color: #1b1409; border-color: var(--accent-color); }
.cm-btn-primary:hover { filter: brightness(1.05); }
.cm-btn-primary:disabled { opacity: 0.6; cursor: default; }

/* Detalhe da publicacao da comunidade */
.post-back { margin: 0 0 1rem; }
.post-back a { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; }
.post-back a:hover { color: var(--accent-color); }
.post-detail-title {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.9rem;
    line-height: 1.15;
    color: var(--text-color);
    margin: 0.3rem 0 0.8rem;
}
.post-body { color: var(--text-color); font-size: 1rem; line-height: 1.7; }
.post-body p { margin: 0 0 1rem; }
.post-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 0.5rem 0; }

/* Botao secundario do menu lateral (Nova Comunidade) */
.app-newpost-alt {
    background: transparent;
    color: var(--accent-2);
    border: 1px solid var(--border-warm);
    margin-top: 0.45rem;
}
.app-newpost-alt:hover { filter: none; border-color: var(--accent-color); color: var(--text-color); }

/* Menu lateral: secao "Comunidades" (modo comunidade) */
.app-communities { border: none; }
.app-communities-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.7rem;
    cursor: pointer;
    list-style: none;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
    white-space: nowrap;
}
.app-communities-summary::-webkit-details-marker { display: none; }
.app-communities-caret { transition: transform 0.18s ease; font-size: 0.7rem; }
.app-communities[open] .app-communities-caret { transform: rotate(180deg); }
.app-communities-list { display: flex; flex-direction: column; gap: 0.1rem; }
.app-community-link .app-community-lock { font-size: 0.7rem; color: var(--text-faint); }

/* Linha da comunidade com toggle (+) e painel de chat/avisos */
.app-community-row { display: flex; align-items: center; gap: 0.15rem; }
.app-community-row .app-community-link { flex: 1 1 auto; min-width: 0; }
.app-community-toggle { position: relative; flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border: none; background: transparent; color: var(--text-muted); border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.app-community-toggle:hover { background: var(--primary-color); color: var(--text-color); }
.app-community-badge { position: absolute; top: -3px; right: -3px; background: #d9463b; color: #fff; border-radius: 999px; font-size: 0.6rem; font-weight: 700; min-width: 0.95rem; text-align: center; padding: 0 0.22rem; line-height: 1.5; }
.app-community-panel { margin: 0.3rem 0 0.5rem; background: var(--primary-color); border: 1px solid var(--border-warm); border-radius: 10px; overflow: hidden; }
.app-cpanel-tabs { display: flex; }
.app-cpanel-tab { flex: 1 1 0; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); font-family: inherit; font-size: 0.74rem; padding: 0.45rem 0.3rem; cursor: pointer; }
.app-cpanel-tab.is-active { color: var(--text-color); border-bottom-color: var(--accent-color); }
.app-cpanel-body { padding: 0.5rem; }
.app-cpanel-empty { color: var(--text-faint); font-size: 0.78rem; text-align: center; margin: 0.5rem 0; }
.app-chat-messages { max-height: 190px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.5rem; }
.app-chat-msg { display: flex; flex-direction: column; background: var(--secondary-color); border: 1px solid var(--border-warm); border-radius: 9px; padding: 0.35rem 0.5rem; font-size: 0.8rem; max-width: 95%; }
.app-chat-msg.mine { background: rgba(208, 140, 75, 0.14); align-self: flex-end; }
.app-chat-author { font-size: 0.66rem; color: var(--accent-color); font-weight: 600; }
.app-chat-text { color: var(--text-color); overflow-wrap: anywhere; }
.app-chat-form { display: flex; gap: 0.3rem; }
.app-chat-form input { flex: 1 1 auto; min-width: 0; background: var(--secondary-color); border: 1px solid var(--border-warm); color: var(--text-color); border-radius: 8px; padding: 0.4rem 0.5rem; font-family: inherit; font-size: 0.8rem; }
.app-chat-form button { flex: 0 0 auto; background: var(--accent-color); color: #1b1409; border: none; border-radius: 8px; width: 2rem; cursor: pointer; }
.app-notif-list { list-style: none; margin: 0; padding: 0; max-height: 210px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.3rem; }
.app-notif-item { font-size: 0.78rem; padding: 0.35rem 0.45rem; border-radius: 7px; background: var(--secondary-color); line-height: 1.35; }
.app-notif-item.is-unread { border-left: 2px solid var(--accent-color); }
.app-notif-item a { color: var(--text-color); text-decoration: none; }
.app-notif-item a:hover { color: var(--accent-color); }
.app-shell.is-collapsed .app-community-toggle,
.app-shell.is-collapsed .app-community-panel { display: none; }

/* Painel do menu: links Chat / Avisos */
.app-community-panel { padding: 0.3rem; flex-direction: column; gap: 0.15rem; }
.app-community-panel[hidden] { display: none; }
.app-community-panel:not([hidden]) { display: flex; }
.app-cpanel-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; border-radius: 8px; color: var(--text-muted); text-decoration: none; font-size: 0.82rem; }
.app-cpanel-link:hover { background: var(--secondary-color); color: var(--text-color); }
.app-cpanel-link i { width: 1rem; text-align: center; color: var(--accent-color); }
.app-cpanel-count { margin-left: auto; background: #d9463b; color: #fff; border-radius: 999px; font-size: 0.6rem; font-weight: 700; min-width: 0.95rem; text-align: center; padding: 0 0.22rem; line-height: 1.5; }

/* Pagina de chat / avisos da comunidade */
.cchat-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 1rem; }
.cchat-title { font-family: 'Newsreader', Georgia, serif; font-size: 1.5rem; color: var(--text-color); margin: 0; }
.cchat-tabs { display: flex; gap: 0.4rem; }
.cchat-tab { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid var(--border-warm); color: var(--text-muted); text-decoration: none; font-size: 0.85rem; }
.cchat-tab:hover { border-color: var(--accent-color); }
.cchat-tab.is-active { background: var(--accent-color); border-color: var(--accent-color); color: #1b1409; font-weight: 600; }
.cchat-author { display: block; font-size: 0.72rem; color: var(--accent-color); font-weight: 600; margin-bottom: 0.1rem; }
.cchat-body { display: block; overflow-wrap: anywhere; }
#cchat .dm-messages { max-height: 62vh; }
.cchat-row { display: flex; gap: 0.5rem; align-items: flex-start; }
.cchat-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; margin-top: 0.1rem; }
.cchat-avatar-ph { display: inline-flex; align-items: center; justify-content: center; background: var(--primary-color); border: 1px solid var(--border-warm); color: var(--text-faint); font-size: 0.8rem; }
.cchat-row .dm-msg { max-width: 85%; }

/* Titulos dos cards da barra lateral menores (sobrepoe .page-content .cm-h2) */
.community-page .community-aside .side-title { font-size: 0.7rem; margin-bottom: 0.6rem; }

/* Topo da Comunidade: barra de criar + busca de comunidade */
.community-top { display: flex; gap: 0.6rem; align-items: stretch; margin-bottom: 1rem; flex-wrap: wrap; }
.community-top .community-create { flex: 1 1 260px; margin-bottom: 0; }
.community-csearch { position: relative; flex: 1 1 220px; display: flex; align-items: center; }
.community-csearch > i { position: absolute; left: 0.9rem; color: var(--text-faint); }
.community-csearch input { width: 100%; box-sizing: border-box; background: var(--secondary-color); border: 1px solid var(--border-warm); color: var(--text-color); border-radius: 12px; padding: 0.85rem 1rem 0.85rem 2.4rem; font-family: inherit; font-size: 0.95rem; }
.community-csearch-results { position: absolute; left: 0; right: 0; top: calc(100% + 0.3rem); z-index: 30; background: var(--secondary-color); border: 1px solid var(--border-warm); border-radius: 12px; overflow-y: auto; max-height: 340px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45); }
.community-csearch-item { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.6rem 0.8rem; text-decoration: none; color: var(--text-color); }
.community-csearch-item:hover { background: var(--primary-color); }
.ccs-name { font-weight: 600; font-size: 0.9rem; }
.ccs-topic { font-size: 0.78rem; color: var(--text-muted); }
.ccs-meta { font-size: 0.72rem; color: var(--text-faint); }
.community-csearch-empty { padding: 0.7rem 0.8rem; color: var(--text-faint); font-size: 0.85rem; }

/* Botao e seletor de GIF no composer (DM e chat) */
.dm-composer { position: relative; }
.dm-gif-btn { flex: 0 0 auto; background: transparent; border: 1px solid var(--border-warm); color: var(--accent-color); border-radius: 8px; padding: 0 0.5rem; font-weight: 700; font-size: 0.72rem; cursor: pointer; letter-spacing: 0.03em; }
.dm-gif-btn:hover { border-color: var(--accent-color); background: rgba(208, 140, 75, 0.12); }
.gif-panel { position: absolute; left: 0; right: 0; bottom: calc(100% + 0.4rem); z-index: 40; background: var(--secondary-color); border: 1px solid var(--border-warm); border-radius: 12px; padding: 0.6rem; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); }
.gif-search { width: 100%; box-sizing: border-box; background: var(--primary-color); border: 1px solid var(--border-warm); color: var(--text-color); border-radius: 8px; padding: 0.45rem 0.6rem; font-family: inherit; font-size: 0.88rem; margin-bottom: 0.5rem; }
.gif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; max-height: 260px; overflow-y: auto; }
.gif-thumb { width: 100%; height: 84px; object-fit: cover; border-radius: 8px; cursor: pointer; background: var(--primary-color); }
.gif-thumb:hover { outline: 2px solid var(--accent-color); }
.gif-loading { grid-column: 1 / -1; text-align: center; color: var(--text-faint); font-size: 0.85rem; padding: 1rem; }
.chat-gif { max-width: 200px; max-height: 200px; border-radius: 10px; display: block; }
.app-communities-empty { padding: 0.35rem 0.7rem; font-size: 0.8rem; color: var(--text-faint); line-height: 1.4; }
.app-shell.is-collapsed .app-communities-summary { justify-content: center; }
.app-shell.is-collapsed .app-communities-caret,
.app-shell.is-collapsed .app-communities-empty { display: none; }

/* Card de comunidades (barra direita) */
.side-title-row { display: flex; align-items: center; justify-content: space-between; }
.side-title-row .side-title { margin-bottom: 0.75rem; }
.side-title-add {
    background: transparent;
    border: 1px solid var(--border-warm);
    color: var(--accent-color);
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 7px;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.side-title-add:hover { background: var(--accent-color); color: #1b1409; }

.side-communities { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.side-communities li { display: flex; flex-direction: column; gap: 0.1rem; }
.side-community-name { font-size: 0.9rem; font-weight: 600; color: var(--text-color); }
.side-community-meta { font-size: 0.72rem; color: var(--text-faint); }

/* Modal Nova Comunidade: visibilidade e diretrizes */
.nc-visibility { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.2rem; }
.nc-radio {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    text-transform: none;
    letter-spacing: 0;
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--text-muted);
    cursor: pointer;
}
.nc-radio input { margin-top: 0.2rem; }
.nc-radio strong { color: var(--text-color); }

.nc-guidelines {
    margin-top: 0.9rem;
    padding: 0.8rem 0.9rem;
    background: var(--primary-color);
    border: 1px solid var(--border-warm);
    border-radius: 10px;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.nc-guidelines strong { color: var(--accent-2); display: block; margin-bottom: 0.4rem; }
.nc-guidelines ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }

.side-community-name { color: var(--text-color); text-decoration: none; }
.side-community-name:hover { color: var(--accent-color); }

/* Pagina de uma comunidade */
.community-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    background: var(--secondary-color);
    border: 1px solid var(--border-warm);
    border-radius: 16px;
    padding: 1.4rem 1.5rem;
    margin-bottom: 1.2rem;
}
.community-header h1 { font-family: 'Newsreader', Georgia, serif; font-size: 1.9rem; margin: 0 0 0.35rem; color: var(--text-color); }
.community-topic { display: inline-block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-color); }
.community-sub { color: var(--text-muted); font-size: 0.9rem; margin: 0.5rem 0 0; }
.community-sub i { margin: 0 0.15rem; }

/* Sequência de dias postando (streak) */
.post-streak {
    display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
    margin: 0.5rem 0 0; font-size: 0.86rem; color: var(--text-faint);
    background: var(--secondary-color); border: 1px solid var(--border-warm);
    border-radius: 999px; padding: 0.25rem 0.7rem;
}
.post-streak.is-active { color: #ffcf99; border-color: #6b4a28; }
.post-streak.is-active i { color: #ff8a3c; }
.post-streak strong { color: #ff8a3c; font-size: 1rem; }
.post-streak-best { color: var(--text-faint); font-size: 0.78rem; padding-left: 0.4rem; border-left: 1px solid var(--border-warm); }

/* Marcação de usuários com "@" (autocomplete) */
.mention-pop {
    position: fixed; z-index: 80; max-height: 260px; overflow-y: auto;
    background: var(--secondary-color); border: 1px solid var(--border-warm);
    border-radius: 12px; padding: 0.3rem; box-shadow: 0 12px 34px rgba(0,0,0,0.55);
}
.mention-sec { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); padding: 0.3rem 0.5rem 0.2rem; }
.mention-sec-muted { color: #d0955f; text-transform: none; letter-spacing: 0; font-size: 0.74rem; border-top: 1px solid var(--border-warm); margin-top: 0.2rem; }
.mention-sec-muted i { margin-right: 0.25rem; }
.mention-item {
    display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left;
    background: none; border: none; color: var(--text-color); font: inherit;
    padding: 0.35rem 0.5rem; border-radius: 8px; cursor: pointer;
}
.mention-item.is-active, .mention-item:hover:not(.mention-item-off) { background: var(--primary-color); }
.mention-item-off { cursor: not-allowed; color: var(--text-faint); opacity: 0.7; }
.mention-item-off .mention-av { filter: grayscale(0.7); }
.mention-av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.mention-av-ph { display: inline-flex; align-items: center; justify-content: center; background: var(--primary-color); border: 1px solid var(--border-warm); font-weight: 700; font-size: 0.8rem; }
.mention-name { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-empty { padding: 0.5rem 0.6rem; color: var(--text-faint); font-size: 0.85rem; }
/* Menção já publicada: link para o perfil */
.mention-link { color: var(--accent-color); font-weight: 600; text-decoration: none; }
.mention-link:hover { text-decoration: underline; }
.community-desc { color: var(--text-muted); line-height: 1.6; margin: 0.7rem 0 0; }
.community-header-action { flex: 0 0 auto; }
.community-role-tag { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--accent-2); font-weight: 600; font-size: 0.9rem; }

.community-requests {
    background: var(--secondary-color);
    border: 1px solid var(--border-warm);
    border-radius: 14px;
    padding: 1.1rem 1.3rem;
    margin-bottom: 1.2rem;
}
.community-requests h2 { font-family: 'Newsreader', Georgia, serif; font-size: 1.2rem; margin: 0 0 0.8rem; color: var(--text-color); }
.community-requests ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.community-requests li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.community-req-name { color: var(--text-color); }
.community-req-actions { display: flex; gap: 0.5rem; flex: 0 0 auto; }
.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.82rem; }

a.feed-badge { text-decoration: none; }
a.feed-badge:hover { filter: brightness(1.12); }

/* Painel de pedidos de entrada no perfil */
.profile-requests {
    background: var(--secondary-color, #1E1813);
    border: 1px solid var(--border-warm, #33281F);
    border-radius: 14px;
    padding: 1.1rem 1.3rem;
    margin: 1.2rem 0;
}
.profile-requests > h2 {
    font-size: 1.05rem;
    margin: 0 0 0.9rem;
    color: var(--accent-color, #D08C4B);
}
.profile-requests-group { margin-bottom: 1rem; }
.profile-requests-group:last-child { margin-bottom: 0; }
.profile-requests-group h3 { font-size: 0.95rem; margin: 0 0 0.5rem; }
.profile-requests-group h3 a { color: var(--text-color, #F2E9DE); text-decoration: none; }
.profile-requests-group h3 a:hover { color: var(--accent-color, #D08C4B); }
.profile-requests-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.profile-requests-group li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }

/* Painel de moderacao da comunidade */
.community-manage {
    background: var(--secondary-color);
    border: 1px solid var(--border-warm);
    border-radius: 14px;
    padding: 1.1rem 1.3rem;
    margin-bottom: 1.2rem;
}
.manage-block { margin-bottom: 1rem; }
.manage-block:last-child { margin-bottom: 0; }
.manage-block > h2, .manage-summary {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.15rem;
    color: var(--text-color);
    margin: 0 0 0.6rem;
}
.manage-summary { cursor: pointer; }
.manage-block ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.manage-block li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.manage-item-main { display: flex; flex-direction: column; min-width: 0; }
.manage-item-main strong { color: var(--text-color); }
.manage-item-sub { font-size: 0.78rem; color: var(--text-faint); }
.manage-flag { color: #e2a06a; }
.manage-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.btn-mini {
    background: transparent;
    border: 1px solid var(--border-warm);
    color: var(--text-muted);
    border-radius: 7px;
    padding: 0.3rem 0.6rem;
    font-size: 0.78rem;
    cursor: pointer;
    font-family: inherit;
}
.btn-mini:hover { border-color: var(--accent-color); color: var(--text-color); }
.btn-mini-warn:hover { border-color: #e2a06a; color: #e2a06a; }

/* Link do autor no feed */
.feed-author-link { color: var(--text-muted); text-decoration: none; }
.feed-author-link:hover { color: var(--accent-color); text-decoration: underline; }

/* Barra social do perfil */
.profile-social-wrap { max-width: 1000px; margin: 1rem auto 0; }
.social-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
    background: var(--secondary-color); border: 1px solid var(--border-warm);
    border-radius: 14px; padding: 1rem 1.2rem;
}
.social-stats { list-style: none; display: flex; gap: 1.4rem; margin: 0; padding: 0; }
.social-stats li { color: var(--text-muted); font-size: 0.85rem; text-align: center; }
.social-stats strong { color: var(--text-color); font-size: 1.15rem; display: block; font-family: 'Newsreader', Georgia, serif; }
.social-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.s-friend-wrap { display: inline-flex; gap: 0.5rem; }
.social-self { color: var(--text-faint); font-size: 0.9rem; }

/* Perfil publico (visitante) */
.profile-public-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.profile-public-avatar { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.profile-public-avatar-ph { display: inline-flex; align-items: center; justify-content: center; background: var(--secondary-color); border: 1px solid var(--border-warm); color: var(--text-faint); font-size: 1.6rem; }
.profile-public-head h1 { margin: 0; font-family: 'Newsreader', Georgia, serif; font-size: 1.7rem; color: var(--text-color); }
.profile-public-head .profile-quote { color: var(--text-muted); font-style: italic; margin: 0.3rem 0 0; }
.profile-public-about { margin: 0.6rem 0; }
.profile-public-bio { color: var(--text-muted); line-height: 1.6; margin: 0 0 0.5rem; }
.profile-public-site { font-size: 0.9rem; margin: 0; }
.profile-public-site a { color: var(--accent-color); text-decoration: none; }
.profile-public-site a:hover { text-decoration: underline; }
.profile-public-edit { margin: 0.7rem 0 0.2rem; }

/* Publicacoes no perfil */
.profile-pubs { max-width: 760px; margin: 1.5rem auto 3rem; }
.profile-pubs-title { font-family: 'Newsreader', Georgia, serif; font-size: 1.4rem; color: var(--text-color); margin: 0 0 1rem; }

/* Form de edicao do perfil do visitante */
.vp-form { display: flex; flex-direction: column; gap: 0.4rem; background: var(--secondary-color); border: 1px solid var(--border-warm); border-radius: 14px; padding: 1.2rem 1.3rem; }
.vp-form > label { font-size: 0.72rem; color: var(--text-faint); font-family: 'JetBrains Mono', ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.6rem; }
.vp-form input[type="text"], .vp-form textarea { width: 100%; box-sizing: border-box; background: var(--primary-color); color: var(--text-color); border: 1px solid var(--border-warm); border-radius: 9px; padding: 0.6rem 0.75rem; font-family: inherit; font-size: 0.95rem; }
.vp-form textarea { resize: vertical; line-height: 1.55; }
.vp-photo { display: flex; align-items: center; gap: 1rem; }
.vp-photo > div { display: flex; flex-direction: column; gap: 0.45rem; align-items: flex-start; }
.vp-photo label.cm-btn-ghost { cursor: pointer; }

/* Mensagens diretas (DM) */
.dm-title { font-family: 'Newsreader', Georgia, serif; font-size: 1.5rem; color: var(--text-color); margin: 0 0 1rem; }
.dm-layout { display: grid; grid-template-columns: 280px 1fr; gap: 1rem; align-items: start; }
.dm-inbox { display: flex; flex-direction: column; gap: 0.3rem; background: var(--secondary-color); border: 1px solid var(--border-warm); border-radius: 12px; padding: 0.5rem; max-height: 72vh; overflow-y: auto; }
.dm-thread { display: flex; gap: 0.6rem; align-items: center; padding: 0.5rem; border-radius: 9px; text-decoration: none; color: var(--text-color); }
.dm-thread:hover, .dm-thread.is-active { background: var(--primary-color); }
.dm-thread-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.dm-thread-avatar-ph { display: inline-flex; align-items: center; justify-content: center; background: var(--primary-color); border: 1px solid var(--border-warm); color: var(--text-faint); }
.dm-thread-main { display: flex; flex-direction: column; min-width: 0; }
.dm-thread-name { font-size: 0.9rem; font-weight: 600; }
.dm-thread-last { font-size: 0.78rem; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-badge { background: var(--accent-color); color: #1b1409; border-radius: 999px; font-size: 0.7rem; padding: 0 0.4rem; }
.dm-conversation { display: flex; flex-direction: column; background: var(--secondary-color); border: 1px solid var(--border-warm); border-radius: 12px; min-height: 60vh; }
.dm-conv-head { padding: 0.8rem 1rem; border-bottom: 1px solid var(--border-warm); }
.dm-conv-peer { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--text-color); }
.dm-conv-peer img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.dm-messages { flex: 1 1 auto; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; max-height: 55vh; }
.dm-msg { align-self: flex-start; max-width: 78%; background: var(--primary-color); border: 1px solid var(--border-warm); border-radius: 12px; padding: 0.5rem 0.75rem; font-size: 0.92rem; color: var(--text-color); overflow-wrap: anywhere; }
.dm-msg-mine { align-self: flex-end; background: rgba(208, 140, 75, 0.16); }
.dm-composer { display: flex; gap: 0.5rem; padding: 0.7rem; border-top: 1px solid var(--border-warm); }
.dm-composer textarea { flex: 1 1 auto; resize: none; background: var(--primary-color); color: var(--text-color); border: 1px solid var(--border-warm); border-radius: 9px; padding: 0.55rem 0.7rem; font-family: inherit; font-size: 0.95rem; }
.dm-composer button { flex: 0 0 auto; }
.dm-request { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.6rem 1rem; background: rgba(226, 160, 106, 0.12); border-bottom: 1px solid var(--border-warm); font-size: 0.88rem; color: var(--text-muted); }
.dm-empty, .dm-note { color: var(--text-faint); font-size: 0.9rem; padding: 1rem; }
.dm-pick { text-align: center; }
.dm-search { position: relative; margin-bottom: 0.5rem; }
.dm-search > i { position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 0.85rem; }
.dm-search input { width: 100%; box-sizing: border-box; background: var(--primary-color); border: 1px solid var(--border-warm); color: var(--text-color); border-radius: 9px; padding: 0.5rem 0.6rem 0.5rem 1.9rem; font-family: inherit; font-size: 0.88rem; }
.dm-search-results { position: absolute; left: 0; right: 0; top: calc(100% + 0.2rem); z-index: 20; background: var(--secondary-color); border: 1px solid var(--border-warm); border-radius: 10px; overflow-y: auto; max-height: 300px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.dm-search-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; text-decoration: none; color: var(--text-color); }
.dm-search-item:hover { background: var(--primary-color); }
.dm-search-item img, .dm-search-item .dm-thread-avatar-ph { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.dm-search-item .dm-thread-avatar-ph { display: inline-flex; align-items: center; justify-content: center; background: var(--primary-color); border: 1px solid var(--border-warm); color: var(--text-faint); }
.dm-search-empty { padding: 0.6rem; color: var(--text-faint); font-size: 0.85rem; }
@media (max-width: 720px) { .dm-layout { grid-template-columns: 1fr; } }

/* Badge de notificacoes no menu lateral */
.app-nav-link { position: relative; }
.app-nav-badge {
    margin-left: auto;
    background: var(--accent-color);
    color: #1b1409;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 1.1rem;
    text-align: center;
    padding: 0 0.35rem;
    line-height: 1.3;
}
.app-shell.is-collapsed .app-nav-badge { position: absolute; top: 0.25rem; right: 0.3rem; margin: 0; }

/* Lista de notificacoes */
.notif-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.notif-item a { display: flex; gap: 0.75rem; align-items: center; padding: 0.8rem 1rem; background: var(--secondary-color); border: 1px solid var(--border-warm); border-radius: 12px; text-decoration: none; color: var(--text-color); }
.notif-item.is-unread a { border-color: var(--accent-color); background: rgba(208, 140, 75, 0.08); }
.notif-item a:hover { border-color: var(--accent-color); }
.notif-icon { flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-color); color: var(--accent-color); }
.notif-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.notif-text { font-size: 0.92rem; }
.notif-when { font-size: 0.75rem; color: var(--text-faint); }

/* Barra slim do feed de uma comunidade */
.community-feedbar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; padding: 0.85rem 1rem; background: var(--secondary-color); border: 1px solid var(--border-warm); border-radius: 12px; }
.community-feedbar-info { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.2rem; }
.community-feedbar-name { font-family: 'Newsreader', Georgia, serif; font-size: 1.3rem; color: var(--text-color); text-decoration: none; }
.community-feedbar-name:hover { color: var(--accent-color); }
.community-feedbar-sub { display: block; font-size: 0.8rem; color: var(--text-faint); }
.community-feedbar-sub i { margin-right: 0.15rem; }
.community-feedbar-topic { align-self: flex-start; font-size: 0.72rem; color: var(--accent-2); background: rgba(208,140,75,0.12); border: 1px solid var(--border-warm); border-radius: 999px; padding: 0.05rem 0.55rem; }
/* Descrição direto no cabeçalho (sem precisar clicar em "Sobre") */
.community-feedbar-desc { margin: 0.25rem 0 0; font-size: 0.9rem; color: var(--text-color); line-height: 1.4; max-width: 62ch; text-wrap: pretty; }
.community-header-action { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.community-seefeed { margin: 0 0 1.2rem; }

/* Lista de membros (perfil da comunidade) */
.community-members-card { background: var(--secondary-color); border: 1px solid var(--border-warm); border-radius: 14px; padding: 1.1rem 1.3rem; margin-bottom: 1.2rem; }
.community-members-card h2 { font-family: 'Newsreader', Georgia, serif; font-size: 1.2rem; color: var(--text-color); margin: 0 0 0.8rem; }
.community-members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.community-member { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.4rem 0.35rem; border-radius: 9px; }
.community-member:hover { background: var(--primary-color); }
.community-member-link { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--text-color); min-width: 0; }
.community-member-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.community-member-avatar-ph { display: inline-flex; align-items: center; justify-content: center; background: var(--primary-color); border: 1px solid var(--border-warm); color: var(--text-faint); }
.community-member-text { display: flex; flex-direction: column; min-width: 0; }
.community-member-name { font-weight: 600; font-size: 0.92rem; }
.community-member-role { font-size: 0.75rem; color: var(--text-faint); }
.community-member-social { display: flex; gap: 0.35rem; flex: 0 0 auto; }
.mini-follow, .mini-friend { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--border-warm); background: transparent; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; }
.mini-follow:hover, .mini-friend:hover { border-color: var(--accent-color); color: var(--text-color); }
.mini-follow.is-active { background: var(--accent-color); color: #1b1409; border-color: var(--accent-color); }
.mini-follow:disabled, .mini-friend:disabled { opacity: 0.7; cursor: default; }

@media (max-width: 600px) {
    .community-header { flex-direction: column; }
    .community-header-action { width: 100%; }
    .community-header-action .cm-btn-primary,
    .community-header-action .cm-btn-ghost { width: 100%; }
}

.community-toolbar {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1.25rem;
}

.community-toolbar .community-search {
    margin: 0;
    flex: 1 1 240px;
}

.community-selects {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.community-select {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.community-select > span {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
}

.community-select select {
    background: var(--secondary-color);
    color: var(--text-color);
    border: 1px solid var(--border-warm);
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.feed {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feed-card {
    background: var(--secondary-color);
    border: 1px solid var(--border-warm);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
}

.feed-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.5rem;
}

.feed-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    background: #3a2e24;
    flex-shrink: 0;
}

.feed-avatar-ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
}

.feed-head-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.feed-badge {
    align-self: flex-start;
    background: rgba(208, 140, 75, 0.2);
    color: var(--accent-2);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
}

.feed-meta {
    color: var(--text-faint);
    font-size: 0.82rem;
}

.feed-title {
    display: block;
    font-family: 'Newsreader', Georgia, serif;
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.25;
    color: #FBF4EA;
    margin: 0.2rem 0 0.5rem;
}

.feed-title:hover { color: var(--accent-2); }

.feed-excerpt {
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.feed-more { color: var(--accent-2); font-weight: 600; }

.feed-media {
    display: block;
    margin-bottom: 0.75rem;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-warm);
}

.feed-media img {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
}

.feed-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.feed-actions > * {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-warm);
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
}

.feed-actions > *:hover {
    border-color: var(--accent-color);
    color: var(--text-color);
}

.feed-like.is-active {
    color: var(--accent-2);
    border-color: var(--accent-color);
    background: rgba(208, 140, 75, 0.15);
}

.feed-like.is-active i { color: var(--accent-2); }

/* Login: entrar com Google (visitante) */
.login-visitor {
    margin-top: 1.25rem;
    text-align: center;
}

.login-or {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #9a9a9a;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.login-or::before,
.login-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
}

.login-visitor .comment-google-btn {
    width: 100%;
    justify-content: center;
}

.login-visitor-hint {
    margin-top: 0.6rem;
    color: #9a9a9a;
    font-size: 0.85rem;
}

/* ====================================
   Home reformulada (estilo "torra escura" do prototipo)
   ==================================== */
.hero-lite,
.posts,
.news {
    background: #14100D;
    color: #F2E9DE;
}

.hero-lite {
    padding: 8rem 0 4rem;
    background:
        linear-gradient(180deg, rgba(20,16,13,0.55) 0%, rgba(20,16,13,0.92) 78%, #14100D 100%),
        repeating-linear-gradient(115deg, #241a13 0px, #241a13 9px, #2c2018 9px, #2c2018 18px);
    border-bottom: 1px solid rgba(51,40,31,0.7);
}

.hero-lite .container {
    max-width: 820px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.hero-kicker {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #E7C08B;
}

.hero-lite-title {
    font-family: 'Newsreader', Georgia, serif;
    font-weight: 400;
    font-size: clamp(2.6rem, 6vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #FBF4EA;
    margin: 0;
}

.hero-lite-lead {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #D5C3AF;
    max-width: 640px;
    margin: 0;
}

.hero-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 0.4rem;
}

.hero-btn-primary {
    background: #D08C4B;
    color: #1A1310;
    font-weight: 700;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
}

.hero-btn-primary:hover { background: #E7C08B; color: #1A1310; }

.hero-btn-ghost {
    border: 1px solid #4A3B2E;
    color: #E7DACA;
    font-weight: 600;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
}

.hero-btn-ghost:hover { border-color: #D08C4B; color: #FBF4EA; }

/* Cards editoriais numerados */
.posts { padding: 3.5rem 0; }

.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.15rem;
}

.post-card {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1.6rem 1.4rem;
    border: 1px solid #33281F;
    border-radius: 12px;
    background: #1A1511;
    color: inherit;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.post-card:hover {
    border-color: #6B4A2A;
    transform: translateY(-3px);
}

.post-card-feature {
    border-color: #6B4A2A;
    background: linear-gradient(160deg, #2A1D13 0%, #1A1511 70%);
}

.post-card-index {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #D08C4B;
}

.post-card-feature .post-card-index { color: #E7C08B; }

.post-card-title {
    font-family: 'Newsreader', Georgia, serif;
    font-weight: 500;
    font-size: 1.55rem;
    line-height: 1.2;
    color: #F6EDE3;
    margin: 0;
}

.post-card-desc {
    font-size: 0.98rem;
    line-height: 1.55;
    color: #B4A08C;
    margin: 0;
    flex: 1;
}

.post-card-more {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #E7C08B;
}

/* Noticias com abas de portal */
.news { padding: 1rem 0 4rem; }

.news-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    border-bottom: 1px solid #33281F;
    padding-bottom: 0.75rem;
    margin-bottom: 0.6rem;
}

.news-heading {
    font-family: 'Newsreader', Georgia, serif;
    font-weight: 500;
    font-size: 1.9rem;
    color: #F6EDE3;
    margin: 0;
}

.news-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 1rem;
}

.news-tab {
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.8rem;
    color: #8A7563;
    padding: 0.15rem 0;
    transition: color 0.15s ease;
}

.news-tab:hover { color: #C7B29C; }
.news-tab.is-active { color: #E7C08B; }

.news-updated {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.78rem;
    color: #8A7563;
    margin-bottom: 1rem;
}

.news .news-box { background: none; border: none; padding: 0; }

.news-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 2.5rem;
}

.news-item { border-bottom: 1px solid rgba(51,40,31,0.6); }

.news-link {
    display: flex;
    gap: 0.9rem;
    padding: 0.8rem 0;
    color: #E7DACA;
    align-items: baseline;
}

.news-link:hover .news-title { color: #E7C08B; }

.news-time {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.78rem;
    color: #8A7563;
    flex-shrink: 0;
    min-width: 44px;
}

.news-title { font-size: 1rem; line-height: 1.45; }

.news-loading,
.news-error { color: #A08B77; }

@media (max-width: 768px) {
    .news-list { grid-template-columns: 1fr; }
    .hero-lite { padding-top: 6.5rem; }
}

/* Caixa "Perguntar no forum" nas publicacoes */
.forum-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.75rem;
    padding: 1.1rem 1.3rem;
    border: 1px solid #33281F;
    border-radius: 12px;
    background: #1A1511;
}

.forum-cta-text {
    color: #C7B29C;
    font-size: 1rem;
}

.forum-cta-btn {
    display: inline-block;
    background: var(--accent-color);
    color: #1A1310;
    font-weight: 700;
    padding: 0.65rem 1.2rem;
    border-radius: 8px;
    white-space: nowrap;
}

.forum-cta-btn:hover { background: var(--accent-2); color: #1A1310; }

/* ====================================
   Temas por pagina (do prototipo)
   ==================================== */

/* Cafe com Leite (SQL) — artigo em papel claro sobre fundo escuro */
body.tema-leite {
    background: #0F0C0A;
    color: #F1E5D7;
    --accent-color: #C87941;
    --accent-2: #E5A96B;
}

body.tema-leite .page-hero {
    background: linear-gradient(180deg, #1A1310 0%, #0F0C0A 100%);
    border-bottom: 1px solid #251B15;
}

body.tema-leite .topic-publication-card {
    background: #EFE3D4;
    color: #2B1B10;
    border: none;
    border-radius: 12px;
    padding: 2.4rem 2.6rem;
}

body.tema-leite .topic-publication-title,
body.tema-leite .topic-published-content,
body.tema-leite .topic-published-content h2,
body.tema-leite .topic-published-content h3,
body.tema-leite .topic-published-content h4,
body.tema-leite .topic-published-content strong {
    color: #2B1B10;
}

body.tema-leite .topic-published-content { color: #4A362A; }
body.tema-leite .topic-published-content a { color: #8A5A32; text-decoration: underline; }

body.tema-leite .topic-publication-author,
body.tema-leite .topic-publication-dates,
body.tema-leite .topic-publication-revision {
    color: #7A5B41;
}

body.tema-leite .topic-published-content pre {
    background: #2B1B10;
    color: #F1E5D7;
    padding: 1.1rem 1.3rem;
    border-radius: 10px;
    overflow-x: auto;
}

body.tema-leite .topic-published-content code {
    background: rgba(43, 27, 16, 0.1);
    color: #2B1B10;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

body.tema-leite .topic-published-content pre code {
    background: none;
    color: inherit;
    padding: 0;
}

/* Folha de Cafe (VBA) — acento verde, blocos arredondados */
body.tema-folha {
    background: #131010;
    color: #F0E7DF;
    --accent-color: #9CB07A;
    --accent-2: #DFA96B;
    --border-warm: #2A2320;
}

body.tema-folha .topic-published-content pre {
    background: #1F1917;
    border: 1px solid #2A2320;
    border-radius: 12px;
    padding: 1.1rem 1.3rem;
    overflow-x: auto;
    color: #F0E7DF;
}

body.tema-folha .topic-published-content code {
    background: #1F1917;
    color: #DFA96B;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

body.tema-folha .topic-published-content pre code {
    background: none;
    color: inherit;
    padding: 0;
}

/* ============================================================
   Moderacao do site (Fase 3): silenciar autores e ocultar
   conteudo. Conteudo oculto so aparece para usuarios logados,
   com marcador visual.
   ============================================================ */
.mod-silence-btn.is-silenced {
    color: #b45309;
    border-color: #f59e0b;
    background: #fffbeb;
}
.mod-silence-note {
    margin: 0.4rem 0 0;
    padding: 0.5rem 0.7rem;
    font-size: 0.82rem;
    line-height: 1.35;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
}
.mod-silence-note i { margin-right: 0.3rem; }

/* Comentario oculto por moderacao (visivel so a logados). */
.comment-hidden {
    opacity: 0.72;
    border-left: 3px solid #f59e0b;
    background: #fffdf5;
}
.comment-text-collapsed { display: none; }
.comment-reveal {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #b45309;
    background: #fef3c7;
    border: 1px dashed #f59e0b;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    cursor: pointer;
    margin: 0.15rem 0 0.35rem;
}
.comment-reveal:hover { background: #fde68a; }
.comment-mod { color: #b45309; }
.comment-helpful-static {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--text-faint);
    cursor: default;
}

/* Editar comunidade (criador/admin). */
.community-edit {
    margin: 0 0 1rem;
    border: 1px solid var(--border-warm);
    border-radius: 10px;
    padding: 0.6rem 0.9rem;
    background: var(--secondary-color);
}
.community-edit > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-color);
}
.community-edit-form {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 0.9rem;
}
.community-edit-form .admin-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.community-edit-form .admin-field > span {
    font-size: 0.72rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
}
.community-edit-form input,
.community-edit-form textarea,
.community-edit-form select {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-warm);
    border-radius: 9px;
    font-family: inherit;
    font-size: 0.95rem;
    background: var(--primary-color);
    color: var(--text-color);
}
.community-edit-form input::placeholder,
.community-edit-form textarea::placeholder { color: var(--text-faint); }
.community-edit-form input:focus,
.community-edit-form textarea:focus,
.community-edit-form select:focus { outline: none; border-color: var(--accent-color); }
.community-edit-form textarea { resize: vertical; min-height: 90px; line-height: 1.55; }
.community-edit-actions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}
.community-edit-msg { font-size: 0.82rem; font-weight: 600; }

/* Publicacao fixada + controles de gestor no card do feed. */
.feed-card.is-pinned {
    border-color: var(--accent-color);
    box-shadow: inset 3px 0 0 var(--accent-color);
}
.feed-pinned {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent-color);
    letter-spacing: 0.02em;
}
.feed-manage {
    display: inline-flex;
    gap: 0.4rem;
    margin-left: auto;
}
.feed-manage-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: transparent;
    border: 1px solid var(--border-warm);
    color: var(--text-muted);
    border-radius: 8px;
    padding: 0.25rem 0.55rem;
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
}
.feed-manage-btn:hover { border-color: var(--accent-color); color: var(--text-color); }
.feed-manage-danger:hover { border-color: #c0392b; color: #e74c3c; }

/* Ferramentas de imagem no modal de publicar (URL, arquivo, colar). */
.cm-image-tools {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.cm-image-tools input[type="url"] { flex: 1 1 200px; }
.cm-file-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    white-space: nowrap;
}
.cm-image-hint {
    margin: 0.35rem 0 0;
    font-size: 0.75rem;
    color: var(--text-faint);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.cm-image-status { margin: 0.35rem 0 0; font-size: 0.8rem; font-weight: 600; }
.cm-image-preview {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}
.cm-image-preview img {
    max-width: 100%;
    max-height: 220px;
    border-radius: 9px;
    border: 1px solid var(--border-warm);
}
.cm-image-remove {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: transparent;
    border: 1px solid var(--border-warm);
    color: var(--text-muted);
    border-radius: 8px;
    padding: 0.25rem 0.6rem;
    font-size: 0.78rem;
    font-family: inherit;
    cursor: pointer;
}
.cm-image-remove:hover { border-color: #c0392b; color: #e74c3c; }

/* Botao de editar no topo direito do card do post. */
.post-edit-top { margin-left: auto; align-self: flex-start; flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 520px) {
    .post-edit-top .post-edit-top-label { display: none; }
}

/* Formulario de editar a propria publicacao. */
.post-edit-form {
    margin-top: 1rem;
    border: 1px solid var(--border-warm);
    border-radius: 12px;
    background: var(--secondary-color);
}
.post-edit-form h2 { margin: 0 0 0.4rem; font-size: 1.1rem; }

/* Atalho "Editar" no card do feed (autor). */
.feed-edit {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.8rem;
    border: 1px solid var(--border-warm);
    border-radius: 8px;
    padding: 0.25rem 0.55rem;
}
.feed-edit:hover { border-color: var(--accent-color); color: var(--text-color); }

/* Estatisticas do perfil clicaveis (seguidores/amigos/seguindo). */
.social-stat-btn {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: center;
}
.social-stats-clickable .social-stat-btn:hover strong { color: var(--accent-color); }
.social-stats-clickable .social-stat-btn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Lista de seguidores/amigos/seguindo (modal). */
.social-rel-list { padding: 0.6rem 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.15rem; max-height: 60vh; overflow-y: auto; }
.social-rel-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.5rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-color);
}
.social-rel-item:hover { background: var(--primary-color); }
.social-rel-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.social-rel-avatar-ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    border: 1px solid var(--border-warm);
    color: var(--text-faint);
}
.social-rel-name { font-weight: 600; }
.social-rel-empty { padding: 1rem; color: var(--text-faint); text-align: center; }

/* ==========================================================================
   Arena (hub de jogos) + Cafezinho
   ========================================================================== */
/* Botão Arena: mesma formatação do "Nova Comunidade" (contorno), com ícone de joystick. */
.app-newpost-arena {
    background: transparent;
    color: var(--accent-2);
    border: 1px solid var(--border-warm);
    margin-top: 0.45rem;
}
.app-newpost-arena:hover { filter: none; border-color: var(--accent-color); color: var(--text-color); }
.app-newpost-arena i { color: var(--accent-color); }
.app-newpost-arena.is-active { border-color: var(--accent-color); color: var(--text-color); }

.arena-header h1 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.2rem; }
.arena-sub { color: var(--text-faint); margin: 0 0 1.2rem; }

.arena-grid { display: grid; grid-template-columns: 1fr; gap: 0.8rem; }
@media (min-width: 620px) { .arena-grid { grid-template-columns: 1fr 1fr; } }
.arena-card {
    display: flex; align-items: center; gap: 0.9rem;
    background: var(--secondary-color); border: 1px solid var(--border-warm);
    border-radius: 14px; padding: 1rem 1.1rem; text-decoration: none; color: var(--text-color);
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.arena-card:hover { border-color: var(--accent-color); transform: translateY(-2px); }
.arena-card-icon {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary-color); color: var(--accent-color); font-size: 1.3rem;
}
.arena-card-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.arena-card-title { font-size: 1.02rem; }
.arena-card-desc { font-size: 0.84rem; color: var(--text-faint); }
.arena-card-go { margin-left: auto; color: var(--text-faint); }
.arena-card-soon { opacity: 0.6; cursor: default; }
.arena-card-soon:hover { transform: none; border-color: var(--border-warm); }
.arena-soon-tag {
    font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em;
    background: var(--primary-color); border: 1px solid var(--border-warm);
    padding: 0.05rem 0.4rem; border-radius: 999px; color: var(--text-faint); margin-left: 0.3rem;
}

/* Cafezinho */
.cafe-header h1 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.2rem; font-size: 1.5rem; }
/* Cabeçalho estilo "Sala de Jogos" (Cafezinho / Memória) */
.cafe-head2, .mem-head2 { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.2rem; border-bottom: 1px solid var(--border-warm); padding-bottom: 0.9rem; margin: 0 0 1.2rem; }
.cafe-kicker, .mem-kicker { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); }
.cafe-title, .mem-title { font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-size: 2rem; line-height: 1.05; margin: 0.15rem 0 0; color: var(--text-color); }
.cafe-stats { display: flex; gap: 1.3rem; flex: 0 0 auto; }
.cafe-stat { display: flex; flex-direction: column; align-items: center; }
.cafe-stat .v { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 1.3rem; }
.cafe-stat .l { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
@media (max-width: 480px) { .cafe-title, .mem-title { font-size: 1.6rem; } }
.cafe-game { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.cafe-board { display: flex; flex-direction: column; gap: 0.35rem; width: 100%; max-width: 360px; }
.cafe-row { display: grid; grid-template-columns: repeat(var(--cafe-len, 5), 1fr); gap: 0.35rem; }
.cafe-cell {
    aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
    font-family: 'Heebo', sans-serif; font-weight: 700; font-size: clamp(1rem, 5vw, 1.6rem);
    text-transform: uppercase; color: var(--text-color);
    background: var(--secondary-color); border: 2px solid var(--border-warm); border-radius: 8px;
}
.cafe-cell.is-filled { border-color: var(--accent-color); }
.cafe-cell.is-correct { background: #2e7d5b; border-color: #2e7d5b; color: #fff; }
.cafe-cell.is-present { background: #c99a2e; border-color: #c99a2e; color: #fff; }
.cafe-cell.is-absent { background: #3a352f; border-color: #3a352f; color: #cfc8bd; }
.cafe-msg { min-height: 1.1rem; color: #e0a13a; font-size: 0.86rem; font-weight: 600; }

.cafe-result { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.cafe-result-win { font-size: 1.05rem; font-weight: 700; margin: 0; }
.cafe-result-lose { margin: 0; }
.cafe-streak { color: #e0632a; font-weight: 700; margin-left: 0.3rem; }
.cafe-share-hint { color: var(--accent-2); font-size: 0.85rem; margin: 0.2rem 0 0; }

.cafe-keyboard { display: flex; flex-direction: column; gap: 0.35rem; width: 100%; max-width: 480px; margin-top: 0.4rem; }
.cafe-kb-row { display: flex; gap: 0.3rem; justify-content: center; }
.cafe-key {
    flex: 1 1 auto; min-width: 0; padding: 0.75rem 0; border-radius: 7px;
    background: var(--secondary-color); border: 1px solid var(--border-warm); color: var(--text-color);
    font-family: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer;
}
.cafe-key:hover { border-color: var(--accent-color); }
.cafe-key-wide { flex: 1.6 1 auto; }
.cafe-key.is-correct { background: #2e7d5b; border-color: #2e7d5b; color: #fff; }
.cafe-key.is-present { background: #c99a2e; border-color: #c99a2e; color: #fff; }
.cafe-key.is-absent { background: #2a2620; border-color: #2a2620; color: #6f685d; }

.cafe-rank { margin-top: 1.6rem; }
.cafe-rank h2 { font-size: 1.1rem; margin: 0 0 0.6rem; }
.cafe-rank-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.cafe-rank-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.5rem; border-radius: 10px; }
.cafe-rank-item:nth-child(odd) { background: var(--secondary-color); }
.cafe-rank-pos { width: 1.4rem; text-align: center; font-weight: 700; color: var(--text-faint); }
.cafe-rank-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.cafe-rank-avatar-ph { display: inline-flex; align-items: center; justify-content: center; background: var(--primary-color); border: 1px solid var(--border-warm); color: var(--text-faint); font-size: 0.75rem; }
.cafe-rank-name { font-weight: 600; }
.cafe-rank-score { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--accent-color); }
.cafe-rank-empty { color: var(--text-faint); padding: 0.5rem; }

/* Jogo da Memória */
.mem-create { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 1.2rem; }
.mem-create-label { color: var(--text-faint); font-weight: 600; }
.mem-rooms h2 { font-size: 1.1rem; margin: 0 0 0.6rem; }
.mem-room-item {
    display: flex; align-items: center; gap: 0.7rem; width: 100%;
    background: #2a2118; border: 1px solid #4a3c2d; border-radius: 10px;
    padding: 0.6rem 0.8rem; margin-bottom: 0.35rem; cursor: pointer; color: var(--text-color); font: inherit;
}
.mem-room-item:hover { border-color: var(--accent-color); background: #322718; }
.mem-room-code { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--accent-color); }
.mem-room-host { font-weight: 600; }
.mem-room-count { margin-left: auto; color: var(--text-faint); }
.mem-hist-item { cursor: pointer; }
.mem-hist-podium { font-weight: 600; }
.mem-hist-podium small { color: var(--text-faint); font-weight: 400; }

.mem-players { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 0.6rem 0 0.4rem; }
.mem-player {
    display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem;
    background: #2a2118; border: 1px solid #4a3c2d; border-radius: 999px;
}
.mem-player.is-turn { border-color: var(--accent-color); box-shadow: 0 0 0 2px rgba(224,161,58,0.25); }
.mem-player-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.mem-player-avatar-ph { display: inline-flex; align-items: center; justify-content: center; background: var(--primary-color); border: 1px solid var(--border-warm); color: var(--text-faint); font-weight: 700; font-size: 0.8rem; }
.mem-player-name { font-weight: 600; font-size: 0.88rem; }
.mem-player-score { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--accent-color); }

.mem-rooms-hint { color: var(--text-faint); font-size: 0.84rem; margin: -0.3rem 0 0.6rem; }
/* Salas ao vivo (partidas em andamento) */
.mem-live-item { border-color: #5a4a2f; }
.mem-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 0 rgba(229,72,77,0.6); animation: memLivePulse 1.6s infinite; flex: 0 0 auto; }
@keyframes memLivePulse { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,0.55); } 70% { box-shadow: 0 0 0 7px rgba(229,72,77,0); } 100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); } }
.mem-live-item .mem-room-count { color: var(--accent-2); }

/* Controles do anfitrião no lobby: remover jogador + adicionar amigo */
.mem-players-lobby .mem-player { padding-right: 0.35rem; }
.mem-kick { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 0.85rem; padding: 0.1rem 0.25rem; border-radius: 50%; line-height: 1; }
.mem-kick:hover { color: #fff; background: #a8443b; }
.mem-add-slot {
    display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem;
    background: transparent; border: 1px dashed var(--border-warm); border-radius: 999px;
    color: var(--accent-2); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.mem-add-slot:hover { border-color: var(--accent-color); color: var(--text-color); }
.mem-friend-picker { max-width: 320px; margin: 0.2rem auto 0.4rem; background: var(--secondary-color); border: 1px solid var(--border-warm); border-radius: 12px; padding: 0.4rem; }
.mem-friend-head { font-size: 0.72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; padding: 0.15rem 0.4rem 0.3rem; }
.mem-friend-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; background: none; border: none; color: var(--text-color); font: inherit; padding: 0.35rem 0.4rem; border-radius: 8px; cursor: pointer; text-align: left; }
.mem-friend-item:hover { background: var(--primary-color); }
.mem-friend-av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.mem-friend-av-ph { display: inline-flex; align-items: center; justify-content: center; background: var(--primary-color); border: 1px solid var(--border-warm); color: var(--text-faint); font-weight: 700; font-size: 0.75rem; }

/* Acordo de abandono de partida */
.mem-abandon { margin: 1rem auto 0; max-width: 460px; text-align: center; }
.mem-abandon-propose { opacity: 0.85; }
.mem-abandon-pending, .mem-abandon-ask { background: var(--secondary-color); border: 1px solid var(--border-warm); border-radius: 12px; padding: 0.7rem 0.9rem; }
.mem-abandon-ask { border-color: #6b4a28; }
.mem-abandon p { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--text-color); }
.mem-abandon-actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }

/* Revanche na mesma mesa (fim de jogo) */
.mem-rematch { margin: 1.2rem auto 0; max-width: 460px; text-align: center; display: flex; flex-direction: column; gap: 0.6rem;
    background: linear-gradient(170deg, #2a2118, var(--secondary-color)); border: 1px solid var(--accent-color);
    border-radius: 16px; padding: 1.1rem 1.2rem; box-shadow: 0 0 0 3px rgba(224,161,58,0.12); }
.mem-rematch-title { font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-2); }
.mem-rematch-sub { margin: 0; font-size: 0.9rem; color: var(--text-faint); }
.mem-rematch-people { display: flex; align-items: center; justify-content: center; gap: 0.2rem; }
.mem-rematch-chip { display: inline-flex; }
.mem-rematch-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-warm); opacity: 0.45; filter: grayscale(0.6); }
.mem-rematch-av-ph { display: inline-flex; align-items: center; justify-content: center; background: var(--primary-color); color: var(--text-faint); font-weight: 700; font-size: 0.75rem; }
.mem-rematch-chip.is-on .mem-rematch-av { opacity: 1; filter: none; border-color: #2e7d5b; box-shadow: 0 0 0 2px rgba(46,125,91,0.35); }
.mem-rematch-count { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--text-faint); margin-left: 0.4rem; }
.mem-rematch-hint { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--text-faint); }

/* Layout 1f: tabuleiro à esquerda, painel "Na mesa"/Torcida à direita */
.mem-layout { display: flex; gap: 1.4rem; align-items: flex-start; }
.mem-board-col { flex: 1 1 auto; min-width: 0; }
.mem-side { flex: 0 0 288px; width: 288px; display: flex; flex-direction: column; gap: 0.7rem; }
.mem-side-label { font-family: 'JetBrains Mono', monospace; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.mem-side-p { display: flex; align-items: center; gap: 0.7rem; background: var(--secondary-color); border: 1px solid var(--border-warm); border-radius: 14px; padding: 0.7rem 0.85rem; }
.mem-side-p.is-turn { border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(208,140,75,0.14); }
.mem-side-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--border-warm); }
.mem-side-av-ph { display: inline-flex; align-items: center; justify-content: center; background: var(--primary-color); color: var(--text-faint); font-weight: 700; }
.mem-side-info { min-width: 0; display: flex; flex-direction: column; }
.mem-side-info strong { color: var(--text-color); font-size: 0.92rem; }
.mem-side-status { font-family: 'JetBrains Mono', monospace; font-size: 0.64rem; }
.mem-side-p.is-turn .mem-side-status { color: var(--accent-2); }
.mem-side-p:not(.is-turn) .mem-side-status { color: var(--text-faint); }
.mem-side-score { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 1.15rem; color: var(--accent-color); }
.mem-side-p:not(.is-turn) .mem-side-score { color: #B4A08C; }

/* Torcida (chat no painel direito) */
.live-torcida { background: var(--secondary-color); border: 1px solid var(--border-warm); border-radius: 14px; padding: 0.8rem 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; }
.live-torcida-label { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.live-torcida-label i { margin-right: 0.25rem; }
.live-torcida-list { display: flex; flex-direction: column; gap: 0.45rem; max-height: 240px; overflow-y: auto; }
.live-torcida-msg { display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.85rem; color: #B4A08C; line-height: 1.35; }
.live-torcida-msg b { color: var(--text-color); }
.live-torcida-av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; margin-top: 0.1rem; }
.live-torcida-av-ph { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primary-color); color: var(--text-faint); font-size: 0.66rem; font-weight: 700; flex: 0 0 auto; }
.live-torcida-input { display: flex; gap: 0.35rem; }
.live-torcida-input input { flex: 1 1 auto; min-width: 0; background: var(--primary-color); border: 1px solid var(--border-warm); color: var(--text-color); border-radius: 999px; padding: 0.4rem 0.75rem; font: inherit; font-size: 0.85rem; }
.live-torcida-input button { background: var(--accent-color); border: none; color: #1a1206; border-radius: 999px; padding: 0 0.8rem; cursor: pointer; }

@media (max-width: 760px) {
    .mem-layout { flex-direction: column; }
    .mem-side { flex: 1 1 auto; width: 100%; }
}

.mem-turn { text-align: center; margin: 0.3rem 0 0.6rem; color: var(--text-color); }
.mem-lobby-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 0.6rem; }
.mem-wait { color: var(--text-faint); }

.mem-board { display: grid; gap: 0.5rem; max-width: 480px; margin: 0 auto; }
.mem-card {
    aspect-ratio: 1 / 1; border: none; padding: 0; background: none; cursor: default;
    perspective: 500px;
}
.mem-board.is-mine .mem-card:not(.is-up) { cursor: pointer; }
.mem-card-back, .mem-card-front {
    width: 100%; height: 100%; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.mem-card-back {
    background: linear-gradient(150deg, #3a2c1e, #241d16);
    border: none; box-shadow: inset 0 0 0 2px #4a3c2d, 0 4px 10px rgba(0,0,0,0.5);
}
.mem-dot { width: 26%; height: 26%; border-radius: 50%; background: #33281F; box-shadow: inset 0 0 0 1px #4a3c2d; }
.mem-board.is-mine .mem-card:not(.is-up):hover .mem-card-back { box-shadow: inset 0 0 0 2px var(--accent-2), 0 4px 12px rgba(0,0,0,0.55); }
.mem-board.is-mine .mem-card:not(.is-up):hover .mem-dot { background: #4a3c2d; }
.mem-card-front { box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
/* Carta de ícone: azulejo de cor sólida + ícone vetorial escuro (nítido). */
.mem-front-icon { box-shadow: 0 0 0 2px #2e7d5b, inset 0 2px 6px rgba(255,255,255,0.18), 0 4px 10px rgba(0,0,0,0.5); }
.mem-card-icon { font-size: clamp(1.9rem, 9.5vw, 3.1rem); line-height: 1; color: #1b1409; }
/* Carta de foto: fundo claro + anel âmbar. */
.mem-front-photo { background: #F4EDE1; box-shadow: 0 0 0 3px var(--accent-color), 0 4px 12px rgba(0,0,0,0.55); }
.mem-card.is-matched .mem-card-front { opacity: 0.82; }
.mem-card-img { width: 100%; height: 100%; object-fit: cover; }
.mem-card-emoji { font-size: clamp(2.2rem, 12vw, 3.6rem); line-height: 1; }
.mem-card-ini { font-weight: 700; font-size: clamp(1.4rem, 7vw, 2rem); color: var(--accent-color); }

/* Azulejo de Café */
.azu-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; }
.azu-moves { color: var(--text-faint); }
.azu-moves strong { color: var(--text-color); }
.azu-board {
    display: grid; grid-template-columns: repeat(var(--azu-size, 5), 1fr);
    gap: 0.4rem; max-width: 380px; margin: 0 auto;
}
.azu-cell { aspect-ratio: 1/1; border: none; padding: 0; background: none; cursor: pointer; }
.azu-tile {
    display: block; width: 100%; height: 100%; border-radius: 8px;
    background: #ece7dd; border: 1px solid var(--border-warm);
    transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
}
.azu-cell:hover .azu-tile { transform: scale(0.97); }
.azu-cell.is-on .azu-tile {
    /* Azul tradicional de azulejo portugues */
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), transparent 45%),
        linear-gradient(135deg, #2a6fb0, #1c4f86);
    border-color: #17406b;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12);
}
.azu-result { text-align: center; margin-top: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.azu-best, .azu-already { color: var(--text-faint); font-size: 0.9rem; }
.azu-rank-hint { font-size: 0.75rem; font-weight: 400; color: var(--text-faint); }
@media (prefers-color-scheme: dark) {
    body.tema-folha .azu-tile { background: #2a2620; }
}

/* Azulejo de Café (estilo Azul, multiplayer) — 5 cores: marrom, bege, vermelho, verde, preto */
/* Bissel de azulejo (relevo) forte em TODAS as peças. */
.azl-tile {
    display: block; width: 100%; height: 100%; border-radius: 7px;
    box-shadow: inset 3px 3px 4px rgba(255,255,255,0.42), inset -3px -3px 5px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.45);
}
.azl-tile.t0 { background: #1b1815; box-shadow: inset 0 0 0 1px #52483d, inset 3px 3px 4px rgba(255,255,255,0.14), inset -3px -3px 5px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.45); } /* preto */
.azl-tile.t1 { background: #7a4a2b; }                                   /* marrom */
.azl-tile.t2 { background: #3f7d54; }                                   /* verde */
.azl-tile.t3 { background: #b3352e; }                                   /* vermelho */
.azl-tile.t4 { background: #d8c19a; box-shadow: inset 0 0 0 1px #b49b73, inset 3px 3px 4px rgba(255,255,255,0.6), inset -3px -3px 5px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.45); } /* bege */
.azl-tile.azl-ghost { opacity: 0.28; box-shadow: none; }

/* Pílula "de quem é a vez" no cabeçalho do Azulejo */
.azl-turn-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.88rem; font-weight: 600; color: var(--text-faint); box-shadow: inset 0 0 0 1px var(--border-warm); }
.azl-turn-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.azl-turn-pill.is-mine { color: var(--text-color); background: rgba(208,140,75,0.14); box-shadow: inset 0 0 0 1px var(--accent-color); }
.azl-turn-pill.is-mine .dot { background: var(--accent-color); box-shadow: 0 0 8px 1px rgba(208,140,75,0.7); }

/* Barra de dica de seleção (cor escolhida → escolha a linha) */
.azl-hint { max-width: 460px; margin: 0.1rem auto 1rem; background: var(--secondary-color); border: 1px solid #6b4a28; border-radius: 14px; padding: 0.7rem 0.95rem; display: flex; align-items: center; gap: 0.7rem; font-size: 0.9rem; color: var(--text-color); }
.azl-hint-swatch { width: 24px; height: 24px; border-radius: 6px; flex: 0 0 auto; box-shadow: 0 0 0 2px var(--accent-color); }

/* Mesa central: círculo que recebe as peças + pires (fábricas) ao redor */
.azl-table {
    display: flex; justify-content: center; align-items: center;
    background: radial-gradient(circle at 50% 45%, #24323d, #16222b 70%);
    border: 1px solid #35495a; border-radius: 22px; padding: 0.6rem;
    margin: 0.2rem auto 1.2rem; width: fit-content; max-width: 100%;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.4);
}
.azl-ring { position: relative; margin: 0 auto; }
/* Pires (fábricas): pequenos pratos redondos posicionados em círculo (via JS) */
.azl-factory {
    position: absolute; transform: translate(-50%, -50%);
    display: grid; grid-template-columns: repeat(2, 28px); grid-auto-rows: 28px; gap: 3px;
    padding: 7px; background: #eae4d6; border: 2px solid #b9ad95; border-radius: 50%;
    box-shadow: 0 3px 8px rgba(0,0,0,0.5);
}
/* Círculo central onde as peças que sobram se acumulam (agrupadas por cor) */
.azl-center-circle {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 190px; height: 190px; border-radius: 50%;
    display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 4px;
    padding: 14px; background: radial-gradient(circle at 42% 38%, #f4efe4, #dcd3c1);
    border: 3px solid #b9ad95; box-shadow: inset 0 2px 10px rgba(0,0,0,0.25), 0 4px 14px rgba(0,0,0,0.45);
}
.azl-factory-empty { width: 28px; height: 28px; }
.azl-src { width: 28px; height: 28px; padding: 0; border: none; background: none; cursor: pointer; border-radius: 6px; }
.azl-src:disabled { cursor: default; }
.azl-src.is-sel { outline: 3px solid var(--accent-color); outline-offset: 1px; }
.azl-first { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #2a6fb0; color: #fff; font-weight: 800; }
/* Marcador de 1º jogador: dourado e brilhando enquanto está no círculo central */
.azl-first-glow {
    background: linear-gradient(140deg, #ffe08a, #d4a11e); color: #4a3600;
    box-shadow: 0 0 8px 2px rgba(255,196,60,0.75), inset 0 1px 0 rgba(255,255,255,0.6);
    animation: azlGoldGlow 1.3s ease-in-out infinite;
}
@keyframes azlGoldGlow {
    0%, 100% { box-shadow: 0 0 6px 1px rgba(255,196,60,0.55), inset 0 1px 0 rgba(255,255,255,0.6); }
    50% { box-shadow: 0 0 16px 5px rgba(255,210,80,0.95), inset 0 1px 0 rgba(255,255,255,0.7); }
}
@media (max-width: 560px) { .azl-ring { transform: scale(0.68); transform-origin: top center; margin-bottom: -147px; } }

/* Layout: mesa (pires + centro) ao centro/esquerda, cards dos jogadores à direita. */
.azl-layout { display: flex; gap: 1rem; align-items: flex-start; }
.azl-table-col { flex: 1 1 auto; min-width: 0; }
.azl-table-col .azl-table { margin-top: 0; }
.azl-layout .azl-boards { flex: 0 0 352px; width: 352px; }
@media (max-width: 860px) {
    .azl-layout { flex-direction: column; }
    .azl-layout .azl-boards { flex: 1 1 auto; width: 100%; }
}

/* Tabuleiros dos jogadores: cards empilhados na vertical, um sobre o outro. */
.azl-boards { display: flex; flex-direction: column; gap: 0.9rem; }
.azl-board { background: #241d16; border: 1px solid #4a3c2d; border-radius: 12px; padding: 0.8rem; }
.azl-board-mine { border-color: var(--accent-color); }
.azl-board-head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; font-size: 0.9rem; }
.azl-score { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--accent-color); }
.azl-mini-av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.azl-mini-av-ph { display: inline-flex; align-items: center; justify-content: center; background: var(--primary-color); border: 1px solid var(--border-warm); font-size: 0.7rem; font-weight: 700; }

.azl-board-main { display: flex; gap: 0.7rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.azl-lines { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.azl-line { display: flex; gap: 4px; padding: 2px; border: 1px dashed transparent; background: none; border-radius: 6px; cursor: default; }
.azl-line.is-valid { border-color: var(--accent-color); cursor: pointer; }
.azl-line.is-valid:hover { background: rgba(224,161,58,0.12); }
.azl-slot { width: 24px; height: 24px; border-radius: 6px; background: #17120d; box-shadow: inset 0 0 0 1px #4a3c2d; }

.azl-wall { display: grid; grid-template-columns: repeat(5, 26px); grid-auto-rows: 26px; gap: 4px; }
/* Linhas de padrão dos oponentes (somente leitura, mesmo tamanho do anfitrião) */
.azl-line-ro { cursor: default; }
.azl-line-ro:hover { background: none; }
.azl-wc { width: 100%; height: 100%; border-radius: 6px; background: #17120d; box-shadow: inset 0 0 0 1px #4a3c2d; display: flex; }
/* Bisel/relevo nos azulejos que o jogador colocou na parede. */
.azl-wc.is-on .azl-tile {
    box-shadow: inset 2px 2px 3px rgba(255,255,255,0.4), inset -2px -2px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.45);
}

.azl-floor { display: flex; gap: 4px; margin-top: 0.6rem; flex-wrap: wrap; }
.azl-fslot { position: relative; width: 26px; height: 26px; border-radius: 6px; background: #17120d; box-shadow: inset 0 0 0 1px #4a3c2d; display: flex; align-items: center; justify-content: center; }
.azl-fslot small { position: absolute; top: -0.9rem; left: 0; right: 0; text-align: center; font-size: 0.6rem; color: var(--text-faint); }
.azl-tofloor { margin-top: 0.9rem; }
.azl-board-mini.is-turn, .azl-board-opp.is-turn { border-color: var(--accent-color); box-shadow: 0 0 0 2px rgba(224,161,58,0.2); }
.azl-msg { color: #e0a13a; font-size: 0.85rem; font-weight: 600; margin-right: auto; }

/* Milhão do Café (quiz) */
.milhao-start, .milhao-end { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; padding: 1rem 0; }
.milhao-end h2 { margin: 0; }
.milhao-lost, .milhao-correct { margin: 0; }
.milhao-correct { color: var(--accent-2); }

.milhao-game { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .milhao-game { grid-template-columns: 1fr 190px; align-items: start; } }
.milhao-qhead { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; color: var(--text-faint); margin-bottom: 0.4rem; }
.milhao-qprize { color: var(--accent-color); font-weight: 700; }
.milhao-q { font-size: 1.12rem; font-weight: 600; margin: 0 0 0.9rem; line-height: 1.4; }
.milhao-opts { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
@media (min-width: 480px) { .milhao-opts { grid-template-columns: 1fr 1fr; } }
.milhao-opt {
    display: flex; align-items: center; gap: 0.5rem; text-align: left;
    background: var(--secondary-color); border: 1px solid var(--border-warm); border-radius: 10px;
    padding: 0.7rem 0.8rem; font: inherit; color: var(--text-color); cursor: pointer;
}
.milhao-opt b { color: var(--accent-color); flex: 0 0 auto; }
.milhao-opt:hover:not(:disabled) { border-color: var(--accent-color); }
.milhao-opt.is-picked { border-color: var(--accent-color); background: rgba(224,161,58,0.14); }
.milhao-opt.is-out { opacity: 0.35; }
.milhao-opt:disabled { cursor: default; }

.milhao-tools { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.9rem; }
.milhao-side { }
.milhao-ladder, .milhao-endgrid .milhao-ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.milhao-step { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.6rem; border-radius: 8px; background: var(--secondary-color); border: 1px solid transparent; font-size: 0.82rem; }
.milhao-step-n { width: 1.3rem; text-align: center; color: var(--text-faint); font-family: 'JetBrains Mono', monospace; }
.milhao-step-v { font-weight: 600; }
.milhao-step.is-safe { box-shadow: inset 3px 0 0 var(--accent-2, #7bb0a0); }
.milhao-step.is-done { color: var(--text-faint); }
.milhao-step.is-current { background: var(--accent-color); color: #1a1206; border-color: var(--accent-color); }
.milhao-step.is-current .milhao-step-n, .milhao-step.is-current .milhao-step-v { color: #1a1206; }
.milhao-endgrid { width: 100%; max-width: 260px; }

.milhao-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; width: 100%; max-width: 440px; }
.milhao-theme {
    display: flex; flex-direction: column; align-items: center; gap: 0.15rem; text-align: center;
    background: var(--secondary-color); border: 1px solid var(--border-warm); border-radius: 12px;
    padding: 0.9rem 0.6rem; color: var(--text-color); font: inherit; cursor: pointer;
    transition: border-color 0.15s ease, transform 0.12s ease;
}
.milhao-theme:hover { border-color: var(--accent-color); transform: translateY(-2px); }
.milhao-theme i { font-size: 1.5rem; color: var(--accent-color); margin-bottom: 0.15rem; }
.milhao-theme strong { font-size: 1rem; }
.milhao-theme span { font-size: 0.72rem; color: var(--text-faint); }
.milhao-qtheme { color: var(--accent-color); font-weight: 700; }

/* Cidade Dorme */
.cid-phase { text-align: center; font-weight: 700; padding: 0.6rem; border-radius: 12px; margin: 0 0 0.8rem; }
.cid-phase.cid-night { background: linear-gradient(135deg, #1c2740, #101726); color: #cdd6ea; }
.cid-phase.cid-day { background: linear-gradient(135deg, #e0a13a, #c07a1e); color: #1a1206; }
.cid-phase.cid-done { background: var(--secondary-color); border: 1px solid var(--accent-color); color: var(--text-color); font-size: 1.1rem; }

.cid-rolecard { display: flex; gap: 0.7rem; align-items: center; padding: 0.7rem 0.9rem; border-radius: 12px; margin-bottom: 0.7rem; background: var(--secondary-color); border: 1px solid var(--border-warm); }
.cid-rolecard i { font-size: 1.6rem; }
.cid-rolecard strong { display: block; }
.cid-rolecard span { font-size: 0.82rem; color: var(--text-faint); }
.cid-rolecard.r-ass { border-color: #a8443b; } .cid-rolecard.r-ass i { color: #d9564a; }
.cid-rolecard.r-anjo { border-color: #3f8f7a; } .cid-rolecard.r-anjo i { color: #4fb39a; }
.cid-rolecard.r-det { border-color: #3f6f9f; } .cid-rolecard.r-det i { color: #5a92c6; }
.cid-rolecard.r-cid i { color: var(--text-muted); }
.cid-dead-note { text-align: center; color: var(--text-faint); margin-bottom: 0.5rem; }
.cid-det { margin: 0.2rem 0 0.7rem; font-size: 0.86rem; }
.cid-det ul { margin: 0.2rem 0 0; padding-left: 1.1rem; }
.cid-guilty { color: #d9564a; font-weight: 700; }
.cid-clean { color: #4fb39a; font-weight: 600; }
.cid-hint { text-align: center; color: var(--text-color); background: var(--secondary-color); border: 1px dashed var(--border-warm); border-radius: 10px; padding: 0.5rem; margin: 0 0 0.8rem; }

.cid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.5rem; }
.cid-player { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.6rem 0.4rem; background: var(--secondary-color); border: 1px solid var(--border-warm); border-radius: 12px; color: var(--text-color); font: inherit; cursor: default; }
.cid-player.is-click { cursor: pointer; }
.cid-player.is-click:hover { border-color: var(--accent-color); }
.cid-player.is-me { box-shadow: inset 0 0 0 2px rgba(224,161,58,0.4); }
.cid-player.is-voted { border-color: var(--accent-color); }
.cid-player.is-dead { opacity: 0.5; }
.cid-pavatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.cid-pavatar-ph { display: inline-flex; align-items: center; justify-content: center; background: var(--primary-color); border: 1px solid var(--border-warm); font-weight: 700; }
.cid-pname { font-size: 0.82rem; font-weight: 600; text-align: center; }
.cid-pdead { font-size: 0.72rem; color: var(--text-faint); }
.cid-ptag { font-size: 0.66rem; padding: 0.05rem 0.35rem; border-radius: 999px; background: var(--primary-color); border: 1px solid var(--border-warm); }
.cid-ptag.r-ass { color: #d9564a; } .cid-ptag.r-anjo { color: #4fb39a; } .cid-ptag.r-det { color: #5a92c6; }
.cid-votes { font-size: 0.7rem; color: var(--accent-color); font-weight: 700; }

.cid-log, .cid-chat { margin-top: 1.2rem; }
.cid-log h3, .cid-chat h3 { font-size: 1rem; margin: 0 0 0.4rem; display: flex; align-items: center; gap: 0.4rem; }
.cid-log-list { max-height: 200px; overflow-y: auto; background: var(--secondary-color); border: 1px solid var(--border-warm); border-radius: 10px; padding: 0.6rem 0.8rem; }
.cid-log-list p { margin: 0 0 0.35rem; font-size: 0.9rem; }
.cid-chat-list { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.5rem; }
.cid-chat-msg { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.88rem; }
.cid-chat-av { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.cid-chat-av-ph { display: inline-flex; align-items: center; justify-content: center; background: var(--primary-color); border: 1px solid var(--border-warm); font-size: 0.7rem; font-weight: 700; }
.cid-chat-form { display: flex; gap: 0.4rem; }
.cid-chat-form input { flex: 1 1 auto; min-width: 0; background: var(--primary-color); border: 1px solid var(--border-warm); color: var(--text-color); border-radius: 8px; padding: 0.5rem 0.6rem; font: inherit; }

.cid-timer { text-align: center; font-size: 0.82rem; color: var(--text-faint); margin: 0 0 0.7rem; }
.cid-reaper { text-align: center; background: #2a1c1c; border: 1px solid #7a3b34; border-radius: 12px; padding: 0.7rem; margin: 0 0 0.8rem; }
.cid-reaper p { margin: 0 0 0.5rem; font-size: 0.88rem; color: #e7c9c4; }
.cid-reap-list { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.cid-reap-btn { background: #7a3b34; border: 1px solid #a8443b; color: #fff; border-radius: 999px; padding: 0.35rem 0.7rem; font: inherit; font-size: 0.82rem; cursor: pointer; }
.cid-reap-btn:hover:not(:disabled) { background: #93463c; }
.cid-reap-btn.is-done { opacity: 0.55; cursor: default; }

/* ==========================================================================
   Arena ao vivo: arquibancada (espectadores) + reações + tomate
   ========================================================================== */
.live-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
    background: rgba(20,16,13,0.97); border-top: 1px solid var(--border-warm);
    padding: 0.45rem 0.8rem;
}
@media (min-width: 861px) {
    .live-bar { left: 244px; }
    .app-shell.is-collapsed ~ .live-bar { left: 68px; }
}
body.has-live-bar .app-main { padding-bottom: 96px; }

.live-spec-wrap { display: flex; align-items: center; gap: 0.4rem; }
.live-spec-label { font-size: 0.72rem; color: var(--text-faint); white-space: nowrap; }
.live-spec { display: flex; gap: 0.2rem; flex-wrap: wrap; }
.live-spec-av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-warm); }
.live-spec-av-ph { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background: var(--secondary-color); border:1px solid var(--border-warm); font-size: 0.72rem; font-weight:700; }
.live-spec-empty { font-size: 0.72rem; color: var(--text-faint); }

.live-mid { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 200px; min-width: 160px; }
.live-quick { display: flex; gap: 0.1rem; flex-wrap: wrap; }
.live-q { background: none; border: none; font-size: 1.05rem; cursor: pointer; padding: 0 0.1rem; line-height: 1; }
.live-input { display: flex; gap: 0.35rem; }
.live-text { flex: 1 1 auto; min-width: 0; background: #2a2118; border: 1px solid #4a3c2d; color: var(--text-color); border-radius: 999px; padding: 0.4rem 0.8rem; font: inherit; }
.live-send { background: var(--accent-color); border: none; color: #1a1206; border-radius: 999px; padding: 0 0.85rem; cursor: pointer; }

.live-react { display: flex; align-items: center; gap: 0.25rem; }
.live-rbtn { background: #2a2118; border: 1px solid #4a3c2d; border-radius: 10px; font-size: 1.15rem; padding: 0.12rem 0.4rem; cursor: pointer; line-height: 1; }
.live-rbtn:hover { border-color: var(--accent-color); transform: scale(1.1); }
.live-rsep { width: 1px; height: 22px; background: var(--border-warm); margin: 0 0.15rem; }
.live-target-wrap, .live-tomato-wrap { position: relative; }
.live-tmenu { position: absolute; bottom: calc(100% + 6px); right: 0; background: var(--secondary-color); border: 1px solid var(--border-warm); border-radius: 10px; padding: 0.3rem; display: flex; flex-direction: column; gap: 0.15rem; z-index: 46; min-width: 180px; max-height: 260px; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.live-tmenu[hidden] { display: none; }
.live-tmenu-head { font-size: 0.7rem; color: var(--text-faint); padding: 0.15rem 0.4rem 0.25rem; text-transform: uppercase; letter-spacing: 0.03em; }
.live-tmenu-item { display: flex; align-items: center; gap: 0.4rem; background: none; border: none; color: var(--text-color); font: inherit; padding: 0.35rem 0.4rem; border-radius: 8px; cursor: pointer; text-align: left; }
.live-tmenu-item:hover { background: var(--primary-color); }
.live-tmenu-av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.live-tmenu-av-ph { display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--primary-color);font-size:0.7rem;font-weight:700; }

.live-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.live-bubble { position: absolute; bottom: 100px; display: flex; align-items: flex-start; gap: 0.4rem; background: #fff; color: #222; border-radius: 14px; padding: 0.5rem 0.7rem; max-width: 260px; box-shadow: 0 6px 18px rgba(0,0,0,0.45); animation: liveBubble 4s ease-out forwards; }
.live-bubble::after { content:''; position:absolute; bottom:-8px; left:20px; border:8px solid transparent; border-top-color:#fff; border-bottom:0; }
.live-bubble-av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex:0 0 auto; }
.live-bubble-av-ph { display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#eee;color:#555;font-weight:700;font-size:0.7rem;flex:0 0 auto; }
.live-bubble-txt { font-size: 0.85rem; line-height: 1.3; }
@keyframes liveBubble { 0%{ transform: translateY(20px) scale(0.85); opacity:0;} 12%{ transform: translateY(0) scale(1); opacity:1;} 82%{ opacity:1;} 100%{ transform: translateY(-46px); opacity:0;} }
/* Palco central das animações (tomate / café / beijinho / reações) */
.live-stage {
    position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%);
    z-index: 66; pointer-events: none; display: flex; align-items: center; gap: 0.3rem;
    animation: liveStagePop 0.25s ease-out;
}
@keyframes liveStagePop { from { opacity: 0; } to { opacity: 1; } }
.live-stage-solo { flex-direction: column; gap: 0.35rem; }
.ls-actor { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.ls-photo {
    width: 76px; height: 76px; border-radius: 50%; overflow: hidden; position: relative;
    border: 3px solid #fff; box-shadow: 0 10px 26px rgba(0,0,0,0.55); background: var(--secondary-color);
}
.ls-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ls-photo-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 1.7rem; font-weight: 700; color: var(--text-color); }
.ls-photo-lg { width: 96px; height: 96px; }
.live-stage b { font-size: 0.82rem; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.85); background: rgba(0,0,0,0.42); padding: 0.05rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.ls-gap { position: relative; width: 120px; height: 56px; flex: 0 0 auto; }
.ls-proj { position: absolute; top: 50%; left: 0; font-size: 2.3rem; line-height: 1; animation: lsFly 0.72s ease-in forwards; }
.ls-proj-kiss { animation-timing-function: ease-out; }
.ls-cup { font-size: 1.4rem; }
@keyframes lsFly {
    0%   { left: 0;    transform: translate(-50%, -50%) rotate(0)      scale(0.7); }
    100% { left: 100%; transform: translate(-50%, -50%) rotate(360deg) scale(1.05); }
}
/* Mancha de tomate sobre a foto do alvo (some em 3s) */
.ls-stain-b {
    position: absolute; inset: -4px; border-radius: 50%; pointer-events: none; opacity: 0;
    background:
        radial-gradient(circle at 40% 36%, rgba(214,58,42,0.96), rgba(168,32,24,0.86) 44%, rgba(120,18,14,0) 70%),
        radial-gradient(circle at 72% 64%, rgba(190,40,30,0.7), rgba(150,26,20,0) 40%),
        radial-gradient(circle at 26% 72%, rgba(190,40,30,0.62), rgba(150,26,20,0) 38%);
}
.ls-stain-b.is-on { animation: liveStain 3s ease-out forwards; }
@keyframes liveStain {
    0%   { transform: scale(0.2); opacity: 0; }
    12%  { transform: scale(1); opacity: 0.97; }
    72%  { transform: scale(1.02); opacity: 0.92; }
    100% { transform: scale(1.06); opacity: 0; }
}
.ls-photo-target.is-hit { animation: lsHit 0.4s ease-out; }
@keyframes lsHit { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px) rotate(-3deg); } 75% { transform: translateX(4px) rotate(3deg); } }
.ls-photo-target.is-kissed { animation: lsPulse 0.6s ease-out; }
@keyframes lsPulse { 0%,100% { transform: scale(1); } 40% { transform: scale(1.12); } }
/* Reação de si: emoji grande + efeitos */
.ls-emoji { font-size: 3rem; line-height: 1; animation: lsEmoji 2s ease-out forwards; }
@keyframes lsEmoji { 0% { transform: scale(0.3); opacity: 0; } 15% { transform: scale(1.28); opacity: 1; } 70% { transform: scale(1); } 100% { transform: scale(1); opacity: 0; } }
.live-stage-solo.is-love .ls-photo { border-color: #ff8fb0; box-shadow: 0 0 0 4px rgba(255,143,176,0.4), 0 10px 26px rgba(0,0,0,0.5); }
/* Raiva: fundo vermelho claro quase transparente + tremor/piscar */
.live-rage-flash { position: fixed; inset: 0; z-index: 64; pointer-events: none; background: rgba(224,46,36,0.28); animation: liveRage 1.5s ease-out forwards; }
@keyframes liveRage { 0% { opacity: 0; } 10% { opacity: 1; } 26% { opacity: 0.25; } 42% { opacity: 1; } 58% { opacity: 0.3; } 74% { opacity: 0.9; } 100% { opacity: 0; } }
.live-stage-solo.is-rage { animation: liveShake 0.4s ease-in-out 0s 5; }
@keyframes liveShake {
    0%,100% { transform: translate(-50%, -50%) rotate(0); }
    20% { transform: translate(calc(-50% - 7px), -50%) rotate(-3deg); }
    40% { transform: translate(calc(-50% + 7px), -50%) rotate(3deg); }
    60% { transform: translate(calc(-50% - 5px), -50%) rotate(-2deg); }
    80% { transform: translate(calc(-50% + 5px), -50%) rotate(2deg); }
}

/* Xícara de café: oferta (precisa aceitar) + coraçõezinhos flutuando */
.live-coffee-offer {
    position: absolute; left: 50%; top: 20%; transform: translateX(-50%);
    display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; pointer-events: auto;
    background: #fff; color: #2a1c12; border: 1px solid #e2cba7;
    border-radius: 14px; padding: 0.6rem 0.8rem; max-width: 360px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); animation: liveBubble 0.3s ease-out;
}
.live-coffee-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex:0 0 auto; }
.live-coffee-av-ph { display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#eee;color:#555;font-weight:700;font-size:0.75rem;flex:0 0 auto; }
.live-coffee-txt { font-size: 0.85rem; line-height: 1.3; }
.live-coffee-offer button { border: 0; border-radius: 999px; padding: 0.3rem 0.65rem; font-size: 0.8rem; font-weight: 700; cursor: pointer; flex:0 0 auto; }
.live-coffee-yes { background: var(--accent-color); color: #1a120b; }
.live-coffee-no { background: #ece3d6; color: #6a5847; }
.live-kiss-offer .live-coffee-txt { flex: 1 1 100%; text-align: center; }
.live-kiss-r { background: #f2e6d8; color: #5a4636; }
.live-kiss-love { background: #ff8fb0; color: #5a1330; }
.live-kiss-shy { background: #ffe1ec; color: #a23e63; }
.live-kiss-rage { background: #ffd9d4; color: #a33228; }
/* Coraçõezinhos: sobem ao redor da foto de perfil (raio ~2x a foto) */
.live-heart { position: absolute; pointer-events: none; will-change: transform, opacity; animation: liveHeart 3s ease-out forwards; }
@keyframes liveHeart {
    0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translate(-50%, -50%) translateY(-120px) scale(0.9); opacity: 0; }
}
/* Âncora invisível na foto de perfil do jogador (posiciona as animações) */
.live-anchor { display: inline-flex; align-items: center; justify-content: center; position: relative; }
/* Tomate em cooldown */
.live-rbtn.is-cooldown { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.6); }
.live-rbtn.is-cooldown:hover { transform: none; border-color: #4a3c2d; }

/* Ranking semanal + medalhas da Arena */
.arena-weekly { margin-top: 1.8rem; }
.arena-weekly h2 { display: flex; align-items: center; gap: 0.45rem; }

.arena-medals { margin: 1.4rem 0; }
.arena-medals-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem;
}
@media (min-width: 520px) { .arena-medals-grid { grid-template-columns: repeat(4, 1fr); } }
.arena-medal {
    display: flex; flex-direction: column; align-items: center; gap: 0.15rem; text-align: center;
    background: var(--secondary-color); border: 1px solid var(--border-warm); border-radius: 12px;
    padding: 0.8rem 0.5rem;
}
.arena-medal > i { font-size: 1.5rem; margin-bottom: 0.15rem; }
.arena-medal-tier { border-color: var(--medal-color); }
.arena-medal-tier > i { color: var(--medal-color); }
.arena-medal-value { font-weight: 700; font-size: 1.05rem; }
.arena-medal-label { font-size: 0.72rem; color: var(--text-faint); }

/* Nível + XP no perfil */
.arena-level { display: flex; align-items: center; gap: 0.9rem; background: var(--secondary-color); border: 1px solid var(--border-warm); border-radius: 14px; padding: 0.85rem 1rem; margin: 0 0 0.9rem; }
.arena-level-badge { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 1.2rem; color: #1b1409; background: var(--medal-color, var(--accent-color)); }
.arena-level-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.arena-level-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.arena-level-row strong { color: var(--text-color); font-size: 0.95rem; }
.arena-level-xp { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--text-faint); }
.arena-level-bar { height: 7px; border-radius: 999px; background: var(--primary-color); box-shadow: inset 0 0 0 1px var(--border-warm); overflow: hidden; }
.arena-level-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-color), var(--accent-2)); }

/* Coleção de medalhas (bloqueadas/desbloqueadas) */
.arena-coll-title { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.86rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin: 1.2rem 0 0.6rem; }
.arena-coll-title span { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; }
.arena-coll { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
@media (min-width: 560px) { .arena-coll { grid-template-columns: repeat(3, 1fr); } }
.arena-coll-item { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.2rem; background: var(--secondary-color); border: 1px solid var(--border-warm); border-radius: 12px; padding: 0.8rem 0.5rem; opacity: 0.6; }
.arena-coll-item.is-on { opacity: 1; border-color: color-mix(in srgb, var(--mc, var(--accent-color)) 55%, var(--border-warm)); }
.arena-coll-ic { width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; background: var(--primary-color); color: #4a3c2d; }
.arena-coll-item.is-on .arena-coll-ic { background: color-mix(in srgb, var(--mc, var(--accent-color)) 20%, var(--primary-color)); color: var(--mc, var(--accent-color)); }
.arena-coll-name { font-weight: 700; font-size: 0.86rem; color: var(--text-color); }
.arena-coll-desc { font-size: 0.72rem; color: var(--text-faint); line-height: 1.3; }
.arena-coll-prog { margin-top: 0.15rem; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--text-faint); }
.arena-coll-prog.on { color: #2e9e6b; }

/* Marcador de conteudo silenciado em cards/chat. */
.is-silenced-content {
    position: relative;
    outline: 1px dashed #f59e0b;
    outline-offset: 2px;
}
.silenced-flag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #b45309;
    background: #fef3c7;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
}

@media (prefers-color-scheme: dark) {
    body.tema-folha .mod-silence-btn.is-silenced,
    body.tema-folha .mod-silence-note,
    body.tema-folha .comment-hidden { background: #241d16; }
}