/* non-fixed back-to-top target */
#topo { display:block; height:0; width:0; overflow:hidden; pointer-events:none; }

/* Opinai — cream/pill system (Lovable-inspired structure, original brand) */
:root, html[data-theme="light"] {
  --bg:#FAF7F2; --fg:#111; --muted:#6b6862; --card:#fff;
  --line:#e6e0d6; --acc:#111; --acc2:#111; --bad:#c4281c;
  --ok:#22c55e;
  --bubble-q:#111; --bubble-a:#fff;
  --ink:#111; --cta-bg:#111; --cta-fg:#faf7f2;
  --header-bg:rgba(255,255,255,.9); --header-line:rgba(17,17,17,.06);
  --space-1:clamp(.5rem,1vw,.75rem);
  --space-2:clamp(.9rem,1.8vw,1.25rem);
  --space-3:clamp(1.2rem,2.6vw,2rem);
  --space-4:clamp(1.8rem,3.6vw,3rem);
  --fs-xs:clamp(.75rem,.9vw,.82rem);
  --fs-sm:clamp(.88rem,1.1vw,.95rem);
  --fs-md:clamp(1.02rem,1.35vw,1.12rem);
  --fs-lg:clamp(1.35rem,2.2vw,1.75rem);
  --fs-xl:clamp(1.85rem,3.6vw,2.7rem);
  --fs-bubble:clamp(1.05rem,2.6vw,1.4rem);
  --tap:2.85rem;
  --radius:32px;
  --radius-sm:28px;
  --radius-lg:40px;
  --wrap:min(72rem,100%);
  --narrow:min(28rem,100%);
  --shadow:0 18px 46px rgba(40,30,10,.08);
}
html[data-theme="dark"] {
  --bg:#07070a; --fg:#f7f4ee; --muted:#b3aea4; --card:#1a1a1e;
  --line:#3a3a40; --acc:#f7f4ee; --acc2:#f7f4ee; --bad:#ff6b61;
  --bubble-q:#2a2a30; --bubble-a:#222228;
  --ink:#f7f4ee; --cta-bg:#faf7f2; --cta-fg:#111;
  --header-bg:rgba(18,18,22,.92); --header-line:rgba(255,255,255,.12);
  --shadow:0 18px 50px rgba(0,0,0,.35);
}
* { box-sizing:border-box; }
html { overflow-x:hidden; overflow-y:auto; color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
html,body { margin:0; background:var(--bg); color:var(--fg); overflow-y:auto;
  font:var(--fs-md)/1.55 -apple-system,BlinkMacSystemFont,'SF Pro Text',Inter,system-ui,sans-serif; }
img,svg,video { max-width:100%; height:auto; }
a { color:var(--acc2); text-decoration:none; transition:opacity .2s ease; }
a:hover { opacity:.75; }

.wrap { width:var(--wrap); max-width:100%; margin:0 auto; padding:5.6rem clamp(.9rem,4vw,1.6rem) var(--space-3); }
.page-narrow { width:var(--narrow); max-width:100%; margin:0 auto; }

.pill-header {
  position:fixed; top:max(12px,1.4vw); left:50%; transform:translateX(-50%);
  z-index:30; width:min(var(--wrap), calc(100% - 1.6rem));
  display:flex; justify-content:space-between; align-items:center; gap:var(--space-2);
  padding:.45rem .5rem .45rem .85rem;
  border-radius:980px;
  background:var(--header-bg);
  border:1px solid var(--header-line);
  backdrop-filter:blur(16px);
  box-shadow:var(--shadow);
}
.brand { display:inline-flex; align-items:center; gap:.55rem; font-weight:650; letter-spacing:-.04em; color:var(--fg); font-size:var(--fs-lg); }
.brand img { width:2rem; height:2rem; border-radius:12px; }
.brand.big { font-size:var(--fs-xl); }
nav { display:flex; gap:.35rem; flex-wrap:wrap; align-items:center; }
nav a { min-height:var(--tap); display:inline-flex; align-items:center; padding:0 .7rem; color:var(--fg); opacity:.72; font-weight:500; }
nav a:hover { opacity:1; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  border:1px solid transparent; background:color-mix(in srgb, var(--fg) 7%, transparent); color:var(--fg);
  min-height:var(--tap); padding:.5rem 1.25rem; border-radius:980px; cursor:pointer;
  transition:background .2s ease, opacity .2s ease, transform .2s ease;
  font:inherit; text-align:center; font-weight:560; }
.btn.primary { background:var(--cta-bg); color:var(--cta-fg); border-color:transparent; font-weight:650; }
.btn:hover { transform:translateY(-1px); }
.btn.danger { color:var(--bad); }
.btn.tiny { font-size:var(--fs-sm); min-height:2.4rem; padding:.35rem .85rem; border-radius:980px; }
.btn.bigbtn { font-size:var(--fs-md); padding:.75rem 1.4rem; }
.btn:disabled, .btn.is-loading { opacity:.6; cursor:wait; }

.card { background:var(--card); border:1px solid color-mix(in srgb, var(--line) 55%, transparent);
  border-radius:var(--radius); padding:var(--space-3); margin:var(--space-2) 0;
  box-shadow:0 1px 0 color-mix(in srgb, var(--fg) 4%, transparent); }
.form label { display:block; margin:var(--space-2) 0; font-weight:600; }
.form .hint { display:block; font-weight:400; color:var(--muted); font-size:var(--fs-sm); margin-top:.2rem; }
.form input,.form textarea,.form select { width:100%; min-height:var(--tap); padding:.7rem 1rem; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--bg); color:var(--fg); font:inherit; box-sizing:border-box; }
.form textarea, .card textarea {
  display:block; width:100%; max-width:100%; min-height:6rem;
  box-sizing:border-box; padding:.7rem 1rem; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--bg); color:var(--fg); font:inherit; }
.form input:invalid:not(:placeholder-shown), .field-err input, .field-err textarea { border-color:var(--bad); }
.field-msg { color:var(--bad); font-size:var(--fs-sm); font-weight:400; }
.form.inline { display:flex; gap:var(--space-2); align-items:end; flex-wrap:wrap; }
.form.inline input { width:auto; min-width:8rem; flex:1; }
.flash { padding:var(--space-2) var(--space-3); border-radius:var(--radius-sm); margin:var(--space-1) 0; }
.flash.ok { background:#064e3b33; }
.flash.err { background:#7f1d1d33; }
.toasts { position:fixed; top:5.2rem; right:var(--space-2); z-index:40; display:flex; flex-direction:column; gap:.4rem; max-width:min(22rem,92vw); }
.toast { background:var(--card); border:1px solid var(--line); padding:.8rem 1.1rem; border-radius:var(--radius-sm); box-shadow:var(--shadow); }
.toast.ok { border-color:var(--ok); }
.toast.err { border-color:var(--bad); }

.app-grid { display:grid; grid-template-columns:1fr; gap:var(--space-3); align-items:stretch; }
.admin-wide { display:block; width:100%; max-width:none; }
.frame-admin { min-height:50vh; }
.rail { display:flex; flex-direction:column; gap:var(--space-3); min-width:0; }
.frame {
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:color-mix(in srgb, var(--card) 55%, transparent);
  padding:var(--space-3);
  min-width:0;
}
.frame-feed { min-height:50vh; }
.frame-tools { flex:0 0 auto; }
.frame-rank { flex:1 1 auto; }

@media (min-width:480px){ .app-grid { gap:var(--space-3); } }
@media (min-width:800px){
  .app-grid { grid-template-columns:minmax(0,1fr); }
  .frame-feed { min-height:58vh; }
}
@media (min-width:1200px){
  .app-grid { grid-template-columns:minmax(0,1fr) minmax(0,28%); }
  .app-grid:not(.landing-grid) { min-height:calc(100dvh - 8rem); }
  .frame-feed { min-height:70vh; }
}

.panel ol, .frame ol { padding-left:1.1rem; margin:.4rem 0 1rem; }
.meta { color:var(--muted); font-size:var(--fs-sm); }
.hot { color:var(--fg); font-weight:700; }

.landing { max-width:none; }
.landing-lede { display:none; }
.landing-hero { display:none; }
.opinai-banner-frame {
  width:100%;
  max-width:100%;
  margin:0 0 var(--space-3);
  padding:var(--space-2);
  overflow:hidden;
}
.opinai-banner {
  position:relative;
  height:15vh;
  min-height:6.5rem;
  max-height:15vh;
  width:100%;
  max-width:100%;
  margin:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  text-align:center;
  border-radius:var(--radius);
  background:linear-gradient(180deg,#6eb4e8 0%,#b9d8f2 42%,#f0e7b8 58%,#8ec45a 100%);
}
.opinai-banner::before {
  content:"";
  position:absolute; inset:0;
  background-image:var(--campo);
  background-size:cover;
  background-position:center top;
  opacity:.38;
  pointer-events:none;
}
.opinai-banner-text {
  position:relative; z-index:1;
  margin:0; padding:0 clamp(.6rem,2vw,1.1rem);
  max-width:100%;
  font-size:clamp(.85rem, 2.2vw, 1.85rem);
  line-height:1.2;
  font-weight:760;
  letter-spacing:-.035em;
  white-space:normal;
  overflow-wrap:anywhere;
  text-wrap:balance;
  color:var(--fg);
  text-shadow:0 1px 0 color-mix(in srgb, var(--bg) 55%, transparent);
}
@media (max-width:520px){
  .opinai-banner { height:auto; min-height:15vh; max-height:none; padding:.85rem .2rem; }
}
.app-grid.landing-grid, .landing-grid { min-height:0 !important; height:auto; align-items:start; }
.landing-main { display:flex; flex-direction:column; gap:var(--space-3); min-width:0; }
.landing-main .frame-chat { align-self:center; }
.landing-cta {
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  width:min(39.6rem,100%); align-self:center; margin:.15rem 0 .35rem;
}
.landing-cta .btn {
  display:inline-flex; justify-content:center; text-align:center;
  width:100%; white-space:normal; line-height:1.35;
  font-size:1.1em;
  padding:.55rem 1.375rem;
  min-height:calc(var(--tap) * 1.1);
}
.landing-cta-or {
  display:block; width:100%; text-align:center;
  margin:0; padding:.05rem 0;
  color:var(--muted);
  font-size:var(--fs-sm);
  font-weight:650;
  letter-spacing:.22em;
  font-variant:small-caps;
  user-select:none;
}
.landing-rank {
  display:flex; flex-direction:column; align-items:center;
  gap:var(--space-3);
  width:100%;
}
.landing-rank .rank-stack {
  width:min(40rem,100%);
  text-align:left;
}
.landing-rank .rank-stack h3 { margin:0 0 .6rem; text-align:center; }
.qrank-card { margin:.7rem 0; }
.qrank-card input[readonly], .qrank-card textarea[readonly] {
  cursor:default; background:var(--bg);
}
.qrank-card .actions { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }

.frame-chat { display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; overflow:hidden; padding-top:.4rem; }
.landing .frame-chat,
.landing-grid .frame-chat {
  min-height:0 !important; height:auto !important; max-height:none;
  width:fit-content; max-width:100%; align-self:start;
  padding:.55rem .7rem .7rem; background:color-mix(in srgb, var(--card) 72%, transparent);
}
.chat { display:flex; flex-direction:column; justify-content:flex-start; gap:clamp(.45rem,1.4vw,.7rem); padding:.15rem .05rem .25rem; width:auto; max-width:min(36rem,100%); }

.bubble {
  max-width:96%; width:fit-content;
  padding:clamp(.7rem,2vw,1.05rem) clamp(.9rem,2.4vw,1.25rem);
  border-radius:1.7rem;
  font-size:var(--fs-bubble); line-height:1.35;
  box-shadow:0 10px 28px rgba(0,0,0,.12);
}
.bubble.q { align-self:flex-start; background:var(--bubble-q); color:#fff; border-bottom-left-radius:.4rem; }
.bubble.a { align-self:flex-end; background:var(--bubble-a); color:var(--fg);
  border:1px solid color-mix(in srgb, var(--line) 50%, transparent); border-bottom-right-radius:.4rem; }
html[data-theme="light"] .bubble.a { box-shadow:0 8px 22px rgba(40,30,10,.06); }
.bubble.pix-card { max-width:88%; }
.bubble.paid { display:flex; align-items:center; gap:.45rem; width:fit-content; max-width:fit-content; padding:.6rem .95rem; white-space:nowrap; }
.bubble.paid .paid-ok { display:inline-flex; flex-shrink:0; line-height:0; }
.bubble.paid .paid-ok svg { display:block; }
.landing .bubble.q, .landing .bubble.a { max-width:96%; }
.pix-fake { height:clamp(48px,12vw,72px); margin:.5rem 0; border-radius:16px;
  background:repeating-linear-gradient(90deg,var(--line),var(--line) 8px,transparent 8px,transparent 16px); }

.fly { opacity:0; transform:translateY(40px) scale(.97); }
.fly.in { opacity:1; transform:none; animation:arrive .85s cubic-bezier(.05,.7,.15,1) both; }
.fly.out { opacity:0; transition:opacity .28s ease; transform:none; }
@keyframes arrive {
  0% { opacity:0; transform:translateY(48px) translateX(12px) scale(.96); }
  45% { opacity:1; }
  100% { opacity:1; transform:none; }
}
.fly[data-i="0"].in { animation-duration:.55s; }
.fly[data-i="1"].in { animation-duration:.7s; }
.fly[data-i="2"].in { animation-duration:.9s; }
.fly[data-i="3"].in { animation-duration:1.15s; }

.hidden { display:none; }
.caption,.tiny,.help { color:var(--muted); font-size:var(--fs-sm); }
.theme-btn { position:fixed; left:max(12px,2vw); bottom:max(12px,2vw); z-index:9999; pointer-events:auto;
  width:var(--tap); height:var(--tap); border-radius:50%;
  border:1px solid var(--line); background:var(--card); color:var(--fg); cursor:pointer; font-size:1.2rem; box-shadow:var(--shadow); }
.qr { width:min(180px,70vw); height:auto; aspect-ratio:1; background:#fff; padding:8px; border-radius:18px; }
.codes strong { font-size:var(--fs-lg); letter-spacing:.1em; }
.search { display:flex; gap:.45rem; flex-wrap:wrap; margin:.6rem 0 .2rem; }
.search input, .search select {
  flex:1 1 10rem; min-width:0; min-height:var(--tap); padding:.55rem 1rem;
  border-radius:980px; border:1px solid var(--line); background:var(--card); color:var(--fg); font:inherit;
}
.hero { text-align:center; padding:1rem 0; }
.lede { max-width:38rem; margin:0 auto 1.2rem; color:var(--muted); }

.steps { display:flex; gap:.5rem; flex-wrap:wrap; margin:0 0 var(--space-3); padding:0; list-style:none; }
.steps li { flex:1 1 6rem; min-height:var(--tap); display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:999px; font-size:var(--fs-sm); color:var(--muted); text-align:center; padding:.3rem .6rem; }
.steps li.on { color:var(--fg); border-color:var(--fg); font-weight:700; }
.backrow { display:flex; gap:var(--space-2); flex-wrap:wrap; margin:var(--space-2) 0; }
.cats { display:flex; flex-wrap:wrap; gap:.4rem; margin:.4rem 0; }
.cats a { border:1px solid var(--line); border-radius:999px; padding:.35rem .85rem; min-height:2.2rem; display:inline-flex; align-items:center; color:var(--fg); }
.cats a.on { border-color:var(--fg); font-weight:650; }
.actions { display:flex; flex-wrap:wrap; gap:.45rem; }

h1,h2,h3 { font-weight:620; letter-spacing:-.035em; line-height:1.15; }
h1 { font-size:var(--fs-xl); margin:.2rem 0 var(--space-2); }
h2 { font-size:var(--fs-lg); margin:var(--space-3) 0 var(--space-2); }
h3 { font-size:var(--fs-md); margin:0 0 var(--space-2); }

.avatar-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(3.4rem,1fr)); gap:.45rem; margin:.4rem 0; }
.avatar-opt { margin:0; position:relative; }
.avatar-opt input { position:absolute; inset:0; opacity:0; }
.avatar-opt img { width:100%; aspect-ratio:1; border-radius:50%; border:2px solid transparent; display:block; }
.avatar-opt input:checked + img, .avatar-opt:focus-within img { border-color:var(--fg); }
.avatar-lg { width:4.5rem; height:4.5rem; border-radius:50%; }
.profile-head { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
fieldset.avatar-pick { border:0; padding:0; margin:var(--space-2) 0; }
fieldset.avatar-pick legend { font-weight:600; margin-bottom:.4rem; }
.later-hook { opacity:.55; }

.landing.zen { position:relative; }
.landing.zen::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(180,170,150,.18), transparent 60%),
    radial-gradient(800px 460px at 100% 8%, rgba(80,90,110,.22), transparent 58%),
    linear-gradient(180deg, var(--bg), #101114);
}
html[data-theme="light"] .landing.zen::before {
  background:
    radial-gradient(1100px 620px at 8% -10%, #efe6d6, transparent 62%),
    radial-gradient(820px 500px at 100% 0%, #e7ebe4, transparent 58%),
    linear-gradient(180deg, #FAF7F2, #f3eee6);
}
html[data-theme="dark"] .landing.zen::before {
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(80,70,110,.28), transparent 60%),
    radial-gradient(800px 460px at 100% 8%, rgba(20,30,50,.35), transparent 58%),
    linear-gradient(180deg, #07070a, #101114);
}

@media (max-width:640px){
  .pill-header { width:calc(100% - 1rem); padding:.35rem .4rem .35rem .7rem; }
  nav a { padding:0 .45rem; }
  .brand span { font-size:1.1rem; }
}

/* Logged-in forum chrome */
.appbar {
  position:fixed; top:0; left:0; right:0; z-index:30;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:.8rem;
  padding:.55rem clamp(.8rem,3vw,1.4rem);
  background:color-mix(in srgb, var(--card) 88%, transparent);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);
}
body.in-app .wrap { padding-top:4.6rem; }
.forum-search input {
  width:100%; min-height:2.7rem; border-radius:980px; border:1px solid var(--line);
  background:var(--bg); color:var(--fg); padding:.45rem 1.1rem; font:inherit;
}
.app-avatar img { width:2.4rem; height:2.4rem; border-radius:50%; display:block; border:2px solid var(--line); }
.ask-cta { width:100%; margin-bottom:.85rem; }
.forum-tabs { display:flex; gap:.4rem; margin:0 0 1rem; }
.forum-tabs a { border-radius:980px; padding:.35rem .85rem; min-height:2.2rem; display:inline-flex; align-items:center; color:var(--fg); border:1px solid var(--line); }
.forum-tabs a.on { background:var(--cta-bg); color:var(--cta-fg); border-color:transparent; }
.cat-dots { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.35rem; }
.cat-dots a { display:flex; align-items:center; gap:.55rem; color:var(--fg); min-height:2.1rem; }
.cat-dots a.on { font-weight:700; }
.dot { width:.7rem; height:.7rem; border-radius:50%; background:#bbb; display:inline-block; }

.dcard {
  display:grid; grid-template-columns:3.1rem minmax(0,1fr); gap:.9rem;
  background:var(--card); border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius:var(--radius); padding:1.15rem 1.25rem; margin:0 0 1rem;
  box-shadow:var(--shadow);
}
.dcard-av { width:3.1rem; height:3.1rem; border-radius:50%; }
.dcard-body h2 { font-size:1.15rem; margin:0 0 .25rem; }
.dcard .snip { margin:.35rem 0 .7rem; color:var(--muted); }
.dcard-foot { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.cat-pill { border-radius:980px; padding:.25rem .7rem; font-size:var(--fs-sm); font-weight:600; background:#ece8e0; color:#333; }
.faces { display:flex; }
.faces img { width:1.5rem; height:1.5rem; border-radius:50%; border:2px solid var(--card); margin-left:-.35rem; }
.faces img:first-child { margin-left:0; }
.ccount { margin-left:auto; color:var(--muted); font-size:var(--fs-sm); }
.ccount::before { content:"💬 "; }

.cat-pill[data-cat="Finanças"], .dot[data-cat="Finanças"] { background:#dbeafe; color:#1d4ed8; }
.dot[data-cat="Finanças"] { background:#3b82f6; }
.cat-pill[data-cat="Carreira"], .dot[data-cat="Carreira"] { background:#fce7f3; color:#9d174d; }
.dot[data-cat="Carreira"] { background:#ec4899; }
.cat-pill[data-cat="Tecnologia"], .dot[data-cat="Tecnologia"] { background:#e0e7ff; color:#3730a3; }
.dot[data-cat="Tecnologia"] { background:#6366f1; }
.cat-pill[data-cat="Saúde"], .dot[data-cat="Saúde"] { background:#dcfce7; color:#166534; }
.dot[data-cat="Saúde"] { background:#22c55e; }
.cat-pill[data-cat="Relacionamentos"], .dot[data-cat="Relacionamentos"] { background:#ffe4e6; color:#9f1239; }
.dot[data-cat="Relacionamentos"] { background:#fb7185; }
.cat-pill[data-cat="Educação"], .dot[data-cat="Educação"] { background:#fef3c7; color:#92400e; }
.dot[data-cat="Educação"] { background:#f59e0b; }
.cat-pill[data-cat="Viagens"], .dot[data-cat="Viagens"] { background:#ccfbf1; color:#115e59; }
.dot[data-cat="Viagens"] { background:#14b8a6; }
.cat-pill[data-cat="Cotidiano"], .dot[data-cat="Cotidiano"] { background:#f3e8ff; color:#6b21a8; }
.dot[data-cat="Cotidiano"] { background:#a855f7; }

body.in-app .frame { background:transparent; border-color:transparent; padding:0; box-shadow:none; }
body.in-app .frame-tools, body.in-app .frame-rank {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:var(--space-3);
  box-shadow:0 10px 30px rgba(40,30,10,.05);
}

@media (max-width:800px){
  .appbar { grid-template-columns:auto 1fr auto; }
  .dcard { grid-template-columns:2.6rem 1fr; padding:1rem; }
}


/* Rank lists: one item per line */
.frame-rank h3 { margin-top:1.1rem; }
.frame-rank h3:first-child { margin-top:0; }
.frame-rank ol,
.landing .frame-rank ol {
  display: block;
  list-style: decimal;
  padding-left: 1.25rem;
}
.frame-rank ol > li,
.landing .frame-rank ol > li {
  display: block;
  margin: .55rem 0 .75rem;
}
.frame-rank ol > li a,
.frame-rank ol > li span {
  display: block;
}


.list-toolbar { display:flex; gap:var(--space-2); align-items:end; flex-wrap:wrap; margin:var(--space-2) 0; }
.list-toolbar label { margin:0; font-weight:600; }
.list-toolbar input[type=search], .list-toolbar select {
  min-height:var(--tap); padding:.55rem .85rem; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--bg); color:var(--fg); font:inherit;
}
.pager { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin:.4rem 0 1rem; }

.admin-tabs { display:flex; gap:.15rem; flex-wrap:wrap; margin:.35rem 0 1.1rem;
  border-bottom:1px solid var(--line); padding:0; }
.admin-tabs button, .admin-tabs a {
  appearance:none; background:none; border:0; border-bottom:2px solid transparent;
  color:var(--muted); cursor:pointer; font:inherit; font-size:var(--fs-sm); font-weight:550;
  min-height:2.2rem; padding:.25rem .7rem .4rem; border-radius:0; text-decoration:none; display:inline-flex; align-items:center; }
.admin-tabs button:hover, .admin-tabs a:hover { color:var(--fg); }
.admin-tabs button.on, .admin-tabs button[aria-selected="true"],
.admin-tabs a.on, .admin-tabs a[aria-selected="true"] {
  color:var(--fg); border-bottom-color:var(--fg); font-weight:650; }
.admin-tabs .tab-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.15rem; height:1.15rem; margin-left:.2rem; padding:0 .3rem;
  border-radius:980px; background:color-mix(in srgb, var(--fg) 10%, transparent);
  font-size:.72rem; }
.tab-panel[hidden] { display:none !important; }
.profile-tabs { margin-top:.8rem; }


.admin-head { display:flex; justify-content:space-between; align-items:flex-start;
  gap:var(--space-2); margin:0 0 .35rem; }
.admin-head h1 { margin:.1rem 0 .25rem; font-size:var(--fs-lg); }
.admin-head-actions { display:flex; gap:.4rem; flex-wrap:wrap; justify-content:flex-end; }
.btn.ghost { background:transparent; border-color:transparent; color:var(--muted); padding:.35rem .7rem; }
.btn.ghost:hover { color:var(--fg); background:color-mix(in srgb, var(--fg) 6%, transparent); }

.stat-row { display:flex; flex-wrap:wrap; gap:.45rem; margin:.4rem 0 0; }
.stat-chip {
  display:inline-flex; align-items:baseline; gap:.35rem;
  padding:.28rem .7rem; border-radius:980px; font-size:var(--fs-sm); color:var(--muted);
  background:color-mix(in srgb, var(--fg) 5%, transparent); border:1px solid var(--line); }
.stat-chip strong { color:var(--fg); font-size:var(--fs-md); letter-spacing:-.03em; }
.stat-chip.warn { border-color:color-mix(in srgb, var(--bad) 45%, var(--line)); color:var(--bad); }
.overview-card h2 { margin-top:0; }
.admin-box-head {
  display:flex; justify-content:space-between; align-items:center;
  gap:.5rem; margin:0 0 .2rem;
}
.admin-box-head h2 { margin:0; }
.card.is-collapsed > :not(.admin-box-head) { display:none; }

.avatar-admin-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(16rem,1fr)); gap:.75rem; }
.avatar-admin-card { margin:0; }
.avatar-admin-card .avatar-lg { width:4.2rem; height:4.2rem; }

.landing-foot {
  text-align:center; color:var(--muted); font-size:var(--fs-sm);
  letter-spacing:.02em; margin:var(--space-4) 0 0; padding:.4rem 0 0;
}
.rank-link { display:block; color:inherit; }
.rank-link:hover { opacity:1; }
.rank-link:hover .rank-q { text-decoration:underline; }
.rank-user { display:block; font-weight:650; }
.rank-rule {
  display:block; height:0; width:100%;
  border:0; border-top:1px solid var(--line);
  margin:.28rem 0 .32rem;
}
.rank-q { display:block; color:var(--fg); }
.frame-rank ol > li .meta { margin-top:.25rem; }

.site-footer {
  margin-top:auto;
  background:#000;
  color:#fff;
  font-family:Inter,-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;
  position:relative;
}
.site-footer a { color:#fff; opacity:.82; font-weight:500; }
.site-footer a:hover { opacity:1; }
.footer-inner { width:min(72rem,100%); margin:0 auto; padding:0 clamp(.9rem,4vw,1.6rem); }
.footer-news {
  background:#0a0a0a;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-news-row {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.8rem 1.2rem; padding:.85rem 0;
}
.footer-news-copy { margin:0; font-weight:650; letter-spacing:.04em; text-transform:uppercase; font-size:var(--fs-sm); }
.footer-news-form { display:flex; flex-wrap:wrap; gap:.45rem; }
.footer-news-form input {
  min-height:2.5rem; padding:.4rem .85rem; border:1px solid #fff; background:#000; color:#fff;
  font:inherit; border-radius:0; min-width:10rem;
}
.footer-news-form input::placeholder { color:rgba(255,255,255,.55); }
.footer-news-btn { border-radius:0; min-height:2.5rem; background:#fff; color:#000; }
.footer-main { padding:1.8rem 0 2.4rem; }
.footer-brandrow {
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  padding-bottom:1.3rem; border-bottom:1px solid rgba(255,255,255,.14);
}
.footer-brand { display:flex; flex-direction:column; gap:.15rem; }
.footer-brand strong { font-size:var(--fs-lg); letter-spacing:-.04em; }
.footer-brand span { color:rgba(255,255,255,.62); font-size:var(--fs-sm); }
.footer-social { display:flex; gap:.35rem; align-items:center; }
.footer-social a {
  width:2.4rem; height:2.4rem; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.28); color:#fff; opacity:1;
}
.footer-social a:hover { background:#fff; color:#000; }
.footer-cols {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.4rem 1rem;
  padding:1.6rem 0;
}
.footer-cols h3 {
  margin:0 0 .7rem; font-size:var(--fs-sm); letter-spacing:.08em; text-transform:uppercase;
}
.footer-cols a { display:block; min-height:2rem; padding:.15rem 0; }
.footer-bottom {
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem 1.1rem;
  border-top:1px solid rgba(255,255,255,.14); padding-top:1.1rem;
  position:relative;
}
.footer-legal { margin:0; color:rgba(255,255,255,.7); font-size:var(--fs-sm); }
.footer-top-link {
  margin-left:auto; background:none; border:0; color:#fff; font:inherit; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}
.pix-mark {
  display:inline-flex; align-items:center; gap:.35rem;
  color:#fff; letter-spacing:.12em; font-size:.72rem;
}
.pix-mark b { font-weight:750; }
.back-top {
  position:fixed; right:max(12px,2vw); bottom:max(12px,2vw); z-index:9999; pointer-events:auto;
  width:var(--tap); height:var(--tap); border-radius:50%;
  border:1px solid #fff; background:#000; color:#fff; cursor:pointer; font-size:1.15rem;
  box-shadow:var(--shadow);
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
}
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
@media (max-width:720px) {
  .footer-cols { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-top-link { margin-left:0; }
}
body { min-height:100dvh; display:flex; flex-direction:column; }
body .wrap { flex:1 0 auto; }

.cms-page { max-width:40rem; margin:0 auto; }
.cms-body { line-height:1.55; }
.cms-body h2, .cms-body h3 { margin:1.2rem 0 .4rem; }
.cms-body p { margin:.55rem 0; }
.cms-body ul, .cms-body ol { padding-left:1.2rem; }

.form input[type=radio], .form input[type=checkbox] {
  width:auto; min-height:0; min-width:0; padding:0; margin:0 .35rem 0 0;
  border:0; background:none; accent-color:var(--fg);
}
.yn-row {
  display:flex; flex-wrap:wrap; align-items:center; gap:.45rem .55rem;
  margin:var(--space-2) 0; font-weight:600;
}
.yn-row .yn-opt {
  display:inline-flex; align-items:center; margin:0; font-weight:650; cursor:pointer;
}
.yn-row input[type=radio] { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.yn-row .yn-opt { padding:.15rem .45rem; border-radius:980px; color:var(--muted); }
.yn-row .yn-opt:has(input:checked) {
  color:var(--fg); background:color-mix(in srgb, var(--fg) 8%, transparent);
}
.yn-sep { color:var(--muted); font-weight:400; }
.card-actions {
  display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:.5rem;
  margin:.7rem 0 0;
}
.card-actions form { margin:0; display:inline-flex; }
.card-actions .btn { margin:0; }


.rank-below {
  margin: var(--space-4) auto 0;
  width: 100%;
  max-width: 36rem;
  text-align: center;
}
.rank-below-inner { display:inline-block; width:100%; max-width:32rem; text-align:left; }
.rank-below h3 { text-align:center; }

.trends-box { overflow:hidden; }
.trends-box h3 { margin:0 0 .4rem; }
.trend-list { list-style:none; padding:0; margin:.4rem 0 .6rem; }
.trend-list li { display:flex; gap:.6rem; align-items:baseline; min-width:0; padding:.35rem 0; border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.trend-list li:first-child { border-top:0; }
.trend-rank { color:var(--muted); font-variant-numeric:tabular-nums; min-width:1.2rem; flex-shrink:0; }
.trend-list a { color:var(--fg); font-weight:600; min-width:0; overflow-wrap:anywhere; word-break:break-word; }
.trend-list .scope { color:var(--muted); font-size:var(--fs-xs); font-weight:400; flex-shrink:0; }

.answer-row { display:flex; align-items:flex-start; gap:.75rem; }
.answer-main { min-width:0; flex:1; }
.votek {
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:.05rem; min-width:2.1rem; padding:.1rem 0; user-select:none;
}
.votek-btn {
  display:flex; align-items:center; justify-content:center;
  width:1.85rem; height:1.55rem; line-height:1;
  color:var(--muted); text-decoration:none; font-size:1.05rem;
  border-radius:.35rem;
}
.votek-btn:hover { color:var(--fg); background:color-mix(in srgb, var(--fg) 8%, transparent); }
.votek-btn.on { color:var(--fg); font-weight:800; }
.votek-btn.down.on { color:#c2410c; }
.votek-score {
  font-variant-numeric:tabular-nums; font-weight:760; font-size:.95rem;
  line-height:1.2; min-width:1.6rem; text-align:center;
}
.ledger-row .ledger-label { font-weight:650; margin:0 0 .2rem; }
.ledger-row .ledger-when { font-weight:500; color:var(--muted,#64748b); font-variant-numeric:tabular-nums; }
.ledger-row .ledger-amt { margin:0; font-variant-numeric:tabular-nums; font-weight:760; }
.ledger-row .ledger-amt.plus { color:#15803d; }
.ledger-row .ledger-amt.minus { color:#c2410c; }

.form.compact-row,
.user-admin-card .form,
.fee-card .form {
  display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center;
  justify-content:flex-start; gap:.4rem; margin:.28rem 0 0;
}
.form.compact-row label,
.user-admin-card .form label,
.fee-card .form label {
  display:inline-flex; flex-direction:row; flex-wrap:nowrap; align-items:center;
  gap:.35rem; margin:0; white-space:nowrap; font-weight:600;
}
.form.compact-row input,
.form.compact-row select,
.user-admin-card .form input,
.user-admin-card .form select,
.fee-card .form input {
  width:auto; min-width:5.2rem; max-width:8.5rem; flex:0 0 auto;
  min-height:2.15rem; padding:.32rem .55rem;
}
.form.compact-row .btn,
.user-admin-card .form .btn,
.fee-card .form .btn { margin:0; flex:0 0 auto; white-space:nowrap; }
.user-admin-card p { margin:.15rem 0; }
.fee-card h2 { margin:0 0 .2rem; }
.fee-card .help { margin:0 0 .35rem; }

.footer-contact { color:#fff; opacity:.82; text-decoration:underline; text-underline-offset:3px; }
.footer-contact:hover { opacity:1; }
.mod-flag { display:inline-block; margin:.15rem .25rem 0 0; padding:.1rem .4rem; border:1px solid currentColor; border-radius:999px; font-size:.78rem; }

.balanco-filter { margin:0 0 .7rem; }
.balanco-filter-actions {
  display:flex; justify-content:flex-start; align-items:center;
  gap:.5rem; margin:.4rem 0 0;
}

.follow-form { display:inline; margin:0; }
.q-follow-row { margin: var(--space-2) 0 var(--space-3); }
.btn.follow {
  border:1px solid color-mix(in srgb, var(--fg) 22%, transparent);
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  color: var(--fg);
  font-weight:650;
}
.btn.follow.primary {
  background: var(--cta-bg);
  color: var(--cta-fg);
  border-color: transparent;
}
.btn.follow.on {
  background: color-mix(in srgb, var(--fg) 12%, transparent);
  color: var(--fg);
  border-color: color-mix(in srgb, var(--fg) 28%, transparent);
}
.btn.follow:hover { opacity:.92; }