/* ============================================================
   Oraculo Markets — App do usuario. Design system mobile-first.
   Tema escuro por padrao; a marca do operador entra por
   --orac-primary / --orac-accent (setados no #orac-app).
   ============================================================ */

/* Fonte de marca — Inter (auto-hospedada no plugin, sem CDN). Variavel 400-800. */
@font-face{
	font-family:'Inter var'; font-style:normal; font-weight:400 800; font-display:swap;
	src:url(fonts/inter-latin.woff2) format('woff2');
	unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
	font-family:'Inter var'; font-style:normal; font-weight:400 800; font-display:swap;
	src:url(fonts/inter-latin-ext.woff2) format('woff2');
	unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

.orac-root, .orac-root *{ box-sizing:border-box; }
.orac-root{
	/* --- Superficies --- */
	--bg:#0a0e1a; --bg2:#0f1526; --surface:#151b2e; --surface2:#1b2338; --surface3:#222c45;
	--line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14); --hl:rgba(255,255,255,.05);
	--txt:#eaf0ff; --muted:#9aa4bf; --muted2:#8892b0; /* muted2 subiu de #6b7699 → passa AA em texto pequeno */
	/* --- Status (+ ja usados soft via color-mix) --- */
	--yes:#22c55e; --no:#f43f5e; --warn:#f59e0b; --info:#38bdf8; --extra:#e879f9;
	/* --- Marca (white-label; default = Palpite: violeta→verde, ponto lima) --- */
	--primary:var(--orac-primary,#6d5efc); --accent:var(--orac-accent,#22c55e); --lime:#a3e635;
	--grad-brand:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--accent) 55%,var(--primary)));
	/* --- Tipografia --- */
	--font-ui:'Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
	--mono:ui-monospace,"SFMono-Regular","Roboto Mono",Menlo,Consolas,monospace;
	--fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-base:16px; --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px; --fs-3xl:38px;
	--w-body:400; --w-medium:500; --w-label:600; --w-bold:700; --w-hero:800; --tracking-tight:-.02em;
	/* --- Espacamento (grid 4pt) --- */
	--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
	/* --- Radius --- */
	--r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-pill:99px; --radius:16px;
	/* --- Elevacao --- */
	--shadow-1:0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.2), inset 0 1px 0 var(--hl);
	--shadow-2:0 4px 12px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.25);
	--shadow-3:0 16px 40px rgba(0,0,0,.5);
	--shadow-brand:0 8px 24px color-mix(in srgb,var(--primary) 35%,transparent);
	/* --- Movimento --- */
	--ease:cubic-bezier(.2,.8,.2,1); --dur-fast:.12s; --dur-base:.2s; --dur-slow:.28s;
	--nav-h:64px; --maxw:600px;
	/* --- vNext (Lote A): card social, alvo de toque, elevacao enxuta --- */
	--fs-card-q:17px; --elev-card:0 2px 10px rgba(0,0,0,.30); --touch:44px;
	font-family:var(--font-ui);
	color:var(--txt);
	background:
		radial-gradient(900px 500px at 100% -5%, color-mix(in srgb,var(--primary) 22%, transparent), transparent),
		radial-gradient(700px 500px at -10% 0%, color-mix(in srgb,var(--accent) 12%, transparent), transparent),
		var(--bg);
	min-height:100vh; -webkit-tap-highlight-color:transparent;
	-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
}
.orac-root a{ color:inherit; text-decoration:none; }
.orac-root button{ font-family:inherit; cursor:pointer; }

/* Numeros tabulares — dinheiro/odds/pct nao "dancam" quando atualizam ao vivo (poll 5s) */
.orac-balance b, .orac-out .pct, .orac-out .mult, .orac-wallet-card .bal, .orac-payout .v,
.orac-stat .v, .orac-amount input, .orac-rankrow .eq, .od-user .bal, .orac-ai,
.orac-detail-meta b, .odf-prob, .odf-b b, .orac-feed .amt{
	font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}

/* Icones inline (line-icons que herdam a cor do contexto) — substituem os emojis da UI */
.oico{ width:1em; height:1em; display:inline-block; vertical-align:-.14em; stroke:currentColor; fill:none;
	stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.85; flex:0 0 auto; }
.orac-ai .oico, .orac-out .oico, .orac-ai-panel .oico{ opacity:1; }

/* Acessibilidade: titulo semantico (h1) visivel a leitores de tela, sem ocupar espaco visual */
.orac-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; }

/* Shell centralizado no desktop, full no mobile */
.orac-shell{ max-width:var(--maxw); margin:0 auto; min-height:100vh; position:relative;
	padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px);
	background:linear-gradient(180deg, transparent, rgba(0,0,0,.12)); }

/* ---------- Header ---------- */
.orac-header{ position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px;
	padding:14px 16px; backdrop-filter:blur(14px);
	background:linear-gradient(180deg, color-mix(in srgb,var(--bg) 85%, transparent), color-mix(in srgb,var(--bg) 40%, transparent));
	border-bottom:1px solid var(--line); }
.orac-brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; letter-spacing:-.02em; }
.orac-brand .logo{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:16px;
	background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff; box-shadow:0 4px 14px color-mix(in srgb,var(--primary) 45%, transparent); }
.orac-brand img{ height:28px; border-radius:6px; }
/* Marca Palpite: simbolo balao+faisca dentro da caixa; wordmark "palpite." com ponto lima. */
.logo.brandmark svg{ width:66%; height:66%; display:block; }
.wordmark{ font-weight:800; }
.wordmark .dot{ color:var(--lime); }
.orac-header .spacer{ flex:1; }
.orac-balance{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.1; }
.orac-balance b{ font-size:15px; }
.orac-balance span{ font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.orac-avatar{ width:34px; height:34px; border-radius:50%; background:var(--surface2); border:1px solid var(--line2);
	display:grid; place-items:center; font-weight:700; font-size:14px; color:var(--txt); }

/* ---------- Content ---------- */
.orac-content{ padding:14px 16px 8px; }
.orac-h1{ font-size:22px; font-weight:800; letter-spacing:-.02em; margin:4px 0 12px; }
.orac-sub{ color:var(--muted); font-size:13px; margin:-6px 0 14px; }

/* ---------- Seletor Populares / Comunidade ---------- */
.orac-seg{ display:flex; gap:4px; background:var(--surface); border:1px solid var(--line2); border-radius:var(--r-pill); padding:4px; margin-bottom:12px; }
.orac-seg .seg-btn{ flex:1; border:0; background:none; color:var(--muted); font-family:inherit; font-weight:700; font-size:14px;
	padding:9px 10px; border-radius:var(--r-pill); cursor:pointer; transition:background .15s,color .15s; }
.orac-seg .seg-btn.active{ background:var(--grad-brand); color:#fff; box-shadow:var(--shadow-brand); }
.orac-desktop .orac-seg{ max-width:360px; }
.orac-card .meta .cby{ color:var(--muted2); }

/* ---------- Search + chips ---------- */
.orac-search{ display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line);
	border-radius:12px; padding:10px 12px; margin-bottom:12px; }
.orac-search input{ background:none; border:0; outline:0; color:var(--txt); width:100%; font-size:15px; }
.orac-search svg{ flex:0 0 auto; opacity:.6; }
.orac-chips{ display:flex; gap:8px; overflow-x:auto; padding:0 16px 6px; margin:0 -16px 12px;
	scrollbar-width:none; }
.orac-chips::-webkit-scrollbar{ display:none; }
.orac-chip{ flex:0 0 auto; padding:8px 14px; border-radius:99px; background:var(--surface); border:1px solid var(--line);
	color:var(--muted); font-size:13.5px; font-weight:600; white-space:nowrap; transition:.15s; }
.orac-chip.active{ background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--accent) 50%,var(--primary)));
	color:#fff; border-color:transparent; box-shadow:0 6px 16px color-mix(in srgb,var(--primary) 35%, transparent); }

/* ---------- Market card ---------- */
.orac-card{ background:linear-gradient(180deg,var(--surface),var(--bg2)); border:1px solid var(--line2);
	border-radius:var(--r-lg); padding:var(--space-4); margin-bottom:var(--space-3);
	transition:transform var(--dur-fast), border-color var(--dur-base); box-shadow:var(--shadow-1);
	position:relative; overflow:hidden; }
.orac-card:active{ transform:scale(.99); }
.orac-card .top{ display:flex; gap:12px; align-items:flex-start; }
.orac-card .thumb{ width:46px; height:46px; border-radius:12px; flex:0 0 auto; object-fit:cover;
	background:var(--surface2); display:grid; place-items:center; font-size:22px; color:var(--muted); }
.orac-card .thumb .oico{ width:22px; height:22px; opacity:.7; }
.orac-card .q{ font-size:var(--fs-base); font-weight:var(--w-label); line-height:1.3; letter-spacing:-.01em; }
.orac-card .meta{ display:flex; gap:12px; color:var(--muted); font-size:var(--fs-xs); margin-top:8px; flex-wrap:wrap; }
.orac-card .meta span, .orac-detail-meta span{ display:inline-flex; align-items:center; gap:5px; }
.orac-card .meta b{ color:var(--txt); font-weight:var(--w-label); }
.orac-ai{ display:inline-flex; align-items:center; gap:4px; background:color-mix(in srgb,var(--primary) 18%, transparent);
	color:#c7d2fe; padding:2px 8px; border-radius:99px; font-size:11px; font-weight:600; }

/* Outcome bars */
.orac-outs{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.orac-out{ position:relative; border-radius:10px; overflow:hidden; background:var(--surface2); border:1px solid var(--line);
	padding:10px 12px; display:flex; align-items:center; justify-content:space-between; z-index:0; }
.orac-out .fill{ position:absolute; inset:0 auto 0 0; z-index:-1; opacity:.28; border-radius:10px 0 0 10px; transition:width .5s var(--ease); }
.orac-out.yes .fill{ background:var(--yes); }
.orac-out.no .fill{ background:var(--no); }
.orac-out.k0 .fill{ background:var(--primary); } .orac-out.k1 .fill{ background:var(--accent); }
.orac-out.k2 .fill{ background:#e879f9; } .orac-out.k3 .fill{ background:#38bdf8; }
.orac-out .lbl{ font-weight:var(--w-label); font-size:14px; }
.orac-out .pct{ font-weight:var(--w-hero); font-size:15px; }
.orac-out .mult{ font-size:11px; color:var(--muted); margin-left:8px; }

/* ---------- Palpite card vNext (.pcard): social, legivel em 2s, sem numeros tecnicos ---------- */
.pcard{ background:var(--surface); border:0; border-radius:var(--r-lg); box-shadow:var(--elev-card);
	padding:var(--space-3); margin-bottom:var(--space-3); display:flex; flex-direction:column; gap:var(--space-3);
	transition:transform var(--dur-fast); cursor:pointer; }
.pcard:active{ transform:scale(.99); }
.pcard-media{ position:relative; aspect-ratio:16/8; border-radius:var(--r-md); overflow:hidden; display:grid; place-items:center;
	background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 20%,var(--surface2)),var(--surface2)); }
.pcard-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.pcard-media .oico{ width:38px; height:38px; opacity:.5; }
.pcard-cat{ position:absolute; left:8px; bottom:8px; font-size:var(--fs-xs); font-weight:var(--w-bold); color:#fff;
	background:rgba(0,0,0,.55); padding:4px 10px; border-radius:var(--r-pill); }
.pcard-q{ font-size:var(--fs-card-q); font-weight:var(--w-bold); line-height:1.28; letter-spacing:-.01em; color:var(--txt); }
.pcard-bar{ display:flex; height:8px; border-radius:var(--r-pill); overflow:hidden; gap:2px; background:var(--surface2); }
.pcard-bar span{ display:block; min-width:3px; transition:width .5s var(--ease); }
.pcard-bar .s-yes{ background:var(--yes); } .pcard-bar .s-no{ background:var(--no); }
.pcard-bar .s-k0{ background:var(--primary); } .pcard-bar .s-k1{ background:var(--accent); }
.pcard-bar .s-k2{ background:#e879f9; } .pcard-bar .s-k3{ background:#38bdf8; }
.pcard-legend{ display:flex; justify-content:space-between; gap:12px; font-size:var(--fs-sm); font-weight:var(--w-label); margin-top:-2px; }
.pcard-legend .lg{ display:inline-flex; align-items:center; gap:6px; min-width:0; }
.pcard-legend .lg.yes{ color:var(--yes); } .pcard-legend .lg.no{ color:var(--no); }
.pcard-legend .lg .lbl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pcard-legend .lg b{ color:var(--muted); font-weight:var(--w-body); font-variant-numeric:tabular-nums; }
.pcard-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--muted); font-size:var(--fs-sm); }
.pcard-social{ display:flex; align-items:center; gap:8px; min-width:0; }
.pcard-avs{ display:flex; flex:0 0 auto; }
.pcard-avs i{ width:22px; height:22px; border-radius:50%; border:2px solid var(--surface); margin-left:-8px;
	background:linear-gradient(135deg,var(--primary),var(--accent)); }
.pcard-avs i:first-child{ margin-left:0; }
.pcard-social .cnt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pcard-time{ flex:0 0 auto; }
.pcard .orac-btn.pcard-cta{ width:100%; height:var(--touch); } /* especificidade acima de .orac-btn.sm → 44px de toque */

/* ---------- Hero da home (.phero): destaque social grande ---------- */
.phero{ border-radius:var(--r-xl); overflow:hidden; background:var(--surface); box-shadow:var(--elev-card);
	margin-bottom:var(--space-4); cursor:pointer; transition:transform var(--dur-fast); }
.phero:active{ transform:scale(.995); }
.phero-media{ position:relative; aspect-ratio:16/9; max-height:190px; display:grid; place-items:center; overflow:hidden;
	background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 34%,var(--surface2)),color-mix(in srgb,var(--accent) 20%,var(--surface2))); }
.phero-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.phero-ico{ font-size:56px; opacity:.85; } .phero-ico .oico{ width:52px; height:52px; opacity:.6; }
.phero-badge{ position:absolute; left:12px; top:12px; font-size:var(--fs-xs); font-weight:var(--w-bold); color:#fff;
	background:rgba(0,0,0,.5); padding:5px 12px; border-radius:var(--r-pill); }
.phero-body{ padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-3); }
.phero-q{ font-size:var(--fs-xl); font-weight:var(--w-hero); line-height:1.18; letter-spacing:-.02em; color:var(--txt); }
.phero-opts{ display:flex; gap:10px; }
.phero-opt{ flex:1; display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0;
	padding:12px 15px; border-radius:var(--r-md); background:var(--surface2); font-weight:var(--w-label); font-size:var(--fs-md); }
.phero-opt span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.phero-opt.yes{ box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--yes) 42%,transparent); } .phero-opt.yes b{ color:var(--yes); }
.phero-opt.no{ box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--no) 42%,transparent); } .phero-opt.no b{ color:var(--no); }
.phero-lead{ font-size:var(--fs-sm); font-weight:var(--w-label); } .phero-lead b{ color:var(--muted); font-weight:var(--w-body); }
.phero-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.phero-cnt{ display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:var(--fs-sm); min-width:0; }
.phero-cnt .oico{ width:15px; height:15px; }
.phero .orac-btn.phero-cta{ width:auto; height:var(--touch); padding:0 20px; flex:0 0 auto; }

/* ---------- Banner editorial (.pbanner) no feed ---------- */
.pbanner{ position:relative; overflow:hidden; border-radius:var(--r-lg); padding:var(--space-4); margin-bottom:var(--space-3);
	background:linear-gradient(135deg, color-mix(in srgb,var(--primary) 22%,var(--surface)), var(--surface));
	border:1px solid color-mix(in srgb,var(--primary) 28%,var(--line2)); }
.pbanner-k{ display:inline-block; font-size:var(--fs-xs); font-weight:var(--w-hero); letter-spacing:.12em; text-transform:uppercase; color:var(--lime); margin-bottom:6px; }
.pbanner-t{ font-size:var(--fs-lg); font-weight:var(--w-hero); letter-spacing:-.01em; line-height:1.2; color:var(--txt); }
.pbanner-d{ color:var(--muted); font-size:var(--fs-sm); margin:6px 0 12px; max-width:46ch; }
.pbanner .orac-btn.pbanner-cta{ width:auto; height:var(--touch); padding:0 18px; }
.pbanner-cta .oico{ width:16px; height:16px; }
/* Arte de fundo do banner (proporcao ~3:1): motivo a direita, esquerda calma via mascara,
 * para o texto/CTA (HTML por cima) ficarem sempre legiveis. Sem filtro que altere as cores. */
.pbanner.has-art{ isolation:isolate; }
.pbanner-art{ position:absolute; inset:0; z-index:0; pointer-events:none;
	background-size:cover; background-position:right center; background-repeat:no-repeat;
	-webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 34%, rgba(0,0,0,.85) 66%, #000 100%);
	mask-image:linear-gradient(90deg, transparent 0%, transparent 34%, rgba(0,0,0,.85) 66%, #000 100%); }
.pbanner-in{ position:relative; z-index:1; max-width:min(100%,60ch); }
.pbanner.has-art .pbanner-d{ max-width:34ch; }
@media (max-width:520px){
	.pbanner-art{ background-position:right -14% center; opacity:.72;
		-webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 46%, #000 100%);
		mask-image:linear-gradient(90deg, transparent 0%, transparent 46%, #000 100%); }
}
/* Banner principal do topo (home_hero): variante maior do .pbanner. */
.pbanner--hero{ padding:22px; min-height:148px; display:flex; flex-direction:column; justify-content:center;
	background:linear-gradient(135deg, color-mix(in srgb,var(--primary) 30%,var(--surface)), var(--surface)); }
.pbanner--hero .pbanner-t{ font-size:var(--fs-xl); }
.pbanner--hero .pbanner-in{ max-width:min(100%,58ch); }
@media (min-width:640px){ .pbanner--hero{ min-height:180px; padding:28px 30px; } }

/* ---------- Faixa social "Da galera" ---------- */
.pgalera{ margin-bottom:var(--space-4); }
.pgalera-h{ font-size:var(--fs-xs); font-weight:var(--w-hero); letter-spacing:.12em; text-transform:uppercase; color:var(--muted2); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.pgalera-h .oico{ width:14px; height:14px; }
.pgalera-item{ display:flex; align-items:center; gap:10px; padding:11px 12px; background:var(--surface); border:1px solid var(--line2); border-radius:var(--r-md); margin-bottom:8px; cursor:pointer; transition:transform var(--dur-fast); }
.pgalera-item:active{ transform:scale(.99); }
.pgalera-av{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:var(--w-hero); color:#fff; background:var(--grad-brand); }
.pgalera-av.res{ background:none; color:var(--accent); border:1.5px solid var(--accent); }
.pgalera-av.res .oico{ width:18px; height:18px; }
.pgalera-body{ min-width:0; flex:1; }
.pgalera-who{ font-size:var(--fs-sm); color:var(--muted); } .pgalera-who b{ color:var(--txt); font-weight:var(--w-bold); }
.pgalera-q{ font-size:var(--fs-md); font-weight:600; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pgalera-go{ flex:0 0 auto; color:var(--primary); font-weight:var(--w-bold); font-size:var(--fs-sm); }
.pgalera-who b[data-act]{ cursor:pointer; } .pgalera-who b[data-act]:hover{ text-decoration:underline; }

/* ---------- Perfil publico (#/u/<id>) ---------- */
.puser{ text-align:center; }
.puser-av{ width:74px; height:74px; border-radius:50%; display:grid; place-items:center; font-size:30px; font-weight:var(--w-hero); color:#fff; background:var(--grad-brand); margin:2px auto 12px; box-shadow:var(--shadow-brand); }
.puser-name{ font-size:var(--fs-xl); font-weight:var(--w-hero); letter-spacing:-.02em; }
.puser-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:16px 0; }
.pstat{ background:var(--surface2); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 4px; }
.pstat b{ display:block; font-size:var(--fs-lg); font-weight:var(--w-hero); letter-spacing:-.01em; }
.pstat span{ font-size:11px; color:var(--muted2); }
.puser-xp{ display:inline-block; margin-top:6px; font-size:var(--fs-sm); font-weight:var(--w-bold); color:var(--lime);
	background:color-mix(in srgb,var(--lime) 12%,transparent); border:1px solid color-mix(in srgb,var(--lime) 26%,transparent); padding:3px 12px; border-radius:var(--r-pill); }
.puser-badges{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:4px 0 16px; }
.pbadge{ font-size:12.5px; font-weight:var(--w-label); background:var(--surface2); border:1px solid var(--line2); color:var(--txt); padding:5px 11px; border-radius:var(--r-pill); }
.puser-follow .orac-btn{ max-width:280px; margin:0 auto; }
.orac-creator a.by{ cursor:pointer; color:inherit; text-decoration:none; } .orac-creator a.by:hover{ text-decoration:underline; }

/* ---------- Sino de notificacoes + folha ---------- */
.orac-bell{ position:relative; flex:0 0 auto; width:38px; height:38px; border-radius:50%; background:var(--surface2); border:1px solid var(--line2); display:grid; place-items:center; cursor:pointer; }
.orac-bell svg{ width:20px; height:20px; stroke:var(--txt); fill:none; stroke-width:2; }
.orac-bell-dot{ position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px; border-radius:99px; background:var(--no); color:#fff; font-size:10px; font-weight:800; display:grid; place-items:center; border:2px solid var(--bg); }
.orac-notif{ display:flex; gap:10px; align-items:flex-start; padding:12px 4px; border-bottom:1px solid var(--line); cursor:pointer; }
.orac-notif:last-child{ border-bottom:0; }
.orac-notif .ne{ font-size:20px; line-height:1.2; flex:0 0 auto; }
.orac-notif .nt{ font-size:14px; line-height:1.35; color:var(--muted); } .orac-notif .nt b{ color:var(--txt); font-weight:var(--w-bold); }
.orac-notif.unread .nt{ color:var(--txt); }

/* Acessibilidade: respeitar quem pediu menos movimento */
@media (prefers-reduced-motion:reduce){
	.orac-root *, .orac-root *::before, .orac-root *::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
}

/* ---------- Buttons ---------- */
.orac-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
	height:50px; border:0; border-radius:14px; font-size:16px; font-weight:800; color:#fff;
	background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--accent) 55%,var(--primary)));
	box-shadow:0 10px 24px color-mix(in srgb,var(--primary) 38%, transparent); transition:transform .08s,filter .15s; }
.orac-btn:active{ transform:translateY(1px); } .orac-btn:hover{ filter:brightness(1.06); }
.orac-btn[disabled]{ opacity:.5; cursor:not-allowed; }
.orac-btn.ghost{ background:var(--surface2); color:var(--txt); box-shadow:none; border:1px solid var(--line2); }
.orac-btn.yes{ background:linear-gradient(135deg,#16a34a,#22c55e); box-shadow:0 10px 24px rgba(34,197,94,.3); }
.orac-btn.no{ background:linear-gradient(135deg,#e11d48,#f43f5e); box-shadow:0 10px 24px rgba(244,63,94,.3); }
.orac-btn.sm{ height:40px; font-size:14px; border-radius:11px; width:auto; padding:0 16px; }

/* ---------- Detail ---------- */
.orac-back{ display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:14px; margin-bottom:6px; padding:6px 0; }
.orac-detail-q{ font-size:20px; font-weight:800; line-height:1.28; letter-spacing:-.02em; margin:6px 0 10px; }
.orac-detail-meta{ display:flex; gap:14px; flex-wrap:wrap; color:var(--muted); font-size:12.5px; margin-bottom:14px; }
/* Colapso "Ver números" (modo pro): recolhe pool/taxa/medidor-IA/evolução no detalhe do oficial */
.orac-pro{ margin:0 0 var(--space-3); border:1px solid var(--line2); border-radius:var(--r-md); background:var(--surface); overflow:hidden; }
.orac-pro > summary{ list-style:none; cursor:pointer; padding:12px 14px; font-size:var(--fs-sm); font-weight:var(--w-label); color:var(--muted); }
.orac-pro > summary::-webkit-details-marker{ display:none; }
.orac-pro[open] > summary{ color:var(--txt); border-bottom:1px solid var(--line); }
.orac-pro-body{ padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.orac-pro-body .orac-detail-meta{ margin:0; }
.orac-panel{ background:var(--surface); border:1px solid var(--line2); border-radius:var(--r-lg); padding:var(--space-4); margin-bottom:var(--space-3); box-shadow:var(--shadow-1); }
.orac-panel h3{ font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:0 0 10px; font-weight:700; }
.orac-ai-panel{ background:linear-gradient(135deg, color-mix(in srgb,var(--primary) 16%, var(--surface)), var(--surface));
	border:1px solid color-mix(in srgb,var(--primary) 30%, var(--line)); }
.orac-ai-panel .big{ font-size:26px; font-weight:800; }

.orac-pick{ display:flex; gap:10px; flex-wrap:wrap; }
.orac-pick .opt{ flex:1 1 40%; min-width:120px; border:1.5px solid var(--line2); border-radius:14px; padding:12px; text-align:center;
	background:var(--surface2); transition:.15s; cursor:pointer; }
.orac-pick .opt .lbl{ font-weight:800; font-size:15px; }
.orac-pick .opt .pct{ color:var(--muted); font-size:13px; margin-top:2px; }
.orac-pick .opt.sel{ border-color:var(--primary); background:color-mix(in srgb,var(--primary) 20%, var(--surface2)); }
.orac-pick .opt.sel.yes{ border-color:var(--yes); background:color-mix(in srgb,var(--yes) 18%, var(--surface2)); }
.orac-pick .opt.sel.no{ border-color:var(--no); background:color-mix(in srgb,var(--no) 18%, var(--surface2)); }

.orac-feed .row{ display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-top:1px solid var(--line); font-size:13px; }
.orac-feed .row:first-child{ border-top:0; }
.orac-feed .who{ font-weight:600; } .orac-feed .amt{ color:var(--accent); font-weight:700; }
.orac-feed .out{ color:var(--muted); font-size:12px; }

/* ---------- Bet sheet ---------- */
.orac-sheet-back{ position:fixed; inset:0; background:rgba(4,7,15,.82); z-index:9998; opacity:0; transition:opacity .2s;
	backdrop-filter:blur(4px); }
.orac-sheet-back.show{ opacity:1; }
.orac-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:9999; max-width:var(--maxw); margin:0 auto;
	max-height:90vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
	background:var(--surface); border-radius:22px 22px 0 0; border:1px solid var(--line2); border-bottom:0;
	padding:8px 18px calc(20px + env(safe-area-inset-bottom)); transform:translateY(100%); transition:transform .26s cubic-bezier(.2,.8,.2,1);
	box-shadow:0 -20px 50px rgba(0,0,0,.6); }
.orac-sheet.show{ transform:translateY(0); }
/* No desktop, o sheet vira um modal centralizado (nao um bottom-sheet) */
@media (min-width:900px){
	.orac-sheet{ left:50%; right:auto; bottom:auto; top:50%; width:100%; max-width:460px; margin:0; max-height:88vh;
		border:1px solid var(--line2); border-radius:20px; transform:translate(-50%,-44%); box-shadow:0 30px 80px rgba(0,0,0,.6); }
	.orac-sheet.show{ transform:translate(-50%,-50%); }
	.orac-sheet .grip{ display:none; }
}
.orac-sheet .grip{ width:40px; height:4px; border-radius:99px; background:var(--line2); margin:8px auto 14px; }
.orac-sheet h4{ font-size:16px; font-weight:800; margin:0 0 12px; line-height:1.3; }
.orac-sheet-bal{ display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--muted); margin-bottom:8px; }
.orac-sheet-bal b{ color:var(--txt); font-weight:var(--w-bold); font-variant-numeric:tabular-nums; }
.orac-sheet-note{ font-size:11.5px; color:var(--muted2); line-height:1.45; margin-bottom:12px; }
.orac-amount{ display:flex; align-items:center; gap:8px; background:var(--bg2); border:1px solid var(--line2); border-radius:14px; padding:12px 14px; transition:border-color .15s; }
.orac-amount:focus-within{ border-color:var(--primary); }
.orac-amount.err, .orac-amount:has(input.err){ border-color:var(--no); }
.orac-amount .cur{ color:var(--muted); font-weight:700; }
.orac-amount input{ background:none; border:0; outline:0; color:var(--txt); font-size:26px; font-weight:800; width:100%; font-variant-numeric:tabular-nums; }
.orac-amount input.err{ color:#fda4af; }
.orac-max{ flex:0 0 auto; background:var(--surface2); border:1px solid var(--line2); color:var(--txt); border-radius:10px;
	padding:8px 14px; font-weight:700; font-size:13px; min-height:40px; }
.orac-max:hover{ background:var(--surface3); }
.orac-quick{ display:flex; gap:8px; margin:12px 0; flex-wrap:wrap; }
.orac-quick button{ flex:1 1 0; min-width:56px; min-height:44px; background:var(--surface2); border:1px solid var(--line2); color:var(--txt); border-radius:10px; padding:0 8px; font-weight:700; font-size:13px; font-variant-numeric:tabular-nums; }
.orac-quick button:hover{ background:var(--surface3); }
.orac-quick button.ghost{ background:transparent; color:var(--muted); }
.orac-payout{ background:var(--bg2); border:1px dashed var(--line2); border-radius:12px; padding:12px 14px; margin-bottom:10px; font-size:13px; }
.orac-payout .row{ display:flex; justify-content:space-between; align-items:center; }
.orac-payout .row.sub{ margin-top:6px; color:var(--muted); font-size:12.5px; }
.orac-payout .row b{ font-size:19px; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; }
.orac-payout .profit{ color:var(--yes); font-weight:700; font-variant-numeric:tabular-nums; }
.orac-payout.hint{ color:var(--muted); }
.orac-payout.err{ color:#fda4af; border-color:var(--no); border-style:solid; font-weight:600; }
.orac-cancel{ margin-top:8px; }
.orac-pix-code{ word-break:break-all; background:var(--bg2); border:1px solid var(--line2); border-radius:10px; padding:12px;
	font-family:var(--mono); font-size:12px; line-height:1.5; margin-bottom:12px; color:var(--txt); max-height:120px; overflow-y:auto; }

/* ---------- Selo demo ---------- */
.orac-demo{ display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
	color:var(--warn); background:color-mix(in srgb,var(--warn) 16%,transparent); border:1px solid color-mix(in srgb,var(--warn) 32%,transparent);
	padding:2px 6px; border-radius:6px; vertical-align:middle; }
.orac-header .orac-demo{ margin-right:2px; }

/* ---------- Onboarding + celebracao (dentro do .orac-sheet) ---------- */
.orac-ob-tag{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--primary);
	background:color-mix(in srgb,var(--primary) 16%,transparent); padding:4px 10px; border-radius:99px; margin-bottom:12px; }
.orac-ob-h{ font-size:22px; font-weight:800; letter-spacing:-.02em; line-height:1.15; margin:0 0 14px; }
.orac-ob-gift{ background:var(--bg2); border:1px solid var(--line2); border-radius:12px; padding:12px 14px; font-size:13.5px; color:var(--muted); margin-bottom:14px; }
.orac-ob-gift b{ color:var(--txt); font-variant-numeric:tabular-nums; }
.orac-ob-steps{ list-style:none; counter-reset:s; padding:0; margin:0 0 16px; }
.orac-ob-steps li{ counter-increment:s; position:relative; padding:9px 0 9px 40px; font-size:14px; color:var(--muted); border-top:1px solid var(--line); }
.orac-ob-steps li:first-child{ border-top:0; }
.orac-ob-steps li b{ color:var(--txt); font-weight:var(--w-label); }
.orac-ob-steps li::before{ content:counter(s); position:absolute; left:0; top:8px; width:26px; height:26px; border-radius:50%;
	display:grid; place-items:center; font-weight:800; font-size:13px; color:#fff; background:var(--grad-brand); }

.orac-win{ text-align:center; }
.orac-win-emoji{ font-size:48px; line-height:1; margin:4px 0 8px; }
.orac-win .orac-ob-h{ text-align:center; margin-bottom:6px; }
.orac-win-q{ color:var(--muted); font-size:14px; margin-bottom:10px; }
.orac-win-amt{ font-size:36px; font-weight:800; color:var(--yes); letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin-bottom:6px; }
.orac-win-sub{ color:var(--muted); font-size:12.5px; margin-bottom:14px; }
.orac-win .orac-btn{ margin-top:8px; }

/* ---------- Previsões da galera: FAB, form de criar, selo do criador ---------- */
.orac-fab{ position:fixed; z-index:35; right:16px; bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px);
	display:inline-flex; align-items:center; gap:7px; padding:13px 18px; border-radius:var(--r-pill); color:#fff; font-weight:700; font-size:14px;
	background:var(--grad-brand); box-shadow:var(--shadow-brand); }
.orac-fab .oico{ width:18px; height:18px; opacity:1; }
.orac-form .orac-fld{ display:block; margin-bottom:14px; }
.orac-form .orac-fld > span{ display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:6px; }
.orac-form textarea, .orac-form input, .orac-form select{ width:100%; background:var(--bg2); border:1px solid var(--line2); color:var(--txt);
	border-radius:12px; padding:12px 14px; font-size:15px; font-family:inherit; outline:0; }
.orac-form textarea:focus, .orac-form input:focus, .orac-form select:focus{ border-color:var(--primary); }
.orac-form textarea{ resize:vertical; }
.orac-out-row{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.orac-out-row .cr-out{ flex:1; }
.orac-out-del{ flex:0 0 auto; width:40px; height:40px; border-radius:10px; background:var(--surface2); border:1px solid var(--line2);
	color:var(--muted); font-size:20px; line-height:1; cursor:pointer; }
.orac-out-del:hover{ color:var(--no); border-color:var(--no); }
.orac-vis{ display:flex; gap:10px; }
.orac-vis .opt{ flex:1; text-align:left; background:var(--surface2); border:1.5px solid var(--line2); border-radius:14px; padding:12px;
	cursor:pointer; color:var(--txt); font-family:inherit; }
.orac-vis .opt b{ display:block; font-size:14px; margin-bottom:3px; }
.orac-vis .opt small{ color:var(--muted); font-size:11.5px; line-height:1.3; display:block; }
.orac-vis .opt.sel{ border-color:var(--primary); background:color-mix(in srgb,var(--primary) 16%, var(--surface2)); }
/* Chips de prazo do Criar Rápido (substituem o datetime-local) */
.orac-when{ display:flex; gap:8px; flex-wrap:wrap; }
.orac-when .opt{ flex:0 0 auto; background:var(--surface2); border:1.5px solid var(--line2); border-radius:var(--r-pill);
	padding:9px 15px; min-height:var(--touch); cursor:pointer; color:var(--txt); font-family:inherit; font-size:13.5px; font-weight:600; }
.orac-when .opt.sel{ border-color:var(--primary); background:color-mix(in srgb,var(--primary) 16%, var(--surface2)); }

.orac-creator{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; }
.orac-creator .badge{ font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:99px; }
.orac-creator .badge.pub{ background:color-mix(in srgb,var(--info) 18%,transparent); color:#bae6fd; }
.orac-creator .badge.priv{ background:color-mix(in srgb,var(--warn) 16%,transparent); color:#fde68a; }
.orac-creator .by{ font-size:12.5px; color:var(--muted); }
.orac-creator-actions{ margin-left:auto; display:inline-flex; gap:8px; align-items:center; }
.orac-share-btn{ display:inline-flex; align-items:center; gap:5px; background:var(--surface2); border:1px solid var(--line2);
	color:var(--txt); border-radius:10px; padding:7px 12px; font-size:12.5px; font-weight:600; cursor:pointer; }
.orac-share-btn:hover{ border-color:var(--primary); }

.od-create{ display:flex; align-items:center; gap:8px; margin:6px 8px 2px; padding:11px 14px; border-radius:12px; font-weight:700; font-size:14px;
	color:#fff; background:var(--grad-brand); box-shadow:var(--shadow-brand); }
.od-create .oico{ opacity:1; }
.od-mine{ display:block; padding:6px 14px 2px; font-size:13px; color:var(--muted); }
.od-mine:hover{ color:var(--txt); }

/* ---------- Bottom nav ---------- */
.orac-nav{ position:fixed; left:0; right:0; bottom:0; z-index:40; max-width:var(--maxw); margin:0 auto;
	height:calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
	display:flex; background:color-mix(in srgb,var(--surface) 92%, transparent); backdrop-filter:blur(16px);
	border-top:1px solid var(--line); }
.orac-nav a{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
	color:var(--muted2); font-size:10.5px; font-weight:600; transition:color .15s; }
.orac-nav a.active{ color:var(--txt); }
.orac-nav a.active svg{ stroke:var(--primary); }
.orac-nav svg{ width:23px; height:23px; stroke:currentColor; fill:none; stroke-width:2; }
/* "+" central em destaque (criar palpite) — elevado sobre a barra, cutout no fundo */
.orac-nav a.orac-nav-plus{ flex:0 0 auto; align-self:center; width:54px; height:54px; margin:0 8px; border-radius:50%;
	display:grid; place-items:center; background:var(--grad-brand); box-shadow:var(--shadow-brand);
	transform:translateY(-12px); border:4px solid var(--bg); transition:transform var(--dur-fast), filter var(--dur-base); }
.orac-nav a.orac-nav-plus svg{ width:26px; height:26px; stroke:#fff; }
.orac-nav a.orac-nav-plus.active{ filter:brightness(1.08); }
.orac-nav a.orac-nav-plus:active{ transform:translateY(-12px) scale(.93); }

/* ---------- Lists (bets / ledger / ranking) ---------- */
.orac-list-item{ display:flex; justify-content:space-between; align-items:center; gap:12px; background:var(--surface);
	border:1px solid var(--line2); border-radius:var(--r-md); padding:13px 14px; margin-bottom:10px; box-shadow:var(--shadow-1); }
.orac-list-item .main{ min-width:0; } .orac-list-item .main .t{ font-weight:700; font-size:14px; line-height:1.3; }
.orac-list-item .main .s{ color:var(--muted); font-size:12px; margin-top:3px; }
.orac-tag{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:99px; white-space:nowrap; }
.tag-active{ background:color-mix(in srgb,var(--primary) 22%,transparent); color:#c7d2fe; }
.tag-won{ background:color-mix(in srgb,var(--yes) 20%,transparent); color:#86efac; }
.tag-lost{ background:color-mix(in srgb,var(--no) 18%,transparent); color:#fda4af; }
.tag-refunded{ background:var(--surface2); color:var(--muted); }
.orac-rankrow{ display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--surface); border:1px solid var(--line);
	border-radius:14px; margin-bottom:8px; }
.orac-rankrow .pos{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:13px;
	background:var(--surface2); color:var(--muted); }
.orac-rankrow.top .pos{ background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff; }
.orac-rankrow .nm{ flex:1; font-weight:700; } .orac-rankrow .eq{ font-weight:800; color:var(--accent); }
.orac-rankrow.me{ border-color:var(--primary); background:color-mix(in srgb,var(--primary) 12%, var(--surface)); }
.orac-rankrow .youtag{ font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--primary); padding:1px 7px; border-radius:99px; margin-left:6px; vertical-align:middle; }
.orac-rankrow.mine-out{ margin-top:12px; position:relative; }
.orac-rankrow.mine-out::before{ content:'sua posição'; position:absolute; top:-16px; left:2px; font-size:10.5px; color:var(--muted2); font-weight:600; }

/* Wallet */
.orac-wallet-card{ background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--accent) 60%,var(--primary)));
	border-radius:20px; padding:22px; color:#fff; box-shadow:0 16px 40px color-mix(in srgb,var(--primary) 40%,transparent); margin-bottom:16px; }
.orac-wallet-card .lbl{ opacity:.85; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; }
.orac-wallet-card .bal{ font-size:38px; font-weight:800; letter-spacing:-.02em; margin-top:4px; }
.orac-stat-row{ display:flex; gap:10px; margin-bottom:16px; }
.orac-stat{ flex:1; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px 14px; }
.orac-stat .v{ font-size:19px; font-weight:800; } .orac-stat .l{ color:var(--muted); font-size:11.5px; margin-top:2px; }

/* ---------- Skeleton ---------- */
.orac-skel{ background:linear-gradient(90deg,var(--surface) 25%, var(--surface2) 37%, var(--surface) 63%);
	background-size:400% 100%; animation:orac-shimmer 1.3s infinite; border-radius:12px; }
@keyframes orac-shimmer{ 0%{background-position:100% 0;} 100%{background-position:-100% 0;} }
.orac-skel-card{ height:118px; margin-bottom:12px; }

/* ---------- Empty / boot ---------- */
.orac-empty{ text-align:center; padding:48px 24px; color:var(--muted); }
.orac-empty .emoji{ font-size:44px; margin-bottom:10px; }
.orac-empty svg{ width:46px; height:46px; opacity:.45; stroke-width:1.6; margin-bottom:12px; display:inline-block; stroke:currentColor; fill:none; }
/* Ilustracao de estado vazio (decorativa, alt=""): centralizada e limitada p/ nao dominar a tela. */
.orac-empty-art{ width:100%; max-width:220px; height:auto; margin:0 auto 14px; display:block; }
@media (min-width:640px){ .orac-empty-art{ max-width:260px; } }
/* Artes de categoria nos slots de midia (card 16:8 / hero 16:9): cobre sem distorcer, centralizado. */
.pcard-media .orac-art, .phero-media .orac-art{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.orac-boot{ display:grid; place-items:center; min-height:100vh; color:var(--muted); }

/* ---------- Toast ---------- */
.orac-toast{ position:fixed; left:50%; bottom:calc(var(--nav-h) + 20px); transform:translateX(-50%) translateY(20px);
	z-index:80; background:var(--surface2); color:var(--txt); border:1px solid var(--line2); border-radius:12px;
	padding:12px 18px; font-size:14px; font-weight:600; opacity:0; transition:.25s; box-shadow:0 10px 30px rgba(0,0,0,.4); max-width:90%; }
.orac-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.orac-toast.err{ border-color:var(--no); color:#fecdd3; }
.orac-toast.ok{ border-color:var(--yes); }

/* ---------- Login CTA ---------- */
.orac-gate{ text-align:center; padding:28px 18px; background:var(--surface); border:1px solid var(--line2); border-radius:var(--r-lg); box-shadow:var(--shadow-1); }
.orac-gate p{ color:var(--muted); margin:6px 0 16px; }
.orac-gate > svg{ width:42px; height:42px; opacity:.5; stroke:currentColor; fill:none; stroke-width:1.7; margin-bottom:4px; display:inline-block; }

@media (min-width:640px){
	.orac-shell{ border-left:1px solid var(--line); border-right:1px solid var(--line); }
}

/* ---------- Dataviz: sparkline / barra de pool / medidor IA ---------- */
.orac-spark{ display:block; }
.orac-card-spark{ flex:0 0 auto; align-self:center; width:88px; }
.orac-spark.big{ width:100%; height:auto; }
.orac-spark-wrap{ display:flex; align-items:flex-end; gap:14px; }
.orac-spark-wrap .orac-spark{ flex:1 1 auto; min-width:0; }
.orac-spark-now{ flex:0 0 auto; text-align:right; line-height:1.05; }
.orac-spark-now b{ font-size:22px; font-weight:var(--w-hero); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.orac-spark-now span{ display:block; font-size:11px; color:var(--muted); margin-top:2px; }

.orac-poolbar{ display:flex; height:8px; border-radius:99px; overflow:hidden; background:var(--surface2); gap:2px; margin:0 0 14px; }
.orac-poolbar .seg{ height:100%; flex:0 0 auto; }
.orac-poolbar .seg.yes{ background:var(--yes); } .orac-poolbar .seg.no{ background:var(--no); }
.orac-poolbar .seg.k0{ background:var(--primary); } .orac-poolbar .seg.k1{ background:var(--accent); }
.orac-poolbar .seg.k2{ background:var(--extra); } .orac-poolbar .seg.k3{ background:var(--info); }

.orac-trend{ display:inline-flex; align-items:center; gap:3px; font-weight:700; font-size:11px;
	font-variant-numeric:tabular-nums; padding:1px 7px; border-radius:99px; }
.orac-trend.up{ color:#86efac; background:color-mix(in srgb,var(--yes) 16%,transparent); }
.orac-trend.down{ color:#fda4af; background:color-mix(in srgb,var(--no) 14%,transparent); }

.orac-vs{ margin-top:12px; }
.orac-vs-track{ position:relative; height:8px; border-radius:99px; background:var(--surface2); margin:14px 4px 10px; }
.orac-vs-track .band{ position:absolute; top:0; bottom:0; background:color-mix(in srgb,var(--warn) 42%,transparent); border-radius:99px; }
.orac-vs-track .mk{ position:absolute; top:50%; width:13px; height:13px; border-radius:50%; transform:translate(-50%,-50%); border:2px solid var(--surface); box-shadow:0 1px 3px rgba(0,0,0,.4); }
.orac-vs-track .mk.mkt{ background:var(--muted); } .orac-vs-track .mk.ai{ background:var(--warn); }
.orac-vs-legend{ display:flex; justify-content:space-between; font-size:12px; color:var(--muted); }
.orac-vs-legend b{ color:var(--txt); font-variant-numeric:tabular-nums; }
.orac-vs-legend .dot{ display:inline-block; width:8px; height:8px; border-radius:50%; vertical-align:middle; margin-right:3px; }
.orac-vs-legend .dot.mkt{ background:var(--muted); } .orac-vs-legend .dot.ai{ background:var(--warn); }
.orac-vs-edge{ margin-top:9px; font-size:12.5px; font-weight:var(--w-label); color:var(--warn); text-align:center; }

/* ================= LAYOUT DESKTOP (montado pelo JS em telas >= 1024px) ================= */
.orac-desktop{ display:grid; grid-template-columns:250px minmax(0,1fr) 324px; min-height:100vh; max-width:1600px; margin:0 auto; }

.od-side{ position:sticky; top:0; height:100vh; border-right:1px solid var(--line); padding:20px 14px;
	display:flex; flex-direction:column; gap:3px; background:linear-gradient(180deg,var(--bg2),var(--bg)); }
.od-brand{ display:flex; align-items:center; gap:11px; font-weight:800; font-size:20px; letter-spacing:-.02em; padding:6px 8px 14px; }
.od-brand .logo{ width:34px; height:34px; border-radius:11px; display:grid; place-items:center; font-weight:800; color:#fff;
	background:linear-gradient(135deg,var(--primary),var(--accent)); box-shadow:0 6px 18px color-mix(in srgb,var(--primary) 40%,transparent); }
.od-brand img{ height:32px; border-radius:8px; }
.od-nav a{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:11px; color:var(--muted); font-weight:600; font-size:14.5px; cursor:pointer; transition:background .15s,color .15s; }
.od-nav a:hover{ background:var(--surface); color:var(--txt); }
.od-nav a.active{ background:color-mix(in srgb,var(--primary) 20%,transparent); color:#fff; }
.od-nav a.active svg{ stroke:var(--primary); }
.od-nav svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; flex:0 0 auto; }
.od-lbl{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:16px 12px 6px; font-weight:700; }
.od-cat a{ padding:8px 12px; font-size:13.5px; }
.od-cat a.active{ color:var(--txt); font-weight:700; background:var(--surface); }
/* Categorias viraram <button> (acessivel por teclado) — mesmo visual dos itens de nav */
.od-nav button{ display:flex; align-items:center; gap:12px; padding:8px 12px; border-radius:11px; color:var(--muted);
	font-weight:600; font-size:13.5px; cursor:pointer; transition:background .15s,color .15s; background:none; border:0; width:100%; text-align:left; font-family:inherit; }
.od-nav button:hover{ background:var(--surface); color:var(--txt); }
.od-nav button.active{ color:var(--txt); font-weight:700; background:var(--surface); }
.od-spacer{ flex:1; min-height:16px; }
.od-user{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:13px; }
.od-user .u{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.od-user .av{ width:36px; height:36px; border-radius:50%; background:var(--surface2); display:grid; place-items:center; font-weight:700; }
.od-user .u > div{ min-width:0; } /* deixa o texto truncar em vez de estourar o card */
.od-user .nm, .od-user .sub{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.od-user .nm{ font-weight:700; font-size:13.5px; } .od-user .sub{ font-size:11.5px; color:var(--muted); }
.od-user .bal{ font-family:var(--mono); font-weight:800; font-size:17px; margin:2px 0 10px; }

.od-main{ padding:22px 20px 44px; min-width:0; }

.od-rail{ position:sticky; top:0; height:100vh; overflow:auto; border-left:1px solid var(--line); padding:20px 16px; display:flex; flex-direction:column; gap:16px; }
.od-panel{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:15px; }
.od-panel h3{ font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:12px; font-weight:700; }
.od-trend{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--line); font-size:13px; cursor:pointer; }
.od-trend:first-of-type{ border-top:0; }
.od-trend .t{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.od-trend .p{ font-family:var(--mono); color:var(--accent); font-weight:700; flex:0 0 auto; }
.od-rail .orac-wallet-card{ margin-bottom:0; padding:18px; }
.od-rail .orac-wallet-card .bal{ font-size:28px; }
/* Ranking no rail: nome longo (ex.: e-mail) trunca, valor nunca sai do card */
.od-rail .orac-rankrow{ overflow:hidden; gap:8px; }
.od-rail .orac-rankrow .nm{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.od-rail .orac-rankrow .eq{ flex:0 0 auto; white-space:nowrap; }

/* Mercados em grade dentro do main */
.orac-desktop #orac-mkt-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; align-items:start; }
.orac-desktop #orac-mkt-list .orac-card{ margin-bottom:0; }
/* Conteudo de leitura (detalhe/carteira/apostas/ranking) nao estica demais */
.od-main .orac-detail-q, .od-main .orac-detail-meta, .od-main .orac-back,
.od-main .orac-panel, .od-main .orac-list-item, .od-main .orac-stat-row,
.od-main .orac-wallet-card, .od-main .orac-rankrow, .od-main .orac-gate{ max-width:840px; }

/* Card de destaque (hero) */
.orac-featured{ background:linear-gradient(120deg,color-mix(in srgb,var(--primary) 22%,var(--surface)),var(--surface));
	border:1px solid var(--line2); border-radius:18px; padding:22px; margin-bottom:22px; display:grid;
	grid-template-columns:1.35fr 1fr; gap:24px; cursor:pointer; }
.odf-cat{ font-family:var(--mono); font-size:11px; color:#b8c2ff; letter-spacing:.1em; text-transform:uppercase; } /* claro p/ contraste AA sobre o card */
.orac-featured h2{ font-size:23px; font-weight:800; letter-spacing:-.02em; margin:8px 0 12px; line-height:1.2; }
.odf-meta{ display:flex; gap:16px; color:var(--muted); font-size:13px; margin-bottom:16px; }
.odf-meta b{ color:var(--txt); }
.odf-buy{ display:flex; gap:10px; }
.odf-b{ flex:1; border-radius:12px; padding:12px; text-align:center; font-weight:800; border:1px solid var(--line2); }
.odf-b span{ display:block; font-size:13px; opacity:.9; } .odf-b b{ font-family:var(--mono); font-size:20px; }
.odf-b.yes{ background:color-mix(in srgb,var(--yes) 16%,transparent); color:#86efac; }
.odf-b.no{ background:color-mix(in srgb,var(--no) 14%,transparent); color:#fda4af; }
.odf-ai{ display:flex; flex-direction:column; justify-content:center; gap:8px; }
.odf-ai-l{ color:var(--muted); font-size:13px; }
.odf-prob{ font-family:var(--mono); font-size:42px; font-weight:800; }
.orac-gauge{ height:12px; border-radius:99px; background:#0c1220; overflow:hidden; }
.orac-gauge>span{ display:block; height:100%; background:linear-gradient(90deg,#0f7a55,var(--yes)); }
.orac-featured{ transition:transform .15s, border-color .15s; }
.orac-featured:hover{ transform:translateY(-2px); border-color:color-mix(in srgb,var(--primary) 45%, var(--line2)); }
.orac-featured.noai{ grid-template-columns:1fr; }

/* --- Polimento desktop --- */
.orac-desktop .orac-chips{ display:none; }        /* categorias ficam na sidebar (sem duplicar) */
.orac-desktop .orac-search{ max-width:640px; }
.orac-desktop #orac-mkt-list .orac-card{ cursor:pointer; }
.orac-desktop #orac-mkt-list .orac-card:hover{ transform:translateY(-3px); border-color:var(--line2); background:var(--surface2); }

/* --- Foco visivel (acessibilidade de teclado) --- */
.orac-root a:focus-visible, .orac-root button:focus-visible, .orac-root input:focus-visible,
.orac-root summary:focus-visible, .od-nav a:focus-visible, .orac-chip:focus-visible{
	outline:2px solid var(--primary); outline-offset:2px; border-radius:8px; }

/* Order-ticket (rail do detalhe) */
.od-ticket{ border-color:color-mix(in srgb,var(--primary) 32%, var(--line2)); }
.od-ticket h3{ margin-bottom:12px; }
.od-ticket .orac-pick .opt{ min-width:0; padding:10px; }
.od-ticket .orac-quick button{ min-height:40px; font-size:12.5px; }
.od-ticket .orac-amount input{ font-size:22px; }

/* Rail some abaixo de 1300px (senao o main cai p/ 1 coluna com espaco sobrando = zona morta) */
@media (max-width:1300px){
	.orac-desktop{ grid-template-columns:230px minmax(0,1fr); }
	.od-rail{ display:none; }
	.orac-featured{ grid-template-columns:1fr; }
}