:root {
  /* Cores da identidade da Universidade de Leiria e Oeste (posts do @ulouniversity e ulo.pt) */
  --green-900: #022a1f;
  --yellow: #f7eb7d;
  --lime: #c9dd9d;
  --mint: #acd9d6;
  --green: #00bc70;
  --coral: #eb665b;
  --navy: #23243a;
  --pink: #f1dadb;
  --black: #1c1c1c;

  --bg: #fffffe;
  --card: #ffffff;
  --surface: #f2f2ea;
  --ink: #022a1f;
  --ink-2: #1e3f35;
  --muted: #56685f;
  --line: #e1e3da;
  --line-strong: #c4c9bd;
  --accent: #022a1f;
  --accent-hover: #0b4232;
  --accent-text: #00704a;
  --accent-soft: #eaf3e2;
  --on-accent: #f7eb7d;
  --header: #1c1c1c;
  --on-header: #ffffff;
  --gold: #f7eb7d;
  --pre: #b8402f;
  --danger: #b8402f;
  --danger-soft: #fbe6e3;
  --warn-ink: #6b5400;
  --warn-soft: #fbf4c4;
  --ok-ink: #00593a;
  --ok-soft: #dff3e8;
  --radius: 4px;
  --radius-sm: 3px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* Avenir Next vem instalada em iPhone/Mac; nos outros aparelhos usa a Figtree (gratuita e parecida). */
  --font: "Avenir Next", "Avenir", "Figtree", system-ui, sans-serif;
  --font-display: "Avenir Next", "Avenir", "Figtree", system-ui, sans-serif;
}

/* Tema verde-escuro da ULO: o tema por omissão (os outros estão em "temas", mais abaixo). */
:root {
  --bg: #022a1f;
  --card: #063427;
  --surface: #0b3f30;
  --ink: #f7f5e8;
  --ink-2: #dfe8dc;
  --muted: #a6bdb2;
  --line: #134a3a;
  --line-strong: #23604d;
  --accent: #f7eb7d;
  --accent-hover: #fff39b;
  --accent-text: #f7eb7d;
  --accent-soft: #0e4434;
  --on-accent: #022a1f;
  --header: #011d15;
  --pre: #f59a8c;
  --danger: #f59a8c;
  --danger-soft: #3a1a17;
  --warn-ink: #f7eb7d;
  --warn-soft: #2f3a1a;
  --ok-ink: #7be3b1;
  --ok-soft: #0c3d2c;
  /* Diz ao browser que o site já é escuro, para não alterar as cores. */
  color-scheme: only dark;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.5 var(--font);
  min-height: 100dvh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 .4em; font-weight: 800; }
h1 { font-size: clamp(2rem, 5vw, 2.6rem); font-weight: 900; letter-spacing: -0.02em; }
h2 { font-size: .85rem; margin-top: 2.5rem; text-transform: uppercase; letter-spacing: .06em; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: 4px; }
.icon { width: 16px; height: 16px; flex: none; vertical-align: -3px; }

.wrap { max-width: 880px; margin: 0 auto; padding: 0 20px; }
main.wrap { flex: 1; width: 100%; padding-top: 40px; padding-bottom: 64px; }

/* ---------- header ---------- */
.top { position: relative; z-index: 10; background: var(--header); color: var(--on-header); }
.top :focus-visible { outline-color: var(--yellow); }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.brand { font-family: var(--font-display); font-weight: 900; font-size: 1.55rem; letter-spacing: -0.04em; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; line-height: 1; }
.brand-mark { width: 12px; height: 12px; border-radius: 50%; background: var(--yellow); display: inline-block; order: 2; transition: transform .3s var(--ease); }
.brand:hover .brand-mark { transform: scale(1.3); }
.brand-name { color: inherit; }
.brand-name b { color: inherit; font-weight: inherit; }
.badge { background: var(--yellow); color: var(--green-900); border-radius: 99px; min-width: 18px; height: 18px; padding: 0 5px; font-size: .7rem; font-weight: 700; display: inline-grid; place-items: center; }
nav form { margin: 0; }

/* ---------- menu flutuante em vidro (estilo Dynamic Island) ---------- */
.dock {
  position: fixed; z-index: 50; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom));
  width: max-content; max-width: calc(100% - 20px); margin: 0 auto;
  display: flex; align-items: center; gap: 2px; padding: 6px;
  border-radius: 999px;
  background: rgb(14 16 15 / .78);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgb(255 255 255 / .14);
  box-shadow: 0 10px 30px rgb(0 0 0 / .28), inset 0 1px 0 rgb(255 255 255 / .08);
  view-transition-name: dock;
}
.dock a {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px;
  height: 46px; min-width: 46px; padding: 0 13px; border-radius: 999px; justify-content: center;
  color: rgb(255 255 255 / .72); text-decoration: none; transition: color .2s var(--ease), transform .15s var(--ease);
}
.dock a:hover { color: #fff; }
.dock a:active { transform: scale(.92); }
.dock a.on { color: var(--green-900); padding-right: 16px; }
.dock .nav-pill { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--yellow); view-transition-name: nav-pill; }
.dock-icon { position: relative; display: grid; place-items: center; }
.dock .icon { width: 22px; height: 22px; stroke-width: 2; }
.dock-label { font: 800 .82rem var(--font-display); white-space: nowrap; overflow: hidden; max-width: 110px; transition: max-width .25s var(--ease), opacity .18s; }
@starting-style { .dock-label { max-width: 0; opacity: 0; } }
.dock .badge { position: absolute; top: -7px; right: -10px; min-width: 17px; height: 17px; font-size: .62rem; padding: 0 4px; border: 2px solid rgb(20 22 20); background: var(--coral); color: #fff; }
.dock a.create { margin: 0 4px; color: var(--green-900); background: #fff; }
.dock a.create:hover { background: var(--yellow); }
.dock a.create .icon { stroke-width: 2.6; }
/* Espaço para a ilha não tapar o fim das páginas. */
body:has(.dock) main.wrap { padding-bottom: 120px; }
/* No telemóvel o menu tem 7 botões: o ativo fica marcado só com a pílula amarela (sem o nome, que não cabe). */
@media (max-width: 440px) {
  .dock { gap: 0; padding: 5px; }
  .dock a { height: 44px; min-width: 42px; padding: 0 10px; flex-shrink: 0; }
  .dock a.on { padding-right: 10px; }
  .dock a.create { margin: 0 2px; }
  .dock-label { display: none; }
}
@media (max-width: 359px) {
  .dock a { height: 42px; min-width: 38px; padding: 0 8px; }
  .dock a.on { padding-right: 8px; }
  .dock .icon { width: 20px; height: 20px; }
}

.foot { color: rgb(255 255 255 / .7); background: var(--header); font-size: .85rem; padding: 32px 0 48px; }
.foot .wrap { display: flex; align-items: center; gap: 10px; }
.foot .wrap::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); flex: none; }

/* ---------- utilitários ---------- */
.narrow { max-width: 420px; margin: 0 auto; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline { display: inline; margin: 0; }
.sep { color: var(--line-strong); margin: 0 .35em; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent);
  font: 700 .85rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .04em; text-decoration: none; cursor: pointer;
  transition: opacity .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:active { opacity: .75; transform: scale(.97); }
.btn.ghost { background: var(--card); color: var(--ink); border-color: var(--line-strong); }
.btn.ghost .icon { color: var(--accent-text); }
.btn.ghost:hover { background: var(--surface); border-color: var(--line-strong); }
.btn.small { min-height: 34px; padding: 0 12px; font-size: .85rem; }
.btn.danger { background: var(--card); color: var(--danger); border-color: var(--line-strong); }
.btn.danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn.block { width: 100%; min-height: 44px; }
.linkbtn { background: none; border: 0; padding: 4px 2px; cursor: pointer; color: var(--muted); font: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.linkbtn:hover { color: var(--ink); }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted); cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); }
.icon-btn:hover { background: var(--surface); color: var(--ink); }

/* ---------- formulários ---------- */
.panel { max-width: 420px; margin: 0 auto; }
.panel h1 { margin-bottom: .3em; }
.panel > .muted { margin-bottom: 1.6em; }
.form { display: grid; gap: 18px; margin: 24px 0; }
.form label { display: grid; gap: 6px; font-weight: 700; font-size: .85rem; color: var(--ink-2); }
.code-input { font-size: 1.6rem; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.hint { font-weight: 400; color: var(--muted); font-size: .8rem; }
input, select, textarea {
  font: inherit; font-size: 1rem; font-weight: 400; color: var(--ink); background: var(--card);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 10px 12px; width: 100%; min-height: 44px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 12%, transparent); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 3px; }
.seg label { display: flex; align-items: center; justify-content: center; min-height: 38px; border-radius: 2px; cursor: pointer; color: var(--muted); font: 700 .85rem var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.seg label:has(input:checked) { background: var(--accent); color: var(--on-accent); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: 1px; }

.alert, .notice { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 24px; font-size: .9rem; }
.alert { background: var(--danger-soft); color: var(--danger); }
.notice { background: var(--ok-soft); color: var(--ok-ink); }
.alert .icon, .notice .icon { margin-top: 2px; }

/* ---------- fotos ---------- */
.photo-field { display: flex; gap: 18px; align-items: center; }
.photo-field .hint { margin: 6px 0 0; }
.field { display: grid; gap: 8px; justify-items: start; }
.field-label { font-weight: 700; font-size: .85rem; color: var(--ink-2); }
.tabs + .grid, .tabs + .list { border-top: 0; }
.file-btn { position: relative; overflow: hidden; }
.form .file-btn { display: inline-flex; color: var(--ink); font-weight: 500; font-size: .85rem; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; min-height: 0; padding: 0; }
.file-btn:has(input:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.form .check { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 400; color: var(--muted); }
.check input { width: 18px; min-height: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
img.avatar { object-fit: cover; background: var(--surface); }
.event-photo { display: block; width: auto; max-width: min(100%, 520px); max-height: 560px; height: auto; border-radius: var(--radius); border: 1px solid var(--line); margin-top: 14px; background: var(--surface); }
.field .event-photo { margin-top: 0; }
[hidden] { display: none !important; }

.cropper { width: min(440px, calc(100vw - 32px)); padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); }
.cropper::backdrop { background: rgb(0 0 0 / .55); }
.cropper-title { font-weight: 600; margin: 0 0 14px; }
.cropper-stage { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius); background: #000; touch-action: none; cursor: grab; user-select: none; }
.cropper-stage:active { cursor: grabbing; }
.cropper-stage canvas { display: block; width: 100%; height: 100%; }
.cropper-stage.round::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgb(0 0 0 / .5); pointer-events: none; }
.cropper-zoom { display: flex; align-items: center; gap: 12px; margin: 16px 0 4px; }
.cropper-zoom input { flex: 1; min-height: 0; padding: 0; border: 0; accent-color: var(--accent); }
.cropper-tip { margin: 0 0 16px; }
.cropper-actions { justify-content: flex-end; }

/* ---------- landing ---------- */
.hero { margin-top: -40px; padding: 56px 40px 44px; background: var(--green-900); color: #fff; }
.hero-band { margin: -56px -40px 40px; padding: 18px 40px; background: var(--yellow); color: var(--green-900); display: flex; justify-content: space-between; align-items: center; font: 800 .8rem var(--font-display); text-transform: uppercase; letter-spacing: .06em; }
.hero h1 { font-size: clamp(2.6rem, 8vw, 4.6rem); line-height: .98; letter-spacing: -0.03em; margin-bottom: .4em; color: var(--yellow); max-width: 11ch; }
.hero h1 em { font-style: normal; color: #fff; }
.eyebrow { display: block; font: 800 .8rem var(--font-display); text-transform: uppercase; letter-spacing: .08em; color: var(--green); margin-bottom: 18px; }
.lead { font-size: 1.2rem; color: rgb(255 255 255 / .85); margin-bottom: 32px; max-width: 520px; }
.lead strong { color: #fff; }
.hero .btn { background: var(--yellow); color: var(--green-900); border-color: var(--yellow); min-height: 48px; padding: 0 22px; }
.hero .btn:hover { background: #fff38f; border-color: #fff38f; }
.hero .btn.ghost { background: transparent; color: #fff; border-color: rgb(255 255 255 / .5); }
.hero .btn.ghost:hover { background: rgb(255 255 255 / .08); }
.hero-foot { margin: 44px 0 0; font: 800 .75rem var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: var(--yellow); }
.features { display: grid; grid-template-columns: repeat(3, 1fr); }
.features div { padding: 28px 24px 30px; min-height: 180px; display: flex; flex-direction: column; justify-content: space-between; color: var(--green-900); }
.features div:nth-child(1) { background: var(--lime); }
.features div:nth-child(2) { background: var(--mint); }
.features div:nth-child(3) { background: var(--yellow); }
.features strong { display: block; margin-bottom: 8px; font: 900 1.6rem/1 var(--font-display); letter-spacing: -0.02em; }
.features .muted { color: var(--green-900); opacity: .8; }
@media (max-width: 640px) {
  .hero { margin: -40px -20px 0; padding: 48px 20px 36px; }
  .hero-band { margin: -48px -20px 32px; padding: 14px 20px; }
  .features { grid-template-columns: 1fr; margin: 0 -20px; }
  .features div { min-height: 0; padding: 24px 20px; }
}

/* ---------- cabeçalho de página ---------- */
.pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.pagehead h1 { margin: 0; }
.pagehead p { margin: 4px 0 0; }
.search { position: relative; flex: 0 1 300px; }
.search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search input { padding-left: 36px; }
@media (max-width: 640px) { .search { flex-basis: 100%; } }

.tabs { display: flex; gap: 4px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.tabs a { text-decoration: none; color: var(--muted); padding: 12px 12px; font: 800 .8rem var(--font-display); text-transform: uppercase; letter-spacing: .05em; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s var(--ease); }
.tabs a:hover { color: var(--ink); }
.tabs a { position: relative; }
.tabs a.on { color: var(--ink); }
.tab-line { position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: var(--green); view-transition-name: tab-line; }

/* ---------- eventos ---------- */
.list { border-top: 1px solid var(--line); }
.tabs + .list { border-top: 0; }
.event { display: grid; grid-template-columns: 84px 1fr; gap: 22px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.date { align-self: start; display: grid; justify-items: start; align-content: start; padding: 10px 10px 12px; background: var(--yellow); color: var(--green-900); }
.event.pre .date { background: var(--coral); }
.date .wd { font: 800 .72rem var(--font-display); text-transform: uppercase; letter-spacing: .06em; }
.date .d { font: 900 2.4rem/1 var(--font-display); letter-spacing: -0.04em; margin: 2px 0; }
.date .m { font: 800 .72rem var(--font-display); text-transform: uppercase; letter-spacing: .06em; }
.event-body { min-width: 0; }
.event-body h3 { margin: 0 0 6px; font-size: 1.45rem; font-weight: 900; letter-spacing: -0.02em; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; color: var(--muted); font-size: .875rem; margin-bottom: 8px; }
.meta span { display: inline-flex; align-items: center; gap: 5px; }
.meta a { color: var(--ink-2); }
.event-body .bio { color: var(--ink-2); font-size: .95rem; margin: 10px 0 0; }
.event-desc { white-space: pre-line; overflow-wrap: anywhere; }
.event-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
@media (max-width: 480px) { .date .d { font-size: 1.9rem; } .event-body h3 { font-size: 1.2rem; } }

.type { display: inline-flex; align-items: center; gap: 6px; font: 800 .72rem var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: var(--accent-text); margin-bottom: 6px; }
.type::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.type.pre { color: var(--pre); }
.type.pre::before { background: var(--coral); }

.stack { display: flex; align-items: center; }
.stack a { margin-right: -8px; text-decoration: none; }
.stack .muted { font-size: .85rem; }
.stack a ~ .muted { margin-left: 16px; }

.status { font: 800 .7rem var(--font-display); text-transform: uppercase; letter-spacing: .05em; padding: 4px 8px; border-radius: 2px; white-space: nowrap; }
.status.pending { background: var(--warn-soft); color: var(--warn-ink); }
.status.rejected { background: var(--danger-soft); color: var(--danger); }

.mini { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .925rem; }
.mini strong { font-weight: 500; }
.mini .grow { flex: 1; min-width: 0; }
.empty { padding: 40px 0; color: var(--muted); text-align: center; border-bottom: 1px solid var(--line); }
.list .empty:first-child { border-top: 0; }

/* ---------- pessoas ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0 24px; border-top: 1px solid var(--line); }
.person { display: flex; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; transition: opacity .15s var(--ease); }
.person:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.person strong { font-weight: 500; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tag { background: var(--surface); border-radius: 2px; padding: 2px 7px; font: 700 .7rem var(--font-display); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }

.avatar {
  --h: 0;
  flex: none; display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--av, var(--lime)); color: var(--green-900);
  font-weight: 600; font-size: .85rem; letter-spacing: .02em;
  border: 2px solid var(--bg);
}

.stack .avatar { width: 30px; height: 30px; font-size: .7rem; }
.avatar.big { width: 88px; height: 88px; font-size: 1.8rem; border-width: 0; }

/* ---------- perfil ---------- */
.profile { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.profile-main { flex: 1; min-width: 240px; }
/* Foto de perfil à direita do nome (no telemóvel ver a regra mais abaixo). */
.profile > :first-child { order: 2; }
/* No PC o texto não estica até ao fim, para a foto ficar mais perto do nome (mais para dentro). */
@media (min-width: 641px) { .profile { flex-wrap: nowrap; } .profile-main { flex: 0 1 620px; min-width: 0; } .profile > :first-child { margin-left: 12px; } }
.profile-main h1 { margin-bottom: 2px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin: 22px 0; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* No telemóvel a foto de perfil fica à direita, ao lado do nome. */
@media (max-width: 640px) {
  .profile { position: relative; }
  .profile > :first-child { position: absolute; top: 0; right: 0; }
  .profile > .avatar.big, .profile > .avatar-link .avatar, .profile > .story-ring.big .avatar { width: 76px; height: 76px; font-size: 1.5rem; }
  .profile-main > h1, .profile-main > h1 + .muted { padding-right: 96px; }
}
/* No telemóvel as informações ficam lado a lado, encostadas à esquerda (sem coluna a meio do ecrã). */
@media (max-width: 640px) { .facts { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 14px 32px; } .facts > div { min-width: 0; } }
.facts .label { display: block; font-size: .75rem; color: var(--muted); margin-bottom: 2px; }
.bio { white-space: pre-line; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.two h2 { margin-bottom: 8px; }
@media (max-width: 640px) { .two { grid-template-columns: 1fr; gap: 0; } }

/* ---------- seguir / perfil ---------- */
.counts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 10px 0 0; font-size: .9rem; color: var(--muted); }
.counts a { color: inherit; text-decoration: none; }
.counts a:hover { color: var(--ink); }
.counts strong { color: var(--ink); font-weight: 600; }
.profile .row { margin-top: 4px; }
.tabs.scroll { overflow-x: auto; scrollbar-width: none; }
.tabs.scroll::-webkit-scrollbar { display: none; }
.tabs.scroll a { white-space: nowrap; }

/* ---------- stories ---------- */
.stories-bar { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 18px; margin: 0 0 8px; scrollbar-width: none; }
.stories-bar::-webkit-scrollbar { display: none; }
.story-item { display: grid; justify-items: center; gap: 6px; width: 68px; flex: none; text-decoration: none; color: var(--ink-2); }
.story-name { font-size: .78rem; font-weight: 600; max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-ring { display: inline-grid; place-items: center; padding: 3px; border-radius: 50%; background: var(--green); transition: transform .2s var(--ease); }
.story-ring.seen { background: var(--line-strong); }
a.story-ring { text-decoration: none; }
.story-ring .avatar { width: 58px; height: 58px; border: 3px solid var(--bg); font-size: 1rem; }
.story-ring.big { padding: 4px; }
.story-ring.big .avatar { width: 88px; height: 88px; border-width: 3px; }
.story-item:hover .story-ring, .story-ring.big:hover { transform: scale(1.04); }
.story-add { position: relative; display: inline-grid; place-items: center; width: 64px; height: 64px; }
.story-add .avatar { width: 58px; height: 58px; border: 0; }
.story-add i { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--yellow); color: var(--green-900); border: 2px solid var(--bg); }
.story-add i .icon { width: 12px; height: 12px; }
.story-add.only { border-radius: 50%; border: 1.5px dashed var(--line-strong); color: var(--muted); }
.story-preview { width: 100%; max-width: 260px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--radius); margin: 0 auto; border: 1px solid var(--line); }

body.story-page { background: #000; color: #fff; display: block; }
.story-viewer, .cam { width: 100%; }
.story-viewer { position: relative; height: 100dvh; max-width: calc(100dvh * 9 / 16); margin: 0 auto; overflow: hidden; background: #111; }
/* O momento aparece sempre inteiro em 9:16 (faixas pretas se o ecrã for mais alto), para nada ficar cortado. */
.story-slide { margin: 0; position: absolute; inset: 0; display: grid; place-items: center; }
.story-slide img, .story-slide video { width: 100%; height: auto; max-height: 100%; aspect-ratio: 9 / 16; object-fit: cover; animation: fade .16s var(--ease); background: #000; }
.story-bars { position: absolute; z-index: 3; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; }
.story-bars span { flex: 1; height: 3px; border-radius: 3px; background: rgb(255 255 255 / .35); overflow: hidden; }
.story-bars i { display: block; height: 100%; width: 0; background: #fff; }
.story-head { position: absolute; z-index: 3; top: 22px; left: 12px; right: 8px; display: flex; align-items: center; gap: 10px; text-shadow: 0 1px 3px rgb(0 0 0 / .5); }
.story-user { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-size: .9rem; }
.story-user .avatar { width: 32px; height: 32px; border: 0; }
.story-time { font-size: .8rem; opacity: .8; }
.story-close { margin-left: auto; display: grid; place-items: center; width: 40px; height: 40px; color: #fff; }
.story-close .icon { width: 24px; height: 24px; }
.story-nav { position: absolute; z-index: 2; top: 0; bottom: 0; width: 35%; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.story-nav.prev { left: 0; }
.story-nav.next { right: 0; width: 65%; }
.story-foot { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: 16px; background: linear-gradient(transparent, rgb(0 0 0 / .6)); }
.story-views { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; }
.story-views b { font-weight: 500; }
.story-foot .btn.danger { background: rgb(0 0 0 / .4); color: #fff; border-color: rgb(255 255 255 / .4); }
.story-foot form { margin: 0; }

/* ---------- câmara das stories ---------- */
.cam { height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; max-width: 520px; margin: 0 auto; padding: env(safe-area-inset-top) 12px env(safe-area-inset-bottom); }
.cam[data-state="camera"] [data-show="edit"], .cam[data-state="edit"] [data-show="camera"] { display: none !important; }
.cam-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; }
.cam-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .12); color: #fff; cursor: pointer; text-decoration: none; }
.cam-icon .icon { width: 22px; height: 22px; }
.cam-icon.dark { background: var(--surface); color: var(--ink); }
.cam-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 99px; background: rgb(255 255 255 / .14); color: #fff; font: 700 .85rem var(--font-display); cursor: pointer; }
.cam-frame { position: relative; align-self: center; justify-self: center; width: min(100%, calc((100dvh - 56px - 112px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 9 / 16)); aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #111; }
.cam-frame video, .cam-frame canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam-frame video.mirror { transform: scaleX(-1); }
.cam-frame canvas { touch-action: none; cursor: grab; }
.cam-frame.flash::after { content: ""; position: absolute; inset: 0; background: #fff; animation: fade .3s reverse forwards; pointer-events: none; }
.cam-error { position: absolute; inset: auto 16px 50%; transform: translateY(50%); text-align: center; color: #fff; opacity: .85; margin: 0; }
.cam-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; min-height: 112px; }
.cam-gallery { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; border: 2px solid #fff; color: #fff; cursor: pointer; }
.cam-gallery .icon { width: 22px; height: 22px; }
.cam-shutter { width: 76px; height: 76px; border-radius: 50%; border: 5px solid #fff; background: rgb(255 255 255 / .25); cursor: pointer; transition: transform .1s var(--ease), background .15s; }
.cam-shutter:active { transform: scale(.9); background: #fff; }
.cam-shutter:disabled { opacity: .3; cursor: default; }
.cam-publish { grid-column: 1 / -1; justify-self: end; border-radius: 99px; min-height: 48px; padding: 0 22px; background: var(--yellow); color: var(--green-900); border-color: var(--yellow); }
.cam-publish:hover { background: #fff38f; border-color: #fff38f; }
.cam-fallback { display: grid; gap: 12px; max-width: 360px; margin: 40px auto; padding: 0 16px; }

.music-chip { position: absolute; z-index: 2; left: 50%; top: 82%; translate: -50% -50%; width: max-content; touch-action: none; display: flex; align-items: center; gap: 10px; max-width: 86%; padding: 8px 12px 8px 8px; border: 0; border-radius: 14px; background: rgb(255 255 255 / .92); color: #111; text-align: left; cursor: pointer; box-shadow: 0 6px 20px rgb(0 0 0 / .25); animation: pop .25s var(--ease); }
.music-chip img { width: 40px; height: 40px; border-radius: 8px; flex: none; object-fit: cover; }
.music-chip span { display: grid; min-width: 0; line-height: 1.25; }
.music-chip strong, .music-chip small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-chip strong { font-size: .9rem; }
.music-chip small { font-size: .78rem; color: #555; }
.music-chip i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgb(0 0 0 / .08); flex: none; }
.music-chip i .icon { width: 14px; height: 14px; }

.music-sheet { width: min(520px, 100vw); max-width: 100vw; max-height: 80dvh; margin: auto auto 0; padding: 0; border: 0; border-radius: 20px 20px 0 0; background: var(--card); color: var(--ink); display: none; }
.music-sheet[open] { display: grid; grid-template-rows: auto 1fr auto; animation: sheet-up .2s var(--ease); }
.music-sheet::backdrop { background: rgb(0 0 0 / .5); }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } }
.music-head { display: flex; gap: 8px; padding: 14px; border-bottom: 1px solid var(--line); }
.music-head input { border-radius: 99px; }
.music-list { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; min-height: 200px; }
.music-list li { display: flex; align-items: center; }
.music-item { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px 14px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.music-item:hover { background: var(--surface); }
.music-item img { width: 48px; height: 48px; border-radius: 8px; flex: none; object-fit: cover; background: var(--surface); }
.music-item span { display: grid; min-width: 0; }
.music-item strong, .music-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-item strong { font-weight: 500; }
.music-item small { color: var(--muted); font-size: .85rem; }
.music-play { width: 40px; height: 40px; margin-right: 10px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--card); color: var(--ink); cursor: pointer; font-size: .75rem; flex: none; }
.music-hint { padding: 24px 16px; color: var(--muted); justify-content: center; }
.music-credit { margin: 0; padding: 8px 14px 14px; font-size: .72rem; color: var(--muted); text-align: center; }

/* Responder, gosto e quem viu */
.story-foot.reply { gap: 10px; padding: 14px 12px calc(14px + env(safe-area-inset-bottom)); }
.story-reply { flex: 1; display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 4px 0 16px; min-height: 46px; border: 1.5px solid rgb(255 255 255 / .6); border-radius: 99px; background: rgb(0 0 0 / .2); }
.story-reply:focus-within { border-color: #fff; background: rgb(0 0 0 / .45); }
.story-reply input { flex: 1; min-height: 0; padding: 10px 0; border: 0; background: none; color: #fff; font-size: 1rem; box-shadow: none; }
.story-reply input:focus { box-shadow: none; }
.story-reply input::placeholder { color: rgb(255 255 255 / .8); }
.story-send { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--yellow); color: var(--green-900); cursor: pointer; }
.story-send .icon { width: 18px; height: 18px; }
.story-like { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border: 0; background: none; color: #fff; cursor: pointer; }
.story-like .icon { width: 28px; height: 28px; transition: transform .15s var(--ease); }
.story-like[aria-pressed="true"] { color: var(--coral); }
.story-like[aria-pressed="true"] .icon { fill: currentColor; }
.story-like.pop .icon { animation: heart-pop .3s var(--ease); }
@keyframes heart-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.story-toast { position: absolute; z-index: 4; left: 50%; bottom: 90px; translate: -50% 0; margin: 0; padding: 8px 14px; border-radius: 99px; background: rgb(0 0 0 / .7); color: #fff; font-size: .9rem; animation: pop .14s var(--ease); }
button.story-views { border: 0; background: rgb(0 0 0 / .35); color: #fff; padding: 8px 12px; border-radius: 99px; cursor: pointer; font: inherit; font-size: .85rem; }
.story-likes { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; color: var(--coral); }
.story-likes .icon { width: 15px; height: 15px; fill: currentColor; }
.story-likes i { font-style: normal; color: #fff; }
.viewers-sheet { width: min(520px, 100vw); max-width: 100vw; max-height: 70dvh; margin: auto auto 0; padding: 0; border: 0; border-radius: 20px 20px 0 0; background: var(--card); color: var(--ink); }
.viewers-sheet[open] { display: grid; grid-template-rows: auto 1fr; animation: sheet-up .2s var(--ease); }
.viewers-sheet::backdrop { background: rgb(0 0 0 / .5); }
.viewers-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.viewers-head strong { font: 800 1rem var(--font-display); }
.viewers-close { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; }
.viewers-list { list-style: none; margin: 0; padding: 6px 0 calc(10px + env(safe-area-inset-bottom)); overflow-y: auto; }
.viewer { display: flex; align-items: center; gap: 12px; padding: 10px 18px; color: inherit; text-decoration: none; }
.viewer:hover { background: var(--surface); }
.viewer > span:not(.avatar):not(.viewer-heart) { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.viewer small { color: var(--muted); }
.viewer-heart { color: var(--coral); font-size: 1.2rem; }
.viewers-empty { padding: 28px 18px; color: var(--muted); text-align: center; }

/* Resposta a story nas mensagens */
.bubble-story { display: block; font-size: .75rem; opacity: .8; margin-bottom: 6px; }
.bubble-story img { display: block; width: 72px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 8px; margin-top: 4px; }

/* Texto nas stories */
.cam-tools { display: flex; gap: 8px; }
.aa { font-weight: 700; font-size: 1rem; letter-spacing: -.02em; }
.aa.boxed { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; border: 2px solid currentColor; font-size: .8rem; }
[data-act="text-bg"][aria-pressed="true"] .aa.boxed { background: #fff; color: #111; border-color: #fff; }
.cam-texts { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cam-text { position: absolute; translate: -50% -50%; display: grid; justify-items: center; max-width: 86%; width: max-content; font-weight: 700; line-height: 1.3; text-align: center; white-space: pre; pointer-events: auto; cursor: grab; touch-action: none; user-select: none; text-shadow: 0 1px 6px rgb(0 0 0 / .35); animation: pop .14s var(--ease); }
.cam-text.dragging { cursor: grabbing; scale: 1.05; }
.cam-text.bg { text-shadow: none; }
.cam-text.bg span { background: var(--bg); padding: 0 .3em; border-radius: .25em; }
.text-editor { position: fixed; inset: 0; z-index: 20; display: grid; grid-template-rows: auto 1fr auto auto auto; gap: 12px; padding: calc(env(safe-area-inset-top) + 10px) 16px calc(env(safe-area-inset-bottom) + 16px); background: rgb(0 0 0 / .72); animation: fade .2s var(--ease); }
.text-editor[hidden] { display: none; }
.cam.texting .cam-top, .cam.texting .cam-bottom, .cam.texting .music-chip { visibility: hidden; }
.text-editor-top { display: flex; justify-content: space-between; align-items: center; }
.cam-pill.done { background: #fff; color: #111; font-weight: 600; }
.text-editor textarea { align-self: center; justify-self: center; width: min(86vw, 460px); min-height: 0; max-height: 50vh; border: 0; border-radius: .25em; padding: .1em .3em; background: transparent; font-weight: 700; line-height: 1.3; text-align: center; resize: none; box-shadow: none; field-sizing: content; }
.text-editor textarea:focus { box-shadow: none; }
.text-editor textarea::placeholder { color: rgb(255 255 255 / .5); }
.text-size { width: min(80vw, 360px); justify-self: center; min-height: 0; padding: 0; border: 0; background: none; accent-color: #fff; }
.text-colors { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .8); cursor: pointer; transition: transform .15s var(--ease); }
.swatch[aria-checked="true"] { transform: scale(1.2); border-color: #fff; box-shadow: 0 0 0 2px rgb(0 0 0 / .4); }

/* Vídeo nos momentos */
.cam-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam-clip.mirror { transform: scaleX(-1); }
.cam[data-kind="video"] .cam-edit { display: none !important; }
.cam[data-state="camera"] .cam-clip { display: none; }
.cam-hint { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; color: #fff; font-size: .8rem; opacity: .8; text-shadow: 0 1px 4px rgb(0 0 0 / .6); pointer-events: none; }
.cam-shutter { position: relative; }
.cam-shutter.recording { transform: scale(1.15); background: var(--coral); border-color: transparent; }
.cam-shutter.recording::after { content: ""; position: absolute; inset: -9px; border-radius: 50%;
  background: conic-gradient(var(--coral) calc(var(--p, 0) * 360deg), rgb(255 255 255 / .35) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); }

/* Estilos de letra e néon */
.text-fonts { display: flex; gap: 8px; overflow-x: auto; padding: 2px 4px; scrollbar-width: none; }
.text-fonts::-webkit-scrollbar { display: none; }
.font-chip { flex: none; padding: 8px 14px; border: 1.5px solid rgb(255 255 255 / .35); border-radius: 99px; background: rgb(0 0 0 / .3); color: #fff; cursor: pointer; white-space: nowrap; }
.font-chip[aria-checked="true"] { background: #fff; color: #111; border-color: #fff; }
.font-chip.neon[aria-checked="false"] { text-shadow: 0 0 6px #ff5c8a, 0 0 12px #ff5c8a; }
.cam-text.neon { color: #fff !important; text-shadow: 0 0 .06em #fff, 0 0 .25em var(--bg), 0 0 .55em var(--bg), 0 0 1em var(--bg); }
.text-editor textarea.neon { color: #fff !important; text-shadow: 0 0 .06em #fff, 0 0 .25em var(--glow), 0 0 .55em var(--glow), 0 0 1em var(--glow); }
.music-chip.dragging { cursor: grabbing; scale: 1.05; }
.switch-row { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; font-size: .9rem; cursor: pointer; }
.switch-row input { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--yellow); }

/* Escolher o trecho da música */
.music-sheet > [data-pane] { min-height: 0; overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.music-sheet > [data-pane][hidden] { display: none; }
[data-pane="trim"] { display: grid; grid-template-rows: none; gap: 14px; padding: 20px 18px 6px; }
.trim-track { display: flex; align-items: center; gap: 12px; }
.trim-track img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; }
.trim-track span { display: grid; min-width: 0; }
.trim-track strong, .trim-track small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trim-track small { color: var(--muted); }
.trim-label { margin: 0; font-size: .85rem; color: var(--muted); text-align: center; }
.trim-bar { position: relative; height: 64px; border-radius: 12px; background: var(--surface); touch-action: none; cursor: grab; user-select: none; overflow: hidden; }
.trim-wave { position: absolute; inset: 8px 10px; display: flex; align-items: center; gap: 2px; pointer-events: none; }
.trim-wave i { flex: 1; border-radius: 2px; background: var(--line-strong); }
.trim-window { position: absolute; top: 0; bottom: 0; border-radius: 12px; border: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); pointer-events: none; overflow: hidden; }
.trim-progress { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: color-mix(in srgb, var(--accent) 22%, transparent); }
.trim-time { margin: 0; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.trim-actions { justify-content: space-between; }

/* Música no visualizador de stories */
.story-music { position: absolute; z-index: 3; left: 50%; top: 82%; translate: -50% -50%; width: max-content; display: flex; align-items: center; gap: 10px; max-width: 86%; padding: 8px 12px 8px 8px; border-radius: 14px; background: rgb(255 255 255 / .92); color: #111; text-decoration: none; box-shadow: 0 6px 20px rgb(0 0 0 / .25); }
.story-music img { width: 40px; height: 40px; border-radius: 8px; flex: none; object-fit: cover; }
.story-music span { display: grid; min-width: 0; line-height: 1.25; }
.story-music strong, .story-music small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-music strong { font-size: .9rem; }
.story-music small { font-size: .75rem; color: #555; }
.story-sound { position: absolute; z-index: 3; right: 12px; top: 72px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgb(0 0 0 / .35); color: #fff; cursor: pointer; }
.story-sound .icon { width: 20px; height: 20px; }

/* ---------- mensagens ---------- */
.convo { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.convo-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.convo-top { display: flex; justify-content: space-between; gap: 10px; }
.convo-top strong { font-weight: 500; }
.convo-last { color: var(--muted); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convo.unread strong, .convo.unread .convo-last { color: var(--ink); font-weight: 600; }
.convo:hover .avatar { transform: scale(1.05); }
.convo .avatar { transition: transform .2s var(--ease); }
.badge.dot { animation: none; }

.chat { display: flex; flex-direction: column; height: calc(100dvh - 60px - 80px); min-height: 420px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.chat-head .icon-btn { font-size: 1.2rem; text-decoration: none; }
.chat-user { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.chat-user > span { display: grid; line-height: 1.3; }
.chat-user strong { font-weight: 600; }
.chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; background: var(--bg); }
.chat-empty { margin: auto; }
.bubble { align-self: flex-start; max-width: min(78%, 520px); padding: 8px 12px 6px; border-radius: 12px 12px 12px 2px; background: var(--card); border: 1px solid var(--line); animation: pop .14s var(--ease); }
.bubble span { white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble time { display: block; font-size: .68rem; color: var(--muted); text-align: right; margin-top: 2px; }
.bubble.mine { align-self: flex-end; background: var(--green-900); color: #fff; border-color: var(--green-900); border-radius: 12px 12px 2px 12px; }
.bubble.mine time { color: var(--yellow); opacity: .85; }
.chat-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px; border-top: 1px solid var(--line); }
.chat-form textarea { resize: none; min-height: 44px; max-height: 140px; border-radius: 22px; padding: 11px 16px; }
.chat-form .btn { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; flex: none; }
@media (max-width: 640px) { .chat { height: calc(100dvh - 60px); min-height: 0; border-radius: 0; border: 0; margin: -40px -20px -64px; } }

/* ---------- eventos privados ---------- */
.private { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; font-size: .75rem; font-weight: 500; color: var(--muted); }
.private .icon { width: 12px; height: 12px; }
fieldset.vis { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; justify-items: stretch; }
.radio-card { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: 10px !important; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--card); cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease); }
.radio-card input { width: 18px; min-height: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.radio-card > span { display: grid; gap: 2px; }
.radio-card strong { font-weight: 500; color: var(--ink); }
.radio-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.invites { display: grid; gap: 8px; margin-top: 4px; }
.invite-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.invite { display: flex !important; grid-template-columns: none; align-items: center; gap: 10px !important; padding: 8px 12px; border-bottom: 1px solid var(--line); cursor: pointer; font-weight: 400 !important; }
.invite:last-child { border-bottom: 0; }
.invite input { width: 18px; min-height: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex: none; }
.invite .avatar { width: 32px; height: 32px; font-size: .7rem; border: 0; }
.invite > span { display: grid; color: var(--ink); }

/* ---------- coluna lateral de eventos ---------- */
.feed-side { margin-top: 40px; display: grid; gap: 28px; align-content: start; }
.feed-side h2 { margin-top: 0; }
.side-card { display: grid; gap: 4px; }
.suggest { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; }
.suggest-user { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: inherit; }
.suggest-user > span { display: grid; min-width: 0; line-height: 1.3; }
.suggest-user strong { font-weight: 600; }
.suggest-user .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest form { margin: 0; flex: none; }
.side-link { margin-top: 6px; font-weight: 600; font-size: .9rem; color: var(--accent-text); text-decoration: none; }
.side-link:hover { text-decoration: underline; }

/* ---------- mensagens em dois painéis ---------- */
.dm-empty { display: none; }
.dm.in-chat .dm-list { display: none; }

/* ---------- computador ---------- */
@media (min-width: 1024px) {
  .wrap { max-width: 1160px; padding: 0 40px; }
  body:has(.dock) .wrap { padding-left: 120px; }
  body:has(.dock) main.wrap { padding-bottom: 64px; }

  /* Ilha vertical à esquerda */
  .dock { left: 20px; right: auto; top: 50%; bottom: auto; translate: 0 -50%; margin: 0; flex-direction: column; gap: 4px; padding: 8px; }
  .dock a { height: 48px; width: 48px; min-width: 0; padding: 0; }
  .dock a.on { padding: 0; }
  .dock-label { display: none; }
  .dock a.create { margin: 4px 0; }
  .dock .badge { top: -6px; right: -8px; }
  /* Nome do item ao passar o rato */
  .dock a::after {
    content: attr(data-label); position: absolute; left: calc(100% + 14px); top: 50%; translate: -6px -50%;
    padding: 6px 10px; border-radius: 8px; background: var(--black); color: #fff; font: 700 .8rem var(--font-display);
    white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s, translate .15s var(--ease);
  }
  .dock a:hover::after, .dock a:focus-visible::after { opacity: 1; translate: 0 -50%; }

  /* Eventos: lista + coluna lateral */
  .feed { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
  .feed-side { margin-top: 0; position: sticky; top: 24px; padding: 22px; background: var(--surface); }
  .pagehead { margin-bottom: 32px; }

  /* Pessoas: mais colunas */
  .grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 32px; }

  /* Mensagens: lista à esquerda, conversa à direita */
  .dm { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: calc(100dvh - 60px - 120px); min-height: 480px; border: 1px solid var(--line); background: var(--card); }
  .dm .dm-list, .dm.in-chat .dm-list { display: block; overflow-y: auto; border-right: 1px solid var(--line); }
  .dm .convo-list { border-top: 0; }
  .dm .convo { padding: 12px 16px; }
  .dm .convo.active { background: var(--surface); }
  .dm .convo:hover { background: var(--surface); }
  .dm .empty { border: 0; padding: 40px 20px; }
  .dm .chat { height: auto; min-height: 0; border: 0; border-radius: 0; }
  .dm .chat-head .icon-btn { display: none; }
  .dm-empty { display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; padding: 40px; }
  .dm-empty-icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--yellow); color: var(--green-900); margin-bottom: 8px; }
  .dm-empty-icon .icon { width: 32px; height: 32px; }
  .dm-empty strong { font: 900 1.4rem var(--font-display); }

  /* Página inicial mais larga */
  .hero { padding: 72px 64px 56px; }
  .features div { min-height: 220px; padding: 32px; }
}
@media (max-width: 1023px) { .dock.in-chat { display: none; } }

/* ---------- identidade ULOO (clube exclusivo) ---------- */
/* Selo de membro verificado */
.seal { display: inline-grid; width: .95em; height: .95em; vertical-align: -0.08em; color: var(--yellow); --seal-check: var(--green-900); }
.seal svg { width: 100%; height: 100%; }
h1 .seal { width: .6em; height: .6em; vertical-align: .05em; }

/* Momentos: cartões verticais com a miniatura, em vez de círculos */
.moments { margin: 0 0 28px; }
.moments-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.moments-head h2 { margin: 0; }
.moments-bar { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; }
.moments-bar::-webkit-scrollbar { display: none; }
.moment { position: relative; flex: none; width: 92px; aspect-ratio: 9 / 15; border-radius: 14px; overflow: hidden; background: var(--surface); color: #fff; text-decoration: none; display: flex; flex-direction: column; justify-content: flex-end; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.moment img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.moment::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgb(0 0 0 / .65)); }
.moment.new { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--yellow); }
.moment.seen img { filter: saturate(.4) brightness(.8); }
.moment:hover { transform: translateY(-4px) rotate(-1.5deg); }
.moment-who { position: relative; z-index: 1; display: grid; justify-items: start; gap: 4px; padding: 8px; }
.moment-who .avatar { width: 26px; height: 26px; font-size: .6rem; border: 2px solid #fff; }
.moment-name { font: 800 .78rem var(--font-display); text-shadow: 0 1px 4px rgb(0 0 0 / .5); }
.moment-new { position: absolute; z-index: 1; top: 7px; left: 7px; padding: 2px 6px; border-radius: 4px; background: var(--yellow); color: var(--green-900); font: 900 .6rem var(--font-display); text-transform: uppercase; letter-spacing: .06em; }
.moment.add { justify-content: center; align-items: center; gap: 8px; background: transparent; border: 2px dashed var(--line-strong); color: var(--ink-2); }
.moment.add::after { display: none; }
.moment.add .moment-name { text-shadow: none; text-align: center; padding: 0 6px; }
.moment-plus { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--yellow); color: var(--green-900); }
.moments-empty { align-self: center; margin: 0 0 0 8px; max-width: 220px; }

/* Eventos como bilhetes: talão colorido, picotado e recortes; carimbo "CONFIRMADO" ao dizer "Vou" */
.list { border-top: 0; }
.tabs + .list { padding-top: 18px; }
.event { position: relative; grid-template-columns: 80px 1fr; gap: 0; padding: 0; margin: 0 0 18px; border: 0; border-radius: 14px; background: var(--card); box-shadow: 0 10px 26px rgb(0 0 0 / .2); }
/* Meias-luas recortadas onde o bilhete se rasgaria */
.event::before, .event::after { content: ""; position: absolute; z-index: 2; left: 80px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--bg); }
.event::before { top: -11px; }
.event::after { bottom: -11px; }
.date { position: relative; align-self: start; padding: 14px 12px 16px; border-radius: 14px 0 12px 0; }
/* Picotado: furinhos da cor do fundo ao longo do talão */
.event-body { border-left: 2px dashed var(--line-strong); }
.event-body { padding: 18px 20px 18px 24px; }
.event-detail { margin-bottom: 8px; }

.stamp {
  position: absolute; z-index: 3; right: 22px; top: 50%; translate: 0 -50%;
  padding: 6px 14px; border: 3px solid var(--coral); border-radius: 6px; outline: 1.5px solid var(--coral); outline-offset: 3px;
  color: var(--coral); font: 900 1rem var(--font-display); text-transform: uppercase; letter-spacing: .16em;
  rotate: -14deg; opacity: .88; pointer-events: none;
}
/* O carimbo cai sobre o bilhete acabado de confirmar, e o bilhete abana com o impacto */
article.event:target .stamp { animation: stamp-drop .42s cubic-bezier(.2, .9, .3, 1) both .05s; }
article.event:target { animation: ticket-thud .28s var(--ease) .32s; border-radius: 14px; }
@keyframes stamp-drop { 0% { opacity: 0; scale: 3.2; rotate: 8deg; } 55% { opacity: .95; scale: .9; rotate: -17deg; } 78% { scale: 1.05; } 100% { scale: 1; rotate: -14deg; } }
@keyframes ticket-thud { 0%, 100% { transform: none; } 30% { transform: translateY(4px) scale(.99); } 65% { transform: translateY(-1px); } }
@media (max-width: 480px) {
  .event { grid-template-columns: 64px 1fr; }
  .event::before, .event::after { left: 64px; }
  .date { padding: 12px 9px 14px; }
  .event-body { padding: 14px 14px 14px 18px; }
  .stamp { right: 10px; font-size: .78rem; padding: 4px 10px; }
}

/* Cartão de membro */
.profile-card { margin: 28px 0 8px; }
.member-card {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 30%;
  position: relative; overflow: hidden; width: min(100%, 380px); aspect-ratio: 1.586; padding: 20px 22px;
  display: grid; grid-template-rows: auto 1fr auto auto; border-radius: 18px;
  background: var(--tone); color: var(--green-900);
  box-shadow: 0 18px 40px rgb(0 0 0 / .35), inset 0 0 0 1px rgb(255 255 255 / .25);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .3s var(--ease);
  user-select: none;
}
.member-card.tilting { transition: transform .08s linear; }
.member-card::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgb(2 42 31 / .05) 0 2px, transparent 2px 9px); pointer-events: none; }
.mc-shine { position: absolute; inset: 0; background: radial-gradient(circle at var(--mx) var(--my), rgb(255 255 255 / .55), transparent 45%); mix-blend-mode: soft-light; pointer-events: none; }
.mc-top { display: flex; justify-content: space-between; align-items: center; }
.mc-brand { display: inline-flex; align-items: center; gap: 6px; font: 900 1.1rem var(--font-display); letter-spacing: -0.03em; }
.mc-brand i { width: 9px; height: 9px; border-radius: 50%; background: var(--green-900); }
.mc-kind { font: 800 .62rem var(--font-display); text-transform: uppercase; letter-spacing: .14em; opacity: .75; }
.mc-name { align-self: end; font: 900 1.5rem/1.05 var(--font-display); letter-spacing: -0.02em; }
.member-card .seal { color: var(--green-900); --seal-check: var(--tone); }
.mc-course { font-size: .85rem; opacity: .85; margin: 4px 0 14px; }
.mc-bottom { display: flex; gap: 22px; padding-top: 12px; border-top: 1.5px dashed rgb(2 42 31 / .35); }
.mc-bottom span { display: grid; gap: 1px; }
.mc-bottom small { font: 800 .55rem var(--font-display); text-transform: uppercase; letter-spacing: .12em; opacity: .7; }
.mc-bottom b { font: 900 .95rem var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.reveal-card { margin: 8px 0 22px; animation: card-flip .55s cubic-bezier(.2, .9, .3, 1.1) both .05s; }
@keyframes card-flip { 0% { opacity: 0; transform: perspective(900px) rotateY(-70deg) translateY(16px) scale(.9); } 100% { opacity: 1; } }
.welcome-no { font: 800 1.05rem var(--font-display); margin: 4px 0 4px; }
.welcome-no b { color: var(--yellow); }

/* Página inicial: números e faixa das escolas */
.eyebrow .icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.hero-stats { display: flex; gap: 36px; flex-wrap: wrap; margin-top: 40px; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / .15); }
.hero-stats div { display: grid; }
.hero-stats b { font: 900 2.4rem/1 var(--font-display); color: var(--yellow); font-variant-numeric: tabular-nums; }
.hero-stats span { font-size: .85rem; color: rgb(255 255 255 / .75); }
.marquee { overflow: hidden; background: var(--yellow); color: var(--green-900); padding: 12px 0; }
.marquee-track { display: flex; align-items: center; gap: 22px; width: max-content; animation: marquee 28s linear infinite; }
.marquee span { font: 900 1rem var(--font-display); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.marquee i { width: 8px; height: 8px; border-radius: 50%; background: var(--green-900); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 640px) { .marquee { margin: 0 -20px; } .hero-stats { gap: 24px; } .hero-stats b { font-size: 2rem; } }

/* Brilho a passar no botão principal */
.btn { position: relative; overflow: hidden; }
.btn.shine::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .55), transparent); transform: skewX(-20deg); animation: shine 3.2s var(--ease) infinite 1.2s; }
@keyframes shine { 0% { left: -60%; } 35%, 100% { left: 130%; } }

/* Fogo nos momentos: pequeno estouro */
.flame-burst { position: absolute; z-index: 5; pointer-events: none; font-size: 22px; animation: burst .6s var(--ease) forwards; }
@keyframes burst { 0% { opacity: 1; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(var(--bx), var(--by)) scale(1.2) rotate(var(--br)); } }
.story-like[aria-pressed="true"] { color: #ff8a3d; }

/* Aparecer com o scroll */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .32s var(--ease) var(--d, 0ms), transform .32s var(--ease) var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- bocas e comentários ---------- */
.back-link { margin: -12px 0 18px; }
.back-link a { text-decoration: none; }
.composer { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 8px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.composer:focus-within { border-color: var(--yellow); }
.composer-main { flex: 1; min-width: 0; display: grid; gap: 10px; }
.composer textarea { border: 0; background: none; padding: 6px 0; min-height: 52px; font-size: 1.1rem; resize: none; box-shadow: none; }
.composer textarea:focus { box-shadow: none; }
.composer-foot { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.composer-count { font-variant-numeric: tabular-nums; }
.composer-count.warn { color: var(--coral); font-weight: 700; }

.boca { display: flex; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.boca-avatar { flex: none; text-decoration: none; }
.boca-main { flex: 1; min-width: 0; }
.boca-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.boca-head a { text-decoration: none; }
.boca-head strong { font-weight: 700; }
.boca-text { display: block; margin: 6px 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); text-decoration: none; font-size: 1.05rem; line-height: 1.45; }
.boca.big .boca-text { font-size: 1.4rem; line-height: 1.35; font-weight: 500; }
.boca-actions { display: flex; align-items: center; gap: 18px; }
.boca-actions form { margin: 0; }
.fogo, .boca-link { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px 0 6px; border: 0; border-radius: 99px; background: none; color: var(--muted); font: 700 .9rem var(--font); text-decoration: none; cursor: pointer; transition: color .15s, background .15s; }
.fogo:hover, .boca-link:hover { background: var(--surface); color: var(--ink); }
.fogo .icon, .boca-link .icon { width: 18px; height: 18px; }
.fogo.on { color: #ff8a3d; }
.fogo.on .icon { fill: currentColor; }
.fogo.pop .icon { animation: heart-pop .3s var(--ease); }
.mini-burst { position: absolute; left: 6px; top: 4px; font-size: 14px; pointer-events: none; animation: burst .5s var(--ease) forwards; }
.boca-del { margin-left: auto !important; }
.stack .boca-link { margin: 0 0 0 12px; }
.event-title { color: inherit; text-decoration: none; }
.event-title:hover { text-decoration: underline; text-decoration-color: var(--yellow); }
.event-detail h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin: 4px 0 8px; }

.comments { margin-top: 32px; }
.comment { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); animation: rise .22s var(--ease) both; }
.comment > a { flex: none; text-decoration: none; }
.comment .avatar { width: 34px; height: 34px; font-size: .7rem; }
.comment-body { flex: 1; min-width: 0; }
.comment-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: .9rem; }
.comment-head a { text-decoration: none; }
.comment-head .inline { margin-left: auto; }
.comment-body p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-form { display: flex; gap: 10px; align-items: flex-end; margin-top: 16px; }
.comment-form .avatar { width: 34px; height: 34px; font-size: .7rem; flex: none; }
.comment-form textarea { flex: 1; min-height: 44px; resize: none; border-radius: 22px; padding: 11px 16px; }

/* ---------- formatos de foto e fotos nas bocas ---------- */
.cropper-aspects { display: flex; gap: 6px; margin: 0 0 14px; }
.cropper-aspects button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; border: 1px solid var(--line-strong); border-radius: 99px; background: none; color: var(--muted); font: 700 .8rem var(--font-display); cursor: pointer; }
.cropper-aspects button i { display: inline-block; height: 14px; border: 2px solid currentColor; border-radius: 3px; }
.cropper-aspects button[aria-checked="true"] { background: var(--yellow); border-color: var(--yellow); color: var(--green-900); }
.boca-photo { display: block; width: auto; max-width: min(100%, 520px); max-height: 560px; height: auto; border-radius: 14px; border: 1px solid var(--line); margin: 4px 0 10px; background: var(--surface); }
.boca-photo-link { display: inline-block; }
.composer-photo { position: relative; display: inline-block; width: fit-content; }
.composer-photo .boca-photo { max-height: 320px; margin: 0; }
.composer-photo-del { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgb(0 0 0 / .6); color: #fff; cursor: pointer; }
.composer-img { margin-right: auto; color: var(--yellow); }
.composer-img .icon { width: 22px; height: 22px; }

/* ---------- equipa do ULOO (CEO / COO) ---------- */
.role-badge {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; vertical-align: .12em;
  padding: 2px 7px 2px 5px; border-radius: 99px; background: linear-gradient(135deg, #f7d774, #e2a93b 55%, #f7e39a); color: #3a2600;
  font: 900 .62rem/1.4 var(--font-display); letter-spacing: .08em; box-shadow: 0 0 0 1px rgb(255 255 255 / .25) inset, 0 2px 8px rgb(226 169 59 / .35);
}
.role-badge svg { width: 11px; height: 11px; }
.role-badge::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .7) 50%, transparent 70%); transform: translateX(-120%); animation: role-shine 3.5s ease-in-out infinite 1s; }
@keyframes role-shine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
h1 .role-badge { font-size: .3em; padding: 3px 10px 3px 8px; vertical-align: .55em; }
h1 .role-badge svg { width: 1.2em; height: 1.2em; }

/* Cartão de fundador: preto com dourado */

/* ---------- mostrar password ---------- */
.pw-field { position: relative; display: block; }
.pw-field input { padding-right: 48px; }
.pw-toggle { position: absolute; top: 50%; right: 4px; translate: 0 -50%; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted); cursor: pointer; }
.pw-toggle:hover, .pw-toggle[aria-pressed="true"] { color: var(--yellow); }
.pw-toggle .icon { width: 20px; height: 20px; }

/* ---------- GIFs ---------- */
.gif-btn { display: inline-grid; place-items: center; min-width: 40px; height: 32px; padding: 0 8px; border: 2px solid var(--yellow); border-radius: 8px; background: none; color: var(--yellow); font: 900 .72rem var(--font-display); letter-spacing: .06em; cursor: pointer; }
.gif-btn:hover { background: var(--yellow); color: var(--green-900); }
.composer-foot .gif-btn { margin-right: auto; }
.composer-img { margin-right: 6px; }
.gif-sheet { width: min(560px, 100vw); max-width: 100vw; max-height: 78dvh; margin: auto auto 0; padding: 0; border: 0; border-radius: 20px 20px 0 0; background: var(--card); color: var(--ink); }
.gif-sheet[open] { display: grid; grid-template-rows: auto 1fr auto; animation: sheet-up .2s var(--ease); }
.gif-sheet::backdrop { background: rgb(0 0 0 / .5); }
.gif-head { display: flex; gap: 8px; padding: 14px; border-bottom: 1px solid var(--line); }
.gif-head input { border-radius: 99px; }
.gif-close { width: 44px; flex: none; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; }
.gif-grid { overflow-y: auto; padding: 10px; columns: 2 140px; column-gap: 8px; min-height: 240px; }
.gif-item { display: block; width: 100%; margin: 0 0 8px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--surface); cursor: pointer; break-inside: avoid; }
.gif-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gif-item:hover { outline: 3px solid var(--yellow); }
.gif-hint { color: var(--muted); text-align: center; padding: 30px 10px; }
.gif-credit { margin: 0; padding: 8px 14px 14px; font-size: .72rem; color: var(--muted); text-align: center; }
.comment-media { display: block; max-width: min(100%, 260px); max-height: 260px; margin-top: 6px; border-radius: 12px; border: 1px solid var(--line); }
.comment-form { display: grid !important; gap: 8px; }
.comment-row { display: flex; gap: 8px; align-items: flex-end; }
.comment-tool { flex: none; color: var(--yellow); }
/* No telemóvel a caixa de texto fica sozinha na primeira linha e os botões passam para baixo, à direita. */
@media (max-width: 600px) {
  .comment-row { flex-wrap: wrap; justify-content: flex-end; }
  .comment-row textarea { flex: 1 1 calc(100% - 44px); min-width: 0; }
}
.comment-preview { position: relative; width: fit-content; margin-left: 44px; }
.comment-preview img { display: block; max-height: 180px; max-width: 220px; border-radius: 12px; }
.media-del { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgb(0 0 0 / .6); color: #fff; cursor: pointer; }

/* ---------- animações ---------- */
/* Passagem suave entre páginas (Chrome, Edge e Safari recentes; nos outros a página muda normalmente). */
@view-transition { navigation: auto; }
.top { view-transition-name: header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .15s; }
::view-transition-group(dock) { animation: none; }
::view-transition-old(dock) { display: none; }
::view-transition-new(dock) { animation: none; }
::view-transition-group(nav-pill), ::view-transition-group(tab-line) { animation-duration: .24s; animation-timing-function: var(--ease); }
::view-transition-group(*) { animation-timing-function: var(--ease); }

@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.97); } }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
@keyframes draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes flash { 0%, 30% { background: var(--surface); box-shadow: 0 0 0 12px var(--surface); } 100% { background: transparent; box-shadow: 0 0 0 12px transparent; } }

/* Título da página inicial: palavras a passar de desfocadas a nítidas (efeito "BlurText") */
@keyframes blur-in {
  0% { opacity: 0; filter: blur(6px); transform: translateY(-8px); }
  60% { opacity: .8; filter: blur(1px); transform: translateY(1px); }
  100% { opacity: 1; filter: blur(0); transform: none; }
}
.hero > .blur-text { animation: none; }
.blur-text span span { display: inline-block; animation: blur-in .45s var(--ease) both; animation-delay: calc(var(--i) * 45ms); }

/* Listas entram em cascata */
.list > *, .grid > *, .hero > *, .features > div, .profile, .two > section, .panel > * { animation: rise .26s var(--ease) both; }
.list > :nth-child(2), .grid > :nth-child(2), .hero > :nth-child(2), .features > :nth-child(2), .panel > :nth-child(2) { animation-delay: .03s; }
.list > :nth-child(3), .grid > :nth-child(3), .hero > :nth-child(3), .features > :nth-child(3), .panel > :nth-child(3), .two > :nth-child(2) { animation-delay: .06s; }
.list > :nth-child(4), .grid > :nth-child(4), .hero > :nth-child(4), .panel > :nth-child(4) { animation-delay: .09s; }
.list > :nth-child(5), .grid > :nth-child(5) { animation-delay: .12s; }
.list > :nth-child(n+6), .grid > :nth-child(n+6) { animation-delay: .14s; }
.hero > *, .features > div { animation-duration: .36s; }

.alert, .notice { animation: drop .2s var(--ease) both; }
.badge { animation: pop .2s .05s var(--ease) both; }

/* Detalhes ao passar o rato / tocar */
.person .avatar, .stack a .avatar { transition: transform .2s var(--ease); }
.person:hover .avatar { transform: scale(1.06); }
.stack a:hover { position: relative; z-index: 1; }
.stack a:hover .avatar { transform: translateY(-3px); }
.event .date { transition: border-color .2s var(--ease); }
.event:hover .date { border-color: var(--line-strong); }
.event-photo { transition: transform .3s var(--ease); }

/* Depois de carregar em "Vou": o evento acende e o visto desenha-se */
.event:target { animation: flash .8s var(--ease); border-radius: 4px; }
.event:target .btn.ghost .icon path { stroke-dasharray: 24; animation: draw .3s .1s var(--ease) both; }

/* Janela de ajustar foto */
.cropper[open] { animation: pop .16s var(--ease); }
.cropper[open]::backdrop { animation: fade .16s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after, ::view-transition-group(*) { animation: none !important; transition: none !important; }
}

/* ---------- notificações (sininho no canto superior direito) ---------- */
.top-inner .bell { position: relative; display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; border-radius: 50%; color: var(--on-header); text-decoration: none; transition: background .15s var(--ease), transform .15s var(--ease); }
.top-inner .bell:hover, .top-inner .bell.on { background: rgb(255 255 255 / .1); }
.top-inner .bell:active { transform: scale(.92); }
.bell .icon { width: 22px; height: 22px; }
.bell .badge { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; font-size: .62rem; padding: 0 4px; border: 2px solid var(--header); background: var(--coral); color: #fff; animation: pop .3s var(--ease); }
.bell:has(.badge) .icon { animation: ring .8s var(--ease) .15s 1; transform-origin: 50% 10%; }
@keyframes ring { 0%, 100% { rotate: 0deg; } 15% { rotate: 14deg; } 30% { rotate: -12deg; } 45% { rotate: 8deg; } 60% { rotate: -5deg; } 75% { rotate: 2deg; } }
@media (prefers-reduced-motion: reduce) { .bell:has(.badge) .icon { animation: none; } }
.notif { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.notif:hover .notif-text strong { text-decoration: underline; }
.notif-av { position: relative; flex: none; }
.notif-kind { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--bg); background: var(--mint); color: var(--green-900); }
.notif-kind .icon { width: 11px; height: 11px; stroke-width: 2.6; }
.notif-kind.k-boca, .notif-kind.k-story { background: var(--coral); color: #fff; }
.notif-kind.k-event { background: var(--yellow); }
.notif-kind.k-comment { background: var(--lime); }
.notif-text { flex: 1; min-width: 0; line-height: 1.4; overflow-wrap: anywhere; }
.notif-text strong { font-weight: 700; }
.notif.unseen .notif-text { color: var(--ink); font-weight: 500; }
.notif-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); }

/* ---------- grupos ---------- */
.group-avatar { --av: var(--yellow); }
.group-avatar .icon { width: 20px; height: 20px; }
button.chat-user { border: 0; background: none; padding: 0; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
button.chat-user .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.bubble-name { display: block; font-size: .72rem; font-weight: 700; color: var(--yellow); margin-bottom: 2px; }
.group-sheet { width: min(480px, 100vw); max-width: 100vw; max-height: 85dvh; margin: auto auto 0; padding: 0 16px 20px; border: 0; border-radius: 20px 20px 0 0; background: var(--card); color: var(--ink); overflow-y: auto; }
.group-sheet[open] { animation: sheet-up .2s var(--ease); }
.group-sheet::backdrop { background: rgb(0 0 0 / .5); }
@media (min-width: 640px) { .group-sheet { margin: auto; border-radius: 20px; } }
.sheet-head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 14px 0 10px; background: var(--card); z-index: 1; }
.sheet-head strong { font: 900 1.2rem var(--font-display); }
.group-name { flex-wrap: nowrap; gap: 8px; }
.group-name input { flex: 1; min-width: 0; }
.group-count { margin: 18px 0 4px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.group-members { display: grid; gap: 10px; padding: 6px 0 14px; }
.group-add { margin: 4px 0 12px; }
.group-add summary { list-style: none; cursor: pointer; }
.group-add summary::-webkit-details-marker { display: none; }
.group-add[open] summary { margin-bottom: 10px; }
.group-leave { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.notif-day { margin: 22px 0 2px; font: 800 .75rem var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.notif-list > .notif-day:first-child { margin-top: 4px; }
.notif-list { border-top: 0; }
.form .forgot { justify-self: end; margin-top: -8px; color: var(--muted); }
.form .forgot:hover { color: var(--ink); }

/* ---------- puxar para atualizar (modo app) ---------- */
.ptr {
  --pull: 0px; --turn: 0deg;
  position: fixed; z-index: 60; left: 50%; top: calc(env(safe-area-inset-top) - 44px);
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--yellow); color: var(--green-900); box-shadow: 0 6px 18px rgb(0 0 0 / .35);
  transform: translate(-50%, var(--pull)) rotate(var(--turn)); opacity: 0;
  transition: transform .25s var(--ease), opacity .2s; pointer-events: none;
}
.ptr svg { width: 20px; height: 20px; transition: transform .2s var(--ease); }
.ptr.pulling { transition: none; }
.ptr:not(.ready) svg { opacity: .6; }
.ptr.ready svg { transform: scale(1.1); }
.ptr.loading { animation: ptr-spin .7s linear infinite; }
@keyframes ptr-spin { to { transform: translate(-50%, var(--pull)) rotate(360deg); } }

/* ---------- escolher foto de perfil tocando no círculo ---------- */
.avatar-pick { position: relative; display: inline-grid !important; flex: none; width: 88px; height: 88px; border-radius: 50%; cursor: pointer; }
.avatar-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.avatar-pick .avatar { grid-area: 1 / 1; width: 88px; height: 88px; object-fit: cover; transition: filter .15s var(--ease), transform .15s var(--ease); }
.avatar-pick .avatar-ph { grid-area: 1 / 1; display: grid; }
.avatar-pick img:not([hidden]) + .avatar-ph { display: none; }
.avatar-pick:hover .avatar { filter: brightness(.85); }
.avatar-pick:active .avatar { transform: scale(.96); }
.avatar-pick:has(input:focus-visible) { outline: 2px solid var(--yellow); outline-offset: 3px; }
.avatar-pick-badge { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); color: var(--green-900); border: 3px solid var(--bg); }
.avatar-pick-badge .icon { width: 15px; height: 15px; }
.avatar-pick-tip { margin: 0 0 6px; font-weight: 500; color: var(--ink); }
.avatar-link { display: inline-block; border-radius: 50%; }

/* ---------- padrões (TESTE) — para tirar, apaga este bloco ---------- */
:root { --pattern: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='280'%20height='280'%20viewBox='0%200%20280%20280'%20fill='none'%20stroke-width='9'%3E%3Cg%20opacity='.09'%3E%20%3Cpath%20d='M28%2028v22a14%2014%200%200%200%2028%200V28'%20stroke='%23c9dd9d'/%3E%20%3Cpath%20d='M146%2024v36h28'%20stroke='%23acd9d6'/%3E%20%3Ccircle%20cx='234'%20cy='50'%20r='13'%20stroke='%23f1dadb'/%3E%20%3Ccircle%20cx='104'%20cy='112'%20r='8'%20fill='%23f7eb7d'%20stroke='none'/%3E%20%3Ccircle%20cx='52'%20cy='176'%20r='13'%20stroke='%23eb665b'/%3E%20%3Cpath%20d='M154%20178v-20a14%2014%200%200%201%2028%200v20'%20stroke='%23f7eb7d'/%3E%20%3Cpath%20d='M232%20150h30v34'%20stroke='%23c9dd9d'/%3E%20%3Ccircle%20cx='118'%20cy='240'%20r='6'%20fill='%23acd9d6'%20stroke='none'/%3E%20%3Cpath%20d='M24%20250h26'%20stroke='%23f1dadb'/%3E%20%3Ccircle%20cx='214'%20cy='246'%20r='8'%20fill='%23eb665b'%20stroke='none'/%3E%20%3C/g%3E%3C/svg%3E"); }
:root[data-theme="claro"] { --pattern: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='280'%20height='280'%20viewBox='0%200%20280%20280'%20fill='none'%20stroke-width='9'%3E%3Cg%20opacity='.06'%3E%20%3Cpath%20d='M28%2028v22a14%2014%200%200%200%2028%200V28'%20stroke='%23022a1f'/%3E%20%3Cpath%20d='M146%2024v36h28'%20stroke='%23022a1f'/%3E%20%3Ccircle%20cx='234'%20cy='50'%20r='13'%20stroke='%23022a1f'/%3E%20%3Ccircle%20cx='104'%20cy='112'%20r='8'%20fill='%23022a1f'%20stroke='none'/%3E%20%3Ccircle%20cx='52'%20cy='176'%20r='13'%20stroke='%23022a1f'/%3E%20%3Cpath%20d='M154%20178v-20a14%2014%200%200%201%2028%200v20'%20stroke='%23022a1f'/%3E%20%3Cpath%20d='M232%20150h30v34'%20stroke='%23022a1f'/%3E%20%3Ccircle%20cx='118'%20cy='240'%20r='6'%20fill='%23022a1f'%20stroke='none'/%3E%20%3Cpath%20d='M24%20250h26'%20stroke='%23022a1f'/%3E%20%3Ccircle%20cx='214'%20cy='246'%20r='8'%20fill='%23022a1f'%20stroke='none'/%3E%20%3C/g%3E%3C/svg%3E"); }
/* Fundo com formas soltas nas cores da página inicial, muito suaves para não tirar leitura. */
body {
  background-color: var(--bg);
  /* Formas das letras do logótipo (U, L, O) e o ponto amarelo, nas cores da ULO. */
  background-image: var(--pattern);
  background-size: 280px 280px;
}
/* Faixa de cores por baixo do menu de cima e por cima do rodapé. */
.top, .foot { position: relative; }
.top::after, .foot::before {
  content: ""; position: absolute; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--yellow) 0 20%, var(--lime) 20% 40%, var(--mint) 40% 60%, var(--pink) 60% 80%, var(--coral) 80% 100%);
}
.top::after { bottom: 0; }
.foot::before { top: 0; }

/* ---------- Face ID / impressão digital ---------- */
.bio-login { display: grid; gap: 12px; margin: -8px 0 24px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .8rem; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.bio-error { margin: 0; color: var(--danger); }
.bio-offer { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 16px; margin-bottom: 20px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--card); animation: drop .2s var(--ease) both; }
.bio-offer[hidden] { display: none; }
.bio-offer-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--yellow); color: var(--green-900); font-weight: 900; flex: none; }
.bio-offer-icon .icon { width: 22px; height: 22px; }
.bio-offer-text { flex: 1; min-width: 160px; display: grid; line-height: 1.35; }
.bio-offer .bio-error { flex-basis: 100%; }
.bio-settings { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.bio-settings h2 { font-size: 1.2rem; }
.bio-device { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.bio-device > .icon { width: 22px; height: 22px; color: var(--yellow); flex: none; }
.bio-device .grow { flex: 1; display: grid; line-height: 1.35; }
.bio-device form { margin: 0; }
.bio-settings [data-bio] { margin-top: 14px; display: grid; gap: 8px; justify-items: start; }
.bio-settings [data-bio][hidden] { display: none; }
.bio-offer { position: relative; padding-right: 44px; }
.bio-offer [data-bio-dismiss] { position: absolute; top: 4px; right: 4px; }

/* ---------- cartão de estudante: verde da ULO com formas sólidas na cor da escola ---------- */
/* As cores não se misturam com o verde (misturadas ficavam cor de lama): são formas sólidas por cima. */
.member-card {
  background: linear-gradient(140deg, #0d5440, #03231a 75%);
  color: var(--ink);
  box-shadow: 0 18px 40px rgb(0 0 0 / .4), inset 0 0 0 1px rgb(255 255 255 / .12);
}
.member-card > div { position: relative; }
.member-card::before { background: repeating-linear-gradient(135deg, rgb(255 255 255 / .035) 0 2px, transparent 2px 9px); }
.mc-corner { position: absolute; right: -96px; bottom: -96px; width: 200px; height: 200px; border-radius: 50%; background: var(--tone); }
.mc-dot { position: absolute; right: 22px; bottom: 120px; width: 12px; height: 12px; border-radius: 50%; background: var(--tone); }
.mc-brand i { background: var(--tone); }
.mc-kind { color: var(--tone); opacity: 1; }
.mc-course { color: var(--ink-2); opacity: 1; }
.mc-bottom { border-top-color: rgb(255 255 255 / .22); margin-right: 96px; }
.mc-bottom small { color: var(--tone); opacity: 1; }
.member-card .seal { color: var(--tone); --seal-check: #03231a; }
.mc-shine { z-index: 1; background: radial-gradient(circle at var(--mx) var(--my), rgb(255 255 255 / .18), transparent 45%); mix-blend-mode: screen; }

/* Fundadores (ids 1 e 2): quase preto, com o círculo e o nome em holográfico (amarelo, menta, rosa). */
.member-card.founder {
  background: linear-gradient(140deg, #0b2f24, #010e0a 75%);
  box-shadow: 0 18px 40px rgb(0 0 0 / .5), inset 0 0 0 1px rgb(247 235 125 / .3);
}
.member-card.founder .mc-corner, .member-card.founder .mc-dot { background: conic-gradient(from 210deg, var(--yellow), var(--mint), var(--pink), var(--yellow)); }
.mc-name-text { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.member-card.founder .mc-name-text {
  background: linear-gradient(100deg, var(--yellow), var(--mint) 55%, var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- definições (roda dentada no menu flutuante) ---------- */
.dock a.settings.spin .dock-icon .icon { animation: gear-spin .5s var(--ease); }
@keyframes gear-spin { from { rotate: -120deg; } }
.settings-sheet { width: min(460px, 100vw); max-width: 100vw; max-height: 85dvh; margin: auto auto 0; padding: 0 16px calc(16px + env(safe-area-inset-bottom)); border: 0; border-radius: 22px 22px 0 0; background: var(--card); color: var(--ink); overflow-y: auto; }
.settings-sheet[open] { animation: sheet-up .2s var(--ease); }
.settings-sheet::backdrop { background: rgb(0 0 0 / .5); }
.settings-sheet .sheet-head strong { display: inline-flex; align-items: center; gap: 8px; }
.settings-sheet .sheet-head .icon { width: 20px; height: 20px; color: var(--yellow); }
@media (min-width: 1024px) { .settings-sheet { margin: auto auto auto 110px; border-radius: 22px; } }
.settings-list { display: grid; }
.settings-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.settings-row:hover .settings-icon { background: var(--yellow); color: var(--green-900); }
.settings-row > .icon { width: 18px; height: 18px; color: var(--muted); flex: none; }
.settings-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--surface); color: var(--yellow); flex: none; transition: background .15s var(--ease), color .15s var(--ease); }
.settings-icon .icon { width: 19px; height: 19px; }
.settings-text { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.settings-text .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-badge { background: var(--coral); color: #fff; animation: none; }
.settings-row-form { margin: 0; }
.danger-row { border-bottom: 0; }
.danger-row strong { color: var(--danger); }
.danger-row .settings-icon { color: var(--danger); }

/* ---------- temas (escolhidos nas Definições) ---------- */
:root[data-theme="claro"] {
  --bg: #f7f6ef;
  --card: #ffffff;
  --surface: #edede3;
  --ink: #022a1f;
  --ink-2: #1e3f35;
  --muted: #56685f;
  --line: #e1e3da;
  --line-strong: #c4c9bd;
  --accent: #022a1f;
  --accent-hover: #0b4232;
  --accent-text: #00704a;
  --accent-soft: #eaf3e2;
  --on-accent: #f7eb7d;
  --header: #022a1f;
  --pre: #b8402f;
  --danger: #b8402f;
  --danger-soft: #fbe6e3;
  --warn-ink: #6b5400;
  --warn-soft: #fbf4c4;
  --ok-ink: #00593a;
  --ok-soft: #dff3e8;
  color-scheme: only light;
}
:root[data-theme="preto"] {
  --bg: #000000;
  --card: #0e0f0e;
  --surface: #171917;
  --ink: #f5f5ef;
  --ink-2: #dedfd8;
  --muted: #9da39e;
  --line: #222522;
  --line-strong: #353935;
  --accent-soft: #1b1d14;
  --header: #000000;
}

/* Escolha de tema e língua nas Definições */
.prefs-form { display: grid; gap: 14px; padding: 16px 2px; border-bottom: 1px solid var(--line); }
.prefs-group { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.prefs-group legend { padding: 0; margin-bottom: 8px; font: 800 .75rem var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.prefs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pref-chip { display: inline-flex !important; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 99px; background: var(--surface); color: var(--ink); font: 600 .9rem var(--font) !important; cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease); }
.pref-chip input { position: absolute; opacity: 0; pointer-events: none; }
.pref-chip:has(input:checked) { border-color: var(--yellow); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--yellow); }
.pref-chip:has(input:focus-visible) { outline: 2px solid var(--yellow); outline-offset: 2px; }
/* Escolha de tema: miniaturas do site em cada tema (cores fixas, não seguem o tema atual). */
.theme-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.theme-option { position: relative; display: grid !important; gap: 7px; justify-items: center; cursor: pointer; font: 600 .82rem var(--font) !important; color: var(--ink-2) !important; }
.theme-option input { position: absolute; opacity: 0; pointer-events: none; }
.theme-prev {
  --tp-bg: #022a1f; --tp-head: #011d15; --tp-card: #063427; --tp-line: rgb(247 245 232 / .55); --tp-btn: #f7eb7d; --tp-av: #acd9d6; --tp-edge: rgb(255 255 255 / .1);
  position: relative; display: grid; grid-template-rows: 15% 3px auto auto 1fr; align-content: start; gap: 5px;
  width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; background: var(--tp-bg);
  box-shadow: 0 0 0 1px var(--line-strong), 0 6px 16px rgb(0 0 0 / .18);
  transition: box-shadow .18s var(--ease), transform .18s var(--ease);
}
.theme-prev i { display: block; }
.tp-head { position: relative; margin: 0 0 -5px; background: var(--tp-head); }
.tp-head b { position: absolute; left: 9px; top: 50%; translate: 0 -50%; width: 26%; height: 4px; border-radius: 2px; background: #fff; opacity: .9; }
.tp-head b::after { content: ""; position: absolute; right: -7px; top: -1px; width: 6px; height: 6px; border-radius: 50%; background: #f7eb7d; }
.tp-stripe { background: linear-gradient(90deg, #f7eb7d 0 20%, #c9dd9d 20% 40%, #acd9d6 40% 60%, #f1dadb 60% 80%, #eb665b 80%); }
.tp-line { height: 5px; width: 62%; margin: 4px 0 0 9px; border-radius: 3px; background: var(--tp-line); }
.tp-line.short { width: 40%; margin-top: 0; opacity: .6; }
.tp-card { align-self: end; display: flex !important; align-items: center; justify-content: space-between; gap: 6px; margin: 0 8px 9px; padding: 7px; border-radius: 7px; background: var(--tp-card); box-shadow: inset 0 0 0 1px var(--tp-edge); }
.tp-av { width: 14px; height: 14px; border-radius: 50%; background: var(--tp-av); }
.tp-btn { width: 42%; height: 9px; border-radius: 3px; background: var(--tp-btn); }
.tp-check { position: absolute; top: 22%; right: 7px; display: grid !important; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--yellow); color: var(--green-900); opacity: 0; scale: .6; transition: opacity .18s var(--ease), scale .18s var(--ease); }
.tp-check .icon { width: 12px; height: 12px; stroke-width: 3.2; }
.tp-claro { --tp-bg: #f7f6ef; --tp-head: #022a1f; --tp-card: #ffffff; --tp-line: rgb(2 42 31 / .55); --tp-btn: #022a1f; --tp-av: #c9dd9d; --tp-edge: #e1e3da; }
.tp-preto { --tp-bg: #000000; --tp-head: #000000; --tp-card: #121312; --tp-line: rgb(245 245 239 / .5); --tp-btn: #f7eb7d; --tp-av: #f1dadb; --tp-edge: rgb(255 255 255 / .08); }
.tp-preto .tp-head { box-shadow: inset 0 -1px 0 #222; }
.theme-option:hover .theme-prev { transform: translateY(-2px); }
.theme-option:has(input:checked) .theme-prev { box-shadow: 0 0 0 2px var(--yellow), 0 8px 20px rgb(0 0 0 / .25); }
.theme-option:has(input:checked) .tp-check { opacity: 1; scale: 1; }
.theme-option:has(input:checked) .theme-name { color: var(--ink) !important; }
.theme-option:has(input:focus-visible) .theme-prev { outline: 2px solid var(--yellow); outline-offset: 3px; }
:root[data-theme="claro"] .theme-option:has(input:checked) .theme-prev { box-shadow: 0 0 0 2px var(--accent), 0 8px 20px rgb(0 0 0 / .12); }
:root[data-theme="claro"] .tp-check { background: var(--accent); color: #fff; }
/* O cartão é sempre escuro: o texto não segue as cores do tema. */
.member-card { color: #f7f5e8; }
.member-card .mc-course { color: #dfe8dc; }
/* Tema claro: o amarelo como cor de texto/ícone perde contraste no fundo claro, passa a verde. */
:root[data-theme="claro"] :is(.hero-foot, .welcome-no b, .hero-stats b, .composer-img, .pw-toggle:hover, .pw-toggle[aria-pressed="true"], .comment-tool, .bubble-name, .bio-device > .icon, .settings-sheet .sheet-head .icon, .settings-icon) { color: var(--accent-text); }
:root[data-theme="claro"] .gif-btn { border-color: var(--accent-text); color: var(--accent-text); }
:root[data-theme="claro"] .gif-btn:hover { background: var(--accent-text); color: #fff; }
:root[data-theme="claro"] .seal { color: #00a862; --seal-check: #fff; }
:root[data-theme="claro"] .member-card .seal { color: var(--tone); --seal-check: #03231a; }
:root[data-theme="claro"] .hero h1 { color: var(--ink); }
:root[data-theme="claro"] .pref-chip:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }