/* Opinai — cream/pill system (Lovable-inspired structure, original brand) */
:root {
  --bg:#0a0a0c; --fg:#f4f1ea; --muted:#9a958c; --card:#161618;
  --line:#2a2a2c; --acc:#111; --acc2:#e8e2d6; --bad:#ff6b61;
  --ok:#22c55e;
  --bubble-q:#1c1c1e; --bubble-a:#2c2c2e;
  --ink:#f4f1ea; --cta-bg:#faf7f2; --cta-fg:#111;
  --header-bg:rgba(22,22,24,.86); --header-line:rgba(255,255,255,.08);
  --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 50px rgba(0,0,0,.18);
}
body.light {
  --bg:#FAF7F2; --fg:#111; --muted:#6b6862; --card:#fff;
  --line:#e6e0d6; --acc:#111; --acc2:#111; --bad:#c4281c;
  --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);
  --shadow:0 18px 46px rgba(40,30,10,.08);
}
* { box-sizing:border-box; }
html { overflow-x:hidden; }
html,body { margin:0; background:var(--bg); color:var(--fg);
  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-4); }
.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; }
.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; }
.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 { margin:0 auto 1.1rem; color:var(--muted); text-align:center; max-width:36rem; }
.landing-hero { text-align:center; padding:clamp(.4rem,2vw,1.2rem) .4rem var(--space-2); }
.landing-hero h1 { font-size:var(--fs-xl); margin:.2rem 0 .55rem; }
.app-grid.landing-grid, .landing-grid { min-height:0 !important; height:auto; align-items:start; }
.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; }
body.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:20;
  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);
}
body.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);
}

@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; }
}