/* Camada visual compartilhada; carregada após os estilos de cada página. */
:root {
  --radius: 0px;
  --radius-lg: 0px;
}
*, *::before, *::after { border-radius: var(--radius); }
*::file-selector-button { border-radius: var(--radius); }
.avatar, .profile-picture { border-radius: 50%; object-fit: cover; }

.rail-card,
.auth-layout,
.emoji-picker,
.post-menu-panel,
.account-menu-panel,
.profile-cover,
.edit-profile-cover,
.pagination-link { border-radius: var(--radius-lg); }

body { background: var(--background); color: var(--text); }
.site-header,
.feed-heading { background: var(--surface); backdrop-filter: none; }
.site-header { box-shadow: 0 1px 0 var(--border); }
.header-nav a,
.side-nav a { transition: background .16s ease, color .16s ease; }
.header-nav .is-current { background: var(--surface-raised); box-shadow: inset 0 -2px 0 var(--primary); }
.header-nav a:hover,
.side-nav a:hover { background: var(--accent-tint); }

.feed,
.home-feed-page .feed-scroll { background: var(--surface); }
.feed { border-color: var(--border); }
.feed-heading { border-bottom: 1px solid var(--border); }
.feed-heading h1 { font-weight: 800; letter-spacing: -.035em; }

/* Estrutura única do feed definida em base.html. Comunidades usa seu próprio layout. */
body:has(.shared-app-shell) { display:flex; flex-direction:column; height:var(--viewport-height); overflow:hidden; }
body:has(.shared-app-shell) > .site-header { flex-shrink:0; }
.app-shell.shared-app-shell {
  --feed-width:940px;
  grid-template-columns:minmax(250px,1fr) minmax(0,var(--feed-width)) minmax(230px,.85fr);
  flex:1;
  width:100%;
  max-width:1720px;
  min-height:0;
  padding:0;
  overflow:hidden;
}
.shared-app-shell .shared-feed {
  width:100%;
  height:calc(100% - 32px);
  min-height:0;
  margin:16px 0;
  border:1px solid var(--border);
  border-top:3px solid var(--primary);
  background:var(--surface);
  scrollbar-width:none;
}
.shared-app-shell .shared-feed::-webkit-scrollbar { display:none; }
.shared-app-shell .feed-heading { top:0; }
.shared-app-shell .left-rail,
.shared-app-shell .hashtags-rail { height:auto; max-height:100%; overflow-y:auto; scrollbar-width:none; }
.shared-app-shell .feed-scroll { scrollbar-width:none; }
.shared-app-shell .feed-scroll::-webkit-scrollbar { display:none; }
.shared-app-shell .email-test-page { padding:24px; }
.shared-app-shell .settings-shell { display:flex; flex-direction:column; overflow:hidden; }
.shared-app-shell .settings-heading { min-height:76px; padding:18px 22px; }
.shared-app-shell .settings-layout { grid-template-columns:200px minmax(0,1fr); }
.shared-app-shell .settings-nav { padding:10px; }
.shared-app-shell .settings-nav a { padding:9px; font-size:12px; }
.shared-app-shell .settings-content { padding:24px; }
@media(max-width:1280px) {
  .app-shell.shared-app-shell { display:block; max-width:940px; }
}
@media(max-width:760px) {
  .shared-app-shell .settings-layout { display:flex; flex-direction:column; }
  .shared-app-shell .settings-nav { padding:0 10px; }
  .shared-app-shell .settings-content { padding:22px 18px; }
}
@media(max-width:720px) {
  .shared-app-shell .shared-feed { margin:0; height:100%; border-right:0; border-left:0; border-bottom:0; }
  .shared-app-shell .email-test-page { padding:20px 16px; }
}
.feed-tabs .is-active::after,
.profile-tab.is-active::after { height: 2px; }
.create-post { padding: 28px 30px 24px; background: var(--surface); border-bottom: 1px solid var(--border); }
.post { padding: 26px 30px; background: var(--surface); border-bottom: 1px solid var(--border); }
.post:hover { background: var(--surface-raised); }
.post-content { max-width: 78ch; line-height: 1.7; }
.post-actions { max-width: 560px; }
.post-action { min-height: 36px; padding: 7px 10px; }
.post-action:hover,
.composer-photo:hover,
.composer-audio:hover { background: var(--accent-tint); }
.post-carousel,
.post-media,
.comment-image,
.comment-media-preview img,
.composer-preview img { border-color: var(--border); }
.post-carousel-controls button { border-color: rgba(255, 255, 255, .35); box-shadow: 0 2px 8px rgba(0, 0, 0, .16); }
.post-menu-panel,
.account-menu-panel,
.emoji-picker { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-soft); }
.post-menu-panel a:hover,
.post-menu-panel button:hover,
.account-menu-item:hover,
.emoji-picker-item:hover { background: var(--surface-raised); }
.comment-like { border-color: var(--border); background: var(--surface-raised); }
.comment-replies { border-color: var(--border); background: var(--background); }
.comment-reply { border-color: var(--border); background: var(--surface); }

.rail-card { padding: 22px 24px; border: 1px solid var(--border); background: var(--surface); box-shadow: none; }
.rail-card h2 { margin-bottom: 18px; font-size: 13px; letter-spacing: .025em; }
.who-to-follow li + li { padding-top: 14px; border-top: 1px solid var(--border); }
.popular-hashtags a:hover { background: var(--surface-raised); }
.empty-state-icon,
.notificacao-icon { background: var(--accent-tint); color: var(--primary-light); }

.primary-button { min-height: 44px; border: 1px solid var(--primary); background: var(--primary); box-shadow: none; font-weight: 750; }
.primary-button:hover { background: var(--primary-hover); border-color: var(--primary-hover); box-shadow: none; transform: none; }
.primary-button.small { min-height: 36px; }
.follow-button { min-height: 36px; padding: 7px 15px; }
.secondary-button,
.profile-action { min-height: 40px; border: 1px solid var(--border); background: var(--surface); }
.secondary-button:hover,
.profile-action:hover { border-color: var(--primary); background: var(--accent-tint); }
.avatar { border: 1px solid var(--border); background: var(--surface-raised); }

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
select,
textarea { background: var(--surface-raised); border-color: var(--border); color: var(--text); }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):focus,
select:focus,
textarea:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 2px var(--focus-ring) !important; }
input::placeholder,
textarea::placeholder { color: var(--muted); }
.field-float > input:focus,
.field-float > textarea:focus { background: var(--surface) !important; }

.auth-page { padding: 32px 0 0; }
.auth-layout { width: min(100%, 1060px); min-height: 620px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-soft); }
.auth-story { position: relative; padding: 48px; border-right: 1px solid var(--border); background: var(--hero-surface); color: var(--hero-text); }
.auth-story::after { content: ""; position: absolute; top: 48px; right: 0; bottom: 48px; width: 2px; background: var(--primary); }
.auth-story-content h1 { max-width: 11ch; font-size: clamp(38px, 4vw, 58px); font-weight: 800; line-height: 1.08; }
.auth-story-content p,
.auth-story small { color: var(--hero-muted); }
.auth-panel { padding: 52px 48px; background: var(--surface); }
.auth-panel h2 { margin-bottom: 10px; font-size: 28px; }
.auth-subtitle { margin-bottom: 28px; }
.auth-form { gap: 18px; }
.auth-page .field-float > input { min-height: 54px; border: 1px solid var(--border) !important; background: var(--surface) !important; box-shadow: none !important; }
.auth-page .field-float > input:hover { border-color: var(--muted) !important; }
.auth-page .field-float > input:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 2px var(--focus-ring) !important; }
.auth-page .primary-button { min-height: 48px; }
.password-meter { background: var(--surface-raised); }
.error-message { border: 1px solid #7D424B; background: #2B1C22; color: #FFB4BE; }
.auth-success { border: 1px solid #396C53; background: #1C2D24; color: #A5E5BD; }

.profile-cover,
.edit-profile-cover { background: var(--hero-surface); }
.profile-cover::before,
.profile-cover::after { display: none; }
.profile-summary { padding-bottom: 28px; background: var(--surface); }
.profile-avatar { border: 4px solid var(--surface); }
.profile-tabs { background: var(--surface); }
.profile-media-grid { gap: 2px; padding: 2px; background: var(--border); }
.profile-media-item { background: var(--surface); }
.edit-profile-field input[type="file"]::file-selector-button { border: 1px solid var(--border); background: var(--surface); color: var(--text); }

.dm-feed,
.dm-heading,
.dm-composer { background: var(--surface); }
.dm-thread { background: var(--background); }
.dm-item:hover { background: var(--surface-raised); }
.dm-filter.is-active { border-color: var(--primary); background: var(--accent-tint); color: var(--text); }
.dm-bubble-text { background: var(--surface); }
.dm-bubble.is-mine .dm-bubble-text { background: var(--primary); color: #fff; }

@media (prefers-color-scheme: light) {
  .error-message { border-color: #F3C9CF; background: #FFF1F3; color: #9D2636; }
  .auth-success { border-color: #B6DFC5; background: #F0FBF3; color: #23593A; }
  .account-menu-chevron,
  .account-menu-item img,
  .post-menu-trigger img,
  .emoji-button img,
  .profile-tab-saved img { filter: none; }
  .post-menu-trigger { color: var(--text); }
  .post-action img { filter: opacity(.68); }
  .post-action.is-liked img { filter: invert(46%) sepia(92%) saturate(1432%) hue-rotate(305deg) brightness(106%); }
  .post-carousel-controls button img { filter: invert(1); }
}

body[data-theme="claro"] .error-message { border-color: #F3C9CF; background: #FFF1F3; color: #9D2636; }
body[data-theme="claro"] .auth-success { border-color: #B6DFC5; background: #F0FBF3; color: #23593A; }
body[data-theme="claro"] .account-menu-chevron,
body[data-theme="claro"] .account-menu-item img,
body[data-theme="claro"] .post-menu-trigger img,
body[data-theme="claro"] .emoji-button img,
body[data-theme="claro"] .profile-tab-saved img { filter: none; }
body[data-theme="claro"] .post-action img { filter: opacity(.68); }
body[data-theme="escuro"] .account-menu-chevron,
body[data-theme="escuro"] .account-menu-item img,
body[data-theme="escuro"] .post-menu-trigger img,
body[data-theme="escuro"] .emoji-button img,
body[data-theme="escuro"] .profile-tab-saved img { filter: brightness(0) invert(1); }

@media (max-width: 720px) {
  .home-feed-page .feed,
  .profile-page .profile-feed {
    height: 100%;
    margin: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
  }
  .auth-page { padding: 0; }
  .auth-layout { min-height: var(--viewport-height); border: 0; box-shadow: none; }
  .auth-panel { padding: 42px 24px; }
  .create-post,
  .post { padding-right: 18px; padding-left: 18px; }
  .rail-card { padding: 18px; }
}

@media (min-width: 721px) and (max-width: 1280px) {
  .home-feed-page .app-shell,
  .profile-page .app-shell { max-width: 940px; }
}

@media (max-height: 850px) and (min-width: 1281px) {
  .home-feed-page .left-rail,
  .profile-page .left-rail { gap: 12px; padding-top: 16px; padding-bottom: 16px; }
  .home-feed-page .left-rail .rail-card,
  .profile-page .left-rail .rail-card { padding: 16px; }
  .home-feed-page .left-rail .who-to-follow li:nth-child(n+4),
  .profile-page .left-rail .who-to-follow li:nth-child(n+4) { display: none; }
}

@media (max-height: 680px) and (min-width: 1281px) {
  .home-feed-page .left-rail .who-to-follow li:nth-child(n+3),
  .profile-page .left-rail .who-to-follow li:nth-child(n+3),
  .home-feed-page .left-rail .popular-hashtags li:nth-child(n+5),
  .profile-page .left-rail .popular-hashtags li:nth-child(n+5) { display: none; }
}

/* Auth layout: dimensões estáveis no desktop */
@media (min-width: 721px) {
  .auth-page .auth-layout {
    width: 74vw;
    height: 78vh;
    max-width: none;
    max-height: none;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 56% 44%;
  }

  .auth-page .auth-story,
  .auth-page .auth-panel {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
  }

  .auth-page .auth-panel {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
}

/* Limites estáveis em pixels CSS; o zoom continua respeitando a leitura do usuário. */
.header-mobile-icon { display:none; }
.shared-feed img,.shared-feed video,.shared-feed audio { max-width:100%; }
.shared-feed input,.shared-feed textarea,.shared-feed select { min-width:0; }
.shared-feed .post-content,.shared-feed .dm-bubble-text { overflow-wrap:anywhere; }
@media(min-width:721px) {
  .auth-page .auth-layout {
    width:min(1120px,calc(100% - 48px));
    height:min(780px,calc(var(--viewport-height) - 48px));
    max-width:1120px;
  }
}
@media(max-width:640px) {
  .header-inner { gap:6px; padding:0 8px; }
  .header-inner .brand { gap:0; }
  .header-inner .brand>span { display:none; }
  .header-center { gap:3px; justify-self:center; min-width:0; }
  .header-nav { gap:2px; }
  .header-nav a { display:inline-flex; align-items:center; justify-content:center; width:40px; min-height:40px; padding:7px; }
  .header-nav .header-nav-label,.header-nav .community-nav-label { display:none; }
  .header-nav .header-mobile-icon,.header-nav .community-nav-icon { display:inline-block; font-size:21px; }
  .header-nav .header-messages,.header-nav .header-communities { position:relative; }
  .header-messages-badge,.header-communities-badge { position:absolute; top:0; right:0; min-width:15px; height:15px; padding:0 3px; font-size:8px; }
  .header-actions { gap:5px; }
  .header-bell { width:34px; height:40px; }
  .header-user { gap:0; }
  .account-menu-chevron { display:none; }
  .header-search,.header-search.is-open { position:static; width:34px; height:40px; overflow:visible; }
  .search-trigger { width:34px; height:40px; flex-basis:34px; }
  .header-search::after { display:none; }
  .header-search-form { display:none; }
  .header-search.is-open .header-search-form { display:flex; position:absolute; top:64px; left:8px; right:8px; height:48px; padding:4px 10px; border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-soft); z-index:30; }
  .header-search.is-open .header-search-input { width:100%; }
  .shared-app-shell .dm-inbox-heading { align-items:flex-start; flex-direction:column; min-height:0; padding:20px 18px; }
  .shared-app-shell .dm-inbox-heading h1 { font-size:25px; }
  .shared-app-shell .dm-title-row { gap:8px; }
  .shared-app-shell .dm-inbox .dm-list-tools { padding:15px; }
  .shared-app-shell .dm-item { min-width:0; }
  .shared-app-shell .notification-heading-actions { flex-wrap:wrap; }
  .shared-app-shell .settings-heading { min-height:70px; padding:16px; }
  .shared-app-shell .settings-heading h1 { font-size:22px; }
  .shared-app-shell .settings-danger,.shared-app-shell .settings-group { padding:16px; }
  .shared-app-shell .email-test-heading h1 { font-size:24px; }
  .shared-app-shell .dm-thread { min-height:0; }
  .shared-app-shell .profile-tabs { overflow-x:auto; }
  .shared-app-shell .profile-tab { flex-shrink:0; }
}
@media(max-width:640px) {
  .shared-feed input:not([type="checkbox"]):not([type="radio"]),
  .shared-feed textarea,.shared-feed select,
  .auth-panel input,.auth-panel select,.auth-panel textarea,
  .header-search-input { font-size:16px; }
}
@media(max-width:1100px) {
  .account-menu--header .account-menu-name,.account-menu--header .user-badges { display:none; }
  .header-search,.header-search.is-open { position:static; width:38px; overflow:visible; }
  .header-search-form { display:none; }
  .header-search::after { display:none; }
  .header-search.is-open .header-search-form { display:flex; position:absolute; top:64px; left:12px; right:12px; height:48px; padding:4px 10px; border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-soft); z-index:30; }
  .header-search.is-open .header-search-input { width:100%; }
}
@media(max-width:480px) {
  .shared-app-shell .feed-tabs a,.shared-app-shell .feed-tabs>span { flex:1; min-width:0; padding-right:12px; padding-left:12px; }
}
@media(max-width:640px) {
  .community-form-page input:not([type="checkbox"]):not([type="radio"]),
  .community-form-page textarea,.community-form-page select { font-size:16px; }
}

.password-requirements { padding:12px 14px; border:1px solid var(--border); background:var(--surface-raised); color:var(--muted); font-size:12px; line-height:1.6; }
.password-requirements p { margin:0; color:var(--text); font-weight:700; }
.password-requirements ul { margin:8px 0 0; padding-left:18px; }