/* Estilos de interface (texturas) e efeitos de datas especiais. Cada estilo é uma classe ui-* no body; as variáveis --u-* alimentam também as prévias (.uip-*). */

/* ===== reflexo no menu superior ===== */
.shellbar { isolation: isolate; }
.shellbar::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.07) 46%, rgba(255,255,255,0) 52%, rgba(0,0,0,.10) 100%); }
.shellbar::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(260px 90px at var(--mx, 70%) 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 70%), linear-gradient(105deg, transparent 42%, rgba(255,255,255,.14) 50%, transparent 58%);
  background-size: 100% 100%, 260% 100%; background-repeat: no-repeat; background-position: 0 0, 130% 0; animation: shellSheen 11s ease-in-out 2s infinite; }
.shellbar { box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 -1px 0 rgba(0,0,0,.25) inset, 0 6px 22px -8px rgba(0,0,0,.55); }
@keyframes shellSheen { 0%, 62% { background-position: 0 0, 130% 0; } 92%, 100% { background-position: 0 0, -30% 0; } }
@media (prefers-reduced-motion: reduce) { .shellbar::after { animation: none; } }

/* ===== variáveis de cada estilo ===== */
.ui-paper, .uip-paper { --u-color: #f4ecd9; --u-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.33 0 0 0 0 0.2 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --u-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.33 0 0 0 0 0.2 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(180deg, #f8f2e3, #efe5cd); --u-card: #fffcf3; --u-cardimg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.33 0 0 0 0 0.2 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --u-line: #e0d3b6; --u-bf: none; --u-side: #fbf6e8; }
.ui-notebook, .uip-notebook { --u-color: #fbfaf2; --u-bg: linear-gradient(90deg, transparent 62px, rgba(220,60,60,.45) 62px, rgba(220,60,60,.45) 64px, transparent 64px), repeating-linear-gradient(180deg, transparent 0 27px, rgba(70,120,200,.28) 27px 28px), #fdfcf4; --u-card: rgba(255,255,255,.82); --u-cardimg: none; --u-line: #d9dff0; --u-bf: blur(2px); --u-side: rgba(255,255,255,.7); }
.ui-glass, .uip-glass { --u-color: #dfe9f7; --u-bg: radial-gradient(680px 460px at 8% 6%, rgba(99,102,241,.40), transparent 70%), radial-gradient(640px 440px at 92% 12%, rgba(20,184,166,.36), transparent 70%), radial-gradient(720px 520px at 70% 100%, rgba(236,72,153,.28), transparent 70%), linear-gradient(160deg, #e6eefc, #dff3f1); --u-card: rgba(255,255,255,.55); --u-cardimg: none; --u-line: rgba(255,255,255,.65); --u-bf: blur(18px) saturate(160%); --u-side: rgba(255,255,255,.45); }
.ui-linen, .uip-linen { --u-color: #ece8df; --u-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 0h6v1H0zM0 3h6v1H0z' fill='rgba(120,100,70,.10)'/%3E%3Cpath d='M0 0h1v6H0zM3 0h1v6H3z' fill='rgba(120,100,70,.10)'/%3E%3C/svg%3E"), linear-gradient(180deg, #efebe2, #e5e0d4); --u-card: #fbf9f4; --u-cardimg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 0h6v1H0zM0 3h6v1H0z' fill='rgba(120,100,70,.10)'/%3E%3Cpath d='M0 0h1v6H0zM3 0h1v6H3z' fill='rgba(120,100,70,.10)'/%3E%3C/svg%3E"); --u-line: #d8d1c0; --u-bf: none; --u-side: #f3efe6; }
.ui-blueprint, .uip-blueprint { --u-color: #e8f1fb; --u-bg: linear-gradient(rgba(37,99,235,.18) 1px, transparent 1px) 0 0 / 120px 120px, linear-gradient(90deg, rgba(37,99,235,.18) 1px, transparent 1px) 0 0 / 120px 120px, linear-gradient(rgba(37,99,235,.09) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(37,99,235,.09) 1px, transparent 1px) 0 0 / 24px 24px, #eaf2fc; --u-card: rgba(255,255,255,.92); --u-cardimg: none; --u-line: #c5d6ee; --u-bf: none; --u-side: rgba(255,255,255,.9); }
.ui-aurora, .uip-aurora { --u-color: #f1ecfb; --u-bg: radial-gradient(900px 600px at 0% 0%, rgba(168,85,247,.28), transparent 65%), radial-gradient(800px 600px at 100% 20%, rgba(56,189,248,.28), transparent 65%), radial-gradient(900px 600px at 40% 100%, rgba(251,146,60,.22), transparent 65%), #f6f3fc; --u-card: rgba(255,255,255,.86); --u-cardimg: none; --u-line: rgba(160,140,210,.35); --u-bf: blur(6px); --u-side: rgba(255,255,255,.7); }
.ui-slate, .uip-slate { --u-color: #e4e7eb; --u-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.25 0 0 0 0 0.27 0 0 0 0 0.3 0 0 0 .20 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(180deg, #e9ecef, #dde1e6); --u-card: #f6f7f9; --u-cardimg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.25 0 0 0 0 0.27 0 0 0 0 0.3 0 0 0 .20 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --u-line: #cbd1d9; --u-bf: none; --u-side: #eef0f3; }
/* escuro */
:root[data-theme="dark"] .ui-paper, :root[data-theme="dark"] .uip-paper { --u-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.85 0 0 0 0 0.75 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(180deg, #1f1a14, #181410); --u-card: #26201a; --u-cardimg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.85 0 0 0 0 0.75 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --u-line: #3b3228; --u-side: #211c16; }
:root[data-theme="dark"] .ui-notebook, :root[data-theme="dark"] .uip-notebook { --u-bg: linear-gradient(90deg, transparent 62px, rgba(248,113,113,.4) 62px, rgba(248,113,113,.4) 64px, transparent 64px), repeating-linear-gradient(180deg, transparent 0 27px, rgba(120,160,230,.18) 27px 28px), #141a24; --u-card: rgba(26,34,48,.84); --u-line: #2b3547; --u-side: rgba(20,26,36,.8); }
:root[data-theme="dark"] .ui-glass, :root[data-theme="dark"] .uip-glass { --u-bg: radial-gradient(680px 460px at 8% 6%, rgba(99,102,241,.40), transparent 70%), radial-gradient(640px 440px at 92% 12%, rgba(20,184,166,.28), transparent 70%), radial-gradient(720px 520px at 70% 100%, rgba(236,72,153,.22), transparent 70%), linear-gradient(160deg, #0d1220, #0b1a1c); --u-card: rgba(22,30,42,.55); --u-line: rgba(255,255,255,.12); --u-side: rgba(14,20,30,.5); }
:root[data-theme="dark"] .ui-linen, :root[data-theme="dark"] .uip-linen { --u-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 0h6v1H0zM0 3h6v1H0z' fill='rgba(255,255,255,.035)'/%3E%3Cpath d='M0 0h1v6H0zM3 0h1v6H3z' fill='rgba(255,255,255,.035)'/%3E%3C/svg%3E"), linear-gradient(180deg, #1c1b19, #151412); --u-card: #232220; --u-cardimg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 0h6v1H0zM0 3h6v1H0z' fill='rgba(255,255,255,.035)'/%3E%3Cpath d='M0 0h1v6H0zM3 0h1v6H3z' fill='rgba(255,255,255,.035)'/%3E%3C/svg%3E"); --u-line: #36342f; --u-side: #1e1d1b; }
:root[data-theme="dark"] .ui-blueprint, :root[data-theme="dark"] .uip-blueprint { --u-bg: linear-gradient(rgba(96,165,250,.22) 1px, transparent 1px) 0 0 / 120px 120px, linear-gradient(90deg, rgba(96,165,250,.22) 1px, transparent 1px) 0 0 / 120px 120px, linear-gradient(rgba(96,165,250,.10) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(96,165,250,.10) 1px, transparent 1px) 0 0 / 24px 24px, #0c1a30; --u-card: rgba(15,30,56,.9); --u-line: #234169; --u-side: rgba(12,26,48,.92); }
:root[data-theme="dark"] .ui-aurora, :root[data-theme="dark"] .uip-aurora { --u-bg: radial-gradient(900px 600px at 0% 0%, rgba(168,85,247,.30), transparent 65%), radial-gradient(800px 600px at 100% 20%, rgba(56,189,248,.22), transparent 65%), radial-gradient(900px 600px at 40% 100%, rgba(251,146,60,.16), transparent 65%), #110f1d; --u-card: rgba(26,24,44,.84); --u-line: rgba(160,140,210,.22); --u-side: rgba(20,18,36,.7); }
:root[data-theme="dark"] .ui-slate, :root[data-theme="dark"] .uip-slate { --u-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.8 0 0 0 0 0.85 0 0 0 0 0.9 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(180deg, #1b1e22, #14171a); --u-card: #22262b; --u-cardimg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.8 0 0 0 0 0.85 0 0 0 0 0.9 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --u-line: #343a42; --u-side: #1c1f23; }

/* ===== aplicação no sistema ===== */
body[class*="ui-"] { background: var(--u-bg) !important; background-color: var(--u-color) !important; background-attachment: fixed !important; }
body[class*="ui-"] .card, body[class*="ui-"] .kpi { background-color: var(--u-card); background-image: var(--u-cardimg); border-color: var(--u-line); -webkit-backdrop-filter: var(--u-bf, none); backdrop-filter: var(--u-bf, none); }
body[class*="ui-"] .sidenav { background-color: var(--u-side); background-image: var(--u-cardimg); border-color: var(--u-line); -webkit-backdrop-filter: var(--u-bf, none); backdrop-filter: var(--u-bf, none); }
body[class*="ui-"] .modal, body[class*="ui-"] .dropdown-panel { background-color: var(--u-card); background-image: var(--u-cardimg); border-color: var(--u-line); -webkit-backdrop-filter: var(--u-bf, none); backdrop-filter: var(--u-bf, none); }
body[class*="ui-"] .modal-f { background: transparent; }
body.ui-glass .modal, body.ui-glass .dropdown-panel { background-color: color-mix(in srgb, var(--u-card) 88%, #fff); }
body.ui-glass .card, body.ui-glass .kpi { box-shadow: 0 8px 30px -12px rgba(31,41,90,.28), inset 0 1px 0 rgba(255,255,255,.7); }
:root[data-theme="dark"] body.ui-glass .card { box-shadow: 0 8px 30px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08); }
body.ui-paper .card, body.ui-linen .card, body.ui-slate .card { box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 2px 3px rgba(60,45,20,.10), 0 10px 22px -14px rgba(60,45,20,.28); }
body.ui-paper .card::after { content: ""; position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; pointer-events: none; background: linear-gradient(135deg, transparent 50%, rgba(120,95,50,.14) 50%); border-radius: 0 0 var(--radius-lg) 0; }
body.ui-paper .card { position: relative; }
/* caderno: caneta no título */
body.ui-notebook .page-h h1, body.ui-notebook .card-h h3, body.ui-notebook .modal-h h3 { font-family: "Segoe Print", "Bradley Hand", "Chalkboard SE", "Comic Sans MS", "Marker Felt", cursive; font-weight: 600; letter-spacing: 0; }
body.ui-notebook .page-h h1 { color: #1e3a8a; position: relative; padding-bottom: 8px; }
:root[data-theme="dark"] body.ui-notebook .page-h h1 { color: #93b4ff; }
body.ui-notebook .page-h h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: min(180px, 80%); height: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='8' viewBox='0 0 40 8'%3E%3Cpath d='M0 4 Q5 0 10 4 T20 4 T30 4 T40 4' fill='none' stroke='%231e3a8a' stroke-width='1.6' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E") repeat-x left center / 40px 8px; }
body.ui-notebook .card { border-style: solid; border-radius: 6px; box-shadow: 2px 3px 0 rgba(30,58,138,.10); }
body.ui-notebook .main { padding-left: 84px; }
@media (max-width: 900px) { body.ui-notebook .main { padding-left: 28px; } }
body.ui-blueprint .card { border-radius: 4px; }
body.ui-blueprint .page-h h1 { letter-spacing: .01em; }
body.ui-aurora { animation: auroraDrift 40s ease-in-out infinite alternate; background-size: 140% 140% !important; }
@keyframes auroraDrift { from { background-position: 0% 0%; } to { background-position: 100% 60%; } }
@media (prefers-reduced-motion: reduce) { body.ui-aurora { animation: none; } }

/* prévia nas configurações */
.uip { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; border: 1px solid var(--u-line, var(--line)); background: var(--u-bg); background-color: var(--u-color); }
.uip i { position: absolute; border-radius: 5px; background-color: var(--u-card); background-image: var(--u-cardimg); border: 1px solid var(--u-line); -webkit-backdrop-filter: var(--u-bf, none); backdrop-filter: var(--u-bf, none); }
.uip i:nth-child(1) { left: 6%; top: 12%; width: 26%; height: 76%; } .uip i:nth-child(2) { left: 36%; top: 12%; width: 58%; height: 26%; } .uip i:nth-child(3) { left: 36%; top: 44%; width: 27%; height: 44%; } .uip i:nth-child(4) { left: 67%; top: 44%; width: 27%; height: 44%; }
.sty-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.sty { display: grid; gap: 8px; padding: 8px 8px 10px; text-align: left; cursor: pointer; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); position: relative; transition: border-color .15s, box-shadow .15s, transform .15s; }
.sty:hover:not(:disabled) { border-color: var(--brand); transform: translateY(-1px); } .sty:disabled { opacity: .55; cursor: not-allowed; }
.sty.on { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 30%, transparent); }
.sty .sty-n { display: flex; flex-direction: column; padding: 0 4px; } .sty .sty-n small { color: var(--text-3); font-size: 11.5px; }
.sty .pp-check { position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: #fff; display: none; place-items: center; } .sty.on .pp-check { display: grid; } .sty .pp-check .i { width: 12px; height: 12px; }
.uip-default { --u-color: var(--bg); --u-bg: var(--bg); --u-card: var(--surface); --u-cardimg: none; --u-line: var(--line); --u-bf: none; }

/* ===== datas especiais ===== */
.fx-layer { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.fx-p { position: absolute; top: -8%; will-change: transform; animation: fxFall linear infinite; opacity: .85; user-select: none; }
.fx-p.snow { color: #fff; text-shadow: 0 0 6px rgba(120,170,220,.8); } .fx-p.hearts { color: #f43f5e; } .fx-p.stars { color: #eab308; } .fx-p.sparkles { color: #f5c542; text-shadow: 0 0 8px rgba(245,197,66,.8); }
.fx-p.leaves { color: #d97706; } .fx-p.bats { color: #3b1d6e; } :root[data-theme="dark"] .fx-p.bats { color: #c4b5fd; } .fx-p.eggs { color: #a78bfa; } .fx-p.balloons { color: #38bdf8; }
.fx-p.confetti { width: 7px; height: 12px; border-radius: 2px; }
@keyframes fxFall { 0% { transform: translate3d(0, -6vh, 0) rotate(0deg); } 50% { transform: translate3d(var(--dx, 30px), 55vh, 0) rotate(180deg); } 100% { transform: translate3d(calc(var(--dx, 30px) * -1), 112vh, 0) rotate(360deg); } }
.fx-p.rise { top: auto; bottom: -8%; animation-name: fxRise; }
@keyframes fxRise { 0% { transform: translate3d(0, 0, 0) rotate(-8deg); } 50% { transform: translate3d(var(--dx, 30px), -55vh, 0) rotate(8deg); } 100% { transform: translate3d(calc(var(--dx, 30px) * -1), -112vh, 0) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .fx-layer { display: none; } }
.season-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); white-space: nowrap; animation: chipIn .6s ease-out; }
@keyframes chipIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) { .season-chip { display: none; } }
.ssn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.ssn { display: grid; gap: 12px; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); position: relative; overflow: hidden; }
.ssn::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--s1), var(--s2)); }
.ssn.live { border-color: var(--s1); box-shadow: 0 0 0 2px color-mix(in srgb, var(--s1) 25%, transparent); }
.ssn-h { display: flex; align-items: center; gap: 10px; } .ssn-h b { font-size: 15px; } .ssn .sw { display: flex; gap: 4px; } .ssn .sw i { width: 18px; height: 18px; border-radius: 6px; border: 1px solid rgba(0,0,0,.12); display: block; }
.ssn-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.ssn input[type=color] { width: 30px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }

/* ===== modelos de plano ===== */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.tpl { position: relative; display: grid; gap: 8px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.tpl::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--g1), var(--g2)); }
.tpl.sel { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 25%, transparent); } .tpl.done { opacity: .6; }
.tpl h4 { font-size: 15px; margin-top: 4px; } .tpl .tp { font-size: 20px; font-weight: 800; letter-spacing: -.02em; } .tpl .tp small { font-size: 12px; font-weight: 500; color: var(--text-3); }
.tpl ul { margin: 0; padding-left: 16px; display: grid; gap: 3px; font-size: 12.5px; color: var(--text-2); }

/* ===== perfil com capa ===== */
.pf-cover { position: relative; height: 220px; border-radius: 18px 18px 0 0; overflow: hidden; background: linear-gradient(120deg, var(--brand), color-mix(in srgb, var(--brand) 40%, #7c3aed) 55%, color-mix(in srgb, var(--brand) 30%, #ec4899)); background-size: 160% 160%; animation: pfShift 18s ease-in-out infinite alternate; }
.pf-cover img { width: 100%; height: 100%; object-fit: cover; display: block; animation: pfZoom 1.1s ease-out; }
.pf-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 35%, rgba(0,0,0,.32)); }
@keyframes pfShift { from { background-position: 0% 40%; } to { background-position: 100% 60%; } } @keyframes pfZoom { from { transform: scale(1.06); opacity: .6; } to { transform: none; opacity: 1; } }
.pf-cover-btn { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: flex; gap: 6px; }
.pf-cover-btn .btn { background: rgba(255,255,255,.88); color: #16252b; border-color: transparent; backdrop-filter: blur(6px); } .pf-cover-btn .btn:hover { background: #fff; }
.pf-card { border-radius: 0 0 18px 18px !important; overflow: visible; }
.pf-head { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; padding: 0 28px 20px; margin-top: -58px; position: relative; z-index: 2; }
.pf-ava { position: relative; width: 132px; height: 132px; flex: none; border-radius: 50%; border: 5px solid var(--surface); background: var(--surface); box-shadow: 0 10px 28px -10px rgba(0,0,0,.45); }
.pf-ava .pf-img, .pf-ava .pf-ini { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-size: 44px; font-weight: 800; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 70%, #fff), var(--brand-600)); animation: pfPop .5s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes pfPop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.pf-ava-btn { position: absolute; right: 2px; bottom: 6px; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--surface); background: var(--brand); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; } .pf-ava-btn:hover { background: var(--brand-600); } .pf-ava-btn .i { width: 15px; height: 15px; }
.pf-who { flex: 1; min-width: 220px; padding-top: 70px; padding-bottom: 4px; } .pf-who h2 { font-size: 26px; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.pf-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.pf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 16px 0; }
.pf-stat { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); } .pf-stat b { display: block; font-size: 20px; letter-spacing: -.02em; } .pf-stat span { font-size: 12.5px; color: var(--text-3); }
.avatar.img { padding: 0; background: none; overflow: hidden; } .avatar.img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) { .pf-cover { height: 150px; } .pf-head { padding: 0 16px 16px; margin-top: -48px; } .pf-who { padding-top: 0; } .pf-ava { width: 104px; height: 104px; } .pf-ava .pf-ini { font-size: 34px; } }

.hr { height: 1px; background: var(--line-2); margin: 2px 0; }

/* ===== recorte de imagem ===== */
.crop-frame{position:relative;width:100%;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px var(--line,rgba(0,0,0,.12)),0 8px 24px rgba(0,0,0,.12);background:#fff}
.crop-frame.round{border-radius:50%}
.crop-frame .crop-cv{width:100%;height:100%;border-radius:0!important}
.crop-grid{position:absolute;inset:0;pointer-events:none;opacity:.0;transition:opacity .2s;
  background-image:linear-gradient(rgba(255,255,255,.75) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.75) 1px,transparent 1px);
  background-size:100% 33.3333%,33.3333% 100%;mix-blend-mode:difference}
.crop-frame:not(.nogrid) .crop-grid{opacity:.35}
.crop-frame.dragging:not(.nogrid) .crop-grid{opacity:.8}
.crop-circle{position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85)}
.crop-tools{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.crop-sl{display:flex;align-items:center;gap:12px}
.crop-sl>span:first-child{width:52px;font-size:12.5px}
.crop-val{display:none}
@media (max-width:560px){.crop-tb-l{display:none}}
/* o cabeçalho sobe sobre a capa: não pode bloquear os botões da capa */
.pf-cover-btn { z-index: 3; }
.pf-head { pointer-events: none; }
.pf-head > * { pointer-events: auto; }
.crop-sl input[type=range]{accent-color:var(--brand)}

/* ===== datas especiais: só na página inicial ===== */
.fx-layer.scoped { position: absolute; z-index: 3; border-radius: inherit; }
.lp-season { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--brand-ink, var(--brand)); background: color-mix(in srgb, var(--brand) 12%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent); animation: lpSeasonIn .7s ease-out both; }
.lp-season i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent, var(--brand)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, var(--brand)) 25%, transparent); }
@keyframes lpSeasonIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sp-stage { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); min-height: 300px; background: radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--sp1) 22%, #fff), #fff 60%); color: var(--sp3); --brand: var(--sp1); --accent: var(--sp2); --brand-ink: var(--sp3); }
:root[data-theme="dark"] .sp-stage { background: radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--sp1) 35%, #0b1215), #0b1215 65%); color: #e8f1f3; --brand-ink: #fff; }
.sp-nav { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid color-mix(in srgb, var(--sp3) 10%, transparent); } .sp-nav b { font-size: 15px; } .sp-nav i { width: 38px; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--sp3) 14%, transparent); } .sp-nav em { font-style: normal; font-size: 12px; font-weight: 600; color: #fff; background: var(--sp1); padding: 6px 12px; border-radius: 8px; }
.sp-hero { padding: 34px 28px 40px; max-width: 520px; position: relative; z-index: 2; } .sp-hero h3 { font-size: 26px; letter-spacing: -.02em; margin-bottom: 8px; } .sp-hero p { opacity: .75; margin-bottom: 18px; }
.sp-cta { display: flex; gap: 10px; flex-wrap: wrap; } .sp-cta span { padding: 10px 18px; border-radius: 10px; font-weight: 600; font-size: 13.5px; color: #fff; background: linear-gradient(135deg, var(--sp1), color-mix(in srgb, var(--sp1) 70%, var(--sp2))); box-shadow: 0 8px 20px -8px var(--sp1); } .sp-cta span.o { background: none; color: inherit; box-shadow: none; border: 1px solid color-mix(in srgb, var(--sp3) 25%, transparent); }
.pf-act { padding-top: 74px; }
@media (max-width: 700px) { .pf-act { padding-top: 0; } }
.lp-season { display: flex; width: fit-content; }
.lp-hero .lp-season { color: #fff; background: color-mix(in srgb, var(--accent, #f59e0b) 20%, rgba(255,255,255,.04)); border-color: color-mix(in srgb, var(--accent, #f59e0b) 45%, transparent); }

/* ===== planos em carrossel ===== */
.plans { width: 100%; }
.plans-car { position: relative; width: 100%; }
.plans-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding: 30px 6px 26px; margin: -10px 0 -8px; scrollbar-width: none; align-items: stretch; outline: none; overscroll-behavior-x: contain; }
.plans-track::-webkit-scrollbar { display: none; }
.plans-track .plan-card { flex: 0 0 clamp(272px, 31%, 360px); scroll-snap-align: center; min-width: 0; }
.plans-track .plan-card:first-child { margin-left: auto; } .plans-track .plan-card:last-child { margin-right: auto; }
.plans-track.compact .plan-card { flex-basis: clamp(260px, 30%, 340px); }
.pc-nav { position: absolute; top: 50%; z-index: 5; width: 54px; height: 54px; margin-top: -27px; border-radius: 50%; border: 3px solid #fff; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 55%, #7c3aed)); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 14px 32px -8px color-mix(in srgb, var(--brand) 70%, #000), 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent); opacity: 0; transform: scale(.8); pointer-events: none; transition: opacity .25s, transform .25s, filter .15s; }
.pc-nav .i { width: 24px; height: 24px; stroke-width: 2.6; }
.pc-nav.prev { left: -20px; } .pc-nav.next { right: -20px; }
.pc-nav:hover { filter: brightness(1.12) saturate(1.1); transform: scale(1.08) !important; }
.pc-nav:focus-visible { outline: 3px solid var(--amber, #f59e0b); outline-offset: 3px; }
.plans-car.can-prev .pc-nav.prev, .plans-car.can-next .pc-nav.next { opacity: 1; transform: none; pointer-events: auto; animation: pcRing 2.4s ease-out infinite; }
.plans-car.can-next .pc-nav.next .i { animation: pcBumpR 1.6s ease-in-out infinite; } .plans-car.can-prev .pc-nav.prev .i { animation: pcBumpL 1.6s ease-in-out infinite; }
@keyframes pcRing { 0% { box-shadow: 0 14px 32px -8px color-mix(in srgb, var(--brand) 70%, #000), 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent); } 70%, 100% { box-shadow: 0 14px 32px -8px color-mix(in srgb, var(--brand) 70%, #000), 0 0 0 16px transparent; } }
@keyframes pcBumpR { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes pcBumpL { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
.plans-car::before, .plans-car::after { content: ""; position: absolute; top: 0; bottom: 0; width: 38px; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .2s; }
.plans-car::before { left: 0; background: linear-gradient(90deg, var(--plans-bg, var(--bg)), transparent); } .plans-car::after { right: 0; background: linear-gradient(270deg, var(--plans-bg, var(--bg)), transparent); }
.plans-car.can-prev::before, .plans-car.can-next::after { opacity: 1; }
.lp-pricing { --plans-bg: var(--surface-2); }
.pc-dots { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
.pc-dot { width: 8px; height: 8px; padding: 0; border-radius: 99px; border: 0; background: color-mix(in srgb, var(--text) 22%, transparent); cursor: pointer; transition: width .25s, background .2s; }
.pc-dot.on { width: 26px; background: var(--brand); }
.plans-car.static ~ .pc-foot .pc-dots { display: none; }
@media (max-width: 700px) { .plans-track .plan-card, .plans-track.compact .plan-card { flex-basis: min(84%, 340px); } .pc-nav { display: none; } .plans-track { padding-left: 8%; padding-right: 8%; scroll-padding: 0 8%; } .plans-track .plan-card:first-child { margin-left: 0; } .plans-track .plan-card:last-child { margin-right: 0; } }
@media (prefers-reduced-motion: reduce) { .plans-track { scroll-behavior: auto; } }

.ssn-cl { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; } .ssn-cl input[type=color] { width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: none; cursor: pointer; }

/* destaque dos cartões ao passar o mouse */
.plans-track .plan-card { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, opacity .3s, filter .3s; will-change: transform; }
.plan-card .plan-head { position: relative; overflow: hidden; }
.plan-card .plan-head::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.38) 50%, transparent 70%); transform: translateX(-130%); pointer-events: none; z-index: 1; }
@media (hover: hover) {
  .plans-track:hover .plan-card:not(:hover) { opacity: .82; filter: saturate(.85); transform: scale(.985); }
  .plans-track .plan-card:hover { transform: translateY(-10px) scale(1.035); z-index: 3; box-shadow: 0 34px 60px -22px color-mix(in srgb, var(--pg1, var(--brand)) 70%, #000), 0 0 0 1px color-mix(in srgb, var(--pg1, var(--brand)) 40%, transparent); }
  .plans-track .plan-card:hover .plan-head::before { animation: pcSheen .9s ease-out; }
  .plans-track .plan-card:hover .plan-cta { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 14px 26px -10px color-mix(in srgb, var(--pg1, var(--brand)) 75%, #000); }
  .plans-track .plan-card:hover .pp-val { animation: pcPop .5s ease-out; }
  .plans-track .plan-card:hover .plan-list li .i { transform: scale(1.18); }
}
.plan-card .plan-cta { transition: transform .25s, filter .25s, box-shadow .25s; } .plan-card .plan-list li .i { transition: transform .25s; }
@keyframes pcSheen { to { transform: translateX(130%); } }
@keyframes pcPop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.plans-car.nudge .plan-card.hl { animation: pcHl 2.6s ease-in-out 2; }
@keyframes pcHl { 0%, 100% { transform: none; } 50% { transform: translateY(-6px); } }
.pc-foot { display: grid; justify-items: center; gap: 8px; margin-top: 2px; }
.pc-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--brand); } .pc-hint .i { width: 14px; height: 14px; animation: pcBumpR 1.6s ease-in-out infinite; } .pc-hint .i:first-child { animation-name: pcBumpL; }
.plans-car.static ~ .pc-foot { display: none; }
@media (max-width: 700px) { .pc-hint { font-size: 13px; padding: 6px 12px; border-radius: 99px; background: color-mix(in srgb, var(--brand) 10%, transparent); } }
@media (prefers-reduced-motion: reduce) { .pc-nav, .pc-nav .i, .pc-hint .i, .plans-car.nudge .plan-card.hl { animation: none !important; } }

/* ================= sétima leva: compras, desafios, empréstimos, semana, sem gastos, 50/30/20, notas, cronômetro, acessos ================= */
.x7-quick { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); } .x7-quick .input, .x7-quick input { flex: 1; min-width: 0; }
.x7-shop { gap: 12px; } .x7-shop.done .x7-name { text-decoration: line-through; color: var(--text-3); } .x7-shop.done { opacity: .7; }
.x7-tick { width: 26px; height: 26px; flex: none; border-radius: 99px; border: 2px solid var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: transparent; transition: all .2s; padding: 0; }
.x7-tick .i { width: 14px; height: 14px; } .x7-tick:hover { border-color: var(--brand); } .x7-tick[aria-checked="true"] { background: var(--pos); border-color: var(--pos); color: #fff; transform: scale(1.06); }
.x7-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.x7-chal.won { border-color: color-mix(in srgb, var(--pos) 55%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pos) 12%, transparent); }
.x7-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; padding: 2px; }
.x7-step { display: grid; gap: 1px; justify-items: center; padding: 6px 2px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; transition: transform .15s, background .2s, border-color .2s; }
.x7-step b { font-size: 13px; } .x7-step small { font-size: 10.5px; color: var(--text-3); white-space: nowrap; } .x7-step:not(:disabled):hover { transform: translateY(-2px); border-color: var(--brand); }
.x7-step.on { background: var(--pos); border-color: var(--pos); color: #fff; } .x7-step.on small { color: rgba(255,255,255,.85); } .x7-step:disabled { cursor: default; }
.x7-pays { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .x7-pay { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line-2); font-size: 12px; color: var(--text-2); }
.x7-pay button { border: 0; background: none; cursor: pointer; color: var(--text-3); font-size: 15px; line-height: 1; padding: 0 0 0 2px; } .x7-pay button:hover { color: var(--neg); }
.x7-loan.done { opacity: .7; }
.x7-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; align-items: end; min-height: 200px; }
.x7-day { display: grid; gap: 6px; justify-items: center; grid-template-rows: 16px 140px auto; } .x7-dv { font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
.x7-bar { width: 100%; max-width: 44px; height: 140px; display: flex; align-items: flex-end; border-radius: 8px; background: var(--surface-2); overflow: hidden; }
.x7-bar i { display: block; width: 100%; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--brand-lt), var(--brand)); transition: height .5s cubic-bezier(.2,.8,.2,1); } .x7-day small { color: var(--text-3); font-size: 11.5px; }
.x7-streak { text-align: center; padding: 30px 20px; display: grid; justify-items: center; gap: 6px; background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, #f59e0b 18%, var(--surface)), var(--surface) 70%); }
.x7-flame { width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #f59e0b, #ef4444); box-shadow: 0 14px 30px -12px #ef4444; animation: x7Flame 2.4s ease-in-out infinite; } .x7-flame .i { width: 32px; height: 32px; }
@keyframes x7Flame { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.05); } }
.x7-big b { display: block; font-size: 64px; line-height: 1; letter-spacing: -.04em; } .x7-big span { color: var(--text-2); font-weight: 600; }
.x7-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 460px; margin: 0 auto; } .x7-dow { text-align: center; color: var(--text-3); font-weight: 600; font-size: 11.5px; }
.x7-cell { aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; font-size: 12px; font-weight: 600; } .x7-cell.ok { background: color-mix(in srgb, var(--pos) 18%, var(--surface)); color: var(--pos); } .x7-cell.bad { background: color-mix(in srgb, var(--neg) 15%, var(--surface)); color: var(--neg); }
.x7-cell.today { outline: 2px solid var(--brand); outline-offset: 2px; }
.x7-stack { display: flex; height: 20px; border-radius: 99px; overflow: hidden; background: var(--surface-2); } .x7-stack i { display: block; height: 100%; transition: width .5s; }
.x7-notes { columns: 3 260px; column-gap: 14px; } .x7-note { break-inside: avoid; display: block; width: 100%; text-align: left; margin: 0 0 14px; padding: 16px; border-radius: 14px; border: 1px solid transparent; position: relative; cursor: default; font: inherit; color: #2b2410; transition: transform .2s, box-shadow .2s; box-shadow: 0 6px 16px -10px rgba(0,0,0,.35); }
button.x7-note { cursor: pointer; } button.x7-note:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: 0 16px 26px -14px rgba(0,0,0,.4); }
.x7-note b { display: block; font-size: 15px; padding-right: 22px; } .x7-note p { margin: 8px 0 10px; white-space: pre-wrap; font-size: 13.5px; line-height: 1.5; opacity: .88; } .x7-note small { opacity: .6; font-size: 11.5px; }
.x7-note.c-yellow { background: #fdf1b8; } .x7-note.c-green { background: #cdeed7; } .x7-note.c-blue { background: #cfe6f8; } .x7-note.c-pink { background: #f9d5e3; } .x7-note.c-gray { background: #e3e7ea; }
.x7-pin { position: absolute; top: 12px; right: 12px; color: #b7791f; } .x7-pin .i { width: 16px; height: 16px; fill: currentColor; }
.x7-sub { margin: 16px 0; padding: 20px; position: relative; overflow: hidden; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 9%, var(--surface)), var(--surface) 65%); }
.x7-sub::after { content: ""; position: absolute; inset: auto -40px -60px auto; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 18%, transparent), transparent 70%); pointer-events: none; }
.x7-sub[data-tone="warn"] { background: linear-gradient(135deg, color-mix(in srgb, #f59e0b 14%, var(--surface)), var(--surface) 65%); } .x7-sub[data-tone="neg"] { background: linear-gradient(135deg, color-mix(in srgb, var(--neg) 12%, var(--surface)), var(--surface) 65%); }
.x7-sub-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .x7-sub-h > div { flex: 1; min-width: 0; } .x7-cd-l { font-weight: 600; margin-bottom: 10px; }
.x7-cds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 460px; margin-bottom: 10px; }
.x7-cd { display: grid; justify-items: center; padding: 12px 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); } .x7-cd b { font-size: 30px; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .x7-cd small { color: var(--text-3); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.x7-sub[data-tone="neg"] .x7-cd b { color: var(--neg); } .x7-sub[data-tone="warn"] .x7-cd b { color: var(--warn); }
.x7-forever { display: flex; align-items: center; gap: 14px; } .x7-forever > span { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-size: 34px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #7c3aed, #ec4899); box-shadow: 0 12px 26px -12px #7c3aed; }
.x7-code { font-weight: 700; letter-spacing: .06em; padding: 2px 8px; border-radius: 8px; background: var(--surface-2); border: 1px dashed var(--line); }
.chip { border: 1px solid var(--line); background: var(--surface); color: var(--text-2); border-radius: 99px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; transition: all .15s; } .chip:hover { border-color: var(--brand); } .chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.x7-acc-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); }
.x7-acc-list { display: grid; gap: 6px; max-height: 340px; overflow: auto; padding-right: 4px; } .x7-acc-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-2); } .x7-acc-row.ov { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
.x7-tri { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; flex: none; } .x7-tri-b { border: 0; background: var(--surface); padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text-2); border-right: 1px solid var(--line); } .x7-tri-b:last-child { border-right: 0; }
.x7-tri-b.on { background: var(--brand); color: #fff; } .x7-tri-b.on.g { background: var(--pos); } .x7-tri-b.on.r { background: var(--neg); }
@media (max-width: 700px) { .x7-acc-row { flex-wrap: wrap; } .x7-grid { grid-template-columns: 1fr; } .x7-cd b { font-size: 24px; } .x7-big b { font-size: 52px; } }
@media (prefers-reduced-motion: reduce) { .x7-flame { animation: none; } }

.x7-acc-row .sub { font-size: 12px; color: var(--text-3); } .x7-acc-row b { font-size: 13.5px; }
td.actions { white-space: normal; } .x7-acts { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-start; width: 214px; max-width: 100%; }

/* ---- e-mail, indicações e afiliados ---- */
.mail-grid { align-items: start; }
.mail-tips { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--text-2); font-size: 13.5px; }
.mail-trace { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2, #f6f8f9); } .mail-trace summary { cursor: pointer; padding: 9px 12px; font-weight: 600; font-size: 13px; }
.mail-trace pre { margin: 0; padding: 10px 12px; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-all; max-height: 260px; overflow: auto; border-top: 1px solid var(--line); }
.mail-tpl { display: grid; grid-template-columns: 250px minmax(0, 1fr) minmax(300px, 420px); gap: 16px; align-items: start; }
.mail-list { display: grid; padding: 6px; gap: 2px; position: sticky; top: 12px; }
.mail-item { text-align: left; display: grid; gap: 2px; padding: 10px 12px; border: 0; background: transparent; border-radius: 10px; cursor: pointer; color: var(--text); }
.mail-item:hover { background: var(--surface-2, #f3f6f7); } .mail-item.on { background: var(--brand-soft, #e3f1ef); box-shadow: inset 3px 0 0 var(--brand); }
.mail-item .faint { font-size: 12px; line-height: 1.35; }
.mail-body { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.5; }
.mail-vars { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mail-vars .chip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 3px 10px; font: 12px ui-monospace, Menlo, monospace; cursor: pointer; color: var(--text-2); } .mail-vars .chip:hover { border-color: var(--brand); color: var(--brand); }
.mail-frame { width: 100%; height: 560px; border: 1px solid var(--line); border-radius: 12px; background: #eef2f4; }
.mail-prev { position: sticky; top: 12px; }
.x8-feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .x8-feat-grid .list-row { border-right: 1px solid var(--line-2); }
.ref-hero { background: linear-gradient(135deg, var(--brand-soft, #e3f1ef), var(--surface) 70%); }
.ref-steps { margin: 0; padding-left: 20px; display: grid; gap: 9px; color: var(--text-2); font-size: 14px; } .ref-steps b { color: var(--text); }
.ref-feats { max-height: 420px; overflow: auto; }
@media (max-width: 1180px) { .mail-tpl { grid-template-columns: 220px minmax(0, 1fr); } .mail-prev { grid-column: 1 / -1; position: static; } }
@media (max-width: 760px) { .mail-tpl { grid-template-columns: 1fr; } .mail-list { position: static; grid-template-columns: 1fr 1fr; } .mail-frame { height: 420px; } }

/* ---- celular (iPhone 11 e similares, também instalado como app): área segura, sem sobreposições, alvos de toque ---- */
:root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior-y: none; }
.shellbar { padding-left: max(16px, var(--sal)); padding-right: max(16px, var(--sar)); }
.toasts { right: max(20px, var(--sar)); bottom: max(20px, calc(var(--sab) + 12px)); }
@media (max-width: 900px) {
  .main { padding-left: max(16px, var(--sal)); padding-right: max(16px, var(--sar)); padding-bottom: calc(56px + var(--sab)); min-height: calc(100dvh - var(--shellbar-h)); }
  .sidenav { width: min(84vw, 320px); padding-bottom: calc(24px + var(--sab)); overscroll-behavior: contain; z-index: 31; }
  .scrim { z-index: 25; top: var(--shellbar-h); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } body.nav-open .scrim { display: block !important; }
  body.nav-open { overflow: hidden; }
  .auth { min-height: 100dvh; } .auth-main { padding-bottom: calc(32px + var(--sab)); }
  /* o iOS dá zoom em campos com fonte menor que 16px: evita o "pulo" ao tocar */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea, .input, .select, .textarea { font-size: 16px; }
  .btn { min-height: 40px; } .btn.sm { min-height: 36px; } .btn.icon { min-width: 40px; min-height: 40px; }
  /* cabeçalho de página: título, depois ações em linha que quebram com espaçamento igual */
  .page-h { gap: 10px; } .page-h > .row, .page-h > div:last-child:not(:first-child) { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; } .page-h h1 { font-size: 21px; }
  /* indicadores em 2 colunas: páginas bem mais curtas */
  .grid:has(> .kpi) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .grid:has(> .kpi) .kpi { padding: 14px 14px 12px; } .grid:has(> .kpi) .kpi .k-v { font-size: 20px; line-height: 1.15; word-break: break-word; } .grid:has(> .kpi) .kpi .k-ic { top: 10px; right: 10px; transform: scale(.8); transform-origin: top right; }
  .grid:has(> .kpi) .kpi .k-l { padding-right: 34px; font-size: 12.5px; } .grid:has(> .kpi) .kpi .k-s { font-size: 12px; }
  /* tabelas rolam na horizontal dentro do cartão, sem cortar colunas */
  .card:has(> table.table) { overflow-x: auto; -webkit-overflow-scrolling: touch; } .card > table.table { min-width: 560px; }
  /* abas segmentadas rolam em vez de quebrar linha */
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; } .seg::-webkit-scrollbar { display: none; } .seg button { white-space: nowrap; flex: none; padding: 7px 12px; }
  /* campos de formulário e filtros ocupam a linha toda */
  .form-grid { grid-template-columns: 1fr; } .form-grid .select, .form-grid .input, .card-b .select { width: 100%; }
  .filters, .filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .filters .field.full, .filters .search { grid-column: 1 / -1; }
  .toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; } .toolbar .field.grow, .toolbar .row, .toolbar > :last-child { grid-column: 1 / -1; } .toolbar .field { min-width: 0; } .toolbar .select, .toolbar .input { width: 100%; }
  .list-row { gap: 10px; } .list-row .lr-main { min-width: 0; }
  .modal { max-height: calc(100dvh - 24px); } .modal-b, .modal .body { overscroll-behavior: contain; }
  .copybox { flex-wrap: wrap; } .copybox .input { flex: 1 1 100%; } .copybox .btn { flex: 1; }
  .mail-grid, .x8-grid { grid-template-columns: 1fr !important; }
  /* perfil: nome abaixo da foto, botão de capa no topo (antes ficava por cima do nome) */
  .pf-cover-btn { top: 10px; bottom: auto; right: 10px; }
  .pf-head { display: block; margin-top: -52px; } .pf-who { min-width: 0; padding-top: 12px; } .pf-who h2 { font-size: 22px; flex-wrap: wrap; } .pf-act { padding-top: 10px; }
  .pf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .imp-bar { height: auto; min-height: 38px; padding-top: 6px; padding-bottom: 6px; flex-wrap: wrap; }
}
@media (max-width: 430px) { .page-h .btn { flex: 1 1 auto; justify-content: center; } .card-h { flex-wrap: wrap; gap: 8px; } .card-h h3 { min-width: 0; } .badge { white-space: nowrap; } }

/* ===== oitava leva (usuário) e quinta leva (dev) ===== */
.x8-row { align-items: center; gap: 12px; }
.x8-row .lr-main { min-width: 0; display: grid; gap: 6px; }
.x8-nums { display: grid; justify-items: end; gap: 4px; text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.x8-rank { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.x8-rem.overdue { box-shadow: inset 3px 0 0 var(--neg); } .x8-rem.today { box-shadow: inset 3px 0 0 var(--accent); }
@media (max-width: 560px) { .x8-row { align-items: flex-start; } .x8-nums { font-size: 13px; } }

/* ===== comparação de planos ===== */
.cmp { width: 100%; }
.cmp-body { margin-top: 18px; animation: cmpIn .28s ease; } @keyframes cmpIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cmp-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cmp-chk { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; } .cmp-chk input { width: 18px; height: 18px; accent-color: var(--brand); }
.cmp-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); -webkit-overflow-scrolling: touch; }
.cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 560px; font-size: 14px; }
.cmp-table th, .cmp-table td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); text-align: center; vertical-align: middle; }
.cmp-table thead th { background: var(--surface-2); position: sticky; top: 0; vertical-align: bottom; }
.cmp-table tbody th[scope=row], .cmp-h0 { text-align: left; font-weight: 600; color: var(--text); position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 150px; max-width: 220px; }
.cmp-h0 { background: var(--surface-2); color: var(--text-2); font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
.cmp-h { min-width: 120px; } .cmp-h b { display: block; font-size: 15px; } .cmp-h.hl { background: color-mix(in srgb, var(--brand) 10%, var(--surface-2)); box-shadow: inset 0 3px 0 var(--brand); }
.cmp-flag { display: block; font-size: 10.5px; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.cmp-now { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--brand); color: #fff; }
.cmp-sec th { background: var(--surface-2); text-align: left !important; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); position: static !important; }
.cmp-c small { display: block; color: var(--text-3); font-size: 11.5px; } .cmp-c.hl { background: color-mix(in srgb, var(--brand) 5%, transparent); }
.cmp-c.yes svg.i { color: var(--pos); width: 18px; height: 18px; } .cmp-c.no svg.i { color: var(--text-3); width: 16px; height: 16px; opacity: .6; }
.cmp-inf { color: var(--brand); font-weight: 700; } .cmp-empty { text-align: center; color: var(--text-2); padding: 22px; }
.cmp-foot td, .cmp-foot th { border-bottom: 0; background: var(--surface-2); }

/* ===== popups de boas-vindas e upgrade (CTA) ===== */
.cta-back { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(8, 20, 24, .55); backdrop-filter: blur(3px); animation: ctaBack .2s ease; }
.cta-back.out { opacity: 0; transition: opacity .18s; } @keyframes ctaBack { from { opacity: 0; } to { opacity: 1; } }
.cta-box { position: relative; width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--surface); border-radius: 20px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); animation: ctaPop .32s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes ctaPop { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
.cta-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .16); color: #fff; display: grid; place-items: center; cursor: pointer; } .cta-x:hover { background: rgba(255, 255, 255, .28); }
.cta-hero { position: relative; padding: 30px 26px 24px; color: #fff; background: radial-gradient(120% 140% at 100% 0%, rgba(227, 163, 58, .35), transparent 55%), linear-gradient(135deg, #0b2a30, #0f6e6a); overflow: hidden; }
.cta-hero::after { content: ''; position: absolute; right: -40px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%; border: 22px solid rgba(255, 255, 255, .06); }
.cta-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); margin-bottom: 14px; } .cta-ic svg.i { width: 24px; height: 24px; }
.cta-eye { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .8; margin-bottom: 6px; }
.cta-hero h2 { margin: 0; font-size: 23px; line-height: 1.2; color: #fff; } .cta-hero p { margin: 10px 0 0; opacity: .88; font-size: 14.5px; line-height: 1.5; }
.cta-body { padding: 20px 26px 4px; } .cta-p { margin: 0 0 12px; color: var(--text-2); line-height: 1.55; font-size: 14.5px; }
.cta-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 14px; } .cta-price b { font-size: 30px; letter-spacing: -.02em; } .cp-cur, .cp-per { color: var(--text-2); font-size: 13px; }
.cta-sub { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin-bottom: 8px; }
.cta-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .cta-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; } .cta-list svg.i { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--pos); }
.cta-more { margin: 10px 0 0 28px; color: var(--brand); font-weight: 600; font-size: 13.5px; } .cta-note { display: flex; gap: 8px; align-items: center; margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); font-size: 13px; } .cta-note svg.i { flex: none; width: 16px; height: 16px; }
.cta-steps { display: grid; gap: 8px; margin-top: 4px; }
.cta-step { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s, background .15s; } .cta-step:hover { border-color: var(--brand); background: var(--surface-2); transform: translateX(2px); }
.cs-n { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); } .cs-t { flex: 1; min-width: 0; display: grid; } .cs-t small { color: var(--text-2); font-size: 12.5px; } .cta-step > svg.i { width: 16px; height: 16px; color: var(--text-3); }
.cta-foot { display: grid; gap: 8px; padding: 18px 26px 22px; justify-items: stretch; } .cta-link { border: 0; background: none; color: var(--brand); font: inherit; font-weight: 600; font-size: 13.5px; padding: 6px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) { .cta-back { align-items: end; padding: 0; } .cta-box { width: 100%; border-radius: 22px 22px 0 0; max-height: 92dvh; padding-bottom: env(safe-area-inset-bottom); animation: ctaSheet .3s cubic-bezier(.2, .9, .3, 1); } @keyframes ctaSheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } } .cta-hero { padding: 26px 20px 20px; } .cta-body, .cta-foot { padding-left: 20px; padding-right: 20px; } }
@media (prefers-reduced-motion: reduce) { .cta-box, .cta-back, .cmp-body { animation: none; } }
@media (max-width: 640px) {
  .cmp-table { min-width: 0; font-size: 13px; } .cmp-table th, .cmp-table td { padding: 10px 8px; }
  .cmp-table tbody th[scope=row], .cmp-h0 { min-width: 112px; max-width: 128px; font-size: 12.5px; } .cmp-h { min-width: 92px; } .cmp-h0 { font-size: 11px; }
  .cmp-flag { font-size: 9.5px; letter-spacing: .02em; } .cmp-foot .btn { padding-left: 8px; padding-right: 8px; white-space: normal; line-height: 1.2; }
}

/* ===== conquistas: medalhas, nível e comemoração ===== */
.medal { --mt-a: #e6ebef; --mt-b: #c9d2d9; --mt-c: #aeb9c2; --mt-edge: #98a5af; position: relative; display: inline-grid; place-items: center; flex: none; filter: drop-shadow(0 8px 12px rgba(10, 30, 36, .18)); }
.medal.t-none { --mt-a: #eef1f3; --mt-b: #e1e6ea; --mt-c: #d3dadf; --mt-edge: #c4ccd2; filter: none; opacity: .9; } :root[data-theme="dark"] .medal.t-none { --mt-a: #2a3a40; --mt-b: #25343a; --mt-c: #202e34; --mt-edge: #3a4b52; }
.medal.t-bronze { --mt-a: #f0b783; --mt-b: #c98150; --mt-c: #8c4f26; --mt-edge: #7a4320; }
.medal.t-silver { --mt-a: #ffffff; --mt-b: #cfd8e0; --mt-c: #8e9cab; --mt-edge: #7c8a99; }
.medal.t-gold { --mt-a: #fff0a8; --mt-b: #f2b73b; --mt-c: #b9760f; --mt-edge: #a8680b; }
.medal.t-diamond { --mt-a: #d9fbff; --mt-b: #6fc4ff; --mt-c: #7b61ff; --mt-edge: #5646c9; }
.medal-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-ic { position: relative; z-index: 1; display: grid; place-items: center; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); } .m-ic svg.i { width: calc(var(--ms) * .38); height: calc(var(--ms) * .38); stroke-width: 2.2; }
.medal.t-none .m-ic { color: #9aa7b0; filter: none; } .medal.t-silver .m-ic { color: #4d5b69; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .7)); } .medal.t-gold .m-ic { color: #7a4a05; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .5)); }
.medal-ring { position: absolute; inset: -5px; border-radius: 50%; background: conic-gradient(var(--brand) var(--p), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); opacity: .85; }
.m-shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; clip-path: polygon(50% 4%, 90% 27%, 90% 73%, 50% 96%, 10% 73%, 10% 27%); }
.m-shine::after { content: ''; position: absolute; top: -20%; bottom: -20%; width: 38%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .65), transparent); transform: skewX(-18deg); animation: mShine 4.8s ease-in-out infinite; }
@keyframes mShine { 0%, 55% { left: -60%; } 80%, 100% { left: 130%; } }
.b-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 14px; }
.b-card { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 20px 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: inherit; color: inherit; transition: transform .18s, box-shadow .18s, border-color .18s; position: relative; overflow: hidden; }
.b-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 70px; background: radial-gradient(80% 100% at 50% 0%, color-mix(in srgb, var(--mt-b, var(--brand)) 22%, transparent), transparent); opacity: 0; transition: opacity .2s; }
.b-card.got::before { opacity: 1; } .b-card.t-bronze { --mt-b: #c98150; } .b-card.t-silver { --mt-b: #9fb0c0; } .b-card.t-gold { --mt-b: #f2b73b; } .b-card.t-diamond { --mt-b: #6fc4ff; }
.b-card:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -20px rgba(10, 30, 36, .45); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); } .b-card:not(.got) .b-name { color: var(--text-2); }
.b-name { font-size: 15px; margin-top: 4px; } .b-desc { color: var(--text-3); font-size: 12px; line-height: 1.35; min-height: 32px; }
.b-pips { display: flex; gap: 5px; margin-top: 2px; } .b-pips i { width: 22px; height: 5px; border-radius: 4px; background: var(--line); } .b-pips i.on.t-bronze { background: #c98150; } .b-pips i.on.t-silver { background: #9fb0c0; } .b-pips i.on.t-gold { background: #f2b73b; } .b-pips i.on.t-diamond { background: linear-gradient(90deg, #6fc4ff, #7b61ff); }
.b-prog { position: relative; width: 100%; height: 16px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 4px; } .b-prog i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 60%, #fff)); border-radius: 99px; opacity: .35; } .b-prog em { position: relative; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--text-2); line-height: 16px; font-variant-numeric: tabular-nums; }
.b-max { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--accent); margin-top: 4px; } .b-max svg.i { width: 14px; height: 14px; }
.b-filter { margin-bottom: 2px; overflow-x: auto; max-width: 100%; }
.b-det { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; } .b-det-t { display: grid; justify-items: center; gap: 2px; opacity: .55; } .b-det-t.on { opacity: 1; } .b-det-t small { color: var(--text-3); font-size: 11.5px; } .b-det-t em { font-style: normal; font-size: 11px; color: var(--brand); font-weight: 700; }
.lv-hero { display: flex; align-items: center; gap: 22px; padding: 22px 24px; margin-bottom: 16px; border-radius: 20px; color: #fff; position: relative; overflow: hidden; background: radial-gradient(120% 160% at 100% 0%, rgba(227, 163, 58, .32), transparent 55%), linear-gradient(135deg, var(--ink), color-mix(in srgb, var(--brand) 70%, var(--ink))); box-shadow: 0 24px 50px -28px rgba(8, 30, 36, .7); }
.lv-hero::after { content: ''; position: absolute; right: -50px; bottom: -70px; width: 220px; height: 220px; border-radius: 50%; border: 26px solid rgba(255, 255, 255, .05); pointer-events: none; }
.lv-ring { flex: none; width: 104px; height: 104px; border-radius: 50%; padding: 6px; background: conic-gradient(var(--accent) var(--p), rgba(255, 255, 255, .16) 0); display: grid; place-items: center; box-shadow: 0 0 0 6px rgba(255, 255, 255, .06), 0 0 36px -6px color-mix(in srgb, var(--accent) 60%, transparent); }
.lv-in { width: 100%; height: 100%; border-radius: 50%; display: grid; place-content: center; text-align: center; background: color-mix(in srgb, var(--ink) 90%, #000); } .lv-in small { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; } .lv-in b { font-size: 34px; line-height: 1; letter-spacing: -.02em; }
.lv-main { flex: 1; min-width: 0; } .lv-eye { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .75; } .lv-main h2 { margin: 2px 0 12px; font-size: 26px; color: #fff; letter-spacing: -.02em; }
.lv-bar { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .16); overflow: hidden; } .lv-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), #fff3c4); box-shadow: 0 0 14px rgba(227, 163, 58, .6); transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.lv-sub { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; opacity: .92; } .lv-chips { display: inline-flex; gap: 8px; flex-wrap: wrap; } .lv-chips > span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; background: rgba(255, 255, 255, .12); font-weight: 600; } .lv-chips svg.i { width: 14px; height: 14px; }
.lv-hero.compact { padding: 16px 18px; margin: 0; } .lv-hero.compact .lv-ring { width: 78px; height: 78px; } .lv-hero.compact .lv-in b { font-size: 26px; } .lv-hero.compact h2 { font-size: 20px; margin-bottom: 8px; }
.cel-back { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 50% 40%, rgba(227, 163, 58, .22), rgba(6, 16, 20, .78) 60%); backdrop-filter: blur(4px); animation: ctaBack .25s ease; } .cel-back.out { opacity: 0; transition: opacity .2s; }
.cel-box { position: relative; width: min(400px, 100%); text-align: center; padding: 34px 26px 24px; border-radius: 24px; background: var(--surface); box-shadow: 0 40px 90px -24px rgba(0, 0, 0, .6); overflow: hidden; animation: ctaPop .45s cubic-bezier(.2, .9, .3, 1.25); }
.cel-box::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 190px; background: radial-gradient(70% 100% at 50% 0%, rgba(227, 163, 58, .28), transparent); }
.cel-eye { position: relative; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .cel-medal { position: relative; margin: 16px 0 6px; display: grid; place-items: center; animation: celSpin .9s cubic-bezier(.2, .9, .3, 1.2); } @keyframes celSpin { from { transform: scale(.3) rotate(-120deg); opacity: 0; } to { transform: none; opacity: 1; } }
.cel-box h2 { position: relative; margin: 6px 0 4px; font-size: 24px; letter-spacing: -.02em; } .cel-box p { position: relative; color: var(--text-2); margin: 8px 0; font-size: 14px; }
.cel-tier { position: relative; display: inline-block; padding: 3px 14px; border-radius: 99px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #98a5af; } .cel-tier.t-bronze { background: linear-gradient(135deg, #d58f5c, #8c4f26); } .cel-tier.t-silver { background: linear-gradient(135deg, #b8c4d0, #6f7f8f); } .cel-tier.t-gold { background: linear-gradient(135deg, #f5c04e, #b9760f); } .cel-tier.t-diamond { background: linear-gradient(135deg, #5fb8ff, #7b61ff); }
.cel-xp { position: relative; display: inline-block; font-weight: 800; color: var(--brand); } .cel-foot { position: relative; display: grid; gap: 8px; margin-top: 16px; }
.cel-conf { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .cel-conf i { position: absolute; top: -12px; left: var(--x); width: 7px; height: 12px; background: var(--c); border-radius: 2px; transform: rotate(var(--r)); animation: celFall 2.4s var(--d) ease-in forwards; } @keyframes celFall { to { transform: translateY(420px) rotate(calc(var(--r) + 540deg)); opacity: 0; } }
@media (max-width: 640px) { .lv-hero { flex-direction: column; text-align: center; padding: 20px 16px; } .lv-sub { justify-content: center; } .b-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .b-card { padding: 16px 8px 12px; } .b-det { grid-template-columns: repeat(2, 1fr); } .cel-back { align-items: end; padding: 0; } .cel-box { border-radius: 24px 24px 0 0; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .m-shine::after, .cel-conf i, .cel-medal, .cel-box { animation: none; } }

/* ===== perfil renovado: capa inteira, aura de nível e vitrine ===== */
.pf-cover { height: auto; aspect-ratio: 1600 / 560; min-height: 128px; border-radius: 22px 22px 0 0; background: linear-gradient(125deg, #0b2a30, color-mix(in srgb, var(--brand) 70%, #0b2a30) 45%, color-mix(in srgb, var(--accent) 55%, #0b2a30)); background-size: 220% 220%; animation: pfShift 14s ease-in-out infinite alternate; }
.pf-cover.has-img { background: #0b1a1e; animation: none; }
.pf-cover .pf-cover-bg { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(24px) saturate(1.25) brightness(.8); animation: none; transform: none; }
.pf-cover .pf-cover-img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.pf-cover::after { z-index: 2; background: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 30%, transparent 72%, rgba(0, 0, 0, .26)); }
.pf-cover::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%); transform: translateX(-120%); animation: pfSweep 7s ease-in-out 1.2s infinite; }
@keyframes pfSweep { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.pf-orb { position: absolute; border-radius: 50%; filter: blur(30px); opacity: .55; pointer-events: none; } .pf-orb.o1 { width: 46%; aspect-ratio: 1; left: -8%; top: -40%; background: var(--accent); animation: pfFloat 9s ease-in-out infinite alternate; } .pf-orb.o2 { width: 40%; aspect-ratio: 1; right: -6%; bottom: -50%; background: #7aa2ff; animation: pfFloat 11s ease-in-out infinite alternate-reverse; }
@keyframes pfFloat { from { transform: translate(0, 0) scale(1); } to { transform: translate(30px, 20px) scale(1.15); } }
.pf-ava { overflow: visible; border-color: var(--surface); } .pf-ava.lvl::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; background: conic-gradient(from 0deg, var(--rg1), var(--rg2), var(--rg1)); animation: pfSpin 8s linear infinite; z-index: -1; filter: drop-shadow(0 0 10px var(--rg1)); }
@keyframes pfSpin { to { transform: rotate(360deg); } }
.pf-ava.lv-bronze { --rg1: #e0975f; --rg2: #8c4f26; } .pf-ava.lv-silver { --rg1: #e8eef4; --rg2: #8e9cab; } .pf-ava.lv-gold { --rg1: #ffd76a; --rg2: #c4801a; } .pf-ava.lv-diamond { --rg1: #7fe0ff; --rg2: #8a6bff; }
.pf-lv { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); padding: 2px 11px; border-radius: 99px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; color: #fff; border: 3px solid var(--surface); background: linear-gradient(135deg, var(--rg1), var(--rg2)); white-space: nowrap; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); }
.pf-ava.lv-silver .pf-lv { color: #33414d; text-shadow: none; } .pf-ava.lv-gold .pf-lv { color: #5b3503; text-shadow: none; }
.pf-who h2 { background: linear-gradient(100deg, var(--text), color-mix(in srgb, var(--brand) 80%, var(--text))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pf-who h2 > * { -webkit-text-fill-color: initial; }
.pf-card { box-shadow: 0 22px 44px -30px rgba(8, 30, 36, .5); }
.pf-head > * { animation: pfRise .6s cubic-bezier(.2, .8, .2, 1) both; } .pf-head > *:nth-child(2) { animation-delay: .08s; } .pf-head > *:nth-child(3) { animation-delay: .16s; } @keyframes pfRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.pf-ach { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; margin: 16px 0 0; align-items: stretch; }
.pf-showcase { padding: 16px 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); } .pf-showcase h3 { font-size: 15px; }
.pf-medals { display: flex; flex-wrap: wrap; gap: 14px 12px; margin-top: 12px; } .pf-medal { display: grid; justify-items: center; gap: 4px; width: 72px; text-decoration: none; color: var(--text-2); transition: transform .18s; } .pf-medal:hover { transform: translateY(-3px) scale(1.04); } .pf-medal small { font-size: 11px; text-align: center; line-height: 1.2; }
.pf-stat { display: flex; align-items: center; gap: 12px; position: relative; overflow: hidden; transition: transform .18s, box-shadow .18s, border-color .18s; } .pf-stat::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--sh, var(--brand)); }
.pf-stat:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -20px rgba(8, 30, 36, .5); border-color: color-mix(in srgb, var(--sh, var(--brand)) 40%, var(--line)); }
.pf-stat-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--sh, var(--brand)); background: color-mix(in srgb, var(--sh, var(--brand)) 14%, transparent); } .pf-stat-ic svg.i { width: 19px; height: 19px; } .pf-stat b { font-size: 16px; }
@media (max-width: 700px) { .pf-cover { height: auto; min-height: 0; border-radius: 18px 18px 0 0; } .pf-ach { grid-template-columns: 1fr; } .pf-ava.lvl::before { inset: -7px; } .pf-lv { bottom: -10px; } }
@media (prefers-reduced-motion: reduce) { .pf-cover, .pf-cover::before, .pf-orb, .pf-ava.lvl::before, .pf-head > * { animation: none; } }

/* ===== página inicial: botão Entrar, progresso, letreiro, números, conquistas ===== */
.lp .lp-btn.ghost:hover, .lp-nav .lp-btn.ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .18); box-shadow: none; transform: none; }
.lp .lp-btn.ghost:active { background: rgba(255, 255, 255, .18); }
.lp .lp-btn.ghost:focus-visible { outline: 2px solid var(--amber, #e3a33a); outline-offset: 2px; }
.lp .lp-btn.outline:hover { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .4); }
.lp .lp-btn.primary { position: relative; overflow: hidden; } .lp .lp-btn.primary::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .4), transparent); transform: skewX(-18deg); transition: left .6s; } .lp .lp-btn.primary:hover::after { left: 130%; }
.lp-progress { position: absolute; left: 0; right: 0; top: 0; height: 3px; pointer-events: none; } .lp-progress i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--brand), var(--amber, #e3a33a)); }
.lp-link { position: relative; } .lp-link::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--amber, #e3a33a); transform: scaleX(0); transition: transform .25s; } .lp-link.cur::after { transform: scaleX(1); } .lp-link.cur { color: #fff; }
.lp-hero-vis { position: relative; } .lp-tilt { transition: transform .25s ease-out; will-change: transform; transform-style: preserve-3d; }
.lp-float { position: absolute; z-index: 3; animation: lpFloat 6s ease-in-out infinite; pointer-events: none; } .lp-float.f1 { left: 4%; top: -34px; } .lp-float.f2 { left: -14px; bottom: 36px; animation-delay: -2s; } .lp-float.f3 { right: 8%; bottom: -26px; animation-delay: -4s; }
@keyframes lpFloat { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(4deg); } }
.lp-stats { padding: 30px 0 8px; position: relative; z-index: 2; } .lp-stats-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.lp-stat { text-align: center; padding: 20px 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 16px 34px -26px rgba(8, 30, 36, .5); } .lp-stat b { display: block; font-size: 38px; letter-spacing: -.03em; line-height: 1.05; background: linear-gradient(120deg, var(--brand), var(--amber, #e3a33a)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; } .lp-stat small { color: var(--text-2); font-size: 13px; }
.lp-mq { padding: 22px 0 6px; overflow: hidden; display: grid; gap: 10px; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.lp-mq-track { display: flex; gap: 10px; width: max-content; animation: lpMq 70s linear infinite; } .lp-mq-row.rev .lp-mq-track { animation-direction: reverse; animation-duration: 80s; } .lp-mq:hover .lp-mq-track { animation-play-state: paused; }
.lp-mq-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; } .lp-mq-chip svg.i { width: 14px; height: 14px; color: var(--pos); }
@keyframes lpMq { to { transform: translateX(-50%); } }
.lp-ach-ill { padding: 22px; } .lp-ach-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; justify-items: center; margin: 18px 0; text-align: center; } .lp-ach-it { display: grid; justify-items: center; gap: 8px; animation: lpFloat 5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s); } .lp-ach-it b { font-size: 13px; }
.lp-ach-bar { background: color-mix(in srgb, var(--brand) 14%, var(--line)); margin-bottom: 14px; }
@media (max-width: 560px) { .lp-float.f1 { left: 2px; top: -26px; transform: scale(.8); } .lp-float.f2 { left: 0; } .lp-float.f3 { display: none; } .lp-stat b { font-size: 30px; } .lp-ach-row { grid-template-columns: repeat(2, 1fr); gap: 16px 8px; } }
@media (prefers-reduced-motion: reduce) { .lp-mq-track, .lp-float, .lp-ach-it, .lp-tilt { animation: none; transition: none; } }

:root { --accent: var(--amber); }

/* ===== animações da logo e da ilustração padrão do login ===== */
.lg-anim .lg-spin { transform-box: view-box; transform-origin: 16px 16px; animation: lgSpin 9s linear infinite; }
.lg-anim .lg-dot { transform-box: view-box; transform-origin: 16px 16px; animation: lgPulse 2.8s cubic-bezier(.45, 0, .25, 1) infinite; }
.brand:hover .lg-spin, .lg-anim:hover .lg-spin { animation-duration: 2.4s; }
@keyframes lgSpin { to { transform: rotate(360deg); } }
@keyframes lgPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .82; } }
.dial-anim { animation: dialIn 1.4s cubic-bezier(.16, 1, .3, 1) both; will-change: transform; }
.dial-anim .dial-ring { transform-box: view-box; transform-origin: 200px 200px; animation: lgSpin 80s linear infinite; }
.dial-anim .dial-hub { transform-box: view-box; transform-origin: 200px 200px; animation: dialHub 46s linear infinite reverse; }
.dial-anim .dial-core { transform-box: view-box; transform-origin: 200px 200px; animation: dialCore 3.2s ease-in-out infinite; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--amber) 70%, transparent)); }
.dial-anim .dial-ptr { animation: dialPtr 4.2s ease-in-out infinite; }
@keyframes dialIn { from { opacity: 0; transform: rotate(-28deg) scale(.86); } to { opacity: 1; transform: none; } }
@keyframes dialHub { to { transform: rotate(360deg); } }
@keyframes dialCore { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes dialPtr { 0%, 100% { transform: translate(0, 8px); } 50% { transform: translate(0, 13px); } }
.auth-orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.auth-orbs i { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .5; will-change: transform; }
.auth-orbs i:nth-child(1) { width: 300px; height: 300px; left: -80px; top: 8%; background: color-mix(in srgb, var(--brand) 70%, transparent); animation: orbA 17s ease-in-out infinite alternate; }
.auth-orbs i:nth-child(2) { width: 220px; height: 220px; right: 6%; top: 34%; background: color-mix(in srgb, var(--amber) 45%, transparent); opacity: .3; animation: orbB 21s ease-in-out infinite alternate; }
.auth-orbs i:nth-child(3) { width: 260px; height: 260px; left: 22%; bottom: -90px; background: color-mix(in srgb, #6f95e0 55%, transparent); opacity: .28; animation: orbA 25s ease-in-out infinite alternate-reverse; }
@keyframes orbA { from { transform: translate(0, 0) scale(1); } to { transform: translate(70px, -50px) scale(1.18); } }
@keyframes orbB { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-80px, 60px) scale(.9); } }
.auth-aside .dial-bg { animation: dialFloat 9s ease-in-out infinite; }
@keyframes dialFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .lg-anim .lg-spin, .lg-anim .lg-dot, .dial-anim, .dial-anim *, .auth-orbs i, .auth-aside .dial-bg { animation: none !important; } }

/* ===== nona leva (usuários) ===== */
.x9-split { display: flex; height: 14px; border-radius: 99px; overflow: hidden; background: var(--line); min-width: 6px; transition: width .6s cubic-bezier(.16, 1, .3, 1); }
.x9-split i.fx, .x9-dot.fx { background: var(--brand); } .x9-split i.vr, .x9-dot.vr { background: var(--amber); }
.x9-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; }
.x9-cell { display: inline-block; min-width: 46px; text-align: center; padding: 3px 8px; border-radius: 8px; font-weight: 600; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.x9-cell.ok { background: color-mix(in srgb, var(--pos) 14%, transparent); color: var(--pos); } .x9-cell.bad { background: color-mix(in srgb, var(--neg) 14%, transparent); color: var(--neg); } .x9-cell.open { background: var(--line-2, var(--line)); color: var(--text-3); }
.x9-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .x9-facts > div { background: var(--surface-2, var(--line-2)); border-radius: 10px; padding: 8px 10px; display: grid; gap: 2px; } .x9-facts small { color: var(--text-3); font-size: 11.5px; } .x9-facts b { font-size: 14px; }
.x9-daily { background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%), var(--surface); }
.x9-big { display: grid; gap: 6px; justify-items: start; margin-bottom: 14px; } .x9-big small { color: var(--text-3); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 11.5px; } .x9-big b { font-size: clamp(34px, 6vw, 48px); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.x9-rec .card-b { display: flex; gap: 14px; align-items: center; } .x9-rec-t { display: grid; gap: 2px; min-width: 0; } .x9-rec-t small { color: var(--text-3); font-weight: 600; } .x9-rec-t b { font-size: 20px; letter-spacing: -.02em; } .x9-rec-t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .x9-facts { grid-template-columns: 1fr 1fr; } }

/* ===== busca do modo desenvolvedor ===== */
.dsb { position: relative; display: flex; align-items: center; gap: 8px; flex: 0 1 380px; min-width: 0; margin-left: 14px; height: 38px; padding: 0 10px; border-radius: 10px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); color: #dbe9eb; transition: background .15s, border-color .15s, box-shadow .15s; }
.dsb:focus-within { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); box-shadow: 0 0 0 3px rgba(255,255,255,.12); }
.dsb > .i, .dsb > svg { flex: none; width: 17px; height: 17px; opacity: .8; }
.dsb-in { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #fff; font: inherit; font-size: 14px; height: 100%; padding: 0; -webkit-appearance: none; appearance: none; }
.dsb-in::placeholder { color: #a9c3c7; } .dsb-in::-webkit-search-cancel-button { display: none; }
.dsb-k { flex: none; font: 600 11px/1 inherit; padding: 3px 6px; border-radius: 5px; border: 1px solid rgba(255,255,255,.25); color: #b9d0d3; } .dsb:focus-within .dsb-k { display: none; }
.dsb-panel { position: absolute; top: calc(100% + 8px); left: 0; right: 0; min-width: 320px; max-height: min(70vh, 460px); overflow: auto; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 44px rgba(8,24,28,.28); padding: 6px; z-index: 70; animation: dsbIn .14s ease-out; }
@keyframes dsbIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dsb-it { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 7px 8px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; color: inherit; font: inherit; font-size: 14px; }
.dsb-it.cur { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.dsb-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dsb-l mark { background: color-mix(in srgb, var(--amber) 38%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.dsb-t { flex: none; font-size: 11.5px; color: var(--text-3); border: 1px solid var(--line); border-radius: 99px; padding: 2px 8px; }
.dsb-none { padding: 14px; color: var(--text-3); font-size: 13.5px; text-align: center; }
@media (max-width: 720px) { .dsb { flex: 1 1 auto; margin-left: 8px; } .dsb-k { display: none; } .dsb-panel { position: fixed; top: 58px; left: 10px; right: 10px; min-width: 0; } .shellbar .org { display: none; } }

/* ===== medalhas do dev ===== */
.bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.bd-card { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 18px 14px 14px; }
.bd-card h4 { margin: 0; font-size: 15px; } .bd-card p { margin: 0; color: var(--text-3); font-size: 12.5px; min-height: 32px; }
.bd-tiers { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; } .bd-tiers span { font-size: 11px; border: 1px solid var(--line); border-radius: 99px; padding: 2px 8px; color: var(--text-2); }
.bd-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.bd-off { opacity: .55; }
.bd-pick { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; } .bd-pick label { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); cursor: pointer; } .bd-pick label:last-child { border-bottom: 0; } .bd-pick label:hover { background: var(--line-2, var(--line)); }
.bd-pick .grow { min-width: 0; } .bd-pick small { display: block; color: var(--text-3); }

/* ===== Assistente virtual, conversor de moedas e telas do dev (IA/câmbio) ===== */
.dk { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.dk-b { width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff; box-shadow: 0 10px 24px -8px rgba(15,110,106,.55), 0 2px 6px rgba(0,0,0,.18); transition: transform .18s ease, box-shadow .18s ease; }
.dk-b:hover { transform: translateY(-2px) scale(1.04); } .dk-b:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.dk-b.ag { background: linear-gradient(135deg, #6d5bd0, #0f6e6a); width: 56px; height: 56px; } .dk-b.fx { background: linear-gradient(135deg, #0f6e6a, #2bb3ac); width: 44px; height: 44px; }
.dk-b svg { width: 22px; height: 22px; } .dk-em { font-size: 24px; line-height: 1; }
.dk-panel { position: fixed; right: 18px; bottom: 90px; z-index: 61; width: min(380px, calc(100vw - 24px)); max-height: min(620px, calc(100vh - 120px)); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px -16px rgba(10,30,40,.35); overflow: hidden; animation: dkIn .18s ease; }
@keyframes dkIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.dk-h { display: flex; align-items: center; gap: 6px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line-2); background: var(--surface-2); } .dk-b2 { padding: 14px; overflow: auto; min-height: 0; display: flex; flex-direction: column; }
@media (max-width: 760px) { .dk { bottom: 76px; right: 12px; } .dk-panel { right: 12px; bottom: 150px; max-height: calc(100vh - 190px); } }
.ag-chat { display: flex; flex-direction: column; gap: 10px; min-height: 0; } .ag-card .ag-chat { padding: 0 16px 14px; }
.ag-log { display: flex; flex-direction: column; gap: 10px; min-height: 260px; max-height: 460px; overflow: auto; padding: 4px 2px; } .ag-chat.compact .ag-log { min-height: 180px; max-height: 340px; }
.ag-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 92%; } .ag-msg.me { align-self: flex-end; flex-direction: row-reverse; }
.ag-av { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--brand-50); font-size: 15px; }
.ag-bub { padding: 9px 13px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-2); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; } .ag-msg.me .ag-bub { background: var(--brand); color: #fff; border-color: var(--brand); border-bottom-right-radius: 4px; } .ag-msg.bot .ag-bub { border-bottom-left-radius: 4px; }
.ag-msg.err .ag-bub { background: var(--neg-bg); color: var(--neg); border-color: transparent; }
.ag-rt p { margin: 0 0 6px; } .ag-rt p:last-child, .ag-rt ul:last-child { margin-bottom: 0; } .ag-rt ul { margin: 0 0 6px; padding-left: 18px; }
.ag-typing { display: flex; gap: 4px; padding: 13px 14px; } .ag-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); animation: agDot 1s infinite ease-in-out; } .ag-typing i:nth-child(2) { animation-delay: .15s; } .ag-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes agDot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ag-chips { display: flex; flex-wrap: wrap; gap: 6px; } .ag-chip { border: 1px solid var(--line); background: var(--surface); color: var(--text-2); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; transition: all .15s; } .ag-chip:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }
.ag-bar { display: flex; gap: 8px; align-items: flex-end; } .ag-in { resize: none; min-height: 40px; max-height: 120px; } .ag-send { height: 40px; width: 44px; padding: 0; flex: none; }
.ag-foot { display: flex; align-items: center; gap: 8px; font-size: 12px; } .ag-disc { font-size: 11.5px; line-height: 1.4; }
.ag-ins { display: flex; flex-direction: column; gap: 10px; } .ag-ins-i { display: flex; gap: 10px; padding: 11px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); border-left: 3px solid var(--brand); } .ag-ins-i.alert { border-left-color: var(--warn); } .ag-ins-i.win { border-left-color: var(--pos); }
.ag-ins-ic { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); } .ag-ins-i.alert .ag-ins-ic { background: var(--warn-bg); color: var(--warn); } .ag-ins-i.win .ag-ins-ic { background: var(--pos-bg); color: var(--pos); } .ag-ins-ic svg { width: 16px; height: 16px; }
.ag-ins-t { font-weight: 600; font-size: 13.5px; } .ag-ins-x { font-size: 13px; color: var(--text-2); line-height: 1.45; margin-top: 2px; } .ag-ins-f { font-size: 11.5px; }
.ag-skel i { display: block; height: 58px; border-radius: 12px; margin-bottom: 10px; background: linear-gradient(90deg, var(--surface-2), var(--line-2), var(--surface-2)); background-size: 200% 100%; animation: agSk 1.2s infinite; } @keyframes agSk { to { background-position: -200% 0; } }
.fx { display: flex; flex-direction: column; gap: 8px; } .fx-amt { font-size: 20px; font-weight: 600; height: 48px; } .fx-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; } .fx-swap { width: 38px; height: 38px; padding: 0; }
.fx-out { font-size: 28px; font-weight: 700; color: var(--brand); letter-spacing: -.02em; padding-top: 6px; overflow-wrap: anywhere; } .fx.compact .fx-out { font-size: 24px; } .fx-sub { font-size: 13px; } .fx-foot { font-size: 11.5px; line-height: 1.4; } .fx-foot a { color: inherit; text-decoration: underline; }
.ai-steps { list-style: none; margin: 0; padding: 4px 16px 8px; display: flex; flex-direction: column; gap: 12px; } .ai-steps li { display: flex; gap: 12px; } .ai-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; margin-top: 1px; }
.ai-st { font-weight: 600; font-size: 14px; } .ai-sd { color: var(--text-2); font-size: 13.5px; line-height: 1.5; margin-top: 2px; } .ai-lk { display: inline-flex; gap: 5px; align-items: center; font-size: 12.5px; margin-top: 4px; color: var(--brand); word-break: break-all; } .ai-lk svg { width: 13px; height: 13px; }
.ai-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 16px 12px; } .ai-sec { margin-top: 16px; } .ai-guide { margin-bottom: 0; border-left: 4px solid var(--amber); }
.ai-shares { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 16px; } .ai-pre { white-space: pre-wrap; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 12px; font: 12.5px/1.5 ui-monospace, Menlo, monospace; max-height: 340px; overflow: auto; margin: 0; }
.ai-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; } .ai-stat { display: flex; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface-2); } .ai-stat-i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); flex: none; } .ai-stat-v { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.ai-bars { display: flex; gap: 6px; align-items: flex-end; height: 110px; } .ai-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; } .ai-bar i { width: 100%; max-width: 28px; background: linear-gradient(180deg, var(--brand-lt), var(--brand)); border-radius: 6px 6px 2px 2px; } .ai-bar span { font-size: 11px; color: var(--text-3); }
.ai-provs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-bottom: 14px; } .ai-prov { text-align: left; border: 1px solid var(--line); background: var(--surface); color: inherit; border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: all .15s; } .ai-prov:hover { border-color: var(--text-3); } .ai-prov.on { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); background: var(--brand-50); }
.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; } .ai-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 11px; border-radius: 999px; background: var(--brand-50); color: var(--brand-600); font-size: 12.5px; } .ai-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; } .ai-chip button:hover { background: var(--brand-100); } .ai-chip svg { width: 12px; height: 12px; }
.alert.pos svg, .alert.warn svg { flex: none; }
@media (prefers-reduced-motion: reduce) { .dk-panel, .ag-typing i, .ag-skel i { animation: none; } }
.ai-keys { display: flex; flex-direction: column; gap: 10px; } .ai-key { border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.ai-key.ok { border-left-color: var(--pos); } .ai-key.pause { border-left-color: var(--warn); } .ai-key.invalid { border-left-color: var(--neg); } .ai-key.off { opacity: .7; }
.ai-key-h { display: flex; gap: 12px; align-items: center; } .ai-key-ic { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); font-size: 18px; }
.ai-key-s { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12.5px; color: var(--text-2); } .ai-key-e { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--warn); background: var(--warn-bg); border-radius: 8px; padding: 7px 10px; } .ai-key-e svg { width: 14px; height: 14px; flex: none; margin-top: 2px; } .ai-key-e span { overflow-wrap: anywhere; }
.ai-key-a { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-pinfo { border: 1px solid var(--line-2); background: var(--surface-2); border-radius: 12px; padding: 12px 14px; } .ai-mini { margin: 0 0 10px; padding-left: 20px; font-size: 13px; color: var(--text-2); line-height: 1.5; } .ai-mini li { margin-bottom: 3px; }

/* ===== foto do assistente ===== */
.ag-face { display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: var(--brand-50); overflow: hidden; line-height: 1; vertical-align: middle; } .ag-face.img { background: var(--surface-2); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line); } .ag-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ag-title { display: inline-flex; align-items: center; gap: 10px; } .ag-title.sm { font-size: inherit; gap: 8px; }
.dk-b.ag.has-img { padding: 0; background: var(--surface); overflow: hidden; } .dk-b.ag.has-img .ag-face { box-shadow: none; width: 100%; height: 100%; }
.ai-avatar { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .ai-avatar .ag-face { box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--line), 0 8px 20px -8px rgba(0,0,0,.3); }

/* ===== conversor de moedas (cartão) ===== */
.fx2 { display: flex; flex-direction: column; gap: 0; }
.fx2-box { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 16px; padding: 12px 14px 12px; transition: border-color .15s, box-shadow .15s; } .fx2-box:focus-within { border-color: var(--brand); box-shadow: var(--focus); }
.fx2-box.res { background: linear-gradient(135deg, var(--brand-50), color-mix(in srgb, var(--brand-50) 55%, var(--surface))); border-color: var(--brand-100); }
.fx2-lb { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); margin-bottom: 4px; }
.fx2-row { display: flex; align-items: center; gap: 10px; }
.fx2-amt { flex: 1; min-width: 0; border: 0; background: transparent; font-family: inherit; font-weight: 700; font-size: 28px; line-height: 1.2; letter-spacing: -.02em; color: var(--text); padding: 2px 0; outline: none; width: 100%; }
.fx2-out { flex: 1; min-width: 0; font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--brand-600); overflow-wrap: anywhere; line-height: 1.25; padding: 2px 0; }
.fx2.compact .fx2-amt, .fx2.compact .fx2-out { font-size: 23px; }
.fx2-pick { position: relative; overflow: hidden; display: flex; align-items: center; gap: 6px; flex: none; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0 4px 0 10px; height: 40px; max-width: 52%; min-width: 118px; box-shadow: var(--shadow-1); } .fx2-pick:focus-within { border-color: var(--brand); box-shadow: var(--focus); }
.fx2-flag { font-size: 18px; line-height: 1; } .fx2-sel { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font-family: inherit; font-weight: 600; font-size: 14px; color: var(--text); height: 38px; padding: 0 26px 0 2px; min-width: 0; flex: 1; width: 100%; cursor: pointer; outline: none; max-width: 100%; text-overflow: ellipsis; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2375868f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }
.fx2-sel option { font-weight: 400; }
.fx2-mid { display: flex; align-items: center; gap: 10px; height: 26px; margin: -1px 0; position: relative; z-index: 1; } .fx2-line { flex: 1; height: 1px; background: var(--line-2); }
.fx2-swap { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--brand); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-1); transition: transform .3s ease, background .15s, color .15s; } .fx2-swap svg { width: 16px; height: 16px; transform: rotate(90deg); } .fx2-swap:hover { background: var(--brand); color: #fff; } .fx2-swap.spun { transform: rotate(180deg); }
.fx2-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 12px 2px 0; } .fx2-chip { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: var(--brand-50); color: var(--brand-600); font-size: 12.5px; font-weight: 600; } .fx2-age { font-size: 12px; color: var(--text-3); }
.fx2-others { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-top: 12px; } .fx2-others:empty { display: none; }
.fx2-tile { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; border: 1px solid var(--line-2); background: var(--surface); border-radius: 12px; padding: 8px 10px; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; color: inherit; } .fx2-tile:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: var(--shadow-1); }
.fx2-tf { grid-row: 1 / 3; font-size: 20px; } .fx2-tc { font-size: 11px; font-weight: 600; color: var(--text-3); letter-spacing: .04em; } .fx2-tv { font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; }
.fx2-foot { font-size: 11px; color: var(--text-3); margin-top: 8px; } .fx2-foot a { color: inherit; text-decoration: underline; } .fx2-foot:empty { display: none; }
.dk-panel .fx2-box { padding: 10px 12px; }

/* ===== menu em categorias recolhíveis ===== */
.nav-group > button.gl { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left; border-radius: 10px; transition: background .15s, color .15s; } .nav-group > button.gl:hover { background: var(--surface); color: var(--text-2); }
.nav-group > button.gl .gl-t { flex: 1; min-width: 0; } .nav-group > button.gl .gl-n { font-size: 10.5px; font-weight: 600; letter-spacing: 0; background: var(--line-2); color: var(--text-3); border-radius: 999px; padding: 1px 7px; }
.nav-group > button.gl svg { width: 14px; height: 14px; transition: transform .2s ease; transform: rotate(90deg); } .nav-group.closed > button.gl svg { transform: rotate(0deg); }
.nav-group.hasact > button.gl { color: var(--brand); } .nav-group.hasact > button.gl .gl-n { background: var(--brand-50); color: var(--brand); }
.nav-group > .nav-items { display: block; animation: navIn .18s ease; } .nav-group.closed > .nav-items { display: none; } @keyframes navIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.nav-group.dev > button.gl { color: #b07a12; }
.nav-tools { display: flex; gap: 6px; padding: 0 8px 8px; } .nav-tools button { flex: 1; border: 1px solid var(--line-2); background: var(--surface); color: var(--text-3); font-size: 11.5px; border-radius: 8px; padding: 4px 6px; cursor: pointer; } .nav-tools button:hover { color: var(--brand); border-color: var(--brand); }
@media (prefers-reduced-motion: reduce) { .nav-group > .nav-items { animation: none; } .fx2-swap { transition: none; } }

/* central de notificações (dev) */
.dev-bell { position: relative; } .dev-bell .bell-n { position: absolute; top: -2px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--brand); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; line-height: 1; box-shadow: 0 0 0 2px var(--surface); } .dev-bell .bell-n[hidden] { display: none; } .dev-bell.err .bell-n { background: #d9473d; }
.dev-bell.has .i { animation: bell-ring 1.6s ease 1; transform-origin: 50% 0; } @keyframes bell-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } }
.nt-grid { margin-bottom: 16px; } .nt-health.down { border-color: color-mix(in srgb, #d9473d 45%, var(--line)); background: color-mix(in srgb, #d9473d 5%, var(--surface)); }
.nt-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .nt-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .nt-dot.ok { background: #16a34a; box-shadow: 0 0 0 3px color-mix(in srgb, #16a34a 22%, transparent); } .nt-dot.bad { background: #d9473d; box-shadow: 0 0 0 3px color-mix(in srgb, #d9473d 22%, transparent); }
.nt-why { margin: 4px 0 6px; font-size: 13px; color: var(--text-2); word-break: break-word; }
.nt-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; } .nt-bar .select { width: auto; min-width: 160px; }
.nt-mute { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; font-size: 12.5px; }
.nt-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font: inherit; font-size: 12.5px; cursor: pointer; } .nt-chip .i { width: 13px; height: 13px; } .nt-chip.on { background: var(--surface-2); color: var(--text-3); text-decoration: line-through; } .nt-chip:hover { border-color: var(--brand); }
.nt-list { padding: 0; overflow: hidden; }
.nt-item { display: flex; gap: 13px; align-items: flex-start; padding: 14px 18px; border-bottom: 1px solid var(--line-2); cursor: pointer; position: relative; transition: background .15s; } .nt-item:last-child { border-bottom: 0; } .nt-item:hover { background: var(--surface-2); }
.nt-item:not(.read)::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand); } .nt-item.error:not(.read)::before { background: #d9473d; } .nt-item.warn:not(.read)::before { background: #e3a33a; } .nt-item.ok:not(.read)::before { background: #16a34a; }
.nt-item.read { opacity: .72; }
.nt-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--text-2); } .nt-ic .i { width: 17px; height: 17px; } .nt-ic.neg { background: color-mix(in srgb, #d9473d 14%, var(--surface)); color: #d9473d; } .nt-ic.warn { background: color-mix(in srgb, #e3a33a 18%, var(--surface)); color: #b97c12; } .nt-ic.pos { background: color-mix(in srgb, #16a34a 14%, var(--surface)); color: #16a34a; } .nt-ic.info { background: color-mix(in srgb, var(--brand) 12%, var(--surface)); color: var(--brand); }
.nt-main { flex: 1; min-width: 0; } .nt-t { font-weight: 650; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .nt-x { font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); } .nt-new { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); }
.nt-b { white-space: pre-line; margin-top: 3px; font-size: 13px; color: var(--text-2); word-break: break-word; } .nt-m { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 7px; font-size: 12px; }
@media (max-width: 640px) { .nt-item { padding: 12px 14px; } .nt-bar .select { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .dev-bell.has .i { animation: none; } }
.nt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } @media (max-width: 760px) { .nt-grid { grid-template-columns: 1fr; } }
.nt-banner { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }

/* simulador de caixa */
.cs-kpis { margin-bottom: 18px; }
.cs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; } @media (max-width: 900px) { .cs-grid { grid-template-columns: 1fr; } }
.cs-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2, 0 10px 30px -18px rgba(11, 42, 48, .35)); overflow: hidden; transition: transform .18s, box-shadow .18s; }
.cs-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #16a34a, #2bb3ac 55%, #e3a33a); } .cs-card.loss::before { background: linear-gradient(90deg, #d9473d, #e3a33a); } .cs-card.done::before { background: linear-gradient(90deg, #6f95e0, #2bb3ac); }
.cs-card:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -22px rgba(11, 42, 48, .5); }
.cs-top { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.cs-code { display: inline-flex; align-items: center; gap: 6px; font: 600 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; padding: 4px 10px 4px 8px; border-radius: 8px; background: var(--surface-2); border: 1px dashed var(--line); color: var(--text-2); } .cs-code .i { width: 13px; height: 13px; }
.cs-title { margin: 0; font-size: 18px; line-height: 1.25; letter-spacing: -.01em; } .cs-cust { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; color: var(--text-3); } .cs-cust .i { width: 14px; height: 14px; }
.cs-total { display: flex; flex-direction: column; gap: 2px; } .cs-total small, .cs-final small { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); font-weight: 600; } .cs-total b { font-size: 32px; line-height: 1.1; letter-spacing: -.02em; }
.cs-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); } .cs-bar i { display: block; height: 100%; transition: width .5s cubic-bezier(.2, .8, .2, 1); } .cs-bar i.a { background: linear-gradient(90deg, #16a34a, #34d399); } .cs-bar i.r { background: repeating-linear-gradient(135deg, #f2b84b 0 6px, #e3a33a 6px 12px); }
.cs-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } .cs-legend > div { display: grid; grid-template-columns: auto 1fr; column-gap: 7px; align-items: center; } .cs-legend small { color: var(--text-3); font-size: 12px; } .cs-legend b { grid-column: 2; font-size: 15px; } .cs-legend em { grid-column: 2; font-style: normal; font-size: 12px; color: var(--text-3); }
.cs-legend .dot { width: 9px; height: 9px; border-radius: 3px; } .cs-legend .dot.a { background: #16a34a; } .cs-legend .dot.r { background: #e3a33a; }
.cs-when { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); } .cs-when .i { width: 14px; height: 14px; color: var(--text-3); }
.cs-exp { border-top: 1px dashed var(--line); padding-top: 12px; } .cs-exp-h { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--text-2); } .cs-exp-h b { margin-left: auto; font-size: 15px; } .cs-exp-h em { font-style: normal; font-size: 12px; color: var(--text-3); }
.cs-exp ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; } .cs-exp li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 5px 10px; border-radius: 8px; background: var(--surface-2); } .cs-none { font-size: 12.5px; padding: 8px 0; } .cs-more { font-size: 12px; margin-top: 6px; }
.cs-final { display: grid; gap: 10px; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, #16a34a 9%, var(--surface)); border: 1px solid color-mix(in srgb, #16a34a 24%, var(--line)); } .cs-card.loss .cs-final { background: color-mix(in srgb, #d9473d 8%, var(--surface)); border-color: color-mix(in srgb, #d9473d 28%, var(--line)); }
.cs-final > div:first-child { display: grid; grid-template-columns: 1fr auto; align-items: end; } .cs-final small { grid-column: 1 / -1; } .cs-final b { font-size: 26px; letter-spacing: -.02em; line-height: 1.15; } .cs-final em { font-style: normal; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.cs-now { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: var(--text-2); } .cs-now .i { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.cs-launch { width: 100%; justify-content: center; height: 42px; } .cs-done { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); } .cs-done .i { width: 16px; height: 16px; color: #16a34a; } .cs-done a { margin-left: auto; font-weight: 600; }
/* editor */
.cs-form .cs-sec { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); } .cs-sec h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.cs-upf { display: grid; gap: 8px; } .input-group .prefix.suffix { order: 2; border-left: 1px solid var(--line); border-right: 0; }
.cs-erows { display: grid; gap: 8px; margin-top: 10px; } .cs-erow { display: grid; grid-template-columns: 26px minmax(130px, 1.6fr) minmax(110px, 1fr) minmax(120px, 1fr) 132px auto 34px; gap: 8px; align-items: center; padding: 8px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); } .cs-en { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--surface); color: var(--text-3); border: 1px solid var(--line); }
@media (max-width: 860px) { .cs-erow { grid-template-columns: 26px 1fr 34px; } .cs-erow > :nth-child(n+4):not(:last-child) { grid-column: 2 / 3; } }
.cs-prev { padding: 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); display: grid; gap: 12px; } .cs-prev-row, .cs-prev-final { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; color: var(--text-2); } .cs-prev-row b, .cs-prev-final b { margin-left: auto; } .cs-prev-row em, .cs-prev-final em { font-style: normal; font-size: 12px; color: var(--text-3); } .cs-prev-final { padding-top: 10px; border-top: 1px dashed var(--line); font-weight: 600; color: var(--text); } .cs-prev-final b { font-size: 22px; }
.cs-prev-now { display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px; color: var(--text-2); } .cs-prev-now .i { width: 15px; height: 15px; flex: none; margin-top: 1px; color: #16a34a; } .cs-prev-now.neg .i { color: #d9473d; }
.cs-lines { display: grid; gap: 6px; } .cs-line { display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; } .cs-lt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #16a34a; } .cs-line.expense .cs-lt { color: #d9473d; } .cs-line.income b { color: #16a34a; } .cs-line.expense b { color: #d9473d; }
@media (prefers-reduced-motion: reduce) { .cs-card, .cs-bar i { transition: none; } .cs-card:hover { transform: none; } }

/* avatar animado do assistente (orb): cores, estilo e velocidade vêm da configuração do dev.
   Movimento orgânico: várias manchas de cor com trajetos e tempos diferentes (nunca se repetem de forma óbvia),
   desfoque suave e respiração lenta; só usa transform/opacity (leve para a GPU). */
.ag-face.orb { position: relative; overflow: hidden; isolation: isolate; --oe: var(--os); transform: translateZ(0);
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--c1) 34%, #0b1020), #060912 78%); animation: o-breath calc(var(--oe) * .95) cubic-bezier(.45, .05, .55, .95) infinite; will-change: transform; }
.ag-face.orb.glow { box-shadow: 0 0 .34em color-mix(in srgb, var(--c1) 55%, transparent), 0 0 .14em color-mix(in srgb, var(--c2) 60%, transparent), 0 .08em .3em -.08em color-mix(in srgb, var(--c3) 50%, transparent); }
.ag-face.orb.busy { --oe: calc(var(--os) / 2.6); animation-name: o-breath-busy; }
.ag-face.orb i { position: absolute; display: block; pointer-events: none; will-change: transform; }
.o-flow { inset: -30%; background: var(--flow); background-size: 320% 320%; opacity: .8; animation: o-flow calc(var(--oe) * 1.4) cubic-bezier(.45, .05, .55, .95) infinite alternate; }
.o-b { width: 72%; height: 72%; left: 14%; top: 14%; border-radius: 50%; filter: blur(.07em); mix-blend-mode: screen; opacity: .86; }
.o-b1 { background: radial-gradient(circle at 50% 50%, var(--c1) 0%, transparent 68%); animation: o-d1 calc(var(--oe) * 1.15) cubic-bezier(.45, .05, .55, .95) infinite alternate; }
.o-b2 { background: radial-gradient(circle at 50% 50%, var(--c2) 0%, transparent 68%); animation: o-d2 calc(var(--oe) * 1.45) cubic-bezier(.45, .05, .55, .95) infinite alternate; }
.o-b3 { background: radial-gradient(circle at 50% 50%, var(--c3) 0%, transparent 68%); animation: o-d3 calc(var(--oe) * 1.8) cubic-bezier(.45, .05, .55, .95) infinite alternate; }
.o-b4 { background: radial-gradient(circle at 50% 50%, var(--c4) 0%, transparent 66%); width: 58%; height: 58%; left: 21%; top: 21%; animation: o-d4 calc(var(--oe) * 2.2) cubic-bezier(.45, .05, .55, .95) infinite alternate; }
.o-b5 { background: radial-gradient(circle at 50% 50%, var(--c5) 0%, transparent 66%); width: 52%; height: 52%; left: 24%; top: 24%; animation: o-d5 calc(var(--oe) * 2.7) cubic-bezier(.45, .05, .55, .95) infinite alternate; opacity: .7; }
.o-star { inset: 0; opacity: 0; }
.o-core { inset: 26%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 70%); filter: blur(.05em); mix-blend-mode: soft-light; animation: o-glow calc(var(--oe) * .7) ease-in-out infinite; }
.o-shine { inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 36%), radial-gradient(circle at 72% 92%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 56%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 -.05em .12em rgba(0, 0, 0, .18); animation: o-shine calc(var(--oe) * 3) ease-in-out infinite alternate; }

/* líquido: manchas grandes e densas, como uma lâmpada de lava */
.o-liquid { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c1) 22%, #0b1020), #070a14 90%); filter: saturate(1.25); }
.o-liquid .o-flow { opacity: .35; }
.o-liquid .o-b { width: 82%; height: 82%; left: 9%; top: 9%; filter: blur(.1em); opacity: .95; }
.o-liquid .o-b4, .o-liquid .o-b5 { width: 66%; height: 66%; left: 17%; top: 17%; }
.o-liquid .o-core { inset: 30%; opacity: .6; }
/* nebulosa: nuvens suaves sobre o escuro, com estrelas cintilando */
.o-nebula { background: radial-gradient(circle at 50% 50%, #0b1020, #04060d 85%); }
.o-nebula .o-flow { opacity: .28; filter: blur(.1em); }
.o-nebula .o-b { width: 60%; height: 60%; left: 20%; top: 20%; filter: blur(.12em); opacity: .78; }
.o-nebula .o-star { opacity: 1; background-image: radial-gradient(circle, #fff 0 .018em, transparent .03em), radial-gradient(circle, #fff 0 .012em, transparent .024em), radial-gradient(circle, #fff 0 .016em, transparent .028em); background-size: .42em .42em, .31em .31em, .53em .53em; background-position: .05em .1em, .19em .03em, .3em .21em; animation: o-twinkle calc(var(--oe) * .45) ease-in-out infinite alternate; mix-blend-mode: screen; }
.o-nebula .o-core { opacity: .5; }
/* ondas: faixas de cor que ondulam como em assistentes de voz */
.o-waves { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c1) 18%, #090d18), #05070f 90%); }
.o-waves .o-flow, .o-waves .o-b4, .o-waves .o-b5 { display: none; }
.o-waves .o-b { width: 150%; height: 34%; left: -25%; border-radius: 50%; filter: blur(.06em); opacity: .92; }
.o-waves .o-b1 { top: 30%; animation: o-w1 calc(var(--oe) * .9) ease-in-out infinite alternate; }
.o-waves .o-b2 { top: 36%; animation: o-w2 calc(var(--oe) * 1.15) ease-in-out infinite alternate; }
.o-waves .o-b3 { top: 33%; height: 26%; animation: o-w3 calc(var(--oe) * 1.4) ease-in-out infinite alternate; }
.o-waves .o-core { inset: 36% 20%; border-radius: 50%; opacity: .55; }
.ag-face.orb.o-waves.busy .o-b { filter: blur(.05em); }
/* esfera de vidro: brilho forte e cor viva por dentro */
.o-glass { background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--c1) 70%, #fff), color-mix(in srgb, var(--c2) 80%, #000)); }
.o-glass .o-flow { opacity: .75; filter: blur(.04em); }
.o-glass .o-b { opacity: .6; mix-blend-mode: soft-light; }
.o-glass .o-b4, .o-glass .o-b5 { display: none; }
.o-glass .o-core { inset: 16% 28% 48%; border-radius: 50%; background: radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%); mix-blend-mode: normal; filter: blur(.02em); animation: none; }
.o-glass .o-shine { background: radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 30%), radial-gradient(circle at 70% 96%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 36%); box-shadow: inset 0 0 .14em rgba(255, 255, 255, .6), inset 0 -.1em .2em rgba(0, 0, 0, .22); }
/* plasma: duas camadas cônicas girando em sentidos opostos */
.o-plasma .o-flow { inset: -25%; background: conic-gradient(from 0deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c5), var(--c1)); background-size: auto; opacity: .95; filter: blur(.07em); animation: o-spin calc(var(--oe) * 2.4) linear infinite; }
.o-plasma .o-b1 { width: 130%; height: 130%; left: -15%; top: -15%; border-radius: 50%; background: conic-gradient(from 90deg, var(--c3), var(--c1), var(--c5), var(--c2), var(--c4), var(--c3)); mix-blend-mode: overlay; opacity: .75; filter: blur(.08em); animation: o-spin-r calc(var(--oe) * 1.7) linear infinite; }
.o-plasma .o-b2, .o-plasma .o-b3, .o-plasma .o-b4, .o-plasma .o-b5 { display: none; }
.o-plasma .o-core { inset: 18%; background: radial-gradient(circle, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 66%); mix-blend-mode: soft-light; }
/* redemoinho */
.o-swirl .o-flow { inset: -12%; background: conic-gradient(from 0deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c5), var(--c1)); background-size: auto; opacity: 1; filter: blur(.05em); animation: o-spin calc(var(--oe) * 1.6) linear infinite; }
.o-swirl .o-b1 { background: conic-gradient(from 180deg, transparent, var(--c2) 25%, transparent 50%, var(--c4) 75%, transparent); width: 110%; height: 110%; left: -5%; top: -5%; filter: blur(.06em); opacity: .55; mix-blend-mode: screen; animation: o-spin-r calc(var(--oe) * 1.1) linear infinite; }
.o-swirl .o-b2, .o-swirl .o-b3, .o-swirl .o-b4, .o-swirl .o-b5 { opacity: .35; }
/* anel luminoso */
.o-ring { background: radial-gradient(circle, #04060d 38%, color-mix(in srgb, var(--c1) 14%, #04060d) 100%); }
.o-ring .o-flow { inset: 0; background: conic-gradient(from 0deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c5), var(--c1)); background-size: auto; opacity: 1; -webkit-mask: radial-gradient(circle, transparent 50%, #000 54%); mask: radial-gradient(circle, transparent 50%, #000 54%); filter: blur(.03em); animation: o-spin calc(var(--oe) * 1.3) linear infinite; }
.o-ring .o-b { opacity: .5; width: 50%; height: 50%; left: 25%; top: 25%; filter: blur(.09em); }
.o-ring .o-b4, .o-ring .o-b5 { display: none; }
.o-ring .o-core { inset: 30%; background: radial-gradient(circle, color-mix(in srgb, var(--c1) 70%, #fff), rgba(255, 255, 255, 0) 72%); mix-blend-mode: screen; }
.o-ring .o-shine { background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 36%); }
/* pulso: respira e emite ondas */
.o-pulse { animation-name: o-pulse; animation-duration: calc(var(--oe) * .6); }
.o-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: .045em solid color-mix(in srgb, var(--c2) 85%, #fff); opacity: 0; animation: o-ripple calc(var(--oe) * .6) ease-out infinite; pointer-events: none; }
.o-pulse .o-b4, .o-pulse .o-b5 { display: none; }
.dk-b.ag.has-orb { background: transparent; overflow: visible; box-shadow: none; } .dk-b.ag.has-orb .ag-face { box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--c1) 70%, transparent), 0 0 0 2px rgba(255, 255, 255, .25); }
@keyframes o-breath { 0%, 100% { transform: translateZ(0) scale(1); } 50% { transform: translateZ(0) scale(1.035); } }
@keyframes o-breath-busy { 0%, 100% { transform: translateZ(0) scale(.97); } 50% { transform: translateZ(0) scale(1.07); } }
@keyframes o-pulse { 0%, 100% { transform: translateZ(0) scale(.96); } 50% { transform: translateZ(0) scale(1.08); } }
@keyframes o-ripple { 0% { transform: scale(.35); opacity: .8; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes o-flow { from { background-position: 0% 20%; } to { background-position: 100% 80%; } }
@keyframes o-spin { to { transform: rotate(360deg); } }
@keyframes o-spin-r { to { transform: rotate(-360deg); } }
@keyframes o-glow { 0%, 100% { transform: scale(.85); opacity: .65; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes o-shine { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
@keyframes o-twinkle { from { opacity: .35; transform: translate3d(0, 0, 0) scale(1); } to { opacity: 1; transform: translate3d(.015em, -.02em, 0) scale(1.04); } }
@keyframes o-d1 { 0% { transform: translate3d(-22%, -14%, 0) scale(1); } 33% { transform: translate3d(24%, -22%, 0) scale(1.2); } 66% { transform: translate3d(16%, 26%, 0) scale(.9); } 100% { transform: translate3d(-24%, 12%, 0) scale(1.1); } }
@keyframes o-d2 { 0% { transform: translate3d(22%, 18%, 0) scale(1.1); } 40% { transform: translate3d(-26%, 24%, 0) scale(.88); } 75% { transform: translate3d(-14%, -26%, 0) scale(1.22); } 100% { transform: translate3d(26%, -8%, 0) scale(1); } }
@keyframes o-d3 { 0% { transform: translate3d(-8%, 26%, 0) scale(.95); } 30% { transform: translate3d(26%, 8%, 0) scale(1.18); } 60% { transform: translate3d(8%, -26%, 0) scale(.9); } 100% { transform: translate3d(-26%, -12%, 0) scale(1.12); } }
@keyframes o-d4 { 0% { transform: translate3d(14%, -24%, 0) scale(1.15); } 50% { transform: translate3d(-24%, -2%, 0) scale(.9); } 100% { transform: translate3d(8%, 26%, 0) scale(1.2); } }
@keyframes o-d5 { 0% { transform: translate3d(-18%, 8%, 0) scale(.9); } 45% { transform: translate3d(20%, 22%, 0) scale(1.15); } 100% { transform: translate3d(14%, -20%, 0) scale(.95); } }
@keyframes o-w1 { 0% { transform: translate3d(-14%, 0, 0) scaleY(.7); } 50% { transform: translate3d(6%, -6%, 0) scaleY(1.35); } 100% { transform: translate3d(14%, 4%, 0) scaleY(.85); } }
@keyframes o-w2 { 0% { transform: translate3d(12%, 0, 0) scaleY(1.2); } 50% { transform: translate3d(-8%, 8%, 0) scaleY(.7); } 100% { transform: translate3d(-14%, -4%, 0) scaleY(1.4); } }
@keyframes o-w3 { 0% { transform: translate3d(-6%, 4%, 0) scaleY(1); } 50% { transform: translate3d(12%, -4%, 0) scaleY(1.6); } 100% { transform: translate3d(-12%, 6%, 0) scaleY(.75); } }
@media (prefers-reduced-motion: reduce) { .ag-face.orb, .ag-face.orb i, .ag-face.orb::after { animation: none !important; } }
/* editor do dev */
.ob-ed { display: grid; gap: 16px; } .ob-top { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .ob-prev { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.ob-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; } .ob-style { display: grid; justify-items: center; gap: 8px; padding: 12px 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: inherit; font-size: 12.5px; color: var(--text-2); } .ob-style[aria-checked=true] { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); color: var(--text); font-weight: 600; }
.ob-cols { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .ob-col { position: relative; display: grid; gap: 4px; justify-items: center; } .ob-col input[type=color] { width: 46px; height: 46px; padding: 0; border: 2px solid var(--surface); border-radius: 50%; box-shadow: 0 0 0 1px var(--line), 0 6px 14px -6px rgba(0, 0, 0, .35); cursor: pointer; background: none; } .ob-col input[type=color]::-webkit-color-swatch-wrapper { padding: 0; } .ob-col input[type=color]::-webkit-color-swatch { border: 0; border-radius: 50%; } .ob-col small { font-size: 10.5px; color: var(--text-3); font-family: ui-monospace, Menlo, monospace; } .ob-col .rm { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-size: 12px; line-height: 1; cursor: pointer; padding: 0; }
.ob-arrow { color: var(--text-3); font-size: 14px; }
.ob-presets { display: flex; gap: 8px; flex-wrap: wrap; } .ob-preset { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: inherit; font-size: 12.5px; color: var(--text-2); } .ob-preset:hover { border-color: var(--brand); } .ob-preset i { width: 22px; height: 22px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.ob-sp { display: flex; gap: 12px; align-items: center; } .ob-sp input[type=range] { flex: 1; max-width: 320px; accent-color: var(--brand); } .ob-sp b { min-width: 46px; font-variant-numeric: tabular-nums; }

/* ---------- busca de ramo no seletor de perfil ---------- */
.pp-searchwrap { position: relative; margin: 12px 0 8px; }
.pp-searchwrap .ic, .pp-searchwrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.pp-search { padding-left: 38px; width: 100%; }
.pp-segs { margin-top: 4px; }

/* ---------- centros de custo ---------- */
.cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.cc-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 2px rgba(15, 30, 40, .04); overflow: hidden; transition: box-shadow .18s, transform .18s, border-color .18s; }
.cc-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--cc); }
.cc-card:hover { box-shadow: 0 8px 24px rgba(15, 30, 40, .09); transform: translateY(-1px); border-color: color-mix(in srgb, var(--cc) 40%, var(--line)); }
.cc-card.off { opacity: .62; }
.cc-card header { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.cc-card h3 { margin: 0; font-size: 16px; letter-spacing: -.1px; }
.cc-card p { margin: 0; font-size: 12.5px; }
.cc-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--cc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cc) 20%, transparent); flex: none; }
.cc-code { font: 600 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .4px; padding: 4px 8px; border-radius: 6px; background: color-mix(in srgb, var(--cc) 12%, var(--surface)); color: color-mix(in srgb, var(--cc) 70%, var(--text)); }
.cc-fig { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.cc-fig small { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.cc-fig b { font-size: 14px; }
.cc-bar { height: 6px; border-radius: 99px; background: var(--surface-2, #eef2f4); overflow: hidden; }
.cc-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cc), color-mix(in srgb, var(--cc) 55%, #fff)); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.cc-card footer { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.chip.cc-chip { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--cc) 10%, var(--surface)); border-color: color-mix(in srgb, var(--cc) 35%, var(--line)); }
.chip.cc-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--cc); }
.cc-sw { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-sw button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; box-shadow: inset 0 0 0 2px #fff; transition: transform .15s; }
.cc-sw button:hover { transform: scale(1.1); }
.cc-sw button.on { border-color: var(--text); }
.cs-head .cc-chip { margin-top: 6px; }

/* ---------- precificação de serviços ---------- */
:root { --p1: #6366f1; --p2: #0ea5e9; --p3: #f59e0b; --p4: #ef4444; --p5: #f97316; --p6: #a855f7; --p7: #10b981; }
.modal.xwide { width: min(1120px, 100%); }
.pr-ed { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
.pr-form { display: grid; gap: 14px; min-width: 0; }
.pr-sec-f { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--surface); }
.pr-sec-f > header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.pr-sec-f h4 { margin: 0; font-size: 14px; letter-spacing: .1px; }
.pr-sec-f header small { color: var(--muted); font-size: 12px; }
.pr-tpl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px 0 2px; }
.pr-tpl small { color: var(--muted); margin-right: 4px; }
.pr-tchip { cursor: pointer; transition: transform .15s, border-color .15s, background .15s; }
.pr-tchip:hover { transform: translateY(-1px); border-color: var(--brand); background: var(--brand-50); }
.pr-ihead, .pr-irow { display: grid; grid-template-columns: minmax(120px, 1fr) 72px 64px 120px 96px 32px; gap: 8px; align-items: center; }
.pr-ihead { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); padding: 0 2px 4px; }
.pr-irow { margin-bottom: 6px; }
.pr-irow .input-group, .pr-irow input { min-width: 0; }
.pr-sub { text-align: right; font-size: 13px; }
.pr-items { margin-bottom: 8px; }
.pr-marg { display: grid; grid-template-columns: 1fr 90px; gap: 12px; align-items: center; }
.pr-rate { margin-top: 10px; padding: 14px; border-radius: 10px; background: var(--brand-50); border: 1px dashed color-mix(in srgb, var(--brand) 40%, var(--line)); }
.pr-rate-out { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; font-size: 13.5px; }
.pr-res { position: sticky; top: 0; display: grid; gap: 14px; padding: 18px; border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 7%, var(--surface)), var(--surface) 55%); border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line)); box-shadow: 0 10px 30px rgba(15, 30, 40, .08); }
.pr-hero { text-align: center; padding: 6px 0 2px; }
.pr-hero small { display: block; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; font-size: 11px; }
.pr-price { font-size: 38px; line-height: 1.15; font-weight: 750; letter-spacing: -1px; margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.pr-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--pos) 14%, var(--surface)); color: var(--pos); }
.pr-pill.warn { background: color-mix(in srgb, var(--amber, #f59e0b) 18%, var(--surface)); color: #b45309; }
.pr-pill.neg { background: color-mix(in srgb, var(--neg) 14%, var(--surface)); color: var(--neg); }
.pr-sc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px; background: var(--surface-2, #eef2f4); border-radius: 12px; }
.pr-sc button { display: grid; gap: 1px; justify-items: center; padding: 8px 4px; border: 0; background: transparent; border-radius: 9px; cursor: pointer; color: var(--text-2); transition: background .15s, box-shadow .15s; }
.pr-sc button small { font-size: 10.5px; color: var(--muted); }
.pr-sc button span { font-size: 12px; }
.pr-sc button.on { background: var(--surface); box-shadow: 0 1px 4px rgba(15, 30, 40, .14); color: var(--text); }
.pr-sec h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.pr-comp { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--surface-2, #eef2f4); gap: 2px; }
.pr-comp i { display: block; min-width: 3px; transition: width .35s cubic-bezier(.2, .8, .2, 1); }
.pr-comp i:first-child { border-radius: 99px 0 0 99px; } .pr-comp i:last-child { border-radius: 0 99px 99px 0; }
.pr-leg { display: grid; gap: 5px; margin-top: 10px; }
.pr-leg > div { display: grid; grid-template-columns: 10px 1fr auto 46px; gap: 8px; align-items: center; font-size: 12.5px; }
.pr-leg .dot { width: 9px; height: 9px; border-radius: 3px; }
.pr-leg small { color: var(--text-2); font-size: 12.5px; } .pr-leg em { color: var(--muted); font-style: normal; text-align: right; font-size: 12px; }
.pr-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pr-kpis > div { padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.pr-kpis small { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.pr-kpis b { font-size: 15px; }
.pr-disc { margin-top: 6px; font-size: 13px; color: var(--text-2); } .pr-disc.loss { color: var(--neg); }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.pr-card { display: flex; flex-direction: column; gap: 9px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 30, 40, .04); transition: box-shadow .18s, transform .18s; }
.pr-card:hover { box-shadow: 0 8px 24px rgba(15, 30, 40, .09); transform: translateY(-1px); }
.pr-card header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pr-card h3 { margin: 0; font-size: 16px; }
.pr-cprice small { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; } .pr-cprice b { font-size: 26px; letter-spacing: -.5px; }
.pr-cfig { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .pr-cfig small { display: block; font-size: 11px; color: var(--muted); } .pr-cfig b { font-size: 14px; }
.pr-card footer { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; }
.pr-tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.pr-tcard { display: grid; gap: 3px; text-align: left; padding: 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
.pr-tcard:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--brand); box-shadow: 0 8px 20px rgba(15, 30, 40, .08); }
.pr-te { font-size: 26px; } .pr-tcard small { color: var(--muted); font-size: 12px; line-height: 1.35; }
@media (max-width: 960px) { .pr-ed { grid-template-columns: 1fr; } .pr-res { position: static; } }
@media (max-width: 640px) { .pr-ihead { display: none; } .pr-irow { grid-template-columns: 1fr 1fr; } .pr-irow > :first-child { grid-column: 1 / -1; } .pr-marg { grid-template-columns: 1fr 80px; } .pr-price { font-size: 32px; } }

/* Galeria de modelos de centro de custo */
.ccm-tabs { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.ccm-tabs button { flex: none; white-space: nowrap; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2, inherit); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; transition: background .15s, border-color .15s; }
.ccm-tabs button:hover { background: var(--bg-soft, rgba(0,0,0,.04)); }
.ccm-tabs button.on { border-color: var(--brand, #0f6e6a); background: color-mix(in srgb, var(--brand, #0f6e6a) 10%, var(--surface)); font-weight: 600; }
.ccm-tabs small { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--brand, #0f6e6a); }
.ccm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ccm-item { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid var(--cc); border-radius: 12px; background: var(--surface); color: inherit; font: inherit; cursor: pointer; transition: box-shadow .15s, border-color .15s, background .15s; }
.ccm-item:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(15, 30, 40, .08); }
.ccm-item.on { background: color-mix(in srgb, var(--cc) 10%, var(--surface)); border-color: var(--cc); }
.ccm-item.have { opacity: .6; cursor: default; }
.ccm-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cc); flex: none; }
.ccm-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ccm-tx small { color: var(--ink-3, #6b7a86); font-size: 12px; line-height: 1.3; }
.ccm-ck { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line); display: grid; place-items: center; flex: none; color: transparent; }
.ccm-ck svg { width: 13px; height: 13px; }
.ccm-item.on .ccm-ck { background: var(--cc); border-color: var(--cc); color: #fff; }

/* Tabela de comparação de planos (versão 2) e ajuda contextual */
.cmp-scroll { box-shadow: 0 10px 34px rgba(15, 30, 40, .07); border-radius: 18px; }
.cmp-table thead th { z-index: 2; padding-top: 16px; padding-bottom: 14px; }
.cmp-h b { font-size: 16px; letter-spacing: -.01em; }
.cmp-cnt { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 500; color: var(--text-3); }
.cmp-price { font-size: 15px; }
.cmp-sec th { padding: 10px 14px; background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 9%, var(--surface-2)), var(--surface-2)); }
.cmp-sic { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); margin-right: 8px; vertical-align: middle; }
.cmp-sic svg { width: 13px; height: 13px; }
.cmp-lb { display: inline-flex; align-items: center; gap: 8px; }
.cmp-lic { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--surface-2); color: var(--text-2); flex: none; }
.cmp-lic svg { width: 14px; height: 14px; }
.cmp-lt { line-height: 1.25; }
.cmp-table tbody tr:not(.cmp-sec):not(.cmp-foot):hover > * { background: color-mix(in srgb, var(--brand) 4%, var(--surface)); }
.cmp-table tbody tr:not(.cmp-sec):not(.cmp-foot):hover > th[scope=row] { background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
.cmp-ok, .cmp-no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 14px; line-height: 1; }
.cmp-ok { background: color-mix(in srgb, var(--pos, #1b8a5a) 16%, transparent); color: var(--pos, #1b8a5a); }
.cmp-ok svg { width: 14px; height: 14px; }
.cmp-no { color: var(--text-3); background: color-mix(in srgb, var(--text-3) 10%, transparent); font-weight: 600; }
.cmp-c.yes svg.i, .cmp-c.no svg.i { opacity: 1; }
.cmp-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); flex-wrap: wrap; }
.cmp-leg .cmp-ok, .cmp-leg .cmp-no { width: 20px; height: 20px; font-size: 12px; margin-left: 8px; }
.cmp-leg .cmp-ok svg { width: 12px; height: 12px; }
.help-tip { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text-3); cursor: pointer; flex: none; transition: color .15s, border-color .15s, background .15s, transform .15s; }
.help-tip svg { width: 14px; height: 14px; }
.help-tip:hover, .help-tip[aria-expanded=true], .help-tip:focus-visible { color: var(--brand); border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
.help-tip:active { transform: scale(.92); }
.help-pop { position: absolute; z-index: 1000; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; box-shadow: 0 16px 44px rgba(15, 30, 40, .22); animation: cmpIn .16s ease; text-align: left; }
.help-pop b { display: block; font-size: 13px; margin-bottom: 4px; }
.help-pop p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); font-weight: 400; text-transform: none; letter-spacing: 0; }
.help-btn { position: relative; }
/* Guia de recursos */
.gd-hero { display: flex; align-items: center; gap: 16px; padding: 18px 20px; margin-bottom: 14px; background: linear-gradient(120deg, color-mix(in srgb, var(--brand) 12%, var(--surface)), var(--surface)); flex-wrap: wrap; }
.gd-hero h3 { margin: 0 0 4px; } .gd-hero p { margin: 0; color: var(--text-2); max-width: 62ch; font-size: 14px; }
.gd-hero > div { flex: 1; min-width: 220px; }
.gd-hero-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--brand); color: #fff; flex: none; }
.gd-hero-ic svg { width: 24px; height: 24px; }
.gd-search { position: relative; margin-bottom: 18px; }
.gd-search > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-3); pointer-events: none; }
.gd-search input { padding-left: 40px; }
.gd-sec { margin-bottom: 22px; }
.gd-sec h3 { display: flex; align-items: center; gap: 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin: 0 0 10px; }
.gd-sec h3 small { background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px; font-size: 11px; letter-spacing: 0; }
.gd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.gd-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: box-shadow .18s, transform .18s, border-color .18s; }
.gd-card:hover { box-shadow: 0 8px 24px rgba(15, 30, 40, .09); transform: translateY(-1px); border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
.gd-ic { flex: none; display: grid; place-items: center; }
.gd-ic > svg { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--surface-2); color: var(--brand); }
.gd-tx { flex: 1; min-width: 0; } .gd-tx h4 { margin: 0 0 3px; font-size: 15px; } .gd-tx p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.gd-card .btn { align-self: center; flex: none; }
@media (max-width: 560px) { .gd-grid { grid-template-columns: 1fr; } .gd-card { flex-wrap: wrap; } .gd-card .btn { margin-left: 52px; } }
@media (prefers-reduced-motion: reduce) { .help-pop, .gd-card { animation: none; transition: none; } }

/* Botão "Preencher / Sem cortar" do recorte: o estado ativo ficava transparente com texto branco */
.crop-tools .btn.ghost { border-color: var(--line); }
.crop-tools .btn.ghost.primary, .crop-tools .btn.ghost.primary:hover { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 4px 12px -4px var(--brand); }
.crop-tools .btn.ghost.primary .crop-tb-l { color: inherit; }
:root[data-theme="dark"] .crop-tools .btn.ghost.primary, :root[data-theme="dark"] .crop-tools .btn.ghost.primary:hover { color: #06201f; }
@media (max-width: 560px) { .crop-tb-l { display: inline; font-size: 12px; } .crop-tools .btn { padding-left: 8px; padding-right: 8px; } }
/* Capa padrão: imagem inteira, sem cortar */
.pf-cover.is-default { aspect-ratio: 2000 / 1115; max-height: 420px; width: 100%; }
.pf-cover.is-default::before { display: none; }
.pf-cover.is-default .pf-cover-img { object-fit: contain; }
/* Dicas de tamanho */
.img-tip { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--brand) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line)); font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.img-tip > svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--brand); }
.img-tip-warn { color: var(--warn, #b45309); display: block; margin-top: 4px; }
.pf-tips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.pf-tip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border: 1px dashed var(--line); border-radius: 99px; font-size: 12.5px; color: var(--text-2); background: var(--surface); }
.pf-tip > svg { width: 14px; height: 14px; color: var(--brand); } .pf-tip b { color: var(--text); font-weight: 650; }
/* Avatar do Dev: anel aurora e selo próprio (equivalente ao anel de nível dos usuários) */
.pf-ava.lv-dev { --rg1: #ffd76a; --rg2: #b86bff; }
.pf-ava.lv-dev::before { background: conic-gradient(from 0deg, #ffd76a, #22d3c5, #8a6bff, #ff7ab8, #ffd76a) !important; animation-duration: 6s !important; filter: drop-shadow(0 0 14px rgba(138, 107, 255, .55)) !important; }
.pf-ava.lv-dev::after { content: ''; position: absolute; inset: -16px; border-radius: 50%; border: 1px solid rgba(255, 215, 106, .5); animation: pfDevPulse 3.2s ease-in-out infinite; pointer-events: none; }
.pf-lv.pf-dev { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, #ffd76a, #b86bff); color: #2a1450; text-shadow: none; letter-spacing: .08em; }
.pf-lv.pf-dev svg { width: 12px; height: 12px; }
.pf-spark { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgba(255, 215, 106, .9); pointer-events: none; animation: pfSpark 3.6s ease-in-out infinite; z-index: 2; }
.pf-spark.s1 { top: -6px; right: 10px; } .pf-spark.s2 { bottom: 14px; left: -10px; animation-delay: 1.2s; } .pf-spark.s3 { top: 40%; right: -12px; animation-delay: 2.4s; }
@keyframes pfDevPulse { 0%, 100% { transform: scale(.96); opacity: .25; } 50% { transform: scale(1.06); opacity: .8; } }
@keyframes pfSpark { 0%, 100% { transform: scale(.3); opacity: 0; } 50% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pf-ava.lv-dev::after, .pf-spark { animation: none; } .pf-spark { opacity: .8; } }

/* Personificação discreta: selo na barra superior + marca d'água (sem barra sobre o conteúdo) */
.imp-bar { display: none !important; }
.has-imp .main { padding-top: 24px; }
.imp-chip { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; padding: 3px 4px 3px 10px; border-radius: 99px; font-size: 12px; color: #ffe9a8; background: rgba(245, 158, 11, .16); border: 1px solid rgba(245, 158, 11, .45); white-space: nowrap; max-width: 46vw; }
.imp-chip > svg { width: 14px; height: 14px; flex: none; }
.imp-chip-t { overflow: hidden; text-overflow: ellipsis; } .imp-chip-t b { font-weight: 650; }
.imp-chip-x { display: inline-flex; align-items: center; gap: 4px; border: 0; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 650; color: #3a2800; background: #f5b83a; border-radius: 99px; padding: 3px 9px; transition: background .15s; }
.imp-chip-x svg { width: 11px; height: 11px; } .imp-chip-x:hover { background: #ffd067; }
.imp-wm { position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='220'><text x='50%' y='50%' text-anchor='middle' dominant-baseline='middle' transform='rotate(-24 180 110)' font-family='Inter,Arial,sans-serif' font-size='20' font-weight='700' letter-spacing='3' fill='%23b45309'>PERSONIFICAÇÃO</text></svg>"); }
:root[data-theme="dark"] .imp-wm { opacity: .08; }
@media (max-width: 760px) { .imp-chip { margin-left: 6px; padding-left: 8px; } .imp-chip-t { display: none; } }
@media print { .imp-wm, .imp-chip { display: none; } }

/* Avatar de IA sempre circular: alguns navegadores de celular ignoram border-radius + overflow quando há camadas animadas/desfocadas.
   O recorte circular fica numa camada interna (clip-path) e o brilho externo continua livre. */
.ag-face { aspect-ratio: 1 / 1; min-width: 0; border-radius: 50% !important; }
.ag-face img { border-radius: 50%; }
.ag-face.orb { overflow: visible; }
.ag-face.orb .o-clip { position: absolute; inset: 0; display: block; border-radius: 50%; overflow: hidden; -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); isolation: isolate; transform: translateZ(0); -webkit-mask-image: -webkit-radial-gradient(circle, #fff 100%, #000 100%); }
.dk-b.ag, .dk-b.fx { aspect-ratio: 1 / 1; flex: none; }
.dk-b.ag.has-img .ag-face, .dk-b.ag.has-orb .ag-face { border-radius: 50%; }

/* Modelos de assistente (Dev) */
.agm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.agm { display: flex; align-items: center; gap: 10px; text-align: left; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.agm:hover { border-color: var(--brand); box-shadow: 0 6px 16px -10px rgba(15, 30, 40, .4); transform: translateY(-1px); }
.agm-em { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: var(--brand-50); flex: none; }
.agm-tx { display: flex; flex-direction: column; min-width: 0; } .agm-tx b { font-size: 13.5px; } .agm-tx small { color: var(--text-3); font-size: 11.5px; line-height: 1.25; }
/* Capa sempre atrás da foto de perfil, também em navegadores de celular */
.pf-wrap { isolation: isolate; }
.pf-cover { position: relative; z-index: 0; isolation: isolate; }
.pf-card { position: relative; z-index: 2; }
.pf-head { z-index: 3; }
.pf-ava { z-index: 4; transform: translateZ(0); }
.pf-cover-btn { z-index: 3; }

/* Barra superior em telas pequenas: tudo cabe sem cortar (logo, selo DEV, busca, avatar) */
@media (max-width: 560px) {
  .shellbar { gap: 4px; padding-left: max(10px, var(--sal)); padding-right: max(10px, var(--sar)); }
  .shellbar > * { min-width: 0; }
  .shellbar .btn.icon, .shellbar .btn.ghost.icon { width: 36px; min-width: 36px; height: 36px; padding: 0; }
  .shellbar .brand { gap: 0; font-size: 0; flex: none; margin-right: 2px; }
  .shellbar .badge.dev { padding: 2px 7px; font-size: 10px; flex: none; }
  .shellbar .spacer { flex: 1 1 0; min-width: 0; }
  .shellbar .dropdown { flex: none; }
  .shellbar .dropdown > .btn, .shellbar .dropdown > button { padding: 0; width: 38px; height: 38px; justify-content: center; }
  .shellbar .avatar, .shellbar .avatar.img { width: 30px; height: 30px; flex: none; }
  .shellbar .dropdown-panel { position: fixed; right: 8px; left: auto; top: calc(var(--shellbar-h) + 4px); max-width: calc(100vw - 16px); }
  /* busca do Dev: vira uma caixa que ocupa o espaço livre; o painel de resultados usa a largura da tela */
  .dsb { flex: 1 1 36px; margin-left: 2px; min-width: 36px; padding: 0 9px; height: 36px; }
  .dsb-k { display: none; }
  .dsb-panel { position: fixed; left: 8px; right: 8px; top: calc(var(--shellbar-h) + 6px); min-width: 0; max-height: min(70vh, 460px); }
  .shellbar .dsb + .spacer { flex: 0 0 0; }
}
@media (max-width: 430px) {
  .dsb-in::placeholder { color: transparent; }
  .shellbar .brand { margin-right: 0; }
}
@media (max-width: 380px) {
  .has-imp .shellbar .brand { display: none; }
  .shellbar .btn.icon, .shellbar .btn.ghost.icon { width: 34px; min-width: 34px; }
}

/* ===== Recursos novos (E se?, quitação, dias críticos, MEI, cobrança, troco, DRE, sazonal, racha-conta, propostas, sugestões, suporte, NPS, aviso) ===== */
.x20-split { align-items: start; }
.x20-chart { width: 100%; height: 170px; display: block; }
.x20-bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding-top: 8px; }
.x20-bar { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.x20-bar i { display: block; width: 100%; max-width: 38px; border-radius: 5px 5px 0 0; background: var(--brand); opacity: .85; min-height: 2px; transition: height .25s; }
.x20-bar b { font-size: 11px; font-weight: 600; color: var(--text-3); }
.x20-bar.hot i, .x20-bar.bad i { background: var(--neg); }
.x20-bar.good i { background: var(--pos); }
.x20-row { display: grid; grid-template-columns: minmax(120px, 1.1fr) minmax(120px, 1.4fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.x20-row:last-child { border-bottom: 0; }
.x20-row-t { display: flex; flex-direction: column; min-width: 0; } .x20-row-t small { color: var(--text-3); }
.x20-row-v { display: flex; flex-direction: column; align-items: flex-end; min-width: 70px; } .x20-row input[type=range] { width: 100%; accent-color: var(--brand); }
.x20-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.x20-vs > div { display: flex; flex-direction: column; gap: 4px; } .x20-vs small { color: var(--text-3); } .x20-vs b { font-size: 20px; }
.x20-track { height: 10px; border-radius: 6px; background: var(--line-2); overflow: hidden; } .x20-track i { display: block; height: 100%; background: var(--text-3); } .x20-track.alt i { background: var(--pos); }
.x20-order { display: flex; flex-direction: column; }
.x20-ord { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); } .x20-ord:last-child { border-bottom: 0; }
.x20-n { flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--brand-50); color: var(--brand); display: grid; place-items: center; font-weight: 700; font-size: 13px; } .x20-n svg { width: 16px; height: 16px; }
.x20-ord-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .x20-ord-t small, .x20-ord-v small { color: var(--text-3); }
.x20-ord-v { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.x20-neg-row td { background: var(--neg-bg); }
.x20-gauge { padding: 18px 20px; }
.x20-gauge-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .x20-gauge-top b { font-size: 26px; } .x20-gauge-top span { color: var(--text-2); }
.x20-gauge-bar { position: relative; height: 16px; border-radius: 10px; background: var(--line-2); margin: 12px 0 6px; overflow: hidden; }
.x20-gauge-bar i { display: block; height: 100%; background: var(--pos); border-radius: 10px; transition: width .35s; }
.x20-gauge-bar.warn i { background: var(--amber); } .x20-gauge-bar.tolerance i, .x20-gauge-bar.out i { background: var(--neg); }
.x20-gauge-bar s { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text); opacity: .7; }
.x20-gauge-leg { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); gap: 8px; flex-wrap: wrap; }
.x20-collect { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .x20-collect textarea { width: 100%; resize: vertical; }
.x20-collect.collect, .x20-collect.critical { border-left: 3px solid var(--neg); } .x20-collect.late, .x20-collect.today { border-left: 3px solid var(--amber); }
.x20-filter { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 14px; } .x20-filter .field { margin: 0; }
.x20-dre th, .x20-dre td { white-space: nowrap; } .x20-dre td:first-child { white-space: normal; min-width: 150px; }
.x20-dre .x20-sec td { background: var(--surface-2); font-weight: 700; text-transform: uppercase; font-size: 11.5px; letter-spacing: .04em; color: var(--text-2); }
.x20-dre .x20-sub td { font-weight: 650; border-top: 1px solid var(--line); } .x20-dre .x20-res td { font-weight: 700; font-size: 15px; border-top: 2px solid var(--text); background: var(--surface-2); }
.x20-split-card { padding: 16px; display: flex; flex-direction: column; gap: 10px; } .x20-split-card.done { opacity: .75; }
.x20-people { display: flex; flex-direction: column; gap: 4px; } .x20-person { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; } .x20-person small { grid-column: 1; color: var(--text-3); } .x20-person b { grid-row: 1 / 3; grid-column: 2; align-self: center; text-align: right; }
.x20-transfers { background: var(--surface-2); border-radius: var(--radius-lg); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; } .x20-tr { display: flex; gap: 8px; align-items: center; } .x20-tr svg { width: 16px; height: 16px; color: var(--brand); flex: none; }
.x20-item { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 10px; display: flex; flex-direction: column; gap: 8px; } .x20-item .input, .x20-item .select { flex: 1 1 140px; min-width: 0; }
.x20-shares { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; } .x20-shares small { color: var(--text-3); flex-basis: 100%; }
.x20-prop-item .input { flex: 1 1 160px; min-width: 0; } .x20-prop-item .input-group { flex: 0 1 150px; }
.x20-prop-tot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-lg); } .x20-prop-tot b { font-size: 17px; }
.x20-idea { display: flex; gap: 14px; padding: 14px 16px; align-items: flex-start; } .x20-idea.done { opacity: .85; } .x20-idea.declined { opacity: .6; }
.x20-vote { flex: 0 0 54px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; color: var(--text-2); }
.x20-vote svg { width: 16px; height: 16px; } .x20-vote:hover { border-color: var(--brand); color: var(--brand); } .x20-vote.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.x20-idea-b { flex: 1; min-width: 0; } .x20-reply { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 8px 10px; border-radius: var(--radius); background: var(--brand-50); color: var(--text); font-size: 13px; } .x20-reply svg { width: 15px; height: 15px; color: var(--brand); flex: none; margin-top: 2px; }
.x20-idea-dev { padding: 14px 16px; } .x20-idea-dev .select, .x20-idea-dev textarea { flex: 1 1 200px; } .x20-votes { display: inline-flex; gap: 4px; align-items: center; color: var(--brand); } .x20-votes svg { width: 16px; height: 16px; }
.x20-ticket { padding: 0; margin-bottom: 10px; } .x20-ticket > summary { list-style: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; cursor: pointer; } .x20-ticket > summary::-webkit-details-marker { display: none; }
.x20-ticket > div { padding: 0 16px 16px; } .x20-ticket.unread { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.x20-thread { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; }
.x20-msg { max-width: 86%; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); } .x20-msg small { color: var(--text-3); display: block; margin-bottom: 2px; } .x20-msg p { white-space: pre-wrap; overflow-wrap: anywhere; }
.x20-msg.user { align-self: flex-end; background: var(--brand-50); border-color: var(--brand-100); } .x20-msg.dev { align-self: flex-start; }
.x20-nps { position: fixed; z-index: 60; right: 16px; bottom: 16px; width: min(420px, calc(100vw - 32px)); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-2); }
.x20-nps-row { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; } .x20-nps-n { padding: 8px 0; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 600; }
.x20-nps-n:hover { border-color: var(--brand); } .x20-nps-n.on { background: var(--brand); color: #fff; border-color: var(--brand); } .x20-nps-leg { display: flex; justify-content: space-between; color: var(--text-3); }
.sys-notice { display: flex; gap: 10px; align-items: center; padding: 8px 8px 8px 14px; margin: 0 0 16px; background: var(--warn-bg); color: var(--warn); border: 1px solid var(--line); border-radius: var(--radius-lg); font-size: 13px; } .sys-notice span { flex: 1; } .sys-notice svg { width: 16px; height: 16px; flex: none; }
.sys-notice.static { margin: 6px 0 0; padding: 8px 14px; }
a.x20-inbox { text-decoration: none; color: inherit; } a.x20-inbox:hover { border-color: var(--brand); }
.x20-cm { padding: 10px 12px; border-radius: var(--radius-lg); background: var(--surface-2); border-left: 3px solid var(--line); } .x20-cm.bad { border-left-color: var(--neg); } .x20-cm.good { border-left-color: var(--pos); } .x20-score { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 13px; background: var(--brand-50); color: var(--brand); }
.x20-secret { display: block; padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2); overflow-wrap: anywhere; user-select: all; }
.x20-tl { display: flex; flex-direction: column; } .x20-tl-i { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); } .x20-tl-i:last-child { border-bottom: 0; }
.x20-tl-dot { flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--brand-50); color: var(--brand); display: grid; place-items: center; } .x20-tl-dot svg { width: 15px; height: 15px; }
.x20-tl-i.payment .x20-tl-dot { background: var(--pos-bg); color: var(--pos); } .x20-tl-i.ticket .x20-tl-dot, .x20-tl-i.nps .x20-tl-dot { background: var(--warn-bg); color: var(--warn); }
@media (max-width: 760px) {
  .x20-row { grid-template-columns: 1fr auto; } .x20-row input[type=range] { grid-column: 1 / -1; grid-row: 2; }
  .x20-vs { grid-template-columns: 1fr; } .x20-msg { max-width: 94%; } .x20-nps { right: 8px; bottom: 8px; } .x20-nps-n { padding: 9px 0; font-size: 12px; }
  .x20-idea { gap: 10px; padding: 12px; } .x20-vote { flex-basis: 46px; }
}

.x20-ta { height: auto; min-height: 84px; resize: vertical; line-height: 1.45; padding: 8px 10px; width: 100%; }
.x20-card { margin-top: 16px; } .stack > .x20-card, .grid > .x20-card, .x20-split > .x20-card { margin-top: 0; }
.x20-pad { padding: 14px 16px; }
.x20-sel { width: auto; min-width: 130px; max-width: 170px; }
.x20-bars .x20-bar i { opacity: .9; }

/* equipe e perfis (modo dev) */
.stf-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.stf-preset { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.stf-preset:hover { border-color: var(--brand); box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-1px); }
.stf-preset small { color: var(--muted); line-height: 1.35; }
.stf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.stf-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); font-size: 12.5px; font-weight: 600; }
.stf-chip .i { width: 13px; height: 13px; }
.stf-imp { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.stf-imp .i { width: 15px; height: 15px; }
.stf-imp.read { color: #b7791f; } .stf-imp.full { color: #c0392b; }
.stf-area { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); }
.stf-area small { padding-left: 28px; }

/* cores de acesso da equipe: cada perfil tem a sua, no selo, na barra superior e na personificação */
.stf-c-gold { --stf: #e0a526; --stf-ink: #2b1d00; } .stf-c-red { --stf: #e5484d; --stf-ink: #fff; } .stf-c-orange { --stf: #f07c2a; --stf-ink: #2b1100; }
.stf-c-blue { --stf: #3b82f6; --stf-ink: #fff; } .stf-c-teal { --stf: #14b8a6; --stf-ink: #00221f; } .stf-c-green { --stf: #22a55b; --stf-ink: #fff; }
.stf-c-violet { --stf: #8b5cf6; --stf-ink: #fff; } .stf-c-pink { --stf: #ec4899; --stf-ink: #fff; } .stf-c-slate { --stf: #64748b; --stf-ink: #fff; }
.badge.dev.stf-badge { background: linear-gradient(135deg, color-mix(in srgb, var(--stf) 72%, #fff), var(--stf)); color: var(--stf-ink); box-shadow: 0 4px 12px -4px var(--stf); }
.shellbar.stf-fx { box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 -3px 0 var(--stf) inset, 0 8px 26px -10px var(--stf); }
.shellbar.stf-fx::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--stf), transparent); opacity: .9; pointer-events: none; }
body.is-staff .nav-item.active { box-shadow: inset 3px 0 0 var(--stf, var(--brand)); }
body[data-stf="gold"] { --stf: #e0a526; } body[data-stf="red"] { --stf: #e5484d; } body[data-stf="orange"] { --stf: #f07c2a; } body[data-stf="blue"] { --stf: #3b82f6; } body[data-stf="teal"] { --stf: #14b8a6; }
body[data-stf="green"] { --stf: #22a55b; } body[data-stf="violet"] { --stf: #8b5cf6; } body[data-stf="pink"] { --stf: #ec4899; } body[data-stf="slate"] { --stf: #64748b; }
.imp-chip.stf-c-gold, .imp-chip.stf-c-red, .imp-chip.stf-c-orange, .imp-chip.stf-c-blue, .imp-chip.stf-c-teal, .imp-chip.stf-c-green, .imp-chip.stf-c-violet, .imp-chip.stf-c-pink, .imp-chip.stf-c-slate { border-color: var(--stf); box-shadow: 0 0 0 1px color-mix(in srgb, var(--stf) 55%, transparent), 0 4px 14px -6px var(--stf); }
.imp-chip[class*="stf-c-"] .i { color: var(--stf); }
.stf-role { border-top: 3px solid var(--stf); }
.stf-role .stf-chip { background: color-mix(in srgb, var(--stf) 16%, transparent); color: color-mix(in srgb, var(--stf) 80%, var(--ink)); }
.stf-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--stf); margin-right: 6px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--stf) 25%, transparent); }
.stf-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.stf-sw { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; background: var(--stf); cursor: pointer; display: grid; place-items: center; color: var(--stf-ink); transition: transform .12s, box-shadow .12s; }
.stf-sw:hover { transform: scale(1.1); } .stf-sw[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--stf) 35%, transparent); }
.stf-sw.auto { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 5px, var(--line) 5px, var(--line) 10px); color: var(--ink); font-size: 10px; font-weight: 700; width: auto; padding: 0 10px; border-radius: 999px; }
.stf-sw .i { width: 14px; height: 14px; }
.stf-vals { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); } .stf-vals .i { width: 15px; height: 15px; }

/* atualização do sistema: área de envio do .zip */
.upd-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; color: var(--muted); font-size: 13px; }
.upd-steps li { display: inline-flex; align-items: center; gap: 8px; }
.upd-steps li span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); font-weight: 700; font-size: 12px; }
.upd-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; min-height: 150px; padding: 22px 16px; border: 2px dashed var(--line); border-radius: 16px; background: var(--surface-2); color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.upd-drop:hover, .upd-drop:focus-visible, .upd-drop.over { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, var(--surface-2)); outline: none; }
.upd-drop.over { transform: scale(1.01); }
.upd-drop-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 78%, #fff), var(--brand)); color: #fff; box-shadow: 0 8px 20px -8px var(--brand); margin-bottom: 6px; }
.upd-drop-ic .i { width: 26px; height: 26px; }
.upd-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.upd-file { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.upd-file.hidden { display: none; }
.upd-file-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); flex: none; }
.upd-file-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .upd-file-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .upd-file-t small { color: var(--muted); }
.upd-go { width: 100%; height: 44px; justify-content: center; font-weight: 650; }
.upd-go[disabled] { opacity: .55; cursor: not-allowed; }

/* avisos de atualização com detalhes */
.ann-body { flex: 1 1 240px; min-width: 0; } .ann-more { display: block; margin: 6px 0 0 -8px; padding: 2px 8px; height: auto; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ann-items { margin: 8px 0 2px; padding: 0; list-style: none; display: grid; gap: 5px; font-size: 13px; } .ann-items[hidden] { display: none; }
.ann-chip { display: inline-block; min-width: 68px; text-align: center; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: color-mix(in srgb, var(--accent, #3b6fd4) 16%, transparent); color: var(--text); }
.ann-chip.t-fix { background: color-mix(in srgb, #d98a1c 22%, transparent); } .ann-chip.t-improve, .ann-chip.t-improvement { background: color-mix(in srgb, #1c9c8a 20%, transparent); } .ann-chip.t-new, .ann-chip.t-feature { background: color-mix(in srgb, #2f9e5a 20%, transparent); }

/* organização em destaque */
.org-hl { position: relative; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 18px 20px; margin-bottom: 16px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--border)); background: linear-gradient(120deg, color-mix(in srgb, var(--brand) 11%, var(--surface)), var(--surface) 62%); }
.org-hl.verified { border-color: color-mix(in srgb, #8b5cf6 55%, var(--border)); background: linear-gradient(120deg, color-mix(in srgb, #8b5cf6 14%, var(--surface)), var(--surface) 62%); box-shadow: 0 14px 34px -26px rgba(139, 92, 246, .75); }
.org-hl.compact { padding: 13px 18px; gap: 14px; }
.org-hl-mark { flex: none; width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; font-weight: 700; font-size: 20px; letter-spacing: .5px; color: #fff; background: linear-gradient(145deg, var(--brand), color-mix(in srgb, var(--brand) 60%, #000)); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5); }
.org-hl.verified .org-hl-mark { background: linear-gradient(145deg, #a78bfa, #6030c9); }
.org-hl.compact .org-hl-mark { width: 46px; height: 46px; border-radius: 13px; font-size: 16px; } .org-hl-mark.sm { width: 38px; height: 38px; border-radius: 11px; font-size: 14px; }
.org-hl-main { flex: 1 1 260px; min-width: 0; } .org-hl-kicker { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); display: flex; gap: 8px; align-items: center; }
.org-hl-tag { padding: 1px 8px; border-radius: 999px; background: #8b5cf6; color: #fff; font-size: 10.5px; letter-spacing: .04em; }
.org-hl-name { margin: 2px 0 4px; font-size: 20px; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; } .org-hl.compact .org-hl-name { font-size: 17px; margin: 0 0 2px; }
.org-hl-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); } .org-hl-meta span { display: inline-flex; gap: 5px; align-items: center; } .org-hl-meta svg { width: 14px; height: 14px; }
.org-hl-act { display: flex; align-items: center; } .org-hl-st { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; } .org-hl-st svg { width: 15px; height: 15px; }
.org-hl-st.ok { color: #7c4ddf; } .org-hl-st.wait { color: var(--warn, #b7791f); }
.org-hl-rej { margin-top: 6px; display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--neg); }
.org-verified { display: inline-flex; align-items: center; } .org-q { margin: 0; padding: 8px 12px; border-left: 3px solid #8b5cf6; background: var(--surface-2, rgba(128, 128, 128, .08)); border-radius: 6px; font-size: 13px; }
.org-vlist { display: grid; gap: 10px; } .org-vrow { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; padding: 12px; border: 1px solid var(--border); border-radius: 12px; } .org-vmain { flex: 1 1 260px; min-width: 0; }
.org-vmsg { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2, rgba(128, 128, 128, .08)); font-size: 13px; }
@media (max-width: 640px) { .org-hl { padding: 14px; } .org-hl-act { width: 100%; } }

/* dez recursos de análise */
.u10-bars { display: grid; gap: 8px; } .u10-bar { display: grid; grid-template-columns: minmax(70px, 150px) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.u10-bl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .u10-bt { height: 10px; border-radius: 99px; background: var(--surface-2, rgba(128,128,128,.14)); overflow: hidden; }
.u10-bt i { display: block; height: 100%; border-radius: 99px; background: var(--brand); } .u10-bt i.neg { background: var(--neg); } .u10-bv { font-variant-numeric: tabular-nums; color: var(--text-2); text-align: right; }
.u10-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; } .u10-f { display: grid; gap: 4px; font-size: 12.5px; color: var(--text-2); }
.u10-ics { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; }
@media (max-width: 640px) { .u10-bar { grid-template-columns: 70px 1fr; } .u10-bv { grid-column: 1 / -1; text-align: left; } }
.stf-dot-l { display: inline-flex; align-items: center; gap: 6px; } .stf-dot-l::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--stf); }

.org-hl-mark.img { background: var(--surface); padding: 0; overflow: hidden; border: 1px solid var(--border); } .org-hl-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.org-logo-wrap { position: relative; flex: none; } .org-logo-btn { position: absolute; right: -6px; bottom: -6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.2); padding: 0; } .org-logo-btn svg { width: 13px; height: 13px; } .org-logo-btn.rm { right: auto; left: -6px; }
.org-logo-btn:hover { background: var(--brand); color: #fff; }
.org-chip-logo { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; margin-right: 6px; vertical-align: -4px; }
.pf-wrap + .org-hl { margin-top: 22px; }

/* acesso granular da equipe */
.stf-tree { display: grid; gap: 12px; } .stf-tl { max-height: 340px; overflow: auto; border: 1px solid var(--border, rgba(128,128,128,.25)); border-radius: 12px; }
.stf-g + .stf-g { border-top: 1px solid var(--border, rgba(128,128,128,.2)); } .stf-gh { display: flex; align-items: center; gap: 4px; padding: 8px 10px; background: var(--surface-2, rgba(128,128,128,.08)); position: sticky; top: 0; z-index: 1; font-size: 13px; }
.stf-gh .btn { padding: 2px 8px; font-size: 11.5px; min-height: 0; } .stf-p { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; font-size: 13px; } .stf-p.lock { opacity: .6; }
.stf-seg button { padding: 3px 10px; font-size: 12px; } .stf-seg button.v[aria-pressed=true] { background: #2f6f8f; color: #fff; } .stf-seg button.e[aria-pressed=true] { background: #1b8a5a; color: #fff; }

/* ===== popup de avaliação por estrelas ===== */
.rt-pop { position: fixed; z-index: 62; right: 18px; bottom: 18px; width: min(400px, calc(100vw - 32px)); padding: 18px 18px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 24px 60px -18px rgba(20, 24, 60, .38), 0 4px 14px rgba(20, 24, 60, .1); display: flex; flex-direction: column; gap: 12px; overflow: hidden; animation: rt-in .45s cubic-bezier(.2, .9, .3, 1.15) both; }
.rt-pop::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #f5b301, #ff7a45, #e5484d, #7c5cff); }
.rt-pop.out { animation: rt-out .22s ease-in both; }
@keyframes rt-in { from { opacity: 0; transform: translateY(28px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes rt-out { to { opacity: 0; transform: translateY(16px) scale(.97); } }
.rt-top { display: flex; align-items: flex-start; gap: 12px; }
.rt-badge { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg, #ffd45a, #ff9a3c); box-shadow: 0 6px 14px -6px #ff9a3c; }
.rt-badge svg { width: 22px; height: 22px; fill: #fff; }
.rt-t { flex: 1; display: flex; flex-direction: column; gap: 2px; } .rt-t b { font-size: 15px; line-height: 1.3; } .rt-t small { color: var(--text-3); line-height: 1.4; }
.rt-stars { display: flex; justify-content: center; gap: 6px; padding: 4px 0 0; }
.rt-star { border: 0; background: none; padding: 3px; cursor: pointer; border-radius: 10px; transition: transform .15s; }
.rt-star svg { width: 38px; height: 38px; fill: transparent; stroke: var(--line-strong, #c9cde0); stroke-width: 1.6; stroke-linejoin: round; transition: fill .15s, stroke .15s, transform .2s; }
.rt-star.on svg { fill: #ffb81c; stroke: #e9990a; transform: scale(1.08); }
.rt-star:hover { transform: translateY(-2px) scale(1.06); } .rt-star:focus-visible { outline: 2px solid var(--brand); }
.rt-label { text-align: center; min-height: 20px; font-weight: 600; color: var(--text-2); }
.rt-more { display: none; } .rt-pop.picked .rt-more { display: block; animation: rt-in .3s both; } .rt-ta { width: 100%; resize: vertical; }
.rt-act { display: flex; justify-content: flex-end; gap: 8px; }
.rt-done { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 4px; text-align: center; } .rt-done small { color: var(--text-3); }
.rt-ok { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--pos-bg, #e3f6ec); color: var(--pos, #178a54); animation: rt-in .4s both; } .rt-ok svg { width: 24px; height: 24px; }
.rt-sum { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center; }
.rt-avg { display: flex; flex-direction: column; align-items: center; gap: 4px; } .rt-avg b { font-size: 40px; line-height: 1; }
.rt-avg-s { display: flex; gap: 2px; } .rt-avg-s svg { width: 18px; height: 18px; fill: var(--line); } .rt-avg-s .on svg { fill: #ffb81c; }
.rt-bars { display: flex; flex-direction: column; gap: 6px; } .rt-bar { display: grid; grid-template-columns: 14px 1fr 32px; gap: 8px; align-items: center; font-size: 12px; }
.rt-bar i { height: 8px; border-radius: 99px; background: var(--surface-2, #eef0f8); overflow: hidden; } .rt-bar i b { display: block; height: 100%; background: linear-gradient(90deg, #ffb81c, #ff8a3c); border-radius: 99px; } .rt-bar em { font-style: normal; color: var(--text-3); text-align: right; }
@media (max-width: 560px) { .rt-pop { right: 8px; left: 8px; bottom: 8px; width: auto; } .rt-star svg { width: 34px; height: 34px; } .rt-sum { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .rt-pop, .rt-ok, .rt-more { animation: none !important; } }

/* ===== painel reorganizável ===== */
.dash-mov { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; grid-auto-flow: row dense; margin-bottom: 16px; align-items: start; }
.dash-b { grid-column: span 6; min-width: 0; position: relative; } .dash-b > .card { height: 100%; }
.dash-b.b-cashflow, .dash-b.b-upcoming { grid-column: span 8; } .dash-b.b-categories, .dash-b.b-budgets { grid-column: span 4; }
.dash-b.solo { grid-column: span 12; }
@media (max-width: 960px) { .dash-b, .dash-b.b-cashflow, .dash-b.b-upcoming, .dash-b.b-categories, .dash-b.b-budgets { grid-column: span 12; } }
.dash-edit-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 14px; border-radius: 12px; border: 1px dashed var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); color: var(--text-2); flex-wrap: wrap; }
.dash-mov.editing .dash-b { cursor: grab; outline: 2px dashed var(--line-strong, #c9cde0); outline-offset: 4px; border-radius: 14px; transition: outline-color .15s, opacity .15s, transform .15s; }
.dash-mov.editing .dash-b.over { outline-color: var(--brand); transform: scale(1.01); } .dash-mov.editing .dash-b.drag { opacity: .45; }
.dash-mov.editing .dash-b > .card { pointer-events: none; user-select: none; }
.dash-tools { position: absolute; z-index: 3; top: 8px; right: 8px; left: 8px; display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1, 0 4px 14px rgba(20,24,60,.12)); }
.dash-grip { color: var(--text-3); font-size: 16px; cursor: grab; }

/* ===== chat da IA, visual moderno ===== */
.ag-chat { gap: 12px; }
.ag-log { gap: 14px; padding: 8px 4px 4px; scroll-behavior: smooth; scrollbar-width: thin; }
.ag-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 22px 12px 10px; animation: ag-up .5s both; }
.ag-hero .ag-face { box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--brand) 60%, transparent); }
.ag-hero-n { font-size: 17px; } .ag-hero-g { max-width: 440px; color: var(--text-2); font-size: 14px; line-height: 1.55; }
.ag-msg { max-width: 94%; gap: 10px; align-items: flex-end; animation: ag-up .28s both; }
.ag-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .ag-msg.me .ag-col { align-items: flex-end; }
.ag-bub { padding: 11px 15px; border-radius: 18px; border-bottom-left-radius: 6px; background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: 0 1px 2px rgba(20, 24, 60, .04); }
.ag-msg.me .ag-bub { background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 72%, #7c5cff)); color: #fff; border: 0; border-radius: 18px; border-bottom-right-radius: 6px; box-shadow: 0 8px 18px -10px var(--brand); white-space: pre-wrap; }
.ag-sub { display: flex; align-items: center; gap: 6px; min-height: 18px; padding: 0 4px; color: var(--text-3); font-size: 11px; }
.ag-copy { border: 0; background: none; color: var(--text-3); padding: 2px 4px; border-radius: 6px; cursor: pointer; opacity: 0; transition: opacity .15s, color .15s; display: inline-flex; } .ag-copy svg { width: 13px; height: 13px; }
.ag-msg:hover .ag-copy, .ag-copy:focus-visible, .ag-copy.ok { opacity: 1; } .ag-copy.ok { color: var(--pos); }
.ag-typing { padding: 14px 16px; border-radius: 18px; border-bottom-left-radius: 6px; }
.ag-chips { gap: 8px; justify-content: center; }
.ag-chip { padding: 8px 14px; border-radius: 999px; font-size: 13px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(20, 24, 60, .05); transition: transform .15s, border-color .15s, box-shadow .15s; }
.ag-chip:hover { transform: translateY(-1px); border-color: var(--brand); color: var(--brand); box-shadow: 0 6px 14px -8px var(--brand); }
.ag-bar { align-items: flex-end; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 4px 16px -10px rgba(20, 24, 60, .25); transition: border-color .15s, box-shadow .15s; }
.ag-bar:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.ag-bar .ag-in { flex: 1; border: 0; background: transparent; box-shadow: none; outline: none; padding: 9px 0; min-height: 38px; }
.ag-send { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 70%, #7c5cff)); box-shadow: 0 8px 16px -8px var(--brand); transition: transform .15s, opacity .15s; }
.ag-send:hover:not(:disabled) { transform: scale(1.07); } .ag-send:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; } .ag-send svg { width: 18px; height: 18px; }
.ag-foot { padding: 0 4px; } .ag-meter { display: flex; align-items: center; gap: 8px; color: var(--text-3); }
.ag-m-b { width: 70px; height: 5px; border-radius: 99px; background: var(--surface-2); overflow: hidden; display: inline-block; } .ag-m-b b { display: block; height: 100%; border-radius: 99px; background: var(--brand); transition: width .3s; } .ag-m-b.low b { background: var(--neg); }
.ag-plan { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 12px; color: var(--text-3); } .ag-plan:empty { display: none; } .ag-plan .full { color: var(--neg); font-weight: 600; } .ag-plan a { font-weight: 600; }
@keyframes ag-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ag-hero, .ag-msg { animation: none; } }
.stf-tree[hidden], .modal-b [hidden] { display: none !important; }

/* ===== entrar e cadastro: visual novo ===== */
.auth { background: var(--surface); }
.auth-aside { padding: 40px 52px; background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--brand) 55%, var(--ink)) 0%, var(--ink) 62%); gap: 28px; justify-content: space-between; }
.auth-aside h2 { font-size: 34px; max-width: 14ch; line-height: 1.1; }
.auth-aside p { font-size: 15.5px; max-width: 38ch; color: #b4cdd1; }
.auth-points { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; max-width: 420px; }
.auth-points li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .09); backdrop-filter: blur(6px); transition: transform .2s, background .2s; }
.auth-points li:hover { transform: translateX(4px); background: rgba(255, 255, 255, .1); }
.auth-points .ap-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--accent); }
.auth-points .ap-ic svg { width: 19px; height: 19px; }
.auth-points b { display: block; color: #fff; font-size: 14.5px; } .auth-points small { display: block; color: #9bb7bb; font-size: 12.8px; margin-top: 1px; line-height: 1.4; }
.auth-trust { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12.5px; color: #a9c4c8; }
.auth-trust span { display: inline-flex; align-items: center; gap: 6px; } .auth-trust svg { width: 14px; height: 14px; color: var(--accent); }
.auth-main { background: radial-gradient(70% 50% at 100% 0%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 70%), var(--surface); padding: 22px 28px 36px; }
.auth-card { width: min(460px, 100%); padding: 34px 34px 28px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 60px -34px rgba(20, 40, 60, .35), 0 2px 6px rgba(20, 40, 60, .05); animation: auth-in .5s cubic-bezier(.2, .8, .2, 1) both; }
.auth-card h1 { font-size: 28px; letter-spacing: -.03em; margin: 2px 0 0; }
.auth-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--brand); background: color-mix(in srgb, var(--brand) 11%, transparent); } .auth-badge svg { width: 13px; height: 13px; }
.auth-card .input { height: 46px; border-radius: 12px; font-size: 15px; }
.auth-card .btn.primary.block { height: 48px; border-radius: 13px; font-size: 15.5px; font-weight: 600; box-shadow: 0 14px 24px -14px var(--brand); transition: transform .15s, box-shadow .15s; }
.auth-card .btn.primary.block:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 18px 28px -14px var(--brand); }
.auth-card .links { justify-content: center; padding-top: 4px; }
.auth-row { display: flex; justify-content: flex-end; margin-top: -6px; font-size: 13.5px; }
.pw-wrap, .ic-wrap { position: relative; display: block; } .pw-wrap .input { padding-right: 46px; } .ic-wrap .input { padding-left: 42px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: none; border-radius: 9px; color: var(--text-3); cursor: pointer; display: grid; place-items: center; } .pw-eye:hover { color: var(--text); background: var(--surface-2); } .pw-eye svg { width: 18px; height: 18px; }
.ic-l { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; display: grid; } .ic-l svg { width: 17px; height: 17px; } .ic-wrap:focus-within .ic-l { color: var(--brand); }
.auth-mhead { display: none; }
.auth-install { width: min(460px, 100%); margin-top: 16px; animation: auth-in .6s .1s cubic-bezier(.2, .8, .2, 1) both; }
.ins-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 12%, var(--surface)), color-mix(in srgb, var(--accent) 12%, var(--surface))); }
.ins-ic { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 60%, #7c5cff)); box-shadow: 0 10px 18px -10px var(--brand); } .ins-ic svg { width: 22px; height: 22px; }
.ins-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ins-tx b { font-size: 14.5px; } .ins-tx small { color: var(--text-2); line-height: 1.35; }
.ins-btn { flex: none; border-radius: 12px; white-space: nowrap; } .ins-card.ready .ins-btn { animation: ins-pulse 2s infinite; }
@keyframes ins-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.ins-guide { display: grid; gap: 14px; } .ins-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ins-step { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-2); }
.ins-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; background: var(--brand); }
.ins-t { flex: 1; display: flex; flex-direction: column; gap: 2px; } .ins-t small { color: var(--text-2); line-height: 1.35; }
.ins-vis { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: #2f7cf6; } .ins-vis svg { width: 21px; height: 21px; } .ins-plus { font-size: 24px; line-height: 1; font-weight: 300; color: var(--text); }
@keyframes auth-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 960px) {
  .auth-aside { display: none; }
  .auth-top { position: absolute; top: 10px; left: 12px; z-index: 3; width: auto; } .auth-back { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .25); color: #fff; backdrop-filter: blur(6px); } .auth-back:hover { background: rgba(255, 255, 255, .26); color: #fff; }
  .auth-main { padding: 0 0 28px; display: flex; flex-direction: column; align-items: center; background: var(--surface-2); position: relative; min-height: 100dvh; }
  .auth-mhead { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 64px 20px 64px; text-align: center; color: #fff; background: radial-gradient(120% 120% at 20% 0%, color-mix(in srgb, var(--brand) 70%, var(--ink)), var(--ink)); }
  .auth-mhead .brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 22px; } .auth-mhead small { color: #b4cdd1; font-size: 14px; }
  .auth-card { margin: -40px 16px 0; width: calc(100% - 32px); max-width: 480px; padding: 26px 20px 22px; border-radius: 20px; }
  .auth-card h1 { font-size: 24px; }
  .auth-install { width: calc(100% - 32px); max-width: 480px; }
}
@media (max-width: 420px) { .ins-card { flex-wrap: wrap; } .ins-btn { width: 100%; justify-content: center; } .auth-card .form-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .auth-card, .auth-install, .ins-card.ready .ins-btn { animation: none; } }


/* equipe: ações sensíveis agrupadas por menu */
.stf-els { display: grid; gap: 8px; }
.stf-eg { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 10px; background: var(--surface); display: grid; gap: 2px; }
.stf-egh { display: flex; align-items: center; gap: 8px; padding-bottom: 4px; border-bottom: 1px dashed var(--line); margin-bottom: 4px; flex-wrap: wrap; }

/* entrar e cadastro: versão compacta (menos espaço, escolhas em fichas) */
.auth-main { padding: 14px 24px 18px; }
.auth-card { padding: 22px 26px 18px; width: min(440px, 100%); }
.auth-card h1 { font-size: 24px; }
.auth-card .lead { margin: 4px 0 14px; font-size: 13.5px; line-height: 1.45; }
.auth-card form { gap: 10px; }
.auth-card .field { gap: 4px; } .auth-card .lbl, .auth-card label { font-size: 12.5px; }
.auth-card .hint, .auth-card .field small { font-size: 11.5px; margin-top: 2px; }
.auth-card .input { height: 40px; font-size: 14.5px; border-radius: 10px; }
.auth-card .btn.primary.block { height: 44px; font-size: 15px; }
.auth-card .links { margin-top: 10px; padding-top: 0; }
.auth-badge { padding: 3px 9px 3px 7px; font-size: 11.5px; margin-bottom: 4px; }
.auth-card .form-grid { gap: 10px; }
.auth-row { margin-top: -4px; }
/* perfil: pílulas + ramos em fichas */
.auth-card .pp { display: grid; gap: 8px; }
.auth-card .pp-kinds { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.auth-card .pp-kind { border: 0; background: transparent; border-radius: 9px; padding: 7px 10px; gap: 7px; justify-content: center; box-shadow: none; transform: none !important; font-size: 13.5px; }
.auth-card .pp-kind.on { background: var(--surface); box-shadow: 0 1px 4px rgba(20, 40, 60, .14), 0 0 0 1.5px var(--brand); }
.auth-card .pp-kind .pp-k-t small, .auth-card .pp-kind .pp-check, .auth-card .pp-seg small, .auth-card .pp-seg em, .auth-card .pp-seg .pp-check { display: none; }
.auth-card .pp-k-ic { font-size: 16px; line-height: 1; }
.auth-card .pp-segs { display: flex; flex-wrap: wrap; gap: 6px; max-height: 112px; overflow: auto; padding: 3px; margin: -3px; }
.auth-card .pp-seg { padding: 5px 11px 5px 6px; gap: 7px; border-radius: 999px; border-width: 1px; font-size: 13px; transform: none !important; }
.auth-card .pp-seg > :first-child { width: 22px !important; height: 22px !important; font-size: 13px !important; border-radius: 50% !important; }
.auth-card .pp-seg .pp-s-t b { font-weight: 600; }
.auth-card .pp-hint { font-size: 12px; color: var(--text-3); margin: -2px 2px 0; min-height: 16px; }
.auth-card .pp-searchwrap { margin: 0; }
.auth-card .pp-search { height: 36px; }
/* plano: fichas lado a lado */
.auth-card .reg-plans { margin: 2px 0 0; }
.auth-card .reg-plans > .row { margin-bottom: 6px !important; }
.auth-card .reg-plan-list { display: flex; gap: 6px; overflow-x: auto; padding: 3px; margin: -3px; scrollbar-width: none; }
.auth-card .reg-plan-list::-webkit-scrollbar { display: none; }
.auth-card .reg-plan { flex: 1 0 auto; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 12px; border-radius: 11px; min-width: 96px; position: relative; }
.auth-card .reg-plan b { font-size: 13.5px; }
.auth-card .reg-plan .rp-price { margin: 0; font-size: 12px; }
.auth-card .reg-plan .rp-trial { position: absolute; top: -7px; right: 6px; font-size: 10px; padding: 1px 6px; }
.auth-card .pw-meter { margin-top: -4px; }
@media (max-width: 960px) { .auth-card { padding: 20px 18px 16px; } }
@media (max-height: 800px) and (min-width: 961px) { .auth-card .lead { display: none; } }
.auth-card:has(.pp) .lead { display: none; }
.auth-card:has(.pp) .field > .lbl { font-weight: 600; }
.auth-card .reg-plan-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); overflow: visible; padding: 8px 0 4px; margin: 0; }
.auth-card .reg-plan { min-width: 0; flex: none; }
.auth-card .reg-plan .rp-price { white-space: nowrap; font-size: 11.5px; }
.auth-card .reg-plans > .row label { margin: 0; }
@media (max-width: 420px) { .auth-card .pp-kind { padding: 7px 6px; font-size: 12.5px; gap: 5px; } .auth-card .pp-kind b { white-space: nowrap; } }

/* telas grandes: a tela de entrada cabe exatamente na janela, com o cartão centralizado */
@media (min-width: 961px) {
  .auth { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  .auth-aside { min-height: 0; overflow: hidden; }
  .auth-main { min-height: 0; overflow-y: auto; grid-template-rows: auto 1fr; }
  .auth-main .auth-card { align-self: center; margin-block: auto; }
}
/* instalação: estados */
.ins-card.done { border-color: color-mix(in srgb, var(--pos, #1f9d6b) 40%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--pos, #1f9d6b) 10%, var(--surface)), var(--surface)); }
.ins-card.done .ins-ic { background: linear-gradient(135deg, var(--pos, #1f9d6b), color-mix(in srgb, var(--pos, #1f9d6b) 60%, #0b7)); }
.ins-btn.is-done { background: transparent !important; color: var(--pos, #1f9d6b) !important; border: 1.5px solid color-mix(in srgb, var(--pos, #1f9d6b) 45%, transparent) !important; box-shadow: none !important; cursor: default; animation: none !important; }
.ins-btn[aria-busy="true"] { opacity: .8; pointer-events: none; }

/* plano sob medida: montador do cliente e painel do dev */
.cb-modal { width: min(1040px, 96vw) !important; }
.cb { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.cb-main { display: grid; gap: 10px; min-width: 0; }
.cb-h { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; } .cb-h h4 { margin: 0; font-size: 15px; } .cb-count { font-size: 12px; color: var(--text-3); }
.cb-base { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; background: var(--surface-2); } .cb-base summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--pos, #1f9d6b); } .cb-base summary .i { width: 15px; height: 15px; }
.cb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .cb-chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--text-2); }
.cb-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 340px; overflow: auto; padding: 3px; margin: -3px; }
.cb-f { display: flex; align-items: center; gap: 9px; text-align: left; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; font-size: 13px; }
.cb-f:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--line)); } .cb-f.on { border-color: var(--brand); background: var(--brand-50); }
.cb-ck { flex: none; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--line-strong, #b9c6cb); display: grid; place-items: center; color: #fff; } .cb-f.on .cb-ck { background: var(--brand); border-color: var(--brand); } .cb-ck .i { width: 12px; height: 12px; }
.cb-t { flex: 1; min-width: 0; line-height: 1.25; } .cb-p { flex: none; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.cb-lims { display: grid; gap: 10px; } .cb-lim.off { opacity: .55; } .cb-lh { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.cb-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-s { display: grid; gap: 1px; padding: 6px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; text-align: center; min-width: 74px; } .cb-s small { color: var(--text-3); font-size: 11px; } .cb-s b { font-size: 13px; }
.cb-s.on { border-color: var(--brand); background: var(--brand-50); } .cb-s:disabled { cursor: not-allowed; }
.cb-side { position: sticky; top: 0; } .cb-card { border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: var(--surface); box-shadow: 0 18px 40px -30px rgba(20, 40, 60, .4); display: grid; gap: 12px; } .cb-card h4 { margin: 0; }
.cb-lines { display: grid; gap: 4px; max-height: 190px; overflow: auto; } .cb-ln { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--text-2); } .cb-ln b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } .cb-ln.disc b, .cb-ln.disc { color: var(--pos, #1f9d6b); }
.cb-hint { font-size: 12px; color: var(--text-3); }
.cb-total { display: grid; gap: 2px; padding-top: 10px; border-top: 1px dashed var(--line); } .cb-total small { color: var(--text-3); } .cb-price { font-size: 32px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .cb-price span { font-size: 14px; font-weight: 500; color: var(--text-3); margin-left: 4px; }
.cb-note { display: flex; gap: 8px; font-size: 12px; color: var(--text-2); padding: 8px 10px; border-radius: 10px; background: var(--info-bg, #eaf3fb); } .cb-note .i { flex: none; width: 15px; height: 15px; margin-top: 1px; }
.cb-promo { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--brand) 50%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 9%, var(--surface)), var(--surface)); flex-wrap: wrap; }
.cb-promo-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 55%, #7c5cff)); } .cb-promo-t { flex: 1; min-width: 200px; display: grid; gap: 2px; } .cb-promo-t small { color: var(--text-2); }
.cp-feats { display: grid; gap: 4px; max-height: 420px; overflow: auto; margin-top: 8px; } .cp-fr { display: grid; grid-template-columns: minmax(0, 1fr) 170px 150px; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line-2, var(--line)); } .cp-fl { font-size: 13px; }
.cp-lim { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line-2, var(--line)); }
@media (max-width: 860px) { .cb { grid-template-columns: 1fr; } .cb-side { position: static; } .cb-list { grid-template-columns: 1fr; max-height: 280px; } .cp-fr { grid-template-columns: 1fr 1fr; } .cp-fl { grid-column: 1 / -1; } }
@media (max-width: 860px) { .cb-side { position: sticky; bottom: -1px; z-index: 3; margin: 0 -4px; } .cb-card { gap: 8px; padding: 12px 14px; box-shadow: 0 -12px 30px -18px rgba(20, 40, 60, .5); } .cb-lines { max-height: 64px; } .cb-price { font-size: 26px; } .cb-card h4 { display: none; } }

/* ===== Chat da equipe, online agora, Notas do Dev ===== */
.nav-count{margin-left:auto;background:var(--brand);color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:inline-grid;place-items:center}
.ch-online .ch-on-list{display:grid}
.ch-on-row{display:flex;align-items:center;gap:12px;padding:10px 18px;border-top:1px solid var(--line)}
.ch-on-row:first-child{border-top:0}.ch-on-t{flex:1;min-width:0;display:grid}.ch-on-t small,.ch-on-s{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-ava{position:relative;flex:none;border-radius:50%;display:inline-grid;place-items:center;color:#fff;font-weight:700}
.ch-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:#9aa3ad;border:2px solid var(--surface,#fff)}.ch-dot.on{background:#22c55e}
.ch{display:grid;grid-template-columns:340px 1fr;height:calc(100dvh - 190px);min-height:460px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface,#fff)}
.ch-side{display:flex;flex-direction:column;border-right:1px solid var(--line);min-height:0}
.ch-lh{display:flex;align-items:center;padding:14px 14px 6px}.ch-lh h3{margin:0}.ch-ls{display:grid;gap:8px;padding:6px 14px 10px}
.ch-rooms{overflow:auto;flex:1}
.ch-room{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;background:none;border:0;border-bottom:1px solid var(--line);text-align:left;cursor:pointer;color:inherit;font:inherit}
.ch-room:hover{background:var(--hover,rgba(127,127,127,.08))}.ch-room.on{background:var(--brand-bg,rgba(99,102,241,.12))}
.ch-rt{flex:1;min-width:0;display:grid}.ch-rt small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}.ch-rt small.strong{color:var(--ink);font-weight:600}
.ch-rn{display:flex;gap:6px;align-items:center}.ch-rm{display:grid;justify-items:end;gap:4px;flex:none}
.ch-un{background:#22c55e;color:#fff;font-size:11px;font-weight:700;min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;padding:0 5px}.ch-un.mute{background:#9aa3ad}
.ch-main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--chat-bg,rgba(127,127,127,.06))}
.ch-head{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--surface,#fff);border-bottom:1px solid var(--line)}
.ch-ht{display:grid;min-width:0}.ch-ht small{font-size:12px;color:var(--muted)}.ch-ht small.ok{color:#16a34a}.ch-back{display:none}
.ch-pin{display:flex;align-items:center;gap:10px;padding:6px 14px;background:var(--surface,#fff);border-bottom:1px solid var(--line);font-size:13px}.ch-pt{flex:1;min-width:0;display:grid}.ch-pt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.ch-msgs{flex:1;overflow:auto;padding:14px 5%;display:flex;flex-direction:column;gap:3px}
.ch-day{align-self:center;margin:10px 0 6px}.ch-day span{background:var(--surface,#fff);border:1px solid var(--line);padding:3px 12px;border-radius:999px;font-size:12px;color:var(--muted)}
.ch-b{position:relative;max-width:min(520px,82%);padding:7px 10px 5px;border-radius:12px;display:grid;gap:3px;box-shadow:0 1px 1px rgba(0,0,0,.08);word-break:break-word}
.ch-b.me{align-self:flex-end;background:#d9fdd3;color:#111;border-top-right-radius:3px}.ch-b.ot{align-self:flex-start;background:var(--surface,#fff);border-top-left-radius:3px}
:root[data-theme=dark] .ch-b.me{background:#005c4b;color:#e9edef}
.ch-b.urgent{outline:2px solid #ef4444}.ch-b.del{opacity:.7;font-style:italic}.ch-b.flash{animation:chFlash 1.4s}
@keyframes chFlash{0%,60%{box-shadow:0 0 0 3px var(--brand)}100%{box-shadow:none}}
.ch-who{font-size:12.5px}.ch-fw,.ch-urg{font-size:11.5px;color:var(--muted);display:flex;gap:4px;align-items:center}.ch-urg{color:#dc2626;font-weight:600}
.ch-q{text-align:left;background:rgba(127,127,127,.15);border:0;border-left:3px solid var(--brand);border-radius:6px;padding:4px 8px;display:grid;font:inherit;font-size:12.5px;color:inherit;cursor:pointer}.ch-q span{opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-tx{white-space:pre-wrap;font-size:14.5px;line-height:1.4}.ch-mn{color:#2563eb;font-weight:600}
.ch-img{max-width:100%;max-height:300px;border-radius:8px;cursor:zoom-in;object-fit:cover}
.ch-doc{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;background:rgba(127,127,127,.15);color:inherit;text-decoration:none}.ch-doc small{opacity:.7}
.ch-ts{justify-self:end;display:flex;gap:5px;align-items:center;font-size:11px;opacity:.7}.ch-ts i{font-style:italic}
.ch-tick .i{width:15px;height:15px}.ch-tick.read{color:#2fa4e7;opacity:1}
.ch-rx{display:flex;flex-wrap:wrap;gap:4px}.ch-rxp{border:1px solid var(--line);background:var(--surface,#fff);color:inherit;border-radius:999px;padding:1px 7px;font-size:13px;cursor:pointer}.ch-rxp.me{border-color:var(--brand)}.ch-rxp small{margin-left:3px}
.ch-more{position:absolute;top:2px;right:2px;opacity:0;border:0;background:inherit;border-radius:6px;padding:1px 3px;cursor:pointer;color:inherit}.ch-b:hover .ch-more{opacity:.8}
.ch-more .i{width:16px;height:16px}
.ch-older{align-self:center;margin-bottom:8px}
.ch-comp{background:var(--surface,#fff);border-top:1px solid var(--line);padding:8px 12px;position:relative}
.ch-cr{display:flex;align-items:flex-end;gap:6px}
.ch-ta{flex:1;resize:none;border:1px solid var(--line);border-radius:20px;padding:9px 14px;font:inherit;background:var(--bg,transparent);color:inherit;max-height:140px;outline:none}.ch-ta:focus{border-color:var(--brand)}
.ch-tool{width:38px;height:38px;border-radius:50%;border:0;background:none;cursor:pointer;color:var(--muted);display:grid;place-items:center;font-size:16px}.ch-tool:hover,.ch-tool.on{background:rgba(127,127,127,.15)}.ch-tool.on{color:#dc2626}
.ch-send{width:42px;height:42px;border-radius:50%;border:0;background:var(--brand);color:#fff;cursor:pointer;display:grid;place-items:center}.ch-send:disabled{opacity:.5}
.ch-replybar{display:flex;align-items:center;gap:8px;padding:6px 10px;margin-bottom:6px;background:rgba(127,127,127,.12);border-left:3px solid var(--brand);border-radius:8px}.ch-replybar[hidden]{display:none}.ch-rb{flex:1;min-width:0;display:grid;font-size:13px}.ch-rb span{opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-mentions{position:absolute;left:12px;bottom:100%;background:var(--surface,#fff);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.15);overflow:hidden;z-index:5}.ch-mentions[hidden]{display:none}
.ch-mentions button{display:flex;align-items:center;gap:8px;width:100%;padding:7px 12px;border:0;background:none;color:inherit;cursor:pointer;font:inherit}.ch-mentions button:hover{background:rgba(127,127,127,.12)}
.ch-pop{position:fixed;z-index:1000;min-width:210px;background:var(--surface,#fff);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.22);padding:6px}
.ch-mi{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:none;color:inherit;font:inherit;border-radius:8px;cursor:pointer;text-align:left}.ch-mi:hover{background:rgba(127,127,127,.12)}.ch-mi.neg{color:#dc2626}.ch-mi .i{width:16px;height:16px}
.ch-rxrow{display:flex;justify-content:space-between;padding:4px 4px 8px;border-bottom:1px solid var(--line);margin-bottom:4px}.ch-rxrow button{border:0;background:none;font-size:20px;cursor:pointer;border-radius:8px;padding:2px 4px}.ch-rxrow button:hover{background:rgba(127,127,127,.15)}
.ch-emo{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;width:290px;max-height:220px;overflow:auto}.ch-emo button{border:0;background:none;font-size:20px;padding:4px;border-radius:6px;cursor:pointer}.ch-emo button:hover{background:rgba(127,127,127,.15)}
.ch-pick{display:grid;gap:2px;max-height:50vh;overflow:auto}.ch-npick{display:grid;max-height:200px;overflow:auto;border:1px solid var(--line);border-radius:10px}
.ch-pp{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:10px;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left}.ch-pp:hover,.ch-pp.on{background:rgba(127,127,127,.12)}.ch-pp.static{cursor:default}.ch-ck{margin-left:auto;color:var(--brand)}
.ch-add{display:grid;gap:2px;margin-top:8px}
.ch-none,.ch-empty{margin:auto;text-align:center;display:grid;gap:8px;justify-items:center;padding:30px;max-width:380px;color:var(--muted)}
.ch-none-i,.ch-empty-i{width:64px;height:64px;border-radius:50%;background:rgba(127,127,127,.15);display:grid;place-items:center}.ch-none-i .i{width:30px;height:30px}
.ch-none h3{margin:0;color:var(--ink)}
.ch-nb .card-b{display:block}
@media(max-width:860px){.ch{grid-template-columns:1fr;height:calc(100dvh - 160px)}.ch[data-view=list] .ch-main{display:none}.ch[data-view=chat] .ch-side{display:none}.ch-back{display:inline-grid}.ch-msgs{padding:12px 8px}.ch-b{max-width:88%}}
@media(hover:none){.ch-more{display:none}}

/* ===== Notas do Dev (perfil): mais respiro e acabamento ===== */
.dn-card{margin:8px 0 28px;padding:28px 30px 30px;border-radius:20px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(99,102,241,.10),rgba(20,184,166,.06) 55%,transparent),var(--surface,#fff);box-shadow:0 10px 30px -18px rgba(0,0,0,.35)}
.dn-head{display:flex;align-items:center;gap:14px;margin-bottom:22px}.dn-head h3{margin:0;font-size:19px;letter-spacing:-.01em}.dn-head small{color:var(--muted)}
.dn-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--brand),#14b8a6);box-shadow:0 8px 18px -8px var(--brand)}.dn-ico .i{width:22px;height:22px}
.dn-pill{background:var(--brand);color:#fff;font-weight:700;font-size:12px;padding:5px 12px;border-radius:999px}
.dn{display:grid;gap:16px}
.dn-n{display:flex;gap:16px;padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:var(--surface,#fff);transition:transform .18s,box-shadow .18s;animation:dnIn .4s both}.dn-n:hover{transform:translateY(-2px);box-shadow:0 12px 24px -16px rgba(0,0,0,.4)}
.dn-n.new{border-color:var(--brand);box-shadow:0 0 0 3px rgba(99,102,241,.12)}.dn-n.imp .dn-av{background:linear-gradient(135deg,#f59e0b,#ef4444)}
.dn-av{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--brand),#14b8a6)}.dn-av .i{width:18px;height:18px}
.dn-body{flex:1;min-width:0}.dn-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.dn-h b{font-size:15.5px}
.dn-tx{white-space:pre-line;margin:10px 0 12px;line-height:1.6;color:var(--ink)}.dn-by{color:var(--muted)}
@keyframes dnIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:640px){.dn-card{padding:20px 16px 22px;border-radius:16px}.dn-n{padding:14px;gap:12px}}

/* ===== Online agora ===== */
.ch-online .card-h{display:flex;align-items:center;gap:10px}.ch-stamp{font-size:12px}
.ch-on-row{transition:background .15s}.ch-on-row:hover{background:rgba(127,127,127,.07)}

/* ===== Chat: acabamento premium ===== */
.ch{border-radius:20px;box-shadow:0 20px 50px -28px rgba(0,0,0,.5);grid-template-columns:360px 1fr}
.ch-side{background:var(--surface,#fff)}.ch-lh{padding:18px 18px 8px}.ch-lh h3{font-size:19px}
.ch-ls input{border-radius:999px;padding-left:16px}
.ch-room{border-bottom:0;margin:2px 8px;width:calc(100% - 16px);border-radius:14px;padding:11px 12px;transition:background .15s}
.ch-room.on{background:linear-gradient(135deg,rgba(99,102,241,.18),rgba(20,184,166,.12))}
.ch-ava{box-shadow:0 0 0 2px var(--surface,#fff),0 0 0 3.5px rgba(127,127,127,.25)}
.ch-dot.on{box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:chPulse 2s infinite}@keyframes chPulse{70%{box-shadow:0 0 0 6px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.ch-head{padding:12px 18px;gap:14px;box-shadow:0 1px 0 var(--line),0 8px 20px -18px rgba(0,0,0,.4);position:relative;z-index:2}
.ch-ht b{font-size:16px}
.ch-body{position:relative;flex:1;min-height:0;display:flex}.ch-body .ch-msgs{flex:1}
.ch-msgs{padding:18px 6%;gap:4px;scroll-behavior:smooth}
.ch-b{border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.12);animation:chIn .22s both}@keyframes chIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.ch-b.me{background:linear-gradient(135deg,#0f9d8a,#0b7d78);color:#f4fffd;border-top-right-radius:4px}.ch-b.ot{border-top-left-radius:4px}
.ch-b.me .ch-mn,.ch-b.me .ch-link{color:#c9fff4}.ch-link{color:#2563eb;text-decoration:underline;word-break:break-all}
:root[data-theme=dark] .ch-b.me{background:linear-gradient(135deg,#0a7f73,#065c55);color:#e9fffb}
.ch-b.me .ch-q{background:rgba(0,0,0,.18)}.ch-tx code{font-family:ui-monospace,Menlo,monospace;background:rgba(127,127,127,.22);padding:1px 5px;border-radius:5px;font-size:.92em}
.ch-tx mark,.ch-find ~ * mark{background:#fde047;color:#111;border-radius:3px;padding:0 2px}.ch-tx mark.cur{background:#fb923c}
.ch-day span{box-shadow:0 1px 3px rgba(0,0,0,.12);font-weight:600}
.ch-audio{width:240px;max-width:100%;height:38px}
.ch-down{position:absolute;right:18px;bottom:14px;z-index:3;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--surface,#fff);color:var(--ink);box-shadow:0 8px 20px -8px rgba(0,0,0,.5);cursor:pointer;display:grid;place-items:center}.ch-down[hidden]{display:none}.ch-down .i{transform:rotate(-90deg)}
.ch-down-n{position:absolute;top:-6px;right:-4px;background:#22c55e;color:#fff;font-size:11px;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px}.ch-down-n:empty{display:none}
.ch-find{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--surface,#fff);border-bottom:1px solid var(--line)}.ch-find[hidden]{display:none}.ch-find .input{flex:1}
.ch-comp{padding:10px 16px 14px;background:transparent;border-top:0}
.ch-cr{background:var(--surface,#fff);border:1px solid var(--line);border-radius:26px;padding:5px 6px;box-shadow:0 10px 30px -18px rgba(0,0,0,.5)}.ch-cr[hidden]{display:none}
.ch-ta{border:0;background:transparent;padding:10px 8px}.ch-ta:focus{border:0}
.ch-send.mic{background:var(--surface,#fff);color:var(--brand);border:1px solid var(--line)}.ch-send[hidden]{display:none}
.ch-rec{display:flex;align-items:center;gap:12px;background:var(--surface,#fff);border:1px solid #ef4444;border-radius:26px;padding:6px 8px;box-shadow:0 10px 30px -18px rgba(239,68,68,.6)}.ch-rec[hidden]{display:none}
.ch-rec-dot{width:11px;height:11px;border-radius:50%;background:#ef4444;animation:chRec 1s infinite}@keyframes chRec{50%{opacity:.25}}.ch-rec-t{font-variant-numeric:tabular-nums}
.ch-quick{display:flex;gap:6px;overflow:auto;padding:0 2px 8px}.ch-quick[hidden]{display:none}
.ch-quick button{flex:none;border:1px solid var(--line);background:var(--surface,#fff);color:inherit;border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;cursor:pointer}.ch-quick button:hover{border-color:var(--brand);color:var(--brand)}
.ch-walls{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.ch-wall{height:84px;border-radius:14px;border:2px solid transparent;cursor:pointer;color:#fff;font-weight:700;display:grid;place-items:end start;padding:10px;text-shadow:0 1px 4px rgba(0,0,0,.6)}.ch-wall.on{border-color:var(--brand)}
/* papéis de parede e tamanho do texto */
.ch.wp-padrao .ch-main,.ch-wall.wp-padrao{background:var(--chat-bg,rgba(127,127,127,.06))}
.ch.wp-aurora .ch-main,.ch-wall.wp-aurora{background:linear-gradient(160deg,rgba(99,102,241,.22),rgba(236,72,153,.14) 50%,rgba(20,184,166,.2))}
.ch.wp-pontos .ch-main,.ch-wall.wp-pontos{background:radial-gradient(rgba(127,127,127,.25) 1.2px,transparent 1.4px) 0 0/18px 18px,rgba(127,127,127,.05)}
.ch.wp-grafite .ch-main,.ch-wall.wp-grafite{background:linear-gradient(180deg,#20242b,#14171c)}
.ch.wp-oceano .ch-main,.ch-wall.wp-oceano{background:linear-gradient(170deg,#0e7490,#164e63 60%,#0c4a6e)}
.ch.wp-floresta .ch-main,.ch-wall.wp-floresta{background:linear-gradient(170deg,#166534,#14532d 60%,#052e16)}
.ch.wp-grafite .ch-day span,.ch.wp-oceano .ch-day span,.ch.wp-floresta .ch-day span{background:rgba(0,0,0,.35);border-color:transparent;color:#fff}
.ch.fs-s .ch-tx{font-size:13px}.ch.fs-l .ch-tx{font-size:17px}
@media(max-width:860px){.ch{grid-template-columns:1fr;border-radius:14px}}

/* ===== Estúdio de música ===== */
:root{--mp-ac:99,102,241}
body.has-mp .shell-main,body.has-mp main{padding-bottom:96px}
.mp-stage{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:22px;align-items:start}
.mp-left{min-width:0}.mp-main{min-height:420px}
.mp-tabs{display:flex;gap:6px;overflow:auto;padding:4px;margin-bottom:18px;background:rgba(127,127,127,.1);border-radius:16px;position:sticky;top:0;z-index:4;backdrop-filter:blur(10px)}
.mp-tabs button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border:0;background:none;color:var(--muted);font:inherit;font-weight:600;border-radius:12px;cursor:pointer;white-space:nowrap;transition:all .15s}
.mp-tabs button:hover{color:var(--ink)}.mp-tabs button.on{background:var(--surface,#fff);color:var(--ink);box-shadow:0 4px 14px -6px rgba(0,0,0,.35)}
.mp-tabs em{font-style:normal;font-size:11px;background:var(--brand);color:#fff;border-radius:9px;padding:1px 7px}
.mp-hero{position:relative;overflow:hidden;border-radius:24px;padding:30px;margin-bottom:24px;color:#fff;background:radial-gradient(120% 140% at 0% 0%,rgba(var(--mp-ac),.9),transparent 60%),linear-gradient(135deg,#1e1b4b,#0f172a 70%);box-shadow:0 24px 50px -28px rgba(var(--mp-ac),.8)}
.mp-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.07)}
.mp-hero-t small{letter-spacing:.16em;font-weight:700;opacity:.75}.mp-hero-t h2{margin:6px 0 8px;font-size:28px;line-height:1.15;letter-spacing:-.02em;max-width:520px}.mp-hero-t p{margin:0 0 20px;opacity:.85;max-width:560px}
.mp-search{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:6px 6px 6px 16px;backdrop-filter:blur(8px)}
.mp-main>.mp-search{background:var(--surface,#fff);border-color:var(--line);margin-bottom:12px}
.mp-si{display:inline-flex;opacity:.7}.mp-q{flex:1;min-width:0;border:0;background:transparent;color:inherit;font:inherit;font-size:15px;padding:9px 4px;outline:none}.mp-q::placeholder{color:inherit;opacity:.6}
.mp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.mp-chips.sm{margin:0}
.mp-chip{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);color:inherit;border-radius:999px;padding:6px 14px;font:inherit;font-size:13px;cursor:pointer;transition:all .15s}.mp-chip:hover{background:rgba(255,255,255,.22);transform:translateY(-1px)}
.mp-main>.mp-sec .mp-chip,.mp-main .mp-empty .mp-chip{color:var(--ink);border-color:var(--line);background:var(--surface,#fff)}.mp-main .mp-chip.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.mp-sec{display:flex;align-items:center;gap:12px;margin:6px 0 12px;flex-wrap:wrap}.mp-sec h3{margin:0;font-size:18px}.mp-sec .mp-chips{margin-left:auto}
.mp-filters{margin-bottom:14px;overflow:auto}
.mp-list{display:grid;gap:2px}
.mp-row{display:grid;grid-template-columns:44px 44px minmax(0,1fr) auto 54px auto;align-items:center;gap:12px;padding:8px 10px;border-radius:14px;transition:background .15s}
.mp-row:hover{background:rgba(127,127,127,.09)}.mp-row.on{background:linear-gradient(90deg,rgba(var(--mp-ac),.18),transparent)}
.mp-rn{position:relative;width:36px;height:36px;border:0;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;border-radius:50%;font:inherit}
.mp-rn .mp-pl{position:absolute;inset:0;display:none;place-items:center;border-radius:50%;background:var(--brand);color:#fff}.mp-rn .mp-pl .i{fill:currentColor;width:14px;height:14px}.mp-row:hover .mp-pl{display:grid}.mp-row:hover .mp-num,.mp-row:hover .mp-eq{visibility:hidden}.mp-row.on .mp-num{color:var(--brand);font-weight:700}
.mp-cov{display:inline-grid;place-items:center;flex:none;border-radius:10px;overflow:hidden;color:rgba(255,255,255,.8);position:relative}.mp-cov img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.mp-cov.big{border-radius:22px}
.mp-t{display:grid;min-width:0;gap:2px}.mp-t b,.mp-t small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mp-t small{color:var(--muted);font-size:12.5px}.mp-row.on .mp-t b{color:var(--brand)}
.mp-meta{display:flex;gap:6px;align-items:center}.mp-src{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);white-space:nowrap}
.mp-lic{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 8px;white-space:nowrap}
.mp-dur{color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;font-size:13px}
.mp-acts{display:flex;gap:2px}.mp-ib{width:34px;height:34px;border:0;background:none;color:var(--muted);border-radius:50%;cursor:pointer;display:inline-grid;place-items:center;transition:all .15s}.mp-ib:hover{background:rgba(127,127,127,.18);color:var(--ink)}
.mp-ib.on{color:var(--brand)}.mp-ib.heart.on .i{fill:#ef4444;stroke:#ef4444}.mp-ib.heart.on{color:#ef4444}
.mp-eq{position:absolute;display:inline-flex;gap:2px;align-items:flex-end;height:14px}.mp-eq i{width:3px;background:var(--brand);border-radius:2px;animation:mpEq .9s ease-in-out infinite}.mp-eq i:nth-child(2){animation-delay:.2s}.mp-eq i:nth-child(3){animation-delay:.4s}.mp-eq i:nth-child(4){animation-delay:.1s}
@keyframes mpEq{0%,100%{height:3px}50%{height:14px}}
.mp-row.sk{opacity:.7;grid-template-columns:44px 1fr}.mp-sk{display:block;border-radius:8px;background:linear-gradient(90deg,rgba(127,127,127,.12),rgba(127,127,127,.24),rgba(127,127,127,.12));background-size:200% 100%;animation:mpSk 1.2s infinite}@keyframes mpSk{to{background-position:-200% 0}}
.mp-empty{display:grid;justify-items:center;gap:8px;text-align:center;padding:44px 20px;color:var(--muted)}.mp-empty b{color:var(--ink)}.mp-empty-i{width:68px;height:68px;border-radius:50%;background:rgba(127,127,127,.14);display:grid;place-items:center}.mp-empty-i .i{width:30px;height:30px}
.mp-plh{display:flex;gap:22px;align-items:flex-end;margin-bottom:20px;flex-wrap:wrap}.mp-pli h2{margin:2px 0 4px;font-size:30px;letter-spacing:-.02em}.mp-pli small{color:var(--muted)}
.mp-fav-cov{width:120px;height:120px;border-radius:20px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#ef4444,#ec4899);box-shadow:0 14px 30px -14px #ef4444}.mp-fav-cov .i{width:48px;height:48px;fill:#fff}
.mp-mosaic{display:grid;grid-template-columns:1fr 1fr;border-radius:18px;overflow:hidden;background:rgba(127,127,127,.14);flex:none;box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}.mp-mosaic .mp-cov{border-radius:0;width:100%!important;height:100%!important}.mp-mosaic>.mp-cov:only-child{grid-column:1/3;grid-row:1/3}
.mp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px}.mp-pcard{display:grid;gap:8px;text-align:left;border:0;background:none;color:inherit;cursor:pointer;font:inherit;padding:10px;border-radius:18px;transition:background .15s,transform .15s}.mp-pcard:hover{background:rgba(127,127,127,.1);transform:translateY(-3px)}.mp-pcard .mp-mosaic{width:100%!important;height:auto!important;aspect-ratio:1}.mp-pcard small{color:var(--muted)}
.mp-pickpl{display:grid;gap:4px;max-height:40vh;overflow:auto}.mp-pl-pick{display:flex;align-items:center;gap:12px;border:0;background:none;color:inherit;font:inherit;padding:8px;border-radius:12px;cursor:pointer;text-align:left}.mp-pl-pick:hover{background:rgba(127,127,127,.12)}
/* painel tocando agora */
.mp-side{position:sticky;top:12px;border-radius:26px;overflow:hidden;min-height:520px;border:1px solid var(--line);background:var(--surface,#fff);box-shadow:0 24px 50px -30px rgba(0,0,0,.6)}
.mp-np-bg{position:absolute;inset:-30px;background:var(--cv) center/cover,linear-gradient(160deg,rgba(var(--mp-ac),.8),#0f172a);filter:blur(46px) saturate(1.5);opacity:.55;transform:scale(1.2)}
.mp-np{position:relative;display:grid;gap:14px;padding:26px;justify-items:center;text-align:center}.mp-np-l{letter-spacing:.18em;font-weight:700;font-size:11px;color:var(--muted)}
.mp-np-cov{border-radius:22px;box-shadow:0 26px 50px -20px rgba(0,0,0,.7);transition:transform .5s}.mp-np-cov.spin{transform:scale(1.02)}.mp-np-cov .mp-cov{width:100%!important;max-width:260px;height:auto!important;aspect-ratio:1}
.mp-np-t{display:grid;gap:4px;justify-items:center}.mp-np-t b{font-size:19px;line-height:1.2}.mp-np-t span{color:var(--muted)}
.mp-np-bar{width:100%;height:6px;border-radius:3px;background:rgba(127,127,127,.28);cursor:pointer;overflow:hidden}.mp-np-fill{height:100%;width:0;background:rgb(var(--mp-ac));border-radius:3px}.mp-np-tm{width:100%;display:flex;justify-content:flex-end;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.mp-np-ctl{display:flex;align-items:center;gap:10px}.mp-np-opt{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.mp-np-none{position:relative;display:grid;justify-items:center;gap:8px;padding:90px 24px;color:var(--muted);text-align:center}
.mp-play{width:46px;height:46px;border-radius:50%;border:0;background:rgb(var(--mp-ac));color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 10px 24px -10px rgb(var(--mp-ac));transition:transform .15s}.mp-play:hover{transform:scale(1.07)}.mp-play .i{fill:currentColor}.mp-play.big{width:62px;height:62px}.mp-play.big .i{width:24px;height:24px}
.mp-ib.rep[data-m=one]::after{content:"1";position:absolute;font-size:9px;font-weight:800;margin:-2px 0 0 14px}.mp-ib{position:relative}
/* barra fixa */
.mp-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:color-mix(in srgb,var(--surface,#fff) 86%,transparent);backdrop-filter:blur(18px) saturate(1.4);border-top:1px solid var(--line);box-shadow:0 -14px 40px -22px rgba(0,0,0,.6)}.mp-bar[hidden]{display:none}
.mp-bar-prog{height:4px;position:absolute;left:0;right:0;top:-2px}.mp-seek,.mp-vol{-webkit-appearance:none;appearance:none;background:transparent;width:100%;height:14px;margin:0;cursor:pointer}
.mp-seek{position:absolute;top:-5px;left:0;right:0;--p:0%}.mp-seek::-webkit-slider-runnable-track{height:4px;background:linear-gradient(90deg,rgb(var(--mp-ac)) var(--p),rgba(127,127,127,.3) var(--p))}.mp-seek::-moz-range-track{height:4px;background:rgba(127,127,127,.3)}.mp-seek::-moz-range-progress{height:4px;background:rgb(var(--mp-ac))}
.mp-seek::-webkit-slider-thumb{-webkit-appearance:none;width:0;height:0}.mp-bar:hover .mp-seek::-webkit-slider-thumb{width:12px;height:12px;border-radius:50%;background:rgb(var(--mp-ac));margin-top:-4px}
.mp-vol{width:90px}.mp-vol::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:rgba(127,127,127,.35)}.mp-vol::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--ink);margin-top:-4px}
.mp-bar-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:10px 20px;max-width:1500px;margin:0 auto}
.mp-bar-now{display:flex;align-items:center;gap:12px;min-width:0;color:inherit;text-decoration:none}.mp-ctl{display:flex;align-items:center;gap:6px}.mp-bar-r{display:flex;align-items:center;gap:8px;justify-content:flex-end}.mp-time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;margin-right:6px}
.mp-bar .mp-play{width:40px;height:40px}.mp-bar.playing .mp-bc .mp-cov{box-shadow:0 0 0 2px rgba(var(--mp-ac),.8)}
@media(max-width:1180px){.mp-stage{grid-template-columns:1fr}.mp-side{position:relative;min-height:0}.mp-np{grid-template-columns:150px 1fr;text-align:left;justify-items:start}.mp-np-cov{grid-row:1/6}.mp-np-t{justify-items:start}.mp-np-l{grid-column:2}}
@media(max-width:760px){.mp-row{grid-template-columns:36px 44px minmax(0,1fr) auto}.mp-meta,.mp-dur{display:none}.mp-hero{padding:22px 18px}.mp-hero-t h2{font-size:22px}.mp-bar-in{grid-template-columns:1fr auto;padding:8px 12px}.mp-bar-r{display:none}.mp-np{grid-template-columns:1fr;text-align:center;justify-items:center}.mp-np-cov{grid-row:auto}.mp-np-t{justify-items:center}.mp-np-l{grid-column:auto}.mp-tabs button span{display:none}}

body.has-mp .main-inner{padding-bottom:104px}body.has-mp .ch{height:calc(100dvh - 290px)}
.mp-np-cov{width:100%;max-width:260px}.mp-np-cov .mp-cov{display:grid;width:100%!important}
@media(max-width:1180px){.mp-np-cov{max-width:150px}}

.mp-bar-l{display:flex;align-items:center;gap:6px;min-width:0}.mp-bar-l .mobile-only{display:none}.mp-ib.close:hover{background:rgba(239,68,68,.16);color:#ef4444}
@media(max-width:760px){.mp-bar-l .mobile-only{display:inline-grid}}

/* símbolo discreto de receita/despesa */
.flow{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;margin-right:7px;vertical-align:-3px;flex:none;opacity:.85}
.flow .i{width:10px;height:10px;stroke-width:2.4}
.flow-income{background:var(--pos-bg,rgba(34,197,94,.14));color:var(--pos)}.flow-expense{background:var(--neg-bg,rgba(239,68,68,.14));color:var(--neg)}
.k-lf{display:inline-flex;align-items:center}.k-lf .flow{margin-right:6px}

/* ===== Atendimento e serviços: agenda, clientes, ordens e estoque ===== */
.p23-kpis { margin-bottom: 18px; }
.p23-kpi .k-s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p23-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.p23-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.p23-range { min-width: 120px; text-align: center; text-transform: capitalize; font-variant-numeric: tabular-nums; }
.p23-av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff; background: linear-gradient(135deg, #7c5cff, #d946a8); box-shadow: 0 6px 14px -8px rgba(124, 92, 255, .8); }
.p23-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.p23-col { position: relative; display: flex; flex-direction: column; min-height: 240px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.p23-col > header { display: flex; align-items: baseline; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line-2); background: var(--surface-2); }
.p23-col > header span { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #6b7a85); }
.p23-col > header b { font-size: 20px; font-variant-numeric: tabular-nums; }
.p23-col > header small { margin-left: auto; color: var(--muted, #6b7a85); font-size: 11px; }
.p23-col.today { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 22%, transparent); }
.p23-col.today > header b { color: var(--brand); }
.p23-col.off { opacity: .6; }
.p23-colb { display: flex; flex-direction: column; gap: 6px; padding: 8px; flex: 1; }
.p23-empty { margin: auto; }
.p23-add { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--brand); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .15s, transform .15s; }
.p23-col:hover .p23-add, .p23-add:focus-visible { opacity: 1; }
.p23-add:hover { transform: scale(1.08); }
.p23-add svg { width: 16px; height: 16px; }
.p23-appt { --c: #7c5cff; display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 12px; background: color-mix(in srgb, var(--c) 8%, var(--surface)); color: var(--text); cursor: pointer; transition: transform .12s, box-shadow .12s; font: inherit; }
.p23-appt:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.p23-appt.st-canceled, .p23-appt.st-noshow { opacity: .55; text-decoration: line-through; }
.p23-appt.st-done { background: color-mix(in srgb, var(--pos, #1a9d6b) 10%, var(--surface)); }
.p23-time { display: flex; flex-direction: column; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; line-height: 1.15; min-width: 42px; }
.p23-time small { font-weight: 500; color: var(--muted, #6b7a85); font-size: 11px; }
.p23-ab { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.p23-ab small { color: var(--muted, #6b7a85); }
.p23-ar { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.p23-dayv, .p23-listv { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.p23-lrow { display: grid; grid-template-columns: 80px 1fr; gap: 10px; align-items: center; }
.p23-ld { font-size: 12px; color: var(--muted, #6b7a85); font-weight: 600; }
.p23-month { padding: 12px; }
.p23-mh, .p23-mg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.p23-mh span { text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #6b7a85); padding-bottom: 6px; }
.p23-mc { aspect-ratio: 1.1; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 6px 8px; cursor: pointer; color: var(--text); font: inherit; text-align: left; }
.p23-mc:hover { border-color: var(--brand); }
.p23-mc.today { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
.p23-mc.has small { margin-top: auto; color: var(--muted, #6b7a85); font-size: 11px; }
.p23-dots { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; }
.p23-dots i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.p23-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; margin-top: 14px; }
.p23-tag { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; margin: 2px 4px 2px 0; }
.p23-tags { margin: 10px 0; }
.p23-svcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.p23-svc { --c: #7c5cff; position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 20px; overflow: hidden; }
.p23-svc.off { opacity: .55; }
.p23-sbar { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); }
.p23-sb { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.p23-sp { font-size: 16px; }
.p23-sa { display: flex; }
.p23-svcpick { display: flex; flex-wrap: wrap; gap: 8px; }
.p23-chip { --c: #7c5cff; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 12px 8px 26px; position: relative; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; font: inherit; text-align: left; }
.p23-chip i { position: absolute; left: 10px; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.p23-chip small { color: var(--muted, #6b7a85); font-size: 11px; }
.p23-chip.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--surface)); box-shadow: 0 0 0 1px var(--c); }
.p23-days { display: flex; gap: 6px; flex-wrap: wrap; }
.p23-day { min-width: 46px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; font: inherit; }
.p23-day.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.p23-mats, .p23-items { display: flex; flex-direction: column; gap: 8px; }
.p23-mrow { display: grid; grid-template-columns: 1fr 100px 36px; gap: 8px; align-items: center; }
.p23-ad, .p23-cd { display: flex; flex-direction: column; gap: 10px; }
.p23-cd-top { display: flex; align-items: center; gap: 12px; }
.p23-cd-n { font-size: 18px; font-weight: 700; }
.p23-lines { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.p23-line { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line-2); }
.p23-line:last-child { border-bottom: 0; }
.p23-line i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.p23-line span { flex: 1; }
.p23-sum { display: flex; justify-content: space-between; font-size: 17px; padding: 4px 2px; }
.p23-note { display: flex; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); font-size: 13px; }
.p23-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.p23-wa { background: #25d366; border-color: #25d366; color: #fff; text-decoration: none; }
.p23-wa:hover { background: #1fb957; border-color: #1fb957; color: #fff; }
.p23-mini { gap: 10px; }
.p23-m { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); }
.p23-m small { color: var(--muted, #6b7a85); font-size: 11px; }
.p23-h { margin: 14px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #6b7a85); }
.p23-hist { list-style: none; margin: 0; padding: 0; }
.p23-hist li { display: grid; grid-template-columns: 96px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.p23-when { font-size: 12px; color: var(--muted, #6b7a85); font-variant-numeric: tabular-nums; }
.p23-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 14px; border-bottom: 1px solid var(--line-2); }
.p23-toolbar .input { max-width: 320px; }
.p23-clist { display: flex; flex-direction: column; }
.p23-crow { display: grid; grid-template-columns: 40px 1fr auto auto; gap: 14px; align-items: center; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line-2); background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.p23-crow:hover { background: var(--surface-2); }
.p23-cmain { display: flex; flex-direction: column; min-width: 0; }
.p23-cstat { display: flex; flex-direction: column; align-items: flex-end; }
.p23-cnext { min-width: 110px; text-align: right; }
.p23-os-grid, .p23-stk { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.p23-os { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 18px; }
.p23-os header { display: flex; align-items: center; gap: 8px; }
.p23-os h3 { margin: 4px 0 2px; font-size: 16px; }
.p23-os-v { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--line); }
.p23-os-v b { font-size: 20px; }
.p23-os footer { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.p23-os.st-canceled { opacity: .6; }
.p23-irow { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.p23-ir1 { display: grid; grid-template-columns: 140px 1fr 36px; gap: 8px; }
.p23-ir2 { display: grid; grid-template-columns: 110px 1fr; gap: 8px; }
.p23-total { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--brand) 8%, var(--surface)); border: 1px solid var(--line); }
.p23-total b { font-size: 18px; }
.p23-si { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 18px; }
.p23-si > header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.p23-si.low { border-color: color-mix(in srgb, var(--warn) 60%, var(--line)); }
.p23-qty { display: flex; align-items: baseline; gap: 6px; }
.p23-qty b { font-size: 28px; }
.p23-qty small { margin-left: auto; }
.p23-meter { height: 8px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.p23-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pos, #1a9d6b), #55d6a1); }
.p23-si.low .p23-meter i { background: linear-gradient(90deg, var(--warn, #d98a00), #f3b94d); }
.p23-si footer { display: flex; align-items: center; gap: 6px; }
.p23-moves summary { cursor: pointer; font-size: 12px; color: var(--muted, #6b7a85); }
.p23-moves ul { list-style: none; margin: 6px 0 0; padding: 0; }
.p23-moves li { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; font-size: 12px; padding: 3px 0; }
@media (max-width: 1100px) { .p23-week { grid-template-columns: repeat(2, minmax(0, 1fr)); } .p23-col { min-height: 0; } .p23-add { opacity: 1; } }
@media (max-width: 640px) {
  .p23-week { grid-template-columns: 1fr; } .p23-crow { grid-template-columns: 40px 1fr auto; } .p23-cnext { display: none; }
  .p23-hist li { grid-template-columns: 1fr auto; } .p23-hist .p23-when { grid-column: 1 / -1; } .p23-ir1 { grid-template-columns: 1fr 36px; } .p23-ir1 select { grid-column: 1 / -1; }
  .p23-lrow { grid-template-columns: 1fr; } .p23-mc { aspect-ratio: auto; min-height: 52px; }
}
.p23-col .p23-appt { flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; }
.p23-col .p23-time { flex-direction: row; align-items: baseline; gap: 6px; }
.p23-col .p23-ab { width: 100%; }

/* ===== Favoritos, atalho da agenda e avisos no aparelho ===== */
.nav-row { position: relative; }
.nav-row > .nav-item { padding-right: 34px; }
.nav-star { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border: 0; background: transparent; border-radius: 8px; display: grid; place-items: center; cursor: pointer; color: var(--text-2, #6b7a85); opacity: 0; transition: opacity .15s, background .15s, color .15s; }
.nav-star svg { width: 15px; height: 15px; }
.nav-row:hover .nav-star, .nav-star:focus-visible, .nav-star.on { opacity: 1; }
.nav-star:hover { background: var(--surface-2); color: #e0a100; }
.nav-star.on { color: #e0a100; }
.nav-star.on svg { fill: currentColor; }
@media (hover: none) { .nav-star { opacity: .55; } .nav-star.on { opacity: 1; } }
.fav-dd { position: relative; }
.fav-btn { position: relative; }
.fav-btn.has svg { color: #e0a100; }
.fav-btn.has svg path, .fav-btn.has svg polygon { fill: currentColor; }
.fav-count { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.fav-panel { min-width: 290px; max-width: min(340px, 92vw); padding: 6px; }
.fav-panel .fav-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line-2); margin-bottom: 6px; }
.fav-panel .fav-head svg { width: 16px; height: 16px; color: #e0a100; fill: currentColor; }
.fav-panel .fav-n { margin-left: auto; font-size: 12px; color: var(--text-2, #6b7a85); }
.fav-list { display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow: auto; }
.fav-row { display: flex; align-items: center; border-radius: 10px; }
.fav-row:hover { background: var(--surface-2); }
.fav-item { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 7px 10px; color: var(--text); text-decoration: none; border-radius: 10px; }
.fav-panel .fav-x { width: 28px; height: 28px; padding: 0; justify-content: center; opacity: 0; flex: none; margin-right: 4px; }
.fav-row:hover .fav-x, .fav-x:focus-visible { opacity: 1; }
.fav-x svg { width: 14px; height: 14px; }
.fav-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 18px 14px 14px; color: var(--text-2, #6b7a85); }
.fav-empty svg { width: 26px; height: 26px; color: #e0a100; opacity: .7; }
.fav-empty p { margin: 4px 0 0; color: var(--text); font-weight: 600; }
.agenda-chip { gap: 6px; color: var(--text-2, #6b7a85); }
.agenda-chip:hover { color: var(--brand); }
.agenda-chip-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.push-box { display: flex; flex-direction: column; gap: 14px; }
.push-top { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: start; }
.push-top p { margin: 4px 0 0; font-size: 13px; }
.push-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #7c5cff, #d946a8); color: #fff; }
.push-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.push-prefs { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.push-prefs h4 { margin: 0 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2, #6b7a85); }
.push-pref { display: flex; flex-direction: column; gap: 2px; }
.push-lead { padding-left: 26px; max-width: 260px; }
.push-dev { padding: 12px 14px; border: 1px dashed var(--line); border-radius: 12px; font-size: 13px; }
.push-url { display: block; word-break: break-all; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); user-select: all; font-size: 12px; }
@media (max-width: 640px) { .push-top { grid-template-columns: 44px 1fr; } .push-top > .badge { grid-column: 1 / -1; justify-self: start; } .agenda-chip span:not(.agenda-chip-n) { display: none; } }

/* ===== Estúdio de TV ===== */
.tv-wrap { display: flex; flex-direction: column; gap: 18px; position: relative; }
.tv-hero { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.tv-main { min-width: 0; }
.tv-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: radial-gradient(120% 120% at 20% 0%, #1b2440 0%, #0a0e1a 55%, #05070d 100%); box-shadow: 0 30px 60px -30px rgba(5, 10, 30, .75), 0 0 0 1px rgba(255, 255, 255, .06); color: #fff; isolation: isolate; }
.tv-stage:fullscreen { border-radius: 0; aspect-ratio: auto; width: 100vw; height: 100vh; }
.tv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.tv-stage.idle .tv-video { opacity: 0; }
.tv-idle { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; cursor: pointer; z-index: 1; }
.tv-stage:not(.idle) .tv-idle { display: none; }
.tv-idle svg { width: 54px; height: 54px; opacity: .85; filter: drop-shadow(0 8px 22px rgba(124, 92, 255, .6)); }
.tv-idle b { font-size: 20px; letter-spacing: .01em; }
.tv-idle small { opacity: .65; }
.tv-spin, .tv-err { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 20px; }
.tv-spin { background: rgba(5, 7, 13, .35); pointer-events: none; }
.tv-err { background: rgba(5, 7, 13, .82); backdrop-filter: blur(6px); }
.tv-err svg { width: 34px; height: 34px; color: #f5b94a; }
.tv-err small { opacity: .75; max-width: 420px; }
.tv-err-a { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.tv-top { position: absolute; left: 0; right: 0; top: 0; z-index: 4; display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 40px; background: linear-gradient(180deg, rgba(0, 0, 0, .7), transparent); opacity: 0; transition: opacity .25s; pointer-events: none; }
.tv-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 4px; padding: 40px 14px 12px; background: linear-gradient(0deg, rgba(0, 0, 0, .78), transparent); opacity: 0; transition: opacity .25s; }
.tv-stage.show .tv-top, .tv-stage.show .tv-bar, .tv-stage.idle .tv-top { opacity: 1; }
.tv-stage.idle .tv-bar { opacity: .55; }
.tv-ti { min-width: 0; }
.tv-title { font-size: 20px; font-weight: 700; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-sub { display: flex; gap: 8px; align-items: center; font-size: 12.5px; opacity: .85; margin-top: 2px; flex-wrap: wrap; }
.tv-live { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(239, 68, 68, .95); font-size: 11px; font-weight: 800; letter-spacing: .08em; margin-top: 2px; }
.tv-live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: tvPulse 1.4s infinite; }
@keyframes tvPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.tv-b { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 8px; border: 0; border-radius: 12px; background: transparent; color: #fff; cursor: pointer; font: inherit; font-size: 12px; transition: background .15s; }
.tv-b:hover, .tv-b:focus-visible { background: rgba(255, 255, 255, .16); }
.tv-b svg { width: 20px; height: 20px; }
.tv-vol { width: 84px; accent-color: #fff; }
.tv-q { height: 32px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .45); color: #fff; padding: 0 8px; font-size: 12px; }
.tv-alt { border: 1px solid rgba(255, 255, 255, .25); }
.tv-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: rgba(124, 92, 255, .16); border: 1px solid rgba(124, 92, 255, .35); font-size: 11px; font-weight: 600; color: inherit; }
.tv-chip.soft { background: var(--surface-2); border-color: var(--line); color: var(--text-2, #6b7a85); font-weight: 500; }
.tv-stage .tv-chip { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); }
.tv-side { padding: 14px; display: flex; flex-direction: column; gap: 10px; align-self: stretch; max-height: 100%; }
.tv-side-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tv-side-h svg { width: 16px; height: 16px; color: #e0a100; fill: currentColor; }
.tv-sidelist { display: flex; flex-direction: column; gap: 4px; overflow: auto; max-height: 340px; }
.tv-srow { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 0; border-radius: 12px; background: transparent; color: var(--text); cursor: pointer; text-align: left; font: inherit; }
.tv-srow:hover { background: var(--surface-2); }
.tv-srow.on { background: color-mix(in srgb, var(--brand) 12%, var(--surface)); }
.tv-srow > svg { width: 14px; height: 14px; opacity: .4; flex: none; }
.tv-sn { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tv-sn small { color: var(--text-2, #6b7a85); }
.tv-sempty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 22px 10px; color: var(--text-2, #6b7a85); }
.tv-mark { --h: 220; position: relative; flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; overflow: hidden; color: #fff; font-size: 13px; background: linear-gradient(135deg, hsl(var(--h) 70% 52%), hsl(calc(var(--h) + 50) 70% 38%)); }
.tv-mark.s2 { width: 64px; height: 64px; border-radius: 18px; font-size: 20px; }
.tv-mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 4px; }
.tv-browser { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.tv-bh { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tv-bh h3 { margin: 0; font-size: 18px; }
.tv-count { font-size: 12.5px; color: var(--text-2, #6b7a85); }
.tv-csel { max-width: 220px; }
.tv-search { position: relative; display: flex; align-items: center; }
.tv-search > svg { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--text-2, #6b7a85); pointer-events: none; }
.tv-search .input { padding-left: 42px; height: 44px; border-radius: 14px; }
.tv-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.tv-pill { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; font: inherit; font-size: 13px; transition: all .15s; }
.tv-pill svg { width: 14px; height: 14px; }
.tv-pill:hover { border-color: var(--brand); }
.tv-pill.on { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 8px 18px -10px var(--brand); }
.tv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; min-height: 120px; }
.tv-card { position: relative; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; cursor: pointer; transition: transform .18s, box-shadow .18s, border-color .18s; outline: none; }
.tv-card:hover, .tv-card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--brand); }
.tv-card.playing { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 30%, transparent); }
.tv-card.down { opacity: .5; }
.tv-thumb { position: relative; display: grid; place-items: center; height: 104px; background: linear-gradient(160deg, var(--surface-2), var(--surface)); border-bottom: 1px solid var(--line-2); }
.tv-dot { position: absolute; left: 10px; top: 10px; width: 9px; height: 9px; border-radius: 50%; background: #9aa7b0; box-shadow: 0 0 0 3px color-mix(in srgb, #9aa7b0 25%, transparent); }
.tv-dot.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .25); }
.tv-dot.off { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .2); }
.tv-fav { position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; border: 0; border-radius: 10px; background: transparent; color: var(--text-2, #6b7a85); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .15s, background .15s; }
.tv-fav svg { width: 16px; height: 16px; }
.tv-card:hover .tv-fav, .tv-fav:focus-visible, .tv-fav.on { opacity: 1; }
.tv-fav:hover { background: var(--surface-2); }
.tv-fav.on { color: #e0a100; } .tv-fav.on svg { fill: currentColor; }
@media (hover: none) { .tv-fav { opacity: .7; } .tv-fav.on { opacity: 1; } }
.tv-eq { position: absolute; left: 10px; bottom: 10px; display: none; gap: 2px; align-items: flex-end; height: 14px; }
.tv-card.playing .tv-eq { display: flex; }
.tv-eq i { width: 3px; background: var(--brand); border-radius: 2px; animation: tvEq 1s infinite ease-in-out; }
.tv-eq i:nth-child(1) { height: 60%; } .tv-eq i:nth-child(2) { height: 100%; animation-delay: .2s; } .tv-eq i:nth-child(3) { height: 45%; animation-delay: .4s; }
@keyframes tvEq { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
.tv-meta { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; min-width: 0; }
.tv-meta small { color: var(--text-2, #6b7a85); }
.tv-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.tv-none { grid-column: 1 / -1; }
.tv-foot { display: flex; justify-content: center; }
.tv-veil { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(8px); border-radius: 20px; padding: 24px; min-height: 260px; }
.tv-sync-i { align-self: center; margin-right: 8px; }
@media (max-width: 1000px) { .tv-hero { grid-template-columns: 1fr; } .tv-sidelist { max-height: 220px; } }
@media (max-width: 640px) { .tv-title { font-size: 16px; } .tv-vol { display: none; } .tv-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .tv-stage { border-radius: 14px; } }

/* ---------- Estúdio de TV: favorito no vídeo, configurações, transmissão e fontes ---------- */
.tv-top .tv-ti { flex: 1; min-width: 0; }
.tv-favtop { flex: none; width: 42px; height: 42px; border-radius: 14px; background: rgba(0, 0, 0, .38); backdrop-filter: blur(6px); }
.tv-favtop svg { width: 22px; height: 22px; }
.tv-favtop.on { color: #ffd04a; background: rgba(255, 208, 74, .18); }
.tv-favtop.on svg { fill: currentColor; }
.tv-favtop:disabled { opacity: .4; cursor: default; }
.tv-b.on { color: #6ee7a8; }
.tv-b.dot { position: relative; }
.tv-b.dot::after { content: ''; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #7c5cff; box-shadow: 0 0 0 2px rgba(0, 0, 0, .55); }
.tv-pop { position: absolute; right: 14px; bottom: 66px; z-index: 6; width: min(340px, calc(100% - 28px)); max-height: calc(100% - 96px); overflow: auto; padding: 8px; border-radius: 16px; background: rgba(14, 18, 32, .94); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .14); color: #fff; box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .7); scrollbar-width: thin; }
.tv-pop.hidden { display: none; }
.tv-poph { display: flex; align-items: center; gap: 8px; padding: 8px 10px 10px; font-weight: 700; font-size: 14px; }
.tv-poph svg, .tv-sech svg { width: 16px; height: 16px; opacity: .8; }
.tv-sec { padding: 4px 0 6px; border-top: 1px solid rgba(255, 255, 255, .1); }
.tv-sech { display: flex; align-items: center; gap: 8px; padding: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.tv-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.tv-opt:hover, .tv-opt:focus-visible { background: rgba(255, 255, 255, .12); }
.tv-opt.on { background: rgba(124, 92, 255, .24); font-weight: 600; }
.tv-opt small { margin-left: auto; opacity: .7; }
.tv-ck { flex: none; width: 18px; display: inline-flex; }
.tv-ck svg { width: 16px; height: 16px; }
.tv-none-s, .tv-pf small { display: block; padding: 6px 10px; opacity: .72; font-size: 12px; line-height: 1.4; }
.tv-pf { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 4px; padding-top: 4px; }
.tv-act { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tv-act:hover, .tv-act:focus-visible { background: rgba(255, 255, 255, .12); }
.tv-act > svg { flex: none; width: 22px; height: 22px; padding: 8px; box-sizing: content-box; border-radius: 12px; background: rgba(124, 92, 255, .28); }
.tv-act span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tv-act small { opacity: .72; font-size: 12px; line-height: 1.35; }
.tv-casting { display: flex; align-items: center; gap: 10px; padding: 10px; margin-bottom: 4px; border-radius: 12px; background: rgba(110, 231, 168, .14); border: 1px solid rgba(110, 231, 168, .35); }
.tv-casting > svg { width: 20px; height: 20px; color: #6ee7a8; }
.tv-casting div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.tv-casting small { opacity: .8; }
.tv-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; padding: 10px 14px; border-radius: 12px; background: rgba(124, 92, 255, .1); border: 1px solid rgba(124, 92, 255, .3); font-size: 14px; }
.tv-note.hidden { display: none; }
.tv-note svg { width: 18px; height: 18px; flex: none; }
.tv-note span { flex: 1; min-width: 180px; }
.tv-src { display: flex; flex-direction: column; gap: 6px; }
.tv-src-h { margin: 14px 0 4px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2, #6b7a85); }
.tv-src-add { display: flex; gap: 8px; flex-wrap: wrap; }
.tv-src-add .input { flex: 2 1 240px; min-width: 0; }
.tv-src-add .input + .input, .tv-src-add .select { flex: 1 1 150px; }
.tv-src-list { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow: auto; }
.tv-src-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border, rgba(127, 127, 127, .25)); }
.tv-src-row.off { opacity: .55; }
.tv-src-i { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tv-src-i small { color: var(--text-2, #6b7a85); }
.tv-src-g { display: flex; align-items: center; gap: 8px; padding: 6px 4px 0; }
.tv-src-g svg { width: 16px; height: 16px; }
@media (max-width: 640px) { .tv-pop { right: 8px; left: 8px; width: auto; bottom: 58px; } .tv-b { min-width: 34px; padding: 0 5px; } }
.tv-stage.show .tv-top, .tv-stage.idle .tv-top { pointer-events: none; }
.tv-stage.show .tv-favtop, .tv-stage.idle .tv-favtop { pointer-events: auto; }

/* ---------- Cinema ---------- */
.mv-wrap { display: flex; flex-direction: column; gap: 18px; }
.mv-stage.hidden { display: none; }
.mv-stage { border-radius: 20px; overflow: hidden; background: #05070d; box-shadow: 0 30px 60px -30px rgba(5, 10, 30, .7); }
.mv-pl { background: #000; aspect-ratio: 16 / 9; max-height: 72vh; width: 100%; }
.mv-video, .mv-frame { width: 100%; height: 100%; border: 0; display: block; background: #000; object-fit: contain; }
.mv-load { aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #fff; }
.mv-meta { padding: 16px 20px 18px; color: #fff; background: linear-gradient(180deg, #0c1224, #080b16); }
.mv-meta a { color: inherit; }
.mv-meta .faint { color: rgba(255, 255, 255, .65); }
.mv-meta .btn { color: inherit; }
.mv-meta .select { max-width: 220px; }
.mv-mh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mv-mh h3 { margin: 0; font-size: 20px; }
.mv-desc { margin: 10px 0 6px; max-width: 80ch; line-height: 1.5; opacity: .85; font-size: 14px; }
.mv-bh { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mv-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mv-note { margin: 12px 0; }
.mv-ytkey { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px; margin: 12px 0; border-radius: 14px; border: 1px dashed var(--border, rgba(127, 127, 127, .4)); }
.mv-ytkey.hidden { display: none; }
.mv-ytkey > svg { width: 22px; height: 22px; flex: none; }
.mv-yt-t { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; }
.mv-yt-t small { color: var(--text-2, #6b7a85); line-height: 1.4; }
.mv-ytkey .input { flex: 1 1 240px; min-width: 0; }
.mv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin-top: 8px; }
.mv-card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 1px solid var(--border, rgba(127, 127, 127, .25)); background: var(--surface, transparent); cursor: pointer; transition: transform .18s, box-shadow .18s; }
.mv-card:hover, .mv-card:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .45); outline: none; }
.mv-poster { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #1b2440, #0a0e1a); overflow: hidden; }
.mv-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mv-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .35); color: #fff; opacity: 0; transition: opacity .18s; }
.mv-card:hover .mv-play, .mv-card:focus-visible .mv-play { opacity: 1; }
.mv-play svg { width: 44px; height: 44px; padding: 12px; border-radius: 50%; background: rgba(124, 92, 255, .9); box-sizing: content-box; }
.mv-resume { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, .7); color: #fff; font-size: 11px; font-weight: 600; }
.mv-cm { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ellipsis2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.mv-d { margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: var(--text-2, #6b7a85); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mv-none { grid-column: 1 / -1; }
@media (max-width: 640px) { .mv-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .mv-stage { border-radius: 14px; } }

.mv-meta .btn, .mv-meta .select { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); color: #fff; }
.mv-meta .btn:hover { background: rgba(255, 255, 255, .22); }
.mv-meta .select option { color: #111; }

/* ---------- barra de progresso dos players ---------- */
.mb { display: flex; align-items: center; gap: 10px; width: 100%; color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; }
.mb-t { min-width: 42px; text-align: right; opacity: .9; }
.mb-t:last-of-type { text-align: left; }
.mb-t.hidden { display: none; }
.mb-track { position: relative; flex: 1; height: 18px; display: flex; align-items: center; cursor: pointer; touch-action: none; outline: none; }
.mb-track::before { content: ''; position: absolute; left: 0; right: 0; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .25); transition: height .12s; }
.mb-track:hover::before, .mb-track:focus-visible::before { height: 6px; }
.mb-buf, .mb-fill { position: absolute; left: 0; height: 4px; border-radius: 4px; pointer-events: none; transition: height .12s; }
.mb-buf { background: rgba(255, 255, 255, .38); }
.mb-fill { background: linear-gradient(90deg, #7c5cff, #a78bfa); }
.mb-track:hover .mb-buf, .mb-track:hover .mb-fill, .mb-track:focus-visible .mb-buf, .mb-track:focus-visible .mb-fill { height: 6px; }
.mb-thumb { position: absolute; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(124, 92, 255, .55), 0 2px 6px rgba(0, 0, 0, .5); transform: scale(0); transition: transform .12s; pointer-events: none; }
.mb-track:hover .mb-thumb, .mb-track:focus-visible .mb-thumb { transform: scale(1); }
.mb-tip { position: absolute; bottom: 22px; transform: translateX(-50%); padding: 2px 7px; border-radius: 6px; background: rgba(0, 0, 0, .85); font-size: 11px; white-space: nowrap; pointer-events: none; }
.mb-tip.hidden { display: none; }
.mb.off .mb-track { cursor: default; opacity: .5; }
.mb-live { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: 11px; font-weight: 800; letter-spacing: .06em; cursor: pointer; }
.mb-live i { width: 7px; height: 7px; border-radius: 50%; background: #9aa; }
.mb-live:hover { background: rgba(239, 68, 68, .85); }
.mb-live.hidden { display: none; }
.tv-bar { flex-direction: column; align-items: stretch; gap: 2px; }
.tv-btns { display: flex; align-items: center; gap: 4px; }
.mv-ctl { display: flex; flex-direction: column; gap: 4px; padding: 8px 14px 10px; background: #080b16; color: #fff; }
.mv-ctl .tv-btns { gap: 6px; }
.mv-ctl .tv-b { color: #fff; }
.mv-speed { height: 32px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .45); color: #fff; padding: 0 6px; font-size: 12px; }
.mv-pl:fullscreen { display: flex; flex-direction: column; max-height: none; aspect-ratio: auto; background: #000; }
.mv-pl:fullscreen .mv-video { flex: 1; min-height: 0; }
.mv-pl { display: flex; flex-direction: column; aspect-ratio: auto; max-height: none; }
.mv-video { aspect-ratio: 16 / 9; max-height: 68vh; flex: none; width: 100%; height: auto; }
.mv-frame { aspect-ratio: 16 / 9; width: 100%; height: auto; }
.mv-pl:fullscreen .mv-video { max-height: none; aspect-ratio: auto; }
.mv-skip small { font-size: 10px; margin: 0 2px; }

/* ---------- cena das datas especiais (fotos + partículas) ---------- */
.sc-scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--sc-ink, transparent); }
.sc-scene.scoped { z-index: 0; border-radius: inherit; }
.sc-photos, .sc-photo, .sc-grade, .sc-vignette, .sc-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-photo { background-size: cover; background-position: center; opacity: 0; transition: opacity 2.4s ease; transform: scale(1.06); will-change: opacity, transform; }
.sc-photo.on { opacity: 1; animation: sc-kb 22s ease-in-out infinite alternate; }
.sc-photo.still.on { animation: none; transform: scale(1.02); }
@keyframes sc-kb { from { transform: scale(1.06) translate(0, 0); } to { transform: scale(1.16) translate(var(--kx, 2%), var(--ky, -1.5%)); } }
/* gradação: escurece à esquerda (texto legível), tinge com a cor da data e fecha as bordas */
.sc-grade { background: linear-gradient(90deg, color-mix(in srgb, var(--sc-ink) 94%, transparent) 0%, color-mix(in srgb, var(--sc-ink) 58%, transparent) 40%, color-mix(in srgb, var(--sc-ink) 8%, transparent) 100%), linear-gradient(0deg, color-mix(in srgb, var(--sc-ink) 85%, transparent) 0%, transparent 38%); }
.sc-scene:not(.has-img) .sc-grade { background: radial-gradient(900px 520px at 78% 30%, color-mix(in srgb, var(--sc-brand) 38%, transparent), transparent 70%); }
.sc-grade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--sc-brand), var(--sc-accent)); mix-blend-mode: soft-light; opacity: .35; }
.sc-vignette { background: radial-gradient(ellipse at 60% 45%, transparent 45%, rgba(0, 0, 0, .55) 100%); }
.sc-canvas { mix-blend-mode: normal; }
.sc-credit { position: absolute; right: 14px; bottom: 10px; z-index: 2; max-width: min(70%, 520px); font-size: 11px; color: rgba(255, 255, 255, .62); text-shadow: 0 1px 3px rgba(0, 0, 0, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) { .sc-credit { left: 14px; right: auto; max-width: calc(100% - 28px); } }
@media (prefers-reduced-motion: reduce) { .sc-photo.on { animation: none; transform: scale(1.02); } }
.sim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.sim { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.sim img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: var(--surface-2, #eee); }
.sim figcaption { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; align-items: flex-start; }
.sim figcaption b { font-size: 12.5px; word-break: break-word; } .sim figcaption span { color: var(--faint, #6b7a80); } .sim figcaption a { color: var(--brand); }
.eyebtn { color: var(--brand); } .eyebtn.off { color: var(--faint, #8a9aa0); background: color-mix(in srgb, var(--faint, #8a9aa0) 12%, transparent); }

/* ---------- análises 23 ---------- */
.u23-chart { width: 100%; height: auto; display: block; }
.u23-cloud { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; justify-content: center; padding: 10px 4px; line-height: 1.15; }
.u23-w { font-weight: 700; color: var(--brand); letter-spacing: -.01em; cursor: default; }
.u23-w:nth-child(3n) { color: var(--accent, #f59e0b); } .u23-w:nth-child(3n+1) { color: var(--text); }
.u23-pivot th, .u23-pivot td { white-space: nowrap; font-size: 12px; padding: 7px 8px; }
.u23-cell { background: color-mix(in srgb, var(--brand) calc(var(--u23, 0) * 70%), transparent); color: var(--text); }
.u23-cut small { display: block; }
.u23-heat { display: grid; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; }
.u23-heat small { font-size: 10.5px; text-align: center; } .u23-heat small:nth-child(n+2):nth-child(-n+25) { text-align: left; }
.u23-hc { display: block; aspect-ratio: 1; border-radius: 4px; background: color-mix(in srgb, var(--brand) calc(var(--u23, 0) * 90%), var(--surface-2, rgba(128,128,128,.12))); }
.u23-task { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface); }

/* ---- tradução (seletor de idioma e painel do dev) ---- */
.lang-switch { display: inline-flex; align-items: center; gap: 6px; color: var(--muted, #667); padding: 0 8px; border: 1px solid var(--line, rgba(128,128,128,.25)); border-radius: 999px; height: 34px; background: transparent; }
.lang-switch svg { width: 16px; height: 16px; flex: none; }
.lang-sel { appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: inherit; font: inherit; font-size: 13px; cursor: pointer; padding: 0 2px; max-width: 120px; }
.lang-sel option { color: #111; }
.auth-top .lang-switch { margin-left: auto; }
.i18n-bar { height: 8px; border-radius: 99px; background: rgba(128,128,128,.2); overflow: hidden; }
.i18n-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary, #0d9488), var(--primary-2, #14b8a6)); border-radius: inherit; transition: width .3s; }
.i18n-flag { font-size: 28px; line-height: 1; }
.i18n-lang, .i18n-row { padding: 14px 16px; }
.i18n-src { font-size: 12.5px; color: var(--muted, #667); margin-bottom: 6px; white-space: pre-wrap; word-break: break-word; }
.i18n-row textarea { width: 100%; margin-bottom: 8px; }
@media (max-width: 720px) { .lang-sel { max-width: 84px; } .auth-top .lang-switch { margin-left: 0; } }
.si-spec { background: var(--soft, rgba(43,179,172,.08)); border-left: 3px solid var(--primary, #2bb3ac); border-radius: 8px; padding: 10px 14px; font-size: 13px; margin: 10px 0; }
.si-spec ul { margin: 6px 0 0; padding-left: 18px; } .si-spec li { margin: 3px 0; }

/* seletor de idioma: fundo sólido com relevo (borda de luz no topo, sombra embaixo) */
.lang-switch { height: 36px; padding: 0 12px; gap: 7px; color: var(--text, #16252b); font-weight: 600;
  background: linear-gradient(180deg, var(--surface, #fff) 0%, var(--surface-2, #eef3f4) 100%);
  border: 1px solid var(--line, #dbe2e7); border-bottom-color: rgba(0, 0, 0, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(0, 0, 0, .06), 0 1px 2px rgba(11, 42, 48, .18), 0 4px 10px -3px rgba(11, 42, 48, .28);
  transition: transform .12s, box-shadow .15s; }
.lang-switch:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(0, 0, 0, .06), 0 2px 3px rgba(11, 42, 48, .2), 0 8px 16px -4px rgba(11, 42, 48, .34); }
.lang-switch:active { transform: translateY(0); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .18); }
.lang-switch:focus-within { outline: 2px solid var(--primary, #2bb3ac); outline-offset: 2px; }
.lang-switch svg { color: var(--primary, #1e8a84); }
.lang-sel { font-weight: 600; color: var(--text, #16252b); }
.lp-nav .lang-switch { color: #fff; background: linear-gradient(180deg, #1f5963 0%, #123940 100%); border-color: rgba(255, 255, 255, .22); border-bottom-color: rgba(0, 0, 0, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .35), 0 6px 14px -4px rgba(0, 0, 0, .55); }
.lp-nav .lang-switch svg, .lp-nav .lang-sel { color: #fff; }
.lp-nav .lang-sel option { color: #111; }
:root[data-theme="dark"] .lang-switch { background: linear-gradient(180deg, #1c2a31 0%, #131d22 100%); border-color: #2c3d46; border-bottom-color: rgba(0, 0, 0, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .5), 0 6px 14px -4px rgba(0, 0, 0, .6); }
.auth-has-img .lang-switch, .auth.has-img .lang-switch { background: linear-gradient(180deg, #1f5963 0%, #123940 100%); color: #fff; border-color: rgba(255, 255, 255, .25); }
.auth.has-img .lang-switch svg, .auth.has-img .lang-sel { color: #fff; }
:root[data-theme="dark"] .lp-nav .lang-switch, :root[data-theme="dark"] .auth.has-img .lang-switch { background: linear-gradient(180deg, #1f5963 0%, #123940 100%); border-color: rgba(255, 255, 255, .22); border-bottom-color: rgba(0, 0, 0, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .35), 0 6px 14px -4px rgba(0, 0, 0, .55); }

/* ===== documentos legais ===== */
.lg-page { min-height: 100vh; background: var(--bg); color: var(--text); }
.lg-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.lg-top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line, rgba(128,128,128,.2)); }
.lg-top-in { display: flex; align-items: center; gap: 10px; height: 60px; }
.lg-top .brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: inherit; text-decoration: none; }
.lg-hero { padding: 48px 0 26px; background: radial-gradient(900px 300px at 12% -20%, color-mix(in srgb, var(--brand) 22%, transparent), transparent), linear-gradient(180deg, color-mix(in srgb, var(--brand) 7%, transparent), transparent); }
.lg-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }
.lg-badge svg { width: 14px; height: 14px; }
.lg-hero h1 { font-size: clamp(28px, 4.4vw, 42px); margin: 14px 0 8px; letter-spacing: -.02em; }
.lg-lead { font-size: 17px; max-width: 680px; margin: 0 0 14px; opacity: .8; }
.lg-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.lg-meta span { font-size: 12.5px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line, rgba(128,128,128,.25)); }
.lg-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.lg-tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 10px; font-weight: 600; font-size: 14px; color: inherit; text-decoration: none; border: 1px solid var(--line, rgba(128,128,128,.25)); background: color-mix(in srgb, var(--bg) 70%, transparent); transition: transform .15s, box-shadow .15s; }
.lg-tabs a svg { width: 16px; height: 16px; }
.lg-tabs a:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.lg-tabs a.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.lg-body { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 36px; padding-top: 30px; padding-bottom: 70px; align-items: start; }
.lg-side { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow: auto; }
.lg-toc { background: var(--surface); display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 14px; border: 1px solid var(--line, rgba(128,128,128,.22)); box-shadow: var(--shadow-1); }
.lg-toc b { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; opacity: .65; margin: 0 6px 8px; }
.lg-toc a { display: flex; gap: 10px; padding: 7px 8px; border-radius: 8px; font-size: 13.5px; color: inherit; text-decoration: none; line-height: 1.35; }
.lg-toc a i { font-style: normal; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.lg-toc a:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); }
.lg-main { min-width: 0; }
.lg-card { background: var(--surface); border: 1px solid var(--line, rgba(128,128,128,.22)); border-radius: 14px; padding: 18px 20px; margin-bottom: 26px; box-shadow: var(--shadow-1); }
.lg-company p { margin: 4px 0 0; font-size: 14px; opacity: .85; }
.lg-warn { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; margin-bottom: 18px; background: color-mix(in srgb, var(--warn) 16%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 50%, transparent); font-size: 14px; }
.lg-sec { padding: 6px 0 22px; scroll-margin-top: 80px; }
.lg-sec h2 { display: flex; align-items: center; gap: 12px; font-size: 21px; margin: 0 0 10px; letter-spacing: -.01em; }
.lg-sec h2 i { font-style: normal; flex: none; min-width: 32px; height: 32px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); font-size: 14px; }
.lg-sec p { margin: 0 0 12px; line-height: 1.75; font-size: 15.5px; opacity: .92; }
.lg-ul { margin: 0 0 14px; padding-left: 22px; line-height: 1.7; font-size: 15.5px; opacity: .92; }
.lg-ul li { margin: 5px 0; }
.lg-hist { display: grid; gap: 10px; }
.lg-hrow { border-left: 3px solid var(--brand); padding: 6px 14px; }
.lg-hrow p { margin: 2px 0 0; font-size: 14.5px; }
.lg-foot { margin-top: 24px; font-size: 12.5px; opacity: .6; }
.lg-consent { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 4px; font-size: 13.5px; line-height: 1.5; cursor: pointer; }
.lg-consent input { margin-top: 3px; width: 17px; height: 17px; flex: none; accent-color: var(--brand); }
.lg-consent a { color: var(--brand); font-weight: 600; }
.auth-legal { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; margin-top: 14px; font-size: 12.5px; }
.auth-legal a { color: inherit; opacity: .7; text-decoration: none; } .auth-legal a:hover { opacity: 1; text-decoration: underline; }
.lg-gate { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 18px; background: rgba(8, 14, 20, .72); backdrop-filter: blur(6px); }
.lg-gate-box { width: min(520px, 100%); background: var(--bg); color: var(--text); border-radius: 18px; padding: 26px; box-shadow: var(--shadow-3); border: 1px solid var(--line, rgba(128,128,128,.25)); max-height: 92vh; overflow: auto; }
.lg-gate-box h2 { margin: 14px 0 8px; font-size: 22px; } .lg-gate-box p { opacity: .85; line-height: 1.6; }
.lg-gate-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.lg-gate-links a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line, rgba(128,128,128,.3)); color: inherit; text-decoration: none; font-size: 13.5px; font-weight: 600; }
.lg-gate-links svg { width: 15px; height: 15px; }
@media (max-width: 900px) { .lg-body { grid-template-columns: 1fr; } .lg-side { position: static; max-height: none; } .lg-toc { flex-direction: row; flex-wrap: wrap; } .lg-toc b { width: 100%; } }
@media print { .lg-top, .lg-side, .lg-tabs, .lg-gate { display: none !important; } .lg-body { display: block; } .lg-hero { background: none; padding: 10px 0; } .lg-sec { break-inside: avoid-page; } .lg-page { color: #000; background: #fff; } }
.i18n-bar2 { position: sticky; top: 0; z-index: 3; background: var(--surface); padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-1); }
.i18n-row.i18n-dirty { border-left: 3px solid var(--brand); background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
.i18n-row.i18n-err { border-left: 3px solid #c0392b; }
.i18n-sug { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--brand) 9%, transparent); font-size: 13px; }
.i18n-sug svg { width: 15px; height: 15px; color: var(--brand); flex: none; } .i18n-sug-t { font-weight: 600; flex: 1 1 200px; }

/* ===== aviso de conexão (discreto) ===== */
.off-pill { position: fixed; left: 14px; bottom: 14px; z-index: 8000; display: inline-flex; align-items: center; gap: 9px; max-width: min(440px, calc(100vw - 28px)); padding: 8px 14px; border-radius: 999px; font-size: 12.5px; line-height: 1.3; color: var(--text); background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow-2); backdrop-filter: blur(8px); animation: off-in .25s ease; }
.off-pill.hidden { display: none; }
.off-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #d68a00; box-shadow: 0 0 0 3px color-mix(in srgb, #d68a00 25%, transparent); }
.off-pill.sync .off-dot { background: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); animation: off-pulse 1s ease-in-out infinite; }
.off-pill.ok .off-dot { background: #1f9d55; box-shadow: 0 0 0 3px color-mix(in srgb, #1f9d55 25%, transparent); }
.off-pill.warn .off-dot { background: #c0392b; box-shadow: 0 0 0 3px color-mix(in srgb, #c0392b 25%, transparent); }
.off-btn { border: 0; background: transparent; color: var(--brand); font-weight: 700; cursor: pointer; padding: 0 2px; font-size: 12.5px; }
@keyframes off-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes off-pulse { 50% { opacity: .35; } }
@media (max-width: 760px) { .off-pill { bottom: 74px; left: 10px; } }
@media print { .off-pill { display: none !important; } }
.i18n-parts { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; } .i18n-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }
.i18n-partgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 10px; }
.i18n-partc { display: flex; flex-direction: column; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); } .i18n-partc b { font-size: 18px; } .i18n-partc span { font-size: 12px; opacity: .75; }

/* ===== Assinatura Ginga Tecnologia ===== */
.ginga-credit { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted, #6b7a80); text-decoration: none; opacity: .92; transition: opacity .15s, transform .15s; }
.ginga-credit:hover { opacity: 1; transform: translateY(-1px); }
.ginga-credit img { height: 26px; width: auto; max-width: 170px; object-fit: contain; display: block; }
.ginga-credit .gc-light { display: none; }
:root[data-theme="dark"] .ginga-credit .gc-light { display: block; } :root[data-theme="dark"] .ginga-credit .gc-dark { display: none; }
.ginga-credit.on-dark { color: #9bb7bb; flex: 1 0 100%; justify-content: center; margin-top: 6px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .07); } .ginga-credit.on-dark .gc-light { display: block; } .ginga-credit.on-dark .gc-dark { display: none; }
.auth-credit, .lg-credit { display: flex; justify-content: center; margin-top: 18px; }
.lg-credit { margin: 28px 0 8px; }
@media print { .ginga-credit { display: none; } }

/* ===== Mega menu do avatar (secundário) ===== */
.mm-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(8, 12, 20, .28); backdrop-filter: blur(1.5px); }
.mm-panel { position: fixed; z-index: 71; top: 58px; right: 12px; width: min(960px, calc(100vw - 24px)); max-height: calc(100vh - 72px); overflow: hidden; display: flex; flex-direction: column; background: var(--surface-2, #f3f5f7); color: var(--text); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 70px rgba(8, 12, 20, .35); opacity: 0; transform: translateY(-8px) scale(.985); transform-origin: top right; transition: opacity .16s ease, transform .16s ease; }
.mm-panel.on { opacity: 1; transform: none; }
.mm-top { display: flex; align-items: center; gap: 14px; padding: 16px 20px 10px; flex-wrap: wrap; }
.mm-top h2 { margin: 0; font-size: 24px; letter-spacing: -.02em; flex: 1; min-width: 80px; }
.mm-me { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); padding: 6px 8px 6px 8px; border-radius: 999px; }
.mm-me-t { display: flex; flex-direction: column; line-height: 1.15; max-width: 200px; } .mm-me-t b, .mm-me-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mm-me-t small { color: var(--muted, #6b7a80); font-size: 11.5px; }
.mm-cols { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 12px; padding: 4px 16px 16px; min-height: 0; flex: 1; overflow: hidden; }
.mm-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 2px rgba(8, 12, 20, .06); }
.mm-main { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.mm-search { display: flex; align-items: center; gap: 8px; margin: 12px 12px 4px; padding: 0 12px; height: 42px; border-radius: 999px; background: var(--surface-2, #f3f5f7); border: 1px solid var(--line); }
.mm-search:focus-within { border-color: var(--brand, #14b8a6); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #14b8a6) 22%, transparent); }
.mm-search .icon, .mm-search svg { width: 18px; height: 18px; flex: none; opacity: .6; }
.mm-q { flex: 1; border: 0; background: transparent; outline: 0; font: inherit; color: inherit; min-width: 0; }
.mm-scroll { overflow: auto; padding: 4px 12px 14px; flex: 1; scrollbar-width: thin; }
.mm-sec h4 { margin: 16px 6px 6px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #6b7a80); }
.mm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.mm-item, .mm-create { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; text-decoration: none; color: inherit; transition: background .12s; }
.mm-item:hover, .mm-create:hover, .mm-item:focus-visible, .mm-create:focus-visible { background: var(--surface-2, #f3f5f7); outline: 0; }
.mm-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .mm-t b { font-size: 14px; font-weight: 650; } .mm-t small { color: var(--muted, #6b7a80); font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mm-side { display: flex; flex-direction: column; gap: 12px; overflow: auto; min-height: 0; }
.mm-side .mm-card { padding: 12px 8px; } .mm-side h3 { margin: 2px 10px 8px; font-size: 17px; }
.mm-circle { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; background: var(--c, #14b8a6); box-shadow: 0 4px 10px color-mix(in srgb, var(--c, #14b8a6) 40%, transparent); }
.mm-circle svg { width: 19px; height: 19px; } .mm-circle.sm { width: 30px; height: 30px; box-shadow: none; } .mm-circle.sm svg { width: 15px; height: 15px; }
.mm-quick { display: flex; flex-direction: column; padding: 8px; } .mm-q-btn { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 6px 8px; border-radius: 10px; cursor: pointer; color: inherit; font: inherit; text-align: left; } .mm-q-btn:hover { background: var(--surface-2, #f3f5f7); }
.mm-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 40px 10px; color: var(--muted, #6b7a80); } .mm-empty svg { width: 28px; height: 28px; opacity: .6; }
@media (max-width: 760px) {
  .mm-panel { top: 52px; right: 8px; left: 8px; bottom: 8px; width: auto; max-height: none; overflow-y: auto; overflow-x: hidden; display: block; -webkit-overflow-scrolling: touch; border-radius: 16px; }
  .mm-top { position: sticky; top: 0; z-index: 3; background: var(--surface-2, #f3f5f7); padding: 12px 14px 8px; gap: 8px; flex-wrap: nowrap; }
  .mm-top h2 { font-size: 20px; flex: 1; min-width: 0; } .mm-me { padding: 4px 6px; } .mm-me-t { display: none; }
  .mm-cols { display: flex; flex-direction: column; gap: 10px; padding: 4px 10px 14px; overflow: visible; }
  .mm-main { overflow: visible; flex: none; } .mm-scroll { overflow: visible; flex: none; padding: 2px 8px 10px; }
  .mm-search { position: sticky; top: 56px; z-index: 2; margin: 10px 8px 4px; } .mm-grid { grid-template-columns: 1fr; }
  .mm-side { overflow: visible; flex: none; } .mm-t small { -webkit-line-clamp: 3; }
}
@media (prefers-reduced-motion: reduce) { .mm-panel { transition: none; } }

/* construtor no Modo dev */
.mmd-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.mmd-mode { position: relative; text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); color: inherit; cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .15s; }
.mmd-mode:hover { border-color: color-mix(in srgb, var(--brand, #14b8a6) 50%, var(--line)); } .mmd-mode.on { border-color: var(--brand, #14b8a6); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #14b8a6) 18%, transparent); }
.mmd-mode small { color: var(--muted, #6b7a80); } .mmd-chk { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--brand, #14b8a6); color: #fff; } .mmd-chk svg { width: 14px; height: 14px; }
.mmd-prev { height: 92px; border-radius: 10px; background: var(--surface-2, #f3f5f7); border: 1px solid var(--line); margin-bottom: 8px; display: flex; gap: 6px; padding: 8px; overflow: hidden; }
.mmd-prev i { display: block; height: 9px; border-radius: 5px; background: color-mix(in srgb, var(--text) 16%, transparent); }
.mmd-prev.classic { flex-direction: column; width: 56%; margin-left: auto; gap: 7px; background: var(--surface); } .mmd-prev.mega .l { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; align-content: start; background: var(--surface); border-radius: 7px; padding: 8px; } .mmd-prev.mega .r { width: 34%; display: flex; flex-direction: column; gap: 7px; background: var(--surface); border-radius: 7px; padding: 8px; }
.mmd-sec { padding: 14px; } .mmd-list { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin-top: 10px; }
.mmd-item { display: flex; gap: 12px; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2, #f6f7f9); align-items: flex-start; }
.mmd-fields { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .mmd-r { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; } .mmd-act { display: flex; flex-direction: column; gap: 6px; }
.mmd-bar { position: sticky; bottom: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; gap: 10px; box-shadow: 0 -6px 18px rgba(8, 12, 20, .08); }

/* ===== Criador de posts e stories ===== */
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.sc-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.sc-thumb { aspect-ratio: 1 / 1; border: 0; border-radius: 10px; background: repeating-conic-gradient(var(--surface-2, #eee) 0 25%, var(--surface) 0 50%) 0 0 / 16px 16px; display: grid; place-items: center; cursor: pointer; overflow: hidden; padding: 0; color: var(--muted, #888); }
.sc-thumb img { width: 100%; height: 100%; object-fit: contain; } .sc-thumb svg { width: 36px; height: 36px; }
.sc-card-t { display: flex; flex-direction: column; min-width: 0; }
.sc-empty { padding: 36px 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .sc-empty svg { width: 42px; height: 42px; color: var(--muted, #888); }
.sc-note { padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; border-left: 3px solid var(--warn, #d68a00); margin-bottom: 12px; } .sc-note svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.sc-formats, .sc-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.sc-fmt, .sc-mode, .sc-tpl { text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 10px; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; cursor: pointer; font: inherit; }
.sc-fmt.on, .sc-mode.on, .sc-tpl.on { border-color: var(--brand, #14b8a6); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #14b8a6) 18%, transparent); }
.sc-fmt small, .sc-mode small, .sc-tpl small { color: var(--muted, #6b7a80); font-size: 12px; } .sc-mode svg { width: 22px; height: 22px; color: var(--brand, #14b8a6); }
.sc-fmt i { display: block; width: 22px; border: 2px solid currentColor; border-radius: 4px; opacity: .55; } .sc-fmt i.f-story { height: 38px; width: 21px; } .sc-fmt i.f-post { height: 28px; width: 28px; } .sc-fmt i.f-portrait { height: 35px; width: 28px; } .sc-fmt i.f-landscape { height: 20px; width: 36px; }
.sc-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; } .sc-tpls.col { grid-template-columns: 1fr 1fr; } .sc-tpl i { display: block; height: 70px; border-radius: 8px; margin-bottom: 4px; }
.sc-logo-prev { display: flex; align-items: center; gap: 10px; } .sc-logo-prev img { max-height: 44px; max-width: 120px; border-radius: 6px; background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 10px 10px; }
/* editor */
.sc-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; position: sticky; top: 0; z-index: 5; }
.sc-name { max-width: 260px; height: 34px; font-weight: 650; } .sc-status { font-size: 12px; }
.sc-ed { display: grid; grid-template-columns: 250px minmax(0, 1fr) 330px; gap: 10px; align-items: start; }
.sc-left, .sc-right { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px; max-height: calc(100vh - 150px); overflow: auto; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; }
.sc-tabs { display: flex; gap: 4px; background: var(--surface-2, #f3f5f7); padding: 3px; border-radius: 10px; } .sc-tabs button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; border: 0; background: none; padding: 7px 4px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 12.5px; color: inherit; } .sc-tabs button.on { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); font-weight: 650; } .sc-tabs svg { width: 14px; height: 14px; }
.sc-adds { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .sc-add { display: flex; gap: 8px; align-items: center; text-align: left; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; color: inherit; font: inherit; } .sc-add:hover { border-color: var(--brand, #14b8a6); background: var(--surface-2, #f3f5f7); } .sc-add svg { width: 18px; height: 18px; flex: none; color: var(--brand, #14b8a6); } .sc-add span { display: flex; flex-direction: column; line-height: 1.2; font-size: 12.5px; } .sc-add small { color: var(--muted, #6b7a80); font-size: 11px; }
.sc-center { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sc-stagebox { height: calc(100vh - 240px); min-height: 360px; overflow: auto; border-radius: 12px; border: 1px solid var(--line); background: repeating-conic-gradient(var(--surface-2, #eee) 0 25%, var(--surface) 0 50%) 0 0 / 20px 20px; display: grid; place-items: center; padding: 16px; }
.sc-stage { box-shadow: 0 10px 40px rgba(0, 0, 0, .3); line-height: 0; } .sc-cv { display: block; touch-action: none; outline: 0; }
.sc-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; align-items: flex-start; }
.sc-sl { display: flex; flex-direction: column; align-items: center; gap: 2px; } .sc-slb { border: 2px solid var(--line); border-radius: 8px; background: var(--surface); padding: 3px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; color: inherit; } .sc-sl.on .sc-slb { border-color: var(--brand, #14b8a6); } .sc-mini { display: block; border-radius: 4px; background: #222; }
.sc-slm { display: flex; } .sc-addsl { align-self: center; }
.sc-ph { display: flex; align-items: center; gap: 6px; } .sc-sec-t { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted, #6b7a80); margin-top: 4px; font-weight: 650; }
.sc-right .form-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .sc-right .field { margin: 0; } .sc-right .lbl { font-size: 11.5px; } .sc-right .input { min-height: 34px; padding: 4px 8px; }
.sc-color input[type=color] { width: 42px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; }
.sc-aibar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .sc-hr { border: 0; border-top: 1px solid var(--line); width: 100%; margin: 4px 0; }
.sc-swatches { display: flex; flex-wrap: wrap; gap: 6px; } .sc-sw-g { width: 34px; height: 34px; border-radius: 8px; border: 2px solid var(--line); cursor: pointer; display: grid; place-items: center; color: #fff; padding: 0; } .sc-sw-g svg { width: 14px; height: 14px; }
.sc-layers { display: flex; flex-direction: column; gap: 3px; } .sc-layer { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; font-size: 13px; } .sc-layer:hover { background: var(--surface-2, #f3f5f7); } .sc-layer.on { border-color: var(--brand, #14b8a6); background: color-mix(in srgb, var(--brand, #14b8a6) 10%, transparent); } .sc-lt { width: 22px; text-align: center; font-weight: 700; }
@media (max-width: 1100px) { .sc-ed { grid-template-columns: 1fr; } .sc-left, .sc-right { max-height: none; } .sc-stagebox { height: 70vh; } .sc-name { max-width: 100%; flex: 1; } }
.mmd-roll { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.mmd-chips { display: flex; flex-wrap: wrap; gap: 6px; } .mmd-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2, #f3f5f7); font-size: 13px; } .mmd-chip button { border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: inherit; padding: 2px; } .mmd-chip svg { width: 14px; height: 14px; }
.mmd-res { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow: auto; } .mmd-user { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 7px 10px; cursor: pointer; color: inherit; font: inherit; } .mmd-user span { display: flex; flex-direction: column; line-height: 1.2; } .mmd-user svg { width: 16px; height: 16px; color: var(--brand, #14b8a6); }

/* ===== ferramentas do super admin (v-devfun23) ===== */
.dfd{position:fixed;left:12px;bottom:12px;z-index:9000;width:min(300px,calc(100vw - 24px));background:rgba(12,18,24,.92);color:#e6edf3;border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:10px 12px;font:12px/1.4 ui-monospace,Menlo,Consolas,monospace;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.dfd-h{display:flex;align-items:center;gap:6px;margin-bottom:4px}.dfd-h .spacer{flex:1}.dfd-x{background:none;border:0;color:inherit;cursor:pointer;padding:2px;display:inline-flex}
.dfd-s .bad{color:#f87171}.dfd-r{display:flex;justify-content:space-between;gap:8px}.dfd-r.mid b{color:#fbbf24}.dfd-r.slow b{color:#f87171}.dfd-e{margin-top:6px;color:#f87171;border-top:1px solid rgba(255,255,255,.12);padding-top:4px}
.dfp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.dfp-t{border:1px solid var(--line,#e5e7eb);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}.dfp-t small{color:var(--muted,#64748b)}.dfp-t b{font-size:20px}.dfp-t span{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dfp-t.warn{border-color:#f59e0b;background:rgba(245,158,11,.08)}
.dfp-daily{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:12px;background:linear-gradient(135deg,rgba(212,160,23,.14),rgba(212,160,23,.03));border:1px solid rgba(212,160,23,.4)}
.dfb-prev img,.dfb-shot{max-width:100%;border-radius:10px;border:1px solid var(--line,#e5e7eb)}.dfb-ctx{white-space:pre-wrap;font-size:12px;background:var(--surface-2,#f1f5f9);padding:10px;border-radius:10px;max-height:220px;overflow:auto}
.dfb-row{display:flex;gap:10px;align-items:center;text-align:left;width:100%;padding:10px 12px;border:1px solid var(--line,#e5e7eb);border-radius:12px;background:none;color:inherit;cursor:pointer}.dfb-row.done{opacity:.55}.dfb-t{display:flex;flex-direction:column;min-width:0}
.dfv-r{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line,#e5e7eb)}.dfv-r>div{display:flex;flex-direction:column}
.dfk-ov{position:fixed;inset:0;z-index:10000;background:rgba(8,12,18,.5);display:flex;justify-content:center;align-items:flex-start;padding:12vh 12px 0}
.dfk{width:min(620px,100%);background:var(--surface,#fff);color:var(--text,#0f172a);border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.4);overflow:hidden;border:1px solid var(--line,#e5e7eb)}
.dfk-s{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line,#e5e7eb)}.dfk-q{flex:1;border:0;background:none;outline:0;font-size:16px;color:inherit;min-width:0}.dfk-s kbd{font-size:11px;border:1px solid var(--line,#cbd5e1);border-radius:6px;padding:1px 6px}
.dfk-l{max-height:min(52vh,420px);overflow:auto;padding:6px}.dfk-i{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;color:inherit;padding:9px 10px;border-radius:10px;cursor:pointer}.dfk-i.on{background:var(--brand-soft,rgba(15,118,110,.12))}
.dfk-t{display:flex;flex-direction:column;flex:1;min-width:0}.dfk-t b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dfk-k{font-size:11px;color:var(--muted,#64748b);white-space:nowrap}.dfk-e{padding:18px;text-align:center}.dfk-f{padding:8px 16px;font-size:12px;border-top:1px solid var(--line,#e5e7eb)}
.dfc{position:fixed;z-index:8000;width:34px;height:34px;border:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fde68a,#d4a017 60%,#a16207);box-shadow:0 0 0 0 rgba(212,160,23,.6);font-size:16px;cursor:pointer;opacity:.5;animation:dfc-p 2.6s infinite;transition:transform .4s,opacity .4s}
.dfc:hover{opacity:1}.dfc.got{transform:scale(2.4) rotate(360deg);opacity:0}.dfc-big{font-size:54px}
@keyframes dfc-p{0%{box-shadow:0 0 0 0 rgba(212,160,23,.55)}70%{box-shadow:0 0 0 14px rgba(212,160,23,0)}100%{box-shadow:0 0 0 0 rgba(212,160,23,0)}}
.dfm{position:fixed;right:16px;bottom:16px;z-index:8500;width:min(340px,calc(100vw - 32px));padding:14px 16px;border-radius:14px;background:var(--surface,#fff);border:1px solid rgba(212,160,23,.55);box-shadow:0 14px 40px rgba(0,0,0,.25);transform:translateY(20px);opacity:0;transition:.35s;display:flex;flex-direction:column;gap:4px}.dfm.on{transform:none;opacity:1}.dfm p{margin:0}.dfm-k{color:#a16207;text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-size:10.5px}.dfm-x{position:absolute;top:8px;right:8px;background:none;border:0;cursor:pointer;color:inherit;opacity:.6}
body.dev-vault .badge.dev{background:linear-gradient(110deg,#a16207,#fde68a,#a16207);background-size:200% 100%;animation:dfv-sh 4s linear infinite;color:#3b2a00}
body.dev-vault .topbar,body.dev-vault header.topbar{box-shadow:inset 0 -1px 0 rgba(212,160,23,.6)}
@keyframes dfv-sh{to{background-position:-200% 0}}
.dfv-door{position:fixed;inset:0;z-index:100001;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fde68a;pointer-events:none}
.dfv-door i{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(180deg,#2a2005,#0b0902);transition:transform .9s cubic-bezier(.7,0,.2,1)}.dfv-door .l{left:0;border-right:2px solid #d4a017}.dfv-door .r{right:0;border-left:2px solid #d4a017}
.dfv-door .ring{position:relative;z-index:1;width:84px;height:84px;border-radius:50%;border:3px solid #d4a017;display:grid;place-items:center;transition:transform .6s,opacity .5s}.dfv-door b{position:relative;z-index:1;letter-spacing:.12em;text-transform:uppercase;font-size:13px;transition:opacity .4s}
.dfv-door.open .l{transform:translateX(-101%)}.dfv-door.open .r{transform:translateX(101%)}.dfv-door.open .ring{transform:rotate(180deg) scale(.4);opacity:0}.dfv-door.open b{opacity:0}
@media (prefers-reduced-motion:reduce){.dfc,body.dev-vault .badge.dev{animation:none}.dfm{transition:none}}

/* ===== Menu lateral dourado (Modo dev) ===== */
body.dev-gold .sidenav{background:linear-gradient(180deg,#fbeeb4 0%,#efd06c 34%,#dcae2c 72%,#c8951a 100%);border-right:1px solid #a8780f;box-shadow:8px 0 30px -14px rgba(120,80,0,.6),inset -1px 0 0 rgba(255,255,255,.5),inset 0 1px 0 rgba(255,255,255,.6);scrollbar-color:#a8780f transparent}
body.dev-gold .sidenav::after{content:"";position:fixed;top:var(--shellbar-h);bottom:0;left:calc(var(--nav-w) - 2px);width:2px;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(255,250,215,.95),transparent);background-size:100% 220px;background-repeat:no-repeat;animation:dgShine 6s linear infinite;z-index:21}
@keyframes dgShine{from{background-position:0 -220px}to{background-position:0 110vh}}
body.dev-gold .sidenav .nav-item{color:#3b2a00;font-weight:500}
body.dev-gold .sidenav .nav-item:hover{background:rgba(255,255,255,.42);box-shadow:0 3px 12px -6px rgba(90,60,0,.55)}
body.dev-gold .sidenav .nav-item.active{background:linear-gradient(90deg,rgba(255,255,255,.78),rgba(255,255,255,.34));color:#2a1d00;font-weight:650;box-shadow:inset 0 0 0 1px rgba(133,77,14,.35),0 4px 14px -8px rgba(90,60,0,.7)}
body.dev-gold .sidenav .nav-item.active::before{background:#7a4b00;box-shadow:0 0 10px rgba(255,244,190,.95)}
body.dev-gold .sidenav .nav-item svg{color:inherit}
body.dev-gold .sidenav .nav-group > .gl,body.dev-gold .sidenav .nav-group.dev > .gl,body.dev-gold .sidenav .nav-group.dev > button.gl{color:#6b4700}
body.dev-gold .sidenav .nav-group > button.gl:hover{background:rgba(255,255,255,.35);color:#3b2a00}
body.dev-gold .sidenav .nav-group > button.gl .gl-n{background:rgba(255,255,255,.55);color:#6b4700}
body.dev-gold .sidenav .nav-group.hasact > button.gl{color:#2a1d00}
body.dev-gold .sidenav .nav-group.hasact > button.gl .gl-n{background:#7a4b00;color:#fff3c4}
body.dev-gold .sidenav .faint,body.dev-gold .sidenav small{color:#6b4700}
:root[data-theme="dark"] body.dev-gold .sidenav{background:linear-gradient(180deg,#3a2c06 0%,#2b2105 55%,#1d1603 100%);border-right:1px solid #8a6410;box-shadow:8px 0 30px -14px rgba(0,0,0,.7),inset -1px 0 0 rgba(240,200,80,.25)}
:root[data-theme="dark"] body.dev-gold .sidenav .nav-item{color:#f3d98a}
:root[data-theme="dark"] body.dev-gold .sidenav .nav-item:hover{background:rgba(240,200,80,.14);box-shadow:none}
:root[data-theme="dark"] body.dev-gold .sidenav .nav-item.active{background:linear-gradient(90deg,rgba(240,200,80,.28),rgba(240,200,80,.08));color:#fff3c4;box-shadow:inset 0 0 0 1px rgba(240,200,80,.45)}
:root[data-theme="dark"] body.dev-gold .sidenav .nav-item.active::before{background:#f0c850;box-shadow:0 0 12px #f0c850}
:root[data-theme="dark"] body.dev-gold .sidenav .nav-group > .gl,:root[data-theme="dark"] body.dev-gold .sidenav .nav-group.dev > .gl,:root[data-theme="dark"] body.dev-gold .sidenav .nav-group.dev > button.gl{color:#d9b252}
:root[data-theme="dark"] body.dev-gold .sidenav .nav-group > button.gl:hover{background:rgba(240,200,80,.12);color:#fff3c4}
:root[data-theme="dark"] body.dev-gold .sidenav .nav-group > button.gl .gl-n{background:rgba(240,200,80,.18);color:#f3d98a}
:root[data-theme="dark"] body.dev-gold .sidenav .nav-group.hasact > button.gl{color:#fff3c4}
@media (max-width:900px){body.dev-gold .sidenav::after{display:none}}
@media (prefers-reduced-motion:reduce){body.dev-gold .sidenav::after{animation:none;display:none}}

/* ===== Easter eggs do dev ===== */
.deg-fx{position:fixed;inset:0;z-index:99990;pointer-events:none;overflow:hidden}
.deg-coin{position:absolute;top:-40px;font-size:26px;animation:degFall linear forwards;will-change:transform}
@keyframes degFall{to{transform:translateY(110vh) rotate(720deg)}}
.deg-matrix{position:fixed;inset:0;z-index:99990;pointer-events:none;background:rgba(0,12,4,.82);animation:degIn .4s ease}
.deg-matrix canvas{width:100%;height:100%;display:block}
@keyframes degIn{from{opacity:0}to{opacity:1}}
body.deg-roll{animation:degRoll 1.1s ease-in-out}
@keyframes degRoll{to{transform:rotate(360deg)}}
.deg-card{position:fixed;left:50%;top:50%;z-index:99991;transform:translate(-50%,-50%);width:min(92vw,360px);background:linear-gradient(160deg,#fff8dc,#f0cf6a);color:#3b2a00;border:1px solid #a8780f;border-radius:18px;padding:22px;text-align:center;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);animation:degPop .35s cubic-bezier(.2,1.3,.4,1)}
.deg-card h3{margin:0 0 6px;font-size:18px}.deg-card p{margin:4px 0;font-size:13.5px}.deg-card .deg-big{font-size:46px;line-height:1.1}.deg-card button{margin-top:12px;border:0;border-radius:10px;padding:8px 18px;background:#7a4b00;color:#fff3c4;font-weight:600;cursor:pointer}
.deg-card ul{list-style:none;padding:0;margin:8px 0;text-align:left;font-size:13px}.deg-card li{padding:3px 0;border-bottom:1px dashed rgba(122,75,0,.3)}
@keyframes degPop{from{opacity:0;transform:translate(-50%,-46%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){.deg-coin{animation-duration:.01s!important}body.deg-roll{animation:none}.deg-card{animation:none}}

/* ===== Tela cheia universal (TV, Cinema) ===== */
html.fs-lock, html.fs-lock body { overflow: hidden; overscroll-behavior: none; }
.tv-stage:-webkit-full-screen { border-radius: 0; aspect-ratio: auto; width: 100vw; height: 100vh; }
.mv-pl:-webkit-full-screen { display: flex; flex-direction: column; max-height: none; aspect-ratio: auto; background: #000; }
.mv-pl:-webkit-full-screen .mv-video { flex: 1; min-height: 0; max-height: none; aspect-ratio: auto; }
.tv-stage.is-fs, .mv-pl.is-fs { position: fixed !important; inset: 0; z-index: 2147483000; width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-height: none !important; margin: 0 !important; border-radius: 0 !important; aspect-ratio: auto !important; background: #000; }
.mv-pl.is-fs { display: flex; flex-direction: column; }
.mv-pl.is-fs .mv-video, .mv-pl.is-fs .mv-frame { flex: 1; min-height: 0; max-height: none; aspect-ratio: auto; height: auto; }

/* Estúdio/Cinema: acabamento em telas pequenas */
.tv-stage:not(.show):not(.idle) .tv-bar { pointer-events: none; }
@media (max-width: 640px) {
  .tv-bar { padding: 28px 8px 8px; flex-wrap: wrap; }
  .tv-bar .btn, .tv-bar button { min-width: 40px; min-height: 40px; }
  .tv-grid, .mv-grid { gap: 10px; }
  .mv-pl .mb, .mv-pl [class^="mb"] { flex-wrap: wrap; }
}

/* Motor de posts */
.sc-etypes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.sc-etype { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid var(--line, #e2e8f0); border-radius: 12px; background: var(--surface, #fff); color: inherit; font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.sc-etype:hover { border-color: var(--brand, #6d5efc); }
.sc-etype.on { border-color: var(--brand, #6d5efc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #6d5efc) 18%, transparent); }
.sc-etype .i { width: 18px; height: 18px; flex: none; color: var(--brand, #6d5efc); }
.sc-epals { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-epal { position: relative; width: 38px; height: 38px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.sc-epal i { position: absolute; right: 5px; bottom: 5px; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.sc-epal.on { border-color: var(--brand, #6d5efc); outline: 2px solid color-mix(in srgb, var(--brand, #6d5efc) 30%, transparent); outline-offset: 2px; }
.sc-eprev { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; align-items: flex-start; min-height: 120px; }
.sc-eprev-c { flex: none; border-radius: 10px; box-shadow: 0 2px 10px rgba(15, 23, 42, .22); background: #e2e8f0; }
.sc-left .sc-etypes { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .sc-etypes { grid-template-columns: 1fr 1fr; } .sc-bar { flex-wrap: wrap; } }
.sc-tabs button { padding: 7px 2px; gap: 3px; font-size: 12px; white-space: nowrap; }
.sc-tabs svg { display: none; }

/* Atualizações: recurso + descrição */
.rel-cnt { margin: 12px 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #64748b); }
.rel-items li { align-items: flex-start; }
.rel-it { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rel-it b { font-weight: 650; }
.rel-d { color: var(--muted, #64748b); font-size: 13px; line-height: 1.45; }

/* Criador de posts: telas pequenas */
.sc-engine, .sc-engine * { min-width: 0; }
.sc-engine .form-grid { grid-template-columns: 1fr; }
.sc-engine .input, .sc-engine select, .sc-engine textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.sc-etypes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.sc-etype span { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) {
  .sc-center { order: 1; } .sc-left { order: 2; } .sc-right { order: 3; }
  .sc-stagebox { height: min(64vh, 640px); }
}
@media (max-width: 700px) {
  .sc-bar { gap: 6px; padding: 8px; }
  .sc-bar > .btn:first-child { order: -2; }
  .sc-name { order: -1; flex: 1 1 140px; max-width: none; min-width: 0; }
  .sc-bar .sc-status { display: none; }
  .sc-bar .btn.sm { padding-left: 10px; padding-right: 10px; }
  .sc-stagebox { height: min(58vh, 520px); min-height: 300px; }
  .sc-left, .sc-right { padding: 8px; }
  .sc-adds { grid-template-columns: 1fr 1fr 1fr; }
  .sc-add small { display: none; }
  .sc-tpls.col { grid-template-columns: 1fr 1fr 1fr; }
  .sc-right .form-grid { grid-template-columns: 1fr 1fr; }
  .sc-formats, .sc-modes { grid-template-columns: 1fr 1fr; }
  .sc-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .sc-card .row { flex-wrap: wrap; }
}
@media (max-width: 420px) { .sc-adds { grid-template-columns: 1fr 1fr; } }
.sc-chips { display: flex; flex-wrap: wrap; gap: 6px; } .sc-chip { border: 1px solid var(--line, #e2e8f0); background: var(--surface, #fff); color: inherit; border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12.5px; cursor: pointer; }
.sc-chip.on { background: var(--brand, #6d5efc); border-color: var(--brand, #6d5efc); color: #fff; } .sc-chips-l { font-size: 12.5px; margin-bottom: -4px; }
.sc-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .sc-gact { grid-column: 1 / -1; }
.sc-gi { aspect-ratio: 1; border: 2px solid var(--line, #e2e8f0); border-radius: 12px; overflow: hidden; padding: 0; cursor: pointer; background: var(--surface-2, #f1f5f9); display: grid; place-items: center; }
.sc-gi.on { border-color: var(--brand, #6d5efc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #6d5efc) 22%, transparent); } .sc-gi img { width: 100%; height: 100%; object-fit: cover; }
.sc-gl { font-size: 12px; color: var(--muted, #64748b); animation: sc-pulse 1.2s ease-in-out infinite; } @keyframes sc-pulse { 50% { opacity: .35; } }
.sc-det { border: 1px solid var(--line, #e2e8f0); border-radius: 12px; padding: 10px 12px; } .sc-det > summary { cursor: pointer; font-weight: 650; font-size: 13.5px; }
.sc-imgp textarea { resize: vertical; }

/* Marketing: calendário, links e QR, textos */
.mk-root { min-width: 0; } .mk-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.mk-pane { padding: 16px; } .mk-sticky { position: sticky; top: 76px; }
.mk-kpis { margin-bottom: 14px; } .mk-kpi { padding: 14px 16px; } .mk-kpi .k-v { font-size: 26px; font-weight: 750; letter-spacing: -.02em; border-left: 4px solid var(--kc); padding-left: 10px; margin: 4px 0; }
.mk-card { padding: 14px; } .mk-tool { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .mk-nav { display: flex; align-items: center; gap: 8px; } .mk-mt { margin: 0; font-size: 19px; min-width: 150px; text-align: center; font-weight: 700; }
.mk-f { height: 36px; width: auto; min-width: 140px; } .mk-leg { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted, #64748b); margin-bottom: 10px; } .mk-leg i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.mk-cal { border: 1px solid var(--line, #e2e8f0); border-radius: 12px; overflow: hidden; } .mk-wd { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--surface-2, #f1f5f9); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted, #64748b); }
.mk-wd div { padding: 8px 10px; } .mk-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(118px, auto); }
.mk-cell { border-top: 1px solid var(--line, #e2e8f0); border-left: 1px solid var(--line, #e2e8f0); padding: 5px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; min-width: 0; transition: background .12s; } .mk-cell:nth-child(7n + 1) { border-left: 0; }
.mk-cell:hover { background: color-mix(in srgb, var(--brand, #6d5efc) 5%, transparent); } .mk-cell.out { background: var(--surface-2, #f8fafc); opacity: .6; } .mk-cell.over { background: color-mix(in srgb, var(--brand, #6d5efc) 14%, transparent); outline: 2px dashed var(--brand, #6d5efc); outline-offset: -3px; }
.mk-cell.today .mk-dn b { background: var(--brand, #6d5efc); color: #fff; } .mk-dn { display: flex; align-items: center; gap: 6px; min-height: 22px; } .mk-dn b { min-width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 50%; font-size: 12.5px; }
.mk-hol { font-size: 10.5px; line-height: 1.1; color: #b45309; background: color-mix(in srgb, #f59e0b 16%, transparent); border-radius: 6px; padding: 2px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mk-chip { display: flex; align-items: center; gap: 5px; width: 100%; min-width: 0; text-align: left; border: 0; border-left: 3px solid var(--mc); background: color-mix(in srgb, var(--mc) 12%, var(--surface, #fff)); color: inherit; border-radius: 6px; padding: 3px 5px; font: inherit; font-size: 11.5px; cursor: grab; }
.mk-chip:hover { background: color-mix(in srgb, var(--mc) 22%, var(--surface, #fff)); } .mk-chip.drag { opacity: .4; } .mk-chip.st-publicado { opacity: .72; } .mk-chip.st-publicado .mk-ct { text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.mk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sc); flex: none; } .mk-ct { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mk-chs { display: flex; gap: 2px; flex: none; }
.mk-chs em, .mk-chb em { font-style: normal; font-size: 8.5px; font-weight: 800; color: #fff; border-radius: 4px; padding: 1px 3px; line-height: 1.2; } .mk-more { border: 0; background: none; color: var(--brand, #6d5efc); font: inherit; font-size: 11.5px; text-align: left; cursor: pointer; padding: 1px 4px; }
.mk-ag { display: flex; flex-direction: column; gap: 10px; } .mk-day { border: 1px solid var(--line, #e2e8f0); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; } .mk-day.today { border-color: var(--brand, #6d5efc); }
.mk-day header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .mk-day .mk-chip { cursor: pointer; font-size: 13px; padding: 7px 8px; }
.mk-chsel { display: flex; flex-wrap: wrap; gap: 6px; } .mk-chb { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line, #e2e8f0); background: var(--surface, #fff); color: inherit; border-radius: 999px; padding: 5px 11px 5px 6px; font: inherit; font-size: 12.5px; cursor: pointer; } .mk-chb[aria-pressed="true"] { border-color: var(--brand, #6d5efc); background: color-mix(in srgb, var(--brand, #6d5efc) 10%, transparent); font-weight: 650; }
.mk-seg { flex-wrap: wrap; } .mk-cols { display: flex; gap: 8px; flex-wrap: wrap; } .mk-col { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; } .mk-col[aria-pressed="true"] { outline: 2px solid var(--ink, #0f172a); outline-offset: 2px; }
.mk-qrbox { display: grid; place-items: center; background: repeating-conic-gradient(var(--surface-2, #eee) 0 25%, var(--surface, #fff) 0 50%) 0 0 / 16px 16px; border-radius: 14px; padding: 18px; min-height: 280px; } .mk-qrbox svg { width: min(100%, 320px); height: auto; display: block; border-radius: 6px; box-shadow: 0 6px 24px rgba(15, 23, 42, .18); }
.mk-qempty { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--muted, #64748b); text-align: center; } .mk-qempty svg { width: 40px; height: 40px; box-shadow: none; }
.mk-qinfo { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; } .mk-warn { flex-basis: 100%; margin: 2px 0; font-size: 12.5px; color: #b45309; } .mk-final { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.mk-libg, .mk-tl { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .mk-lc { display: flex; gap: 12px; padding: 12px; align-items: flex-start; min-width: 0; } .mk-lth { width: 84px; flex: none; } .mk-lth svg { width: 100%; height: auto; display: block; border-radius: 6px; border: 1px solid var(--line, #e2e8f0); } .mk-lb { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.mk-out { padding: 14px; display: flex; flex-direction: column; gap: 10px; } .mk-ta { font-family: inherit; line-height: 1.5; resize: vertical; min-height: 120px; } .mk-cnt.over { color: #dc2626; font-weight: 700; }
.mk-tc { padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .mk-prev { margin: 0; font-size: 13px; color: var(--muted, #64748b); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .mk-ltool { gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .mk-ltool .input { flex: 1; min-width: 180px; } .mk-fav.on { color: #f59e0b; }
.mk-root .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 980px) { .mk-two { grid-template-columns: minmax(0, 1fr); } .mk-sticky { position: static; } }
@media (max-width: 760px) { .mk-grid { display: none; } .mk-wd { display: none; } .mk-cal { border: 0; } .mk-mt { min-width: 0; flex: 1; font-size: 17px; } .mk-nav { width: 100%; } .mk-f { flex: 1; min-width: 120px; } .mk-kpis { grid-template-columns: 1fr 1fr; } .mk-kpi .k-v { font-size: 22px; } .mk-pane { padding: 12px; } .mk-qrbox { padding: 12px; min-height: 220px; } .mk-libg, .mk-tl { grid-template-columns: 1fr; } }
.modal { min-width: 0; max-width: 100%; } .modal-b, .modal .body { min-width: 0; overflow-x: hidden; }
.modal .sc-formats, .modal .sc-modes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
@media (max-width: 980px) { .mk-qr .mk-sticky { order: -1; } }

/* acessos ao vivo e cards de benefício */
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.5); animation: livepulse 2s infinite; vertical-align: middle; }
@keyframes livepulse { 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.live-row { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; }
.live-bar { height: 8px; border-radius: 99px; background: var(--line-2); overflow: hidden; } .live-bar i { display: block; height: 100%; border-radius: 99px; background: var(--brand); }
.live-v { color: var(--text-2); min-width: 70px; text-align: right; }
.bnf-card { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: min(380px, calc(100vw - 32px)); display: flex; gap: 12px; padding: 14px 14px 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(0,0,0,.18); transform: translateY(20px); opacity: 0; transition: transform .28s ease, opacity .28s ease; }
.bnf-card.in { transform: none; opacity: 1; } .bnf-card.out { transform: translateY(12px); opacity: 0; }
.bnf-ic { flex: 0 0 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }
.bnf-b { min-width: 0; flex: 1; } .bnf-b p { margin: 4px 0 0; font-size: 13.5px; color: var(--text-2); line-height: 1.4; }
.bnf-k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); font-weight: 700; margin-bottom: 2px; }
.bnf-x { align-self: flex-start; }
@media (max-width: 720px) { .bnf-card { right: 16px; left: 16px; width: auto; bottom: 76px; } }
@media (prefers-reduced-motion: reduce) { .bnf-card, .live-dot { transition: none; animation: none; } }

.tv-sound { position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 6; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 0; border-radius: 999px; background: var(--brand); color: #fff; font-weight: 600; cursor: pointer; box-shadow: 0 8px 28px rgba(0,0,0,.4); }
.tv-sound.hidden { display: none; }

.tv-admbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 4px; }
.tv-admbar .spacer { flex: 1; }
.tv-modb { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 6px; opacity: 0; transition: opacity .15s; z-index: 3; }
.tv-card:hover .tv-modb, .tv-modb:focus-within { opacity: 1; }
.tv-modb button { width: 30px; height: 30px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: rgba(15, 23, 30, .72); color: #fff; backdrop-filter: blur(6px); }
.tv-modb button:hover { background: var(--brand); }
.tv-modb svg { width: 15px; height: 15px; }
.tv-hid { position: absolute; left: 8px; top: 24px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgba(15, 23, 30, .72); color: #fff; }
.tv-hid svg { width: 12px; height: 12px; }
@media (hover: none) { .tv-modb { opacity: 1; } }

.tv-pow.hi { background: color-mix(in srgb, #22c55e 18%, transparent); color: #15803d; }
.tv-pow.mid { background: color-mix(in srgb, #f59e0b 20%, transparent); color: #b45309; }
.tv-pow.lo { background: color-mix(in srgb, #ef4444 18%, transparent); color: #b91c1c; }
.tv-prog { margin-left: 4px; }