/* turma. · estilos dos módulos completos e do app do aluno */

/* Sidebar com muitas telas: a navegação rola, o rodapé fica fixo */
.side .nav { flex: 1; min-height: 0; overflow-y: auto; margin-right: -6px; padding-right: 6px; scrollbar-width: thin; }
.side .nav a { height: 32px; }
.side .nav-sec { padding-top: 10px; }
.side .promo { padding: 12px; }
.side .promo p { margin-bottom: 8px; }

/* Barras por hora */
.hbars { display: flex; align-items: flex-end; gap: 5px; height: 150px; }
.hb { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.hb i { width: 100%; border-radius: 6px 6px 3px 3px; background: var(--paper-3); min-height: 3px; transform-origin: bottom; animation: grow-y .8s var(--spring) both; }
.hb.now i { background: var(--accent); }
.hb span { font-family: var(--mono); font-size: 9.5px; color: var(--faint); }
@keyframes grow-y { from { transform: scaleY(0); } }

/* Fluxo de caixa */
.flow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; height: 230px; align-items: end; }
.fcol { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.fbars { display: flex; gap: 5px; align-items: flex-end; height: 170px; width: 100%; justify-content: center; }
.fbars i { width: 34%; max-width: 30px; border-radius: 8px 8px 3px 3px; transform-origin: bottom; animation: grow-y .9s var(--spring) both; }
.fbars .in { background: var(--accent); }
.fbars .out { background: var(--ink); }
.fcol b { font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.fcol span { font-size: 11px; color: var(--muted); }
.dre-f td { font-weight: 700; background: var(--paper-2); }

/* Chips de filtro */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip-f { height: 28px; padding: 0 11px; border-radius: 999px; border: 0; background: var(--paper-2); color: var(--ink-2); font-size: 12px; font-weight: 600; transition: background .2s, color .2s, transform .15s var(--ease); }
.chip-f:hover { background: var(--paper-3); }
.chip-f:active { transform: scale(.95); }
.chip-f.on { background: var(--accent); color: #fff; }

/* Biblioteca de exercícios */
.exlib { display: grid; gap: 6px; max-height: 520px; overflow-y: auto; padding-right: 4px; }
.exi { display: flex; align-items: center; gap: 10px; padding: 7px; border-radius: 12px; transition: background .15s; }
.exi:hover { background: rgba(21, 18, 15, .035); }
.exi strong { display: block; font-size: 13px; letter-spacing: -0.01em; }
.exi span { font-size: 11.5px; color: var(--muted); }
.exthumb { --h: 230; width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, hsl(var(--h) 60% 86%), hsl(calc(var(--h) + 40) 60% 76%)); color: hsl(var(--h) 45% 25%); }
.exthumb svg { width: 15px; height: 15px; }
.exthumb.sm { width: 36px; height: 36px; border-radius: 10px; }

/* Passos da IA */
.ia-steps { display: grid; gap: 6px; }
.ia-step { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); animation: toastIn .4s var(--spring) both; }
.ia-step svg { width: 16px; height: 16px; color: var(--good); }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent-soft); border-top-color: var(--accent); animation: rot .7s linear infinite; flex: none; }
@keyframes rot { to { transform: rotate(360deg); } }

/* Cards de relatório */
.rep { position: relative; text-align: left; border: 0; display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s; }
.rep:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-lg); }
.rep .lbl { font-size: 13px; color: var(--muted); font-weight: 500; padding-right: 30px; }
.rep b { font-size: 22px; letter-spacing: -0.04em; }
.rep .go { position: absolute; right: 16px; top: 16px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); transition: background .2s, color .2s; }
.rep:hover .go { background: var(--accent); color: #fff; }
.rep .go svg { width: 14px; height: 14px; }
.perm td, .perm th { text-align: center; }
.perm td:first-child, .perm th:first-child { text-align: left; }
.tg[disabled] { opacity: .5; cursor: not-allowed; }

/* CRM kanban */
.lanes.crm { grid-auto-columns: minmax(240px, 1fr); }
.lane.kan { transition: background .2s, box-shadow .2s; min-height: 420px; }
.lane.kan.over { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px rgba(62, 70, 255, .45); }
.gcard.lead { cursor: grab; user-select: none; }
@media (hover: hover) and (pointer: fine) { .gcard.lead { touch-action: none; } }
.gcard.lead.ghost { position: fixed; z-index: 80; pointer-events: none; margin: 0; box-shadow: inset 0 0 0 1.5px rgba(62, 70, 255, .5), var(--shadow-lg); cursor: grabbing; }
.gcard.lead.drag { opacity: .4; transform: rotate(2deg); }
.drop-hint { border: 1.5px dashed var(--line-2); border-radius: 12px; padding: 18px 10px; text-align: center; font-size: 12px; color: var(--faint); }
.ck { width: 22px; height: 22px; border-radius: 7px; border: 0; padding: 0; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line-2); background: transparent; flex: none; transition: background .2s, transform .3s var(--spring); }
.ck svg { width: 13px; height: 13px; color: #fff; transform: scale(0); transition: transform .3s var(--spring); }
.ck.on { background: var(--accent); box-shadow: none; transform: rotate(-6deg); }
.ck.on svg { transform: scale(1); }

/* NPS e clube */
.gauge { position: relative; width: 220px; margin: 4px auto 6px; }
.gauge svg { width: 100%; display: block; }
.gauge b { position: absolute; left: 0; right: 0; top: 50px; font-size: 44px; letter-spacing: -0.05em; text-align: center; line-height: 1; }
.gauge span { display: block; text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.npsbar { display: flex; width: 100%; height: 10px; border-radius: 9px; overflow: hidden; gap: 2px; }
.npsbar i { display: block; }
.premio { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.premio .pic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 4px; }
.premio .pic svg { width: 16px; height: 16px; }
.premio strong { font-size: 13px; }
.premio > span { font-size: 11.5px; color: var(--muted); }
.premio .pill { align-self: flex-start; margin-top: 4px; }

/* Loja e PDV */
.prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.prod { display: flex; flex-direction: column; gap: 5px; text-align: left; padding: 12px; border: 0; border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); transition: transform .2s var(--ease), box-shadow .2s; }
.prod:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); }
.prod:active { transform: scale(.97); }
.prod[disabled] { opacity: .45; }
.prod strong { font-size: 12.5px; line-height: 1.3; min-height: 32px; }
.prod em { font-style: normal; font-size: 11px; color: var(--muted); }
.pthumb { --h: 230; height: 64px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, hsl(var(--h) 55% 88%), hsl(calc(var(--h) + 50) 55% 80%)); color: hsl(var(--h) 45% 28%); margin-bottom: 4px; }
.pthumb svg { width: 20px; height: 20px; }
.stk { height: 4px; border-radius: 9px; background: var(--paper-2); overflow: hidden; margin-top: 2px; }
.stk i { display: block; height: 100%; background: var(--good); border-radius: 9px; }
.stk.low i { background: var(--bad); }
.stepper { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.stepper button { width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--white); font-size: 15px; line-height: 1; box-shadow: 0 1px 2px rgba(21, 18, 15, .12); transition: transform .15s var(--ease); }
.stepper button:active { transform: scale(.88); }
.stepper b { min-width: 42px; text-align: center; font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* Navegador do site de vendas */
.browser { border-radius: 18px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-lg); overflow: hidden; min-height: 520px; }
.bbar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.bbar i { width: 10px; height: 10px; border-radius: 50%; background: var(--paper-3); }
.bbar span { margin-left: 10px; flex: 1; max-width: 320px; height: 26px; border-radius: 8px; background: var(--white); display: flex; align-items: center; padding: 0 10px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.bbody { padding: 0 0 28px; }
.ws-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-bottom: 1px solid var(--line); }
.ws-nav b { font-weight: 800; letter-spacing: -0.04em; }
.ws-nav span { display: flex; gap: 16px; font-size: 13px; color: var(--muted); }
.ws-nav a { cursor: pointer; }
.ws-nav a:hover { color: var(--ink); }
.ws-hero { text-align: center; padding: 60px 30px 40px; display: grid; gap: 14px; justify-items: center; }
.ws-hero h2 { margin: 0; font-size: clamp(26px, 3vw, 40px); letter-spacing: -0.05em; line-height: 1.02; max-width: 16ch; }
.ws-hero p { margin: 0; color: var(--muted); max-width: 44ch; }
.ws-badge { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.ws-ok { width: 56px; height: 56px; border-radius: 50%; background: var(--good); color: #fff; display: grid; place-items: center; animation: toastIn .5s var(--spring) both; }
.ws-ok svg { width: 26px; height: 26px; }
.ws-mods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 22px; }
.ws-mods div { padding: 16px; border-radius: 14px; background: var(--paper); text-align: center; }
.ws-mods b { display: block; letter-spacing: -0.02em; }
.ws-mods span { font-size: 12px; color: var(--muted); }
.ws-t { text-align: center; font-size: 24px; letter-spacing: -0.04em; margin: 34px 0 20px; }
.ws-planos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 22px; }
.ws-planos div { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 14px; background: var(--paper); }
.ws-planos div.pop { background: var(--ink); color: var(--paper); }
.ws-planos span { font-weight: 700; }
.ws-planos b { font-size: 26px; letter-spacing: -0.05em; }
.ws-planos small { font-size: 12px; opacity: .6; }
.ws-planos em { font-style: normal; font-size: 11.5px; opacity: .65; margin-bottom: 6px; }
.ws-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 22px; }
.ws-slots div { display: grid; gap: 6px; align-content: start; }
.ws-slots b { font-size: 13px; text-transform: capitalize; }
.ws-slots button { text-align: left; padding: 10px 12px; border: 0; border-radius: 10px; background: var(--paper); font-size: 12.5px; transition: background .2s, color .2s; }
.ws-slots button:hover { background: var(--accent); color: #fff; }
.ws-slots span { font-size: 12px; color: var(--muted); }

/* Totem */
.totem { border-radius: 34px; padding: 16px; background: #1C1916; box-shadow: var(--shadow-lg); }
.tt-screen { min-height: 560px; border-radius: 22px; background: var(--paper); padding: 34px; display: flex; flex-direction: column; justify-content: center; gap: 26px; background-image: radial-gradient(rgba(21, 18, 15, .08) 1px, transparent 1.2px); background-size: 22px 22px; }
.tt-hi { text-align: center; display: grid; gap: 8px; justify-items: center; }
.tt-hi > span:not(.ws-ok) { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.tt-hi h2 { margin: 0; font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.05em; line-height: 1.05; max-width: 18ch; }
.tt-hi p { margin: 0; color: var(--muted); }
.tt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tt-grid button { display: grid; gap: 6px; justify-items: center; padding: 26px 12px; border: 0; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); transition: transform .2s var(--ease); }
.tt-grid button:active { transform: scale(.96); }
.tt-grid button svg { width: 28px; height: 28px; color: var(--accent); }
.tt-grid b { font-size: 16px; letter-spacing: -0.02em; }
.tt-grid span { font-size: 12px; color: var(--muted); }
.tt-code { display: flex; justify-content: center; gap: 12px; }
.tt-code i { width: 54px; height: 64px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line-2); display: grid; place-items: center; font-style: normal; font-size: 28px; font-weight: 750; transition: box-shadow .2s, transform .3s var(--spring); }
.tt-code i.on { box-shadow: inset 0 0 0 2px var(--accent); transform: translateY(-2px); }
.tt-pad { display: grid; grid-template-columns: repeat(3, 76px); gap: 10px; justify-content: center; }
.tt-pad button { height: 60px; border: 0; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: 22px; font-weight: 700; transition: transform .12s var(--ease), background .15s; }
.tt-pad button:active { transform: scale(.92); background: var(--paper-2); }
.tt-back { align-self: center; height: 46px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--paper-2); font-weight: 600; }
.tt-back.pri { background: var(--accent); color: #fff; }

/* ---------- App do aluno ---------- */
.feat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.feat button { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px; border: 0; border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, transform .2s var(--ease); }
.feat button:hover { box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); transform: translateY(-1px); }
.feat button.on { box-shadow: inset 0 0 0 1.5px rgba(62, 70, 255, .5); background: linear-gradient(90deg, var(--accent-soft), transparent); }
.feat b { display: block; font-size: 13px; letter-spacing: -0.01em; }
.feat em { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); }
.ph-top { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; }
.ph-top strong { display: block; font-size: 18px; letter-spacing: -0.04em; }
.ph-top span { font-size: 11.5px; color: var(--muted); }
.ph-back { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; flex: none; }
.ph-back svg { width: 15px; height: 15px; transform: rotate(180deg); }
.ph-bell { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; }
.ph-bell svg { width: 17px; height: 17px; }
.ph-bell i { position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 10px; font-style: normal; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
.ph-ico { width: 40px; height: 40px; border-radius: 12px; display: inline-grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; margin-bottom: 6px; }
.ph-ico svg { width: 18px; height: 18px; }
.ph-note { font-size: 11.5px; color: var(--muted); text-align: center; margin: 8px 6px 0; }
.ph-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.ph-card.mini { margin: 0; display: grid; gap: 3px; cursor: pointer; }
.ph-card.mini svg { width: 18px; height: 18px; color: var(--accent); }
.ph-card.mini b { font-size: 20px; letter-spacing: -0.04em; }
.ph-card.mini span { font-size: 11px; color: var(--muted); }
.ticket { display: flex; border-radius: 18px; background: var(--ink); color: var(--paper); margin-bottom: 10px; overflow: hidden; position: relative; box-shadow: 0 14px 30px -18px rgba(21, 18, 15, .8); }
.ticket::before, .ticket::after { content: ''; position: absolute; left: calc(100% - 104px); width: 16px; height: 16px; border-radius: 50%; background: var(--paper); transform: translateX(-50%); }
.ticket::before { top: -8px; }
.ticket::after { bottom: -8px; }
.tk-l { flex: 1; padding: 14px; display: grid; gap: 3px; min-width: 0; }
.tk-l .eyebrow { color: rgba(243, 240, 234, .55); }
.tk-l b { font-size: 17px; letter-spacing: -0.03em; line-height: 1.15; }
.tk-l > span:not(.eyebrow) { font-size: 11.5px; color: rgba(243, 240, 234, .7); text-transform: capitalize; }
.tk-act { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.tk-r { width: 104px; padding: 12px; border-left: 1.5px dashed rgba(255, 255, 255, .2); display: grid; place-items: center; background: #fff; }
.tk-r svg { width: 80px; height: 80px; }
.dstrip { display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px 12px; padding: 2px 16px; scrollbar-width: none; }
.dstrip::-webkit-scrollbar { display: none; }
.dchip { position: relative; flex: none; width: 46px; height: 58px; border: 0; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; align-content: center; gap: 2px; transition: background .2s, color .2s, transform .2s var(--spring); }
.dchip span { font-size: 10px; color: var(--muted); text-transform: capitalize; }
.dchip b { font-size: 17px; letter-spacing: -0.03em; }
.dchip.on { background: var(--accent); color: #fff; transform: translateY(-2px); }
.dchip.on span { color: rgba(255, 255, 255, .8); }
.dchip.off { opacity: .45; }
.dchip i { position: absolute; bottom: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--good); }
.ph-card.aula { display: grid; gap: 10px; }
.ph-card.aula.res { box-shadow: inset 0 0 0 1.5px rgba(62, 70, 255, .5); background: linear-gradient(180deg, var(--accent-soft), var(--card) 70%); }
.ph-card.aula.past { opacity: .55; }
.aula-t { display: flex; gap: 10px; align-items: flex-start; }
.aula-t .mono { font-size: 13px; font-weight: 500; padding-top: 1px; }
.aula-t strong { display: block; font-size: 13.5px; letter-spacing: -0.02em; }
.aula-t span { font-size: 11.5px; color: var(--muted); }
.aula-b { display: flex; align-items: center; gap: 8px; }
.vagas { flex: 1; height: 5px; border-radius: 9px; background: var(--paper-2); overflow: hidden; }
.vagas i { display: block; height: 100%; background: var(--ink); border-radius: 9px; }
.aula-b em { font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap; }
.ph-seg { display: flex; margin-bottom: 12px; }
.ph-seg button { flex: 1; }
.ph-prog { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ph-prog span { flex: 1; height: 6px; border-radius: 9px; background: var(--paper-2); overflow: hidden; }
.ph-prog span i { display: block; height: 100%; background: var(--accent); border-radius: 9px; transition: width .5s var(--spring); }
.ph-prog em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.ph-prog.light { margin: 10px 0 0; }
.ph-prog.light span { background: rgba(255, 255, 255, .25); }
.ph-prog.light span i { background: #fff; }
.exc { display: grid; gap: 10px; }
.exc.done { opacity: .6; }
.exc-h { display: flex; gap: 10px; align-items: center; }
.exc-h strong { display: block; font-size: 13px; letter-spacing: -0.01em; }
.exc-h span { font-size: 11px; color: var(--muted); }
.exc-b { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sets { display: flex; gap: 5px; }
.sets button { width: 30px; height: 30px; border-radius: 9px; border: 0; background: var(--paper-2); font-size: 12px; font-weight: 700; color: var(--muted); transition: background .2s, color .2s, transform .3s var(--spring); }
.sets button.on { background: var(--accent); color: #fff; transform: rotate(-6deg); }
.rpe { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin-top: 8px; }
.rpe button { height: 30px; border: 0; border-radius: 8px; background: var(--paper-2); font-size: 11.5px; font-weight: 700; transition: background .2s, color .2s; }
.rpe button.on { background: var(--ink); color: #fff; }
.ph-timer { position: absolute; left: 14px; right: 14px; top: 50px; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 14px; border-radius: 16px; background: var(--ink); color: var(--paper); box-shadow: var(--shadow-lg); animation: toastIn .45s var(--spring) both; }
.ph-timer > span { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: rgba(243, 240, 234, .65); }
.ph-timer > span svg { width: 14px; height: 14px; }
.ph-timer b { font-size: 20px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ph-timer > i { flex: 1; height: 4px; border-radius: 9px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.ph-timer > i i { display: block; height: 100%; background: #34D399; border-radius: 9px; transition: width .25s linear; }
.ph-timer button { width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; display: grid; place-items: center; }
.ph-timer button svg { width: 12px; height: 12px; }
.heat12 { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 3px; margin-top: 8px; }
.heat12 i { aspect-ratio: 1; border-radius: 3px; background: var(--paper-2); }
.heat12 i.on { background: var(--accent); }
.heat12 i.hj { box-shadow: 0 0 0 1.5px var(--ink); }
.mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mgrid button { display: grid; gap: 6px; justify-items: center; padding: 14px 6px; border: 0; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: 11px; font-weight: 600; transition: transform .15s var(--ease); }
.mgrid button:active { transform: scale(.95); }
.mgrid button span { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.mgrid button svg { width: 17px; height: 17px; }
.pr-i { display: flex; align-items: center; gap: 10px; }
.pr-i .ph-ico { margin: 0; width: 36px; height: 36px; }
.pr-i strong { display: block; font-size: 13px; }
.pr-i span { font-size: 11.5px; color: var(--muted); }
.pr-i .grow { flex: 1; min-width: 0; }
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ph-card.pc { margin: 0; display: grid; gap: 4px; }
.ph-card.pc .pthumb { height: 54px; }
.ph-card.pc strong { font-size: 11.5px; line-height: 1.25; min-height: 28px; }
.ph-card.pc .money { font-size: 12.5px; }
.ph-cart { position: sticky; bottom: 0; margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 10px 14px; border-radius: 16px; background: var(--ink); color: var(--paper); font-size: 12px; box-shadow: var(--shadow-lg); }
.compose { display: flex; gap: 6px; align-items: center; }
.compose input { flex: 1; border: 0; outline: 0; background: none; font-size: 12.5px; }
.post p { margin: 8px 0; font-size: 12.5px; color: var(--ink-2); }
.post-h { display: flex; gap: 8px; align-items: center; }
.post-h strong { display: block; font-size: 12.5px; }
.post-h span { font-size: 10.5px; color: var(--muted); }
.post-img { height: 120px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 8px; color: #fff; background: linear-gradient(135deg, #2F5BEA, #7A3FD1); }
.post-img.medalha { background: linear-gradient(135deg, #F2C230, #F07A22); }
.post-img svg { width: 34px; height: 34px; }
.like { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--paper-2); border-radius: 999px; height: 28px; padding: 0 11px; font-size: 12px; font-weight: 600; transition: background .2s, color .2s, transform .3s var(--spring); }
.like svg { width: 14px; height: 14px; }
.like.on { background: var(--bad-soft); color: var(--bad); transform: scale(1.06); }
.like.on svg { fill: currentColor; }
.npsg { display: grid; grid-template-columns: repeat(11, 1fr); gap: 3px; margin: 12px 0 6px; }
.npsg button { height: 32px; border: 0; border-radius: 8px; background: var(--paper-2); font-size: 11.5px; font-weight: 700; transition: background .2s, color .2s, transform .25s var(--spring); }
.npsg button.on.lo { background: var(--bad); color: #fff; }
.npsg button.on.mid { background: var(--warn); color: #fff; }
.npsg button.on.hi { background: var(--good); color: #fff; }
.npsg button.on { transform: translateY(-3px); }
.ph-card textarea { width: 100%; margin-top: 8px; border: 0; outline: 0; border-radius: 10px; background: var(--paper); padding: 10px; font-size: 12.5px; resize: none; }
.contract { font-size: 11.5px; line-height: 1.6; color: var(--ink-2); margin-top: 8px; max-height: 140px; overflow-y: auto; }
.sig { width: 100%; height: 110px; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2); margin-top: 8px; touch-action: none; cursor: crosshair; }
.ph-card.dk .eyebrow { color: rgba(243, 240, 234, .55); }

@media (max-width: 1100px) {
  .ws-mods, .ws-planos { grid-template-columns: repeat(2, 1fr); }
  .tt-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .flow { gap: 6px; }
  .fcol b { font-size: 10px; }
  .ws-slots { grid-template-columns: 1fr; }
  .feat { grid-template-columns: 1fr; }
  .tt-screen { padding: 20px; min-height: 480px; }
}

@media (max-height: 960px) and (min-width: 901px) { .side .promo { display: none; } }
.scr.has-timer { padding-top: 64px; }
@media (max-width: 900px) { body[data-rota='app'] .dock { display: none; } body[data-rota='app'] .toasts { bottom: 24px; } }