/* ============================================================
   Portal Yallon · design system no espírito de iOS 27 / macOS 27
   Fonte: San Francisco via system stack (SF Pro em iPhone, iPad e Mac);
   Inter como reserva em Windows e Android.
   ============================================================ */

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Inter", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* claro */
  --bg: #F2F2F7;
  --bg-elev: #FFFFFF;
  --bg-elev2: #F2F2F7;
  --bg-input: #FFFFFF;
  --glass: rgba(246, 246, 249, .68);
  --glass-strong: rgba(250, 250, 252, .86);
  --glass-border: rgba(255, 255, 255, .7);
  --glass-shine: rgba(255, 255, 255, .9);
  --label: #000000;
  --label2: rgba(60, 60, 67, .62);
  --label3: rgba(60, 60, 67, .34);
  --sep: rgba(60, 60, 67, .22);
  --fill: rgba(120, 120, 128, .2);
  --fill2: rgba(120, 120, 128, .14);
  --fill3: rgba(120, 120, 128, .09);
  --tint: #C9A84C;
  --tint-strong: #B08D3C;
  --tint-text: #8A6D2A;
  --tint-soft: rgba(201, 168, 76, .16);
  --on-tint: #1A1407;
  --blue: #007AFF; --green: #34C759; --orange: #FF9500; --red: #FF3B30; --purple: #AF52DE; --teal: #30B0C7; --pink: #FF2D55; --indigo: #5856D6; --gray: #8E8E93;
  /* versões escuras para texto pequeno sobre fundo claro (pills); no escuro são as cores de cima */
  --blue-text: #0A5BBF; --green-text: #1E7D3B; --orange-text: #9A5600; --red-text: #C8231B; --purple-text: #7A2FA6; --teal-text: #0B7285; --pink-text: #B8103A;
  --shadow-1: 0 1px 2px rgba(0,0,0,.05), 0 0 0 .5px rgba(0,0,0,.04);
  --shadow-2: 0 12px 40px -12px rgba(0,0,0,.18), 0 0 0 .5px rgba(0,0,0,.05);
  --shadow-3: 0 30px 80px -20px rgba(0,0,0,.35);
  --r-s: 10px; --r: 14px; --r-l: 20px; --r-xl: 28px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.3, .64, 1);
  --sidebar-w: 268px;
  --tabbar-h: 58px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #000000;
  --bg-elev: #1C1C1E;
  --bg-elev2: #2C2C2E;
  --bg-input: #1C1C1E;
  --glass: rgba(28, 28, 30, .66);
  --glass-strong: rgba(28, 28, 30, .88);
  --glass-border: rgba(255, 255, 255, .09);
  --glass-shine: rgba(255, 255, 255, .16);
  --label: #FFFFFF;
  --label2: rgba(235, 235, 245, .62);
  --label3: rgba(235, 235, 245, .34);
  --sep: rgba(84, 84, 88, .62);
  --fill: rgba(120, 120, 128, .36);
  --fill2: rgba(120, 120, 128, .28);
  --fill3: rgba(120, 120, 128, .18);
  --tint: #D4B35A;
  --tint-strong: #E8CF8A;
  --tint-text: #E8CF8A;
  --tint-soft: rgba(212, 179, 90, .18);
  --on-tint: #1A1407;
  --blue: #0A84FF; --green: #30D158; --orange: #FF9F0A; --red: #FF453A; --purple: #BF5AF2; --teal: #40C8E0; --pink: #FF375F; --indigo: #5E5CE6; --gray: #98989D;
  --blue-text: #0A84FF; --green-text: #30D158; --orange-text: #FF9F0A; --red-text: #FF453A; --purple-text: #BF5AF2; --teal-text: #40C8E0; --pink-text: #FF375F;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 0 0 .5px rgba(255,255,255,.04);
  --shadow-2: 0 12px 40px -12px rgba(0,0,0,.7), 0 0 0 .5px rgba(255,255,255,.05);
  --shadow-3: 0 30px 80px -20px rgba(0,0,0,.9);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; height: 100%; font-family: var(--font); font-size: 17px; line-height: 1.35; color: var(--label); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overscroll-behavior-y: none; }
@media (min-width: 900px) { body { font-size: 15px; } }
h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: var(--tint-text); text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--tint-soft); }
:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; border-radius: 6px; }
.app-root { height: 100%; }
.ic { flex: none; display: inline-block; vertical-align: middle; }
.tabular { font-variant-numeric: tabular-nums; }
.muted { color: var(--label2); }
.faint { color: var(--label3); }
.tint { color: var(--tint-text); }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hide-mobile { display: none !important; }
.hide-desktop { display: initial; }
@media (min-width: 900px) { .hide-mobile { display: initial !important; } .hide-desktop { display: none !important; } }

/* tipografia (escala Apple) */
.lt { font-size: 34px; font-weight: 700; letter-spacing: -.4px; line-height: 1.15; }
.t1 { font-size: 28px; font-weight: 700; letter-spacing: -.3px; line-height: 1.2; }
.t2 { font-size: 22px; font-weight: 700; letter-spacing: -.2px; line-height: 1.25; }
.t3 { font-size: 20px; font-weight: 600; line-height: 1.25; }
.hl { font-size: 17px; font-weight: 600; line-height: 1.3; }
.body { font-size: 17px; }
.callout { font-size: 16px; }
.sub { font-size: 15px; }
.fn { font-size: 13px; }
.cap { font-size: 12px; }
.cap2 { font-size: 11px; }
@media (min-width: 900px) { .lt { font-size: 30px; } .t1 { font-size: 24px; } .t2 { font-size: 20px; } .t3 { font-size: 18px; } .hl { font-size: 15px; } .body { font-size: 15px; } .callout { font-size: 14px; } .sub { font-size: 13px; } .fn { font-size: 12px; } .cap { font-size: 11px; } }

/* ---------- vidro ---------- */
.glass { background: var(--glass); -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-shine); }
.glass-strong { background: var(--glass-strong); -webkit-backdrop-filter: blur(36px) saturate(200%); backdrop-filter: blur(36px) saturate(200%); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .glass { background: var(--bg-elev); } }

/* ---------- layout ---------- */
.app { height: 100%; display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr; }
.main { position: relative; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.page { max-width: 1120px; margin: 0 auto; padding: 0 16px calc(var(--tabbar-h) + 32px + env(safe-area-inset-bottom, 0px)); }
.sidebar { display: none; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--glass-border); }
.tabbar button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; color: var(--label2); font-size: 10px; font-weight: 500; letter-spacing: .1px; border-radius: 12px; position: relative; transition: color .2s, transform .25s var(--spring); }
.tabbar button:active { transform: scale(.92); }
.tabbar button[aria-current="page"] { color: var(--tint-text); }
.tabbar .badge-dot { position: absolute; top: 2px; left: calc(50% + 8px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 6px; transition: box-shadow .25s; }
.topbar .ttl { flex: 1; min-width: 0; text-align: center; font-weight: 600; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .25s var(--ease); pointer-events: none; }
.page.is-compact .topbar .ttl { opacity: 1; transform: none; }
.topbar .side { min-width: 44px; display: flex; gap: 4px; }
.topbar .side.right { justify-content: flex-end; }
.page-head { padding: 6px 4px 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.page-head .sub { color: var(--label2); margin-top: 4px; max-width: 60ch; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.content { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 900px) {
  .app { grid-template-columns: var(--sidebar-w) 1fr; }
  .sidebar { display: flex; flex-direction: column; border-right: 1px solid var(--sep); padding: calc(14px + env(safe-area-inset-top, 0px)) 12px 14px; gap: 6px; overflow-y: auto; }
  .tabbar { display: none; }
  .page { padding: 0 32px 48px; }
  .topbar { padding: 10px 16px 6px; min-height: 52px; }
  .topbar .side.left { display: none; }
  .topbar .ttl { text-align: left; font-size: 15px; }
  .page-head { padding: 10px 0 18px; }
}

/* sidebar */
.brand { display: flex; align-items: center; gap: 12px; padding: 6px 10px 14px; }
.brand img { width: 118px; height: auto; }
.brand .by { font-size: 11px; color: var(--label3); letter-spacing: .4px; text-transform: uppercase; font-weight: 600; }
.nav-group { margin-top: 8px; }
.nav-group .gl { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--label3); padding: 6px 12px 4px; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; color: var(--label); font-size: 14px; font-weight: 500; transition: background .15s, transform .2s var(--spring); }
.nav-item .ic { color: var(--tint-text); }
.nav-item:hover { background: var(--fill3); }
.nav-item:active { transform: scale(.985); }
.nav-item[aria-current="page"] { background: var(--tint-soft); color: var(--label); }
.nav-item .nb { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.sidebar .spacer { flex: 1; }
.user-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--fill3); }
.user-card .nm { font-size: 13px; font-weight: 600; line-height: 1.2; }
.user-card .rl { font-size: 11px; color: var(--label2); }

/* ---------- componentes ---------- */
.card { background: var(--bg-elev); border-radius: var(--r-l); box-shadow: var(--shadow-1); padding: 16px; }
.card.pad0 { padding: 0; overflow: hidden; }
.card.clickable { cursor: pointer; transition: transform .2s var(--spring), box-shadow .2s; }
.card.clickable:hover { box-shadow: var(--shadow-2); }
.card.clickable:active { transform: scale(.985); }
.card.accent { background: linear-gradient(150deg, rgba(201,168,76,.22), rgba(201,168,76,.04) 60%), var(--bg-elev); }
.section { display: flex; flex-direction: column; gap: 8px; }
.section > .st { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px; }
.section > .st .sl { font-size: 13px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--label2); }
.section > .sf { font-size: 13px; color: var(--label2); padding: 0 4px; }

.list { background: var(--bg-elev); border-radius: var(--r-l); box-shadow: var(--shadow-1); overflow: hidden; }
.row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; min-height: 48px; width: 100%; text-align: left; color: inherit; position: relative; transition: background .15s; }
.row + .row::before { content: ""; position: absolute; left: 16px; right: 0; top: 0; height: 1px; background: var(--sep); }
.row.has-icon + .row.has-icon::before { left: 60px; }
.row.clickable { cursor: pointer; }
.row.clickable:active { background: var(--fill3); }
@media (hover: hover) { .row.clickable:hover { background: var(--fill3); } }
.row .ri { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: var(--tint); flex: none; }
.row .ri .ic { width: 19px; height: 19px; }
.row .rl { flex: none; display: grid; place-items: center; min-width: 32px; }
/* .rmain: parte clicável da linha quando há um botão à esquerda (leading), para não aninhar botão em botão */
.row .rmain { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; color: inherit; margin: -11px -16px -11px 0; padding: 11px 16px 11px 0; min-height: 48px; border-radius: 0; }
.row .rb { flex: 1; min-width: 0; }
/* título em até 2 linhas: no celular o trailing (pill) deixa pouco espaço e "Manifest…" não identifica nada */
.row .rt { font-size: 16px; line-height: 1.3; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.row .rs { font-size: 13px; color: var(--label2); margin-top: 1px; line-height: 1.3; }
.row .rtr { display: flex; align-items: center; gap: 8px; color: var(--label2); font-size: 15px; flex: none; }
.row .chev { color: var(--label3); }
@media (min-width: 900px) { .row { padding: 9px 14px; min-height: 42px; } .row .rt { font-size: 14px; } .row .rs { font-size: 12px; } .row .rtr { font-size: 13px; } .row.has-icon + .row.has-icon::before { left: 58px; } .row .rmain { margin: -9px -14px -9px 0; padding: 9px 14px 9px 0; min-height: 42px; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 44px; padding: 0 18px; border-radius: 12px; font-size: 16px; font-weight: 600; letter-spacing: -.1px; color: var(--label); background: var(--fill2); transition: transform .2s var(--spring), background .15s, opacity .2s; white-space: nowrap; }
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn.primary { background: var(--tint); color: var(--on-tint); box-shadow: 0 6px 18px -8px rgba(201,168,76,.8); }
.btn.primary:hover { background: var(--tint-strong); }
.btn.tinted { background: var(--tint-soft); color: var(--tint-text); }
.btn.plain { background: transparent; color: var(--tint-text); padding: 0 8px; }
.btn.danger { background: rgba(255,59,48,.14); color: var(--red); }
.btn.danger.solid { background: var(--red); color: #fff; }
.btn.sm { height: 34px; padding: 0 12px; font-size: 14px; border-radius: 10px; }
.btn.xs { height: 28px; padding: 0 10px; font-size: 13px; border-radius: 8px; gap: 5px; position: relative; }
.btn.xs::after { content: ""; position: absolute; inset: -6px; } /* área de toque de 40px sem mudar o desenho */
.btn.full { width: 100%; }
.btn.pill { border-radius: 999px; }
.btn.lg { height: 50px; font-size: 17px; border-radius: 14px; }
@media (min-width: 900px) { .btn { height: 36px; font-size: 14px; padding: 0 14px; border-radius: 10px; } .btn.lg { height: 44px; font-size: 15px; } .btn.sm { height: 30px; font-size: 13px; } }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--tint-text); background: var(--fill3); transition: transform .2s var(--spring), background .15s; }
.icon-btn:active { transform: scale(.9); }
.icon-btn.plain { background: transparent; }
.icon-btn.active { background: var(--tint-soft); }
.icon-btn .ic { width: 20px; height: 20px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .field .fl { font-size: 13px; font-weight: 600; color: var(--label2); padding-left: 4px; }
.field .fg { display: contents; }
.field .hint { font-size: 12px; color: var(--label2); padding-left: 4px; }
.input, .textarea, .select { width: 100%; background: var(--bg-input); border: 1px solid var(--sep); border-radius: 12px; padding: 11px 14px; font-size: 16px; color: var(--label); transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--tint); box-shadow: 0 0 0 3px var(--tint-soft); }
.input::placeholder, .textarea::placeholder { color: var(--label3); }
.textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.select { padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .input-row { grid-template-columns: 1fr; } }
@media (min-width: 900px) { .input, .textarea, .select { font-size: 14px; padding: 8px 12px; border-radius: 10px; } }
.form { display: flex; flex-direction: column; gap: 14px; }

.segmented { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--fill2); gap: 2px; max-width: 100%; }
.segmented button { flex: 1; min-width: 0; padding: 6px 12px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--label2); white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background .2s, color .2s, box-shadow .2s; }
.segmented button[aria-pressed="true"] { background: var(--bg-elev); color: var(--label); box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); }
.segmented.full { display: flex; }

.toggle { position: relative; width: 51px; height: 31px; border-radius: 16px; background: var(--fill); transition: background .2s; flex: none; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.25), 0 0 0 .5px rgba(0,0,0,.05); transition: transform .25s var(--spring); }
.toggle[aria-checked="true"] { background: var(--green); }
.toggle[aria-checked="true"]::after { transform: translateX(20px); }

.pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 600; letter-spacing: .1px; white-space: nowrap; background: var(--fill2); color: var(--label2); }
.pill .ic { width: 13px; height: 13px; }
.pill.gold { background: var(--tint-soft); color: var(--tint-text); }
.pill.blue { background: rgba(10,132,255,.16); color: var(--blue-text); }
.pill.green { background: rgba(52,199,89,.16); color: var(--green-text); }
.pill.orange { background: rgba(255,149,0,.18); color: var(--orange-text); }
.pill.red { background: rgba(255,59,48,.14); color: var(--red-text); }
.pill.purple { background: rgba(175,82,222,.16); color: var(--purple-text); }
.pill.teal { background: rgba(48,176,199,.16); color: var(--teal-text); }
.pill.pink { background: rgba(255,45,85,.14); color: var(--pink-text); }
.pill.solid { color: #fff; }
/* pills de pilar (cor vem de --pc): texto puxado para o preto no claro e para o branco no escuro */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .pill.pillar { background: color-mix(in srgb, var(--pc) 16%, transparent) !important; color: color-mix(in srgb, var(--pc) 58%, var(--label)) !important; }
}
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--sep); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs.overflow { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); } /* sinaliza que há mais abas à direita */
.tabs button { padding: 10px 12px; font-size: 15px; font-weight: 600; color: var(--label2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.tabs button[aria-selected="true"] { color: var(--label); border-color: var(--tint); }
@media (min-width: 900px) { .tabs button { font-size: 13px; } }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 16px; background: var(--fill2); color: var(--label2); font-size: 14px; font-weight: 600; white-space: nowrap; transition: background .15s, color .15s, transform .2s var(--spring); }
.chip:active { transform: scale(.95); }
.chip[aria-pressed="true"] { background: var(--label); color: var(--bg-elev); }
.chip .dot { width: 8px; height: 8px; }
@media (min-width: 900px) { .chip { height: 28px; font-size: 13px; } }

.stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stat .sl { font-size: 13px; color: var(--label2); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.stat .sv { font-size: clamp(19px, 5.6vw, 28px); font-weight: 700; letter-spacing: -.5px; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; }
.stat .sd { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.stat .sd.up { color: var(--green); } .stat .sd.down { color: var(--red); } .stat .sd.flat { color: var(--label2); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats .card { padding: 14px 16px; }

.grid2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
.grid3 { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px) { .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.empty { text-align: center; padding: 36px 20px; color: var(--label2); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty .ic { width: 40px; height: 40px; color: var(--label3); }
.empty .et { font-size: 17px; font-weight: 600; color: var(--label); }
.empty .ex { font-size: 14px; max-width: 36ch; }

.spinner { width: 22px; height: 22px; border: 2.5px solid var(--fill); border-top-color: var(--tint); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.center { display: grid; place-items: center; padding: 40px; }
.skeleton { background: linear-gradient(90deg, var(--fill3), var(--fill2), var(--fill3)); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px; }
@keyframes shimmer { to { background-position: -200% 0; } }

.avatar { border-radius: 50%; background: var(--tint-soft); color: var(--tint-text); display: grid; place-items: center; font-weight: 700; overflow: hidden; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.progress { height: 6px; border-radius: 3px; background: var(--fill2); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--tint); border-radius: 3px; transition: width .4s var(--ease); }

/* folhas (modais / bottom sheets) */
.sheet-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.42); display: flex; align-items: flex-end; justify-content: center; animation: fadein .2s; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sheet { width: 100%; max-height: 92dvh; display: flex; flex-direction: column; background: var(--bg-elev); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--shadow-3); animation: sheetup .36s var(--ease); padding-bottom: env(safe-area-inset-bottom, 0px); }
.sheet:focus { outline: none; } /* recebe foco programático ao abrir; o anel ficaria em volta da folha inteira */
.sheet .grab { width: 36px; height: 5px; border-radius: 3px; background: var(--fill); margin: 8px auto 0; }
.sheet .sh { display: flex; align-items: center; gap: 8px; padding: 10px 16px 8px; }
.sheet .sh .ttl { flex: 1; font-size: 17px; font-weight: 600; text-align: center; }
.sheet .sb { overflow-y: auto; padding: 4px 16px 16px; -webkit-overflow-scrolling: touch; }
.sheet .sf { padding: 10px 16px 12px; border-top: 1px solid var(--sep); display: flex; gap: 10px; justify-content: flex-end; }
.sheet .sf .btn { flex: 1; }
@keyframes sheetup { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 760px) {
  .sheet-overlay { align-items: center; padding: 24px; }
  .sheet { width: min(560px, 100%); max-height: 86dvh; border-radius: var(--r-l); animation: pop .3s var(--spring); }
  .sheet.wide { width: min(840px, 100%); }
  .sheet .grab { display: none; }
  .sheet .sh { padding: 16px 20px 10px; }
  .sheet .sh .ttl { text-align: left; font-size: 17px; }
  .sheet .sb { padding: 4px 20px 20px; }
  .sheet .sf { padding: 12px 20px 16px; }
  .sheet .sf .btn { flex: none; min-width: 110px; }
}
@keyframes pop { from { transform: scale(.96) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* toasts */
.toasts { position: fixed; left: 0; right: 0; top: calc(10px + env(safe-area-inset-top, 0px)); z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow-2); animation: pop .3s var(--spring); max-width: 100%; }
.toast.error { color: var(--red-text); }
.toast.ok { color: var(--label); }
.toast .ic { width: 18px; height: 18px; }
.toast .toast-act { margin-left: 4px; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--tint-soft); color: var(--tint-text); font-size: 13px; font-weight: 700; white-space: nowrap; }

/* login */
.login { min-height: 100%; display: grid; place-items: center; padding: 24px; position: relative; isolation: isolate; background: #07080C; color: #F2EFE8; }
.login::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("/img/hero.jpg") 78% 20% / cover no-repeat; }
.login::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,8,12,.55), rgba(7,8,12,.85)), radial-gradient(60% 50% at 70% 35%, rgba(201,168,76,.18), transparent); }
.login-card { width: min(420px, 100%); padding: 28px 24px; border-radius: var(--r-xl); background: rgba(20,20,24,.62); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), var(--shadow-3); display: flex; flex-direction: column; gap: 16px; }
.login-card .logo { width: 180px; height: auto; margin: 4px auto 2px; }
.login-card .eyebrow { text-align: center; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: rgba(242,239,232,.6); font-weight: 600; }
.login-card .input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #fff; }
.login-card .input::placeholder { color: rgba(255,255,255,.4); }
.login-card .field > label { color: rgba(242,239,232,.7); }
.login-card .err { color: #FF8A80; font-size: 14px; text-align: center; }
.login-card .err:empty { display: none; }
.login-card .foot { text-align: center; font-size: 12px; color: rgba(242,239,232,.45); }

/* mini gráficos */
.chart-wrap { width: 100%; min-width: 0; }
.chart { width: 100%; height: auto; display: block; }
.chart .grid line { stroke: var(--sep); }
.chart .axis text { fill: var(--label2); font-size: 11px; font-family: var(--font); }
.chart .lbl { fill: var(--label2); font-size: 11px; font-family: var(--font); }

/* teleprompter */
.prompter { position: fixed; inset: 0; z-index: 90; background: #000; color: #fff; display: flex; flex-direction: column; }
.prompter .pt { flex: 1; overflow: hidden; position: relative; }
.prompter .ptx { padding: 40vh 8vw; font-size: var(--p-size, 44px); line-height: 1.35; font-weight: 600; text-align: center; letter-spacing: -.2px; }
.prompter .ptx p { margin: 0 0 1em; }
.prompter .ptx .cue { color: #E8CF8A; }
.prompter .ptx .dim { color: rgba(255,255,255,.45); font-weight: 400; font-size: .6em; font-style: italic; }
.prompter .guide { position: absolute; left: 0; right: 0; top: 40%; height: 2px; background: rgba(232,207,138,.5); pointer-events: none; }
.prompter .pc { display: flex; align-items: center; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(20,20,20,.9); flex-wrap: wrap; justify-content: center; }
.prompter .pc .icon-btn { background: rgba(255,255,255,.1); color: #fff; width: 44px; height: 44px; }
.prompter .pc .icon-btn.active { background: #E8CF8A; color: #000; }
.prompter .pc .v { font-variant-numeric: tabular-nums; font-size: 13px; color: rgba(255,255,255,.7); min-width: 64px; text-align: center; }
.prompter .mirror { transform: scaleX(-1); }

/* calendário */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal .wd { text-align: center; font-size: 11px; font-weight: 600; color: var(--label2); text-transform: uppercase; padding: 4px 0; }
.cal .day { min-height: 56px; border-radius: 10px; padding: 6px; background: var(--bg-elev); box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 3px; text-align: left; transition: transform .2s var(--spring); }
.cal .day:active { transform: scale(.96); }
.cal .day .dn { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; width: 24px; height: 24px; border-radius: 12px; display: grid; place-items: center; }
.cal .day.today .dn { background: var(--tint); color: var(--on-tint); }
.cal .day.other { opacity: .4; }
.cal .day.sel { box-shadow: 0 0 0 2px var(--tint), var(--shadow-1); }
.cal .day .dots { display: flex; gap: 3px; flex-wrap: wrap; }
.cal .day .dots .dot { width: 6px; height: 6px; }
@media (min-width: 900px) { .cal .day { min-height: 96px; padding: 8px; } .cal .day .ev { font-size: 11px; line-height: 1.25; padding: 2px 6px; border-radius: 5px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
.cal .day .ev { display: none; }
@media (min-width: 900px) { .cal .day .ev { display: block; } .cal .day .dots { display: none; } }

/* arquivos */
.dropzone { border: 2px dashed var(--sep); border-radius: var(--r-l); padding: 28px 20px; text-align: center; color: var(--label2); transition: border-color .2s, background .2s; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dropzone.over { border-color: var(--tint); background: var(--tint-soft); }
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.file-card { background: var(--bg-elev); border-radius: 14px; box-shadow: var(--shadow-1); overflow: hidden; cursor: pointer; transition: transform .2s var(--spring); }
.file-card:active { transform: scale(.97); }
.file-card .thumb { aspect-ratio: 9/12; background: var(--bg-elev2); display: grid; place-items: center; color: var(--label3); position: relative; overflow: hidden; }
.file-card .thumb video, .file-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-card .fm { padding: 8px 10px; }
.file-card .fn { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-card .fs { font-size: 11px; color: var(--label2); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; }
.kv dt { color: var(--label2); } .kv dd { margin: 0; }
.divider { height: 1px; background: var(--sep); }
.inline-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.text-pre { white-space: pre-wrap; line-height: 1.5; }

.offline-bar { position: fixed; top: calc(8px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 70; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--orange); background: var(--bg-elev); box-shadow: var(--shadow-2); display: flex; gap: 6px; align-items: center; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }


/* ============================================================
   CSS dos módulos (anexado pelo integrador)
   ============================================================ */

/* ===== módulo: calendario ===== */
/* ---------- calendário (módulo calendario.js) ---------- */
.cal-head { display: flex; flex-direction: column; gap: 10px; }
.cal-nav { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cal-title { flex: 1; min-width: 0; text-align: left; font-size: 22px; font-weight: 700; letter-spacing: -.3px; color: var(--label); padding: 4px 6px; border-radius: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background .15s; }
.cal-title:active { background: var(--fill3); }
@media (min-width: 900px) {
  .cal-head { flex-direction: row; align-items: center; justify-content: space-between; }
  .cal-nav { flex: 1; }
  .cal-head .segmented.full { width: 300px; flex: none; }
  .cal-title { font-size: 20px; flex: none; min-width: 200px; }
}
.cal-filters .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 0; margin: -2px 0; }
.cal-filters .chips::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .cal-filters .chips { flex-wrap: wrap; overflow: visible; } }
.cal-sub { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.cal .day .ev .cal-evt { font-weight: 600; margin-right: 4px; font-variant-numeric: tabular-nums; }
.cal .day .cal-more { display: none; font-size: 11px; color: var(--label2); padding: 0 6px; }
@media (min-width: 900px) { .cal .day .cal-more { display: block; } }
.cal-week { display: grid; grid-template-columns: 1fr; gap: 8px; }
.cal-wday { background: var(--bg-elev); border-radius: var(--r); box-shadow: var(--shadow-1); padding: 8px 8px 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cal-wh { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--label2); text-transform: uppercase; letter-spacing: .4px; }
.cal-wh .n { width: 28px; height: 28px; border-radius: 14px; display: grid; place-items: center; font-size: 16px; font-weight: 700; color: var(--label); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.cal-wday.today .cal-wh .n { background: var(--tint); color: var(--on-tint); }
.cal-wh .cal-wadd { margin-left: auto; width: 28px; height: 28px; position: relative; }
.cal-wh .cal-wadd::after { content: ""; position: absolute; inset: -8px; } /* toque de 44px */
.cal-wh .cal-wadd .ic { width: 16px; height: 16px; }
.cal-wev { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border-radius: 9px; background: var(--fill3); border-left: 3px solid var(--tint); color: inherit; text-align: left; font-size: 14px; line-height: 1.25; transition: transform .2s var(--spring), background .15s; }
.cal-wev:active { transform: scale(.98); }
@media (hover: hover) { .cal-wev:hover { background: var(--fill2); } }
.cal-wev .t { flex: none; font-size: 12px; color: var(--label2); font-variant-numeric: tabular-nums; }
.cal-wev .ttl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.cal-wfree { font-size: 12px; color: var(--label3); padding: 2px 4px; }
@media (min-width: 900px) {
  .cal-week { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  .cal-wday { min-height: 200px; }
  .cal-wev { font-size: 12px; padding: 5px 6px; gap: 5px; }
  .cal-wev .t { font-size: 11px; }
}


/* ===== módulo: roteiros ===== */
/* ---------- roteiros ---------- */
.rot-filters { display: flex; flex-direction: column; gap: 10px; }
.rot-chips .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; margin: -2px -2px -4px; }
.rot-chips .chips::-webkit-scrollbar { display: none; }
@media (max-width: 520px) { .rot-seg .segmented button { padding: 6px 4px; font-size: 12px; } }
.rot-pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rot-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--tint-text); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.rot-hook { font-size: 22px; font-weight: 700; letter-spacing: -.3px; line-height: 1.25; white-space: pre-wrap; }
.rot-script { display: flex; flex-direction: column; gap: 14px; }
.rot-b { display: flex; gap: 10px; align-items: flex-start; }
.rot-b .rot-bt { flex: 1; min-width: 0; white-space: pre-wrap; }
.rot-b .rot-bd { flex: none; margin-top: 2px; }
.rot-seq-n { flex: none; min-width: 18px; padding-top: 4px; font-size: 11px; font-weight: 600; color: var(--label3); font-variant-numeric: tabular-nums; text-align: right; }
.rot-fala .rot-bt { font-size: 18px; line-height: 1.5; }
.rot-cue { color: var(--label2); font-style: italic; font-size: 14px; line-height: 1.4; }
.rot-cue .ic { flex: none; margin-top: 2px; }
.rot-cta { background: var(--tint-soft); border-left: 3px solid var(--tint); border-radius: 10px; padding: 10px 12px; color: var(--tint-text); font-weight: 600; }
.rot-cta .ic { flex: none; margin-top: 2px; }
.rot-cta .rot-eyebrow { margin-bottom: 2px; }
.rot-shots { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; line-height: 1.45; }
.rot-shots li::marker { color: var(--tint-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.rot-actions { padding-top: 4px; }
@media (min-width: 900px) { .rot-hook { font-size: 20px; } .rot-fala .rot-bt { font-size: 16px; } .rot-cue { font-size: 13px; } }

/* editor de blocos */
.rot-blocks { display: flex; flex-direction: column; gap: 10px; }
.rot-block { background: var(--bg-elev2); border-radius: var(--r); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.rot-block .rb-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rot-block .rb-n { min-width: 20px; font-size: 12px; font-weight: 700; color: var(--label3); font-variant-numeric: tabular-nums; }
.rot-block .rb-acts, .rot-blk-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.rot-block .rb-acts .icon-btn, .rot-blk-actions .icon-btn { width: 40px; height: 40px; color: var(--label2); }
.rot-blk-actions .sep { width: 8px; flex: none; } /* afasta a lixeira dos botões de ordem */
.rot-block .textarea { min-height: 72px; }
.rot-block .rb-dur { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--label2); }
.rot-block .rb-dur .input { width: 92px; }

/* teleprompter: área rolável separada para a linha-guia ficar fixa */
.rot-prompter .rot-scroll { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: pointer; overscroll-behavior: contain; }
.rot-prompter .rot-scroll::-webkit-scrollbar { display: none; }
.rot-prompter .ptx .hook { font-weight: 700; }
.rot-prompter .ptx p { white-space: pre-wrap; }
.rot-prompter .rot-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); font-size: 12px; font-weight: 600; pointer-events: none; white-space: nowrap; }
.rot-prompter .pc .grp { display: flex; align-items: center; gap: 2px; }


/* ===== módulo: arquivos ===== */
/* arquivos (módulo) */
.arq-hidden { display: none !important; }
.arq-drop { cursor: pointer; }
.arq-drop:focus-visible { border-color: var(--tint); }
.arq-notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r); background: var(--tint-soft); color: var(--tint-text); font-size: 14px; font-weight: 500; line-height: 1.35; }
.arq-notice .ic { flex: none; margin-top: 1px; }
.arq-queue { display: flex; flex-direction: column; gap: 10px; }
.arq-qi { display: flex; flex-direction: column; gap: 10px; }
.arq-qh { display: flex; align-items: center; gap: 10px; }
.arq-qic { width: 36px; height: 36px; border-radius: 10px; background: var(--fill3); color: var(--tint-text); display: grid; place-items: center; flex: none; }
.arq-qn { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arq-qs { font-size: 12px; color: var(--label2); margin-top: 1px; font-variant-numeric: tabular-nums; }
.arq-qerr { font-size: 13px; color: var(--red); }
.file-card .arq-fp { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; }
.file-card .arq-fp .pill { height: 20px; font-size: 11px; padding: 0 7px; }
.file-card .thumb .arq-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; pointer-events: none; opacity: .9; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.file-card .thumb .arq-fileicon { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--label3); }
.file-card .thumb .arq-ext { font-size: 11px; font-weight: 700; letter-spacing: .5px; color: var(--label2); }
.arq-detail { display: flex; flex-direction: column; gap: 14px; }
.arq-media { border-radius: var(--r); overflow: hidden; background: #000; }
.arq-player { display: block; width: 100%; max-height: 62vh; background: #000; object-fit: contain; }
.arq-img { background: var(--bg-elev2); }
.arq-audio { display: block; width: 100%; padding: 14px; background: var(--bg-elev2); }
.arq-nopreview { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 16px; background: var(--bg-elev2); color: var(--label3); }
.arq-detail .kv dd { display: flex; align-items: center; min-height: 22px; }
@media (min-width: 760px) { .arq-player { max-height: 56vh; } }


/* ===== módulo: cortes ===== */
/* cortes */
.cortes-filter { display: flex; flex-direction: column; gap: 10px; }
.cortes-head { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 4px; }
.cortes-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.cortes-range { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }


/* ===== módulo: redes ===== */
/* ---------- redes ---------- */
.redes-note { font-size: 13px; color: var(--label2); padding: 0 4px; display: flex; align-items: center; gap: 4px; margin-top: -8px; }
.redes-ct { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.redes-goals { display: flex; flex-direction: column; gap: 12px; }
.redes-goal-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.redes-goal-list { display: flex; flex-direction: column; }
.redes-goal { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 14px; position: relative; }
.redes-goal + .redes-goal::before { content: ""; position: absolute; left: 28px; right: 0; top: 0; height: 1px; background: var(--sep); }
.redes-goal .gi { color: var(--label3); display: grid; place-items: center; }
.redes-goal.hit .gi { color: var(--green); }
.redes-goal.cur .gi { color: var(--tint-text); }
.redes-goal .gl { flex: 1; font-weight: 600; }
.redes-goal.hit .gl { color: var(--label2); }
.redes-goal .gv { color: var(--label2); font-size: 13px; }


/* ===== módulo: vendas ===== */
/* vendas */
.ven-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ven-month { display: inline-flex; align-items: center; gap: 4px; }
.ven-month-label { display: inline-flex; align-items: center; gap: 8px; min-width: 150px; justify-content: center; padding: 6px 10px; border-radius: 10px; font-size: 16px; font-weight: 600; color: var(--label); font-variant-numeric: tabular-nums; transition: background .15s; }
.ven-month-label:hover { background: var(--fill3); }
.ven-tip { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--label2); padding: 0 4px; flex: 1; min-width: 220px; }
.ven-tip .ic { color: var(--tint-text); flex: none; }
.ven-donut { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ven-donut svg { flex: none; margin: 0 auto; }
.ven-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 8px; }
.ven-legend li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ven-legend-name { flex: 1; min-width: 0; }
.ven-legend-val { font-weight: 600; }
.ven-legend-pct { color: var(--label2); font-size: 12px; min-width: 42px; text-align: right; }
.ven-funnel { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ven-step { flex: 1; min-width: 0; text-align: center; }
.ven-step-label { font-size: 12px; font-weight: 600; color: var(--label2); display: inline-flex; align-items: center; gap: 4px; text-transform: uppercase; letter-spacing: .3px; }
.ven-step-val { font-size: 26px; font-weight: 700; letter-spacing: -.5px; line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.ven-step-sub { font-size: 12px; color: var(--label2); margin-top: 2px; }
.ven-arrow { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--label3); flex: none; }
.ven-arrow span { font-size: 11px; font-weight: 600; color: var(--tint-text); font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .ven-step-val { font-size: 21px; } .ven-toolbar .btn { width: 100%; } }
@media (min-width: 900px) { .ven-month-label { font-size: 14px; } .ven-legend li { font-size: 13px; } }


/* ===== módulo: aprovacoes ===== */
/* ---------- aprovações ---------- */
.apr-detail { display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }
.apr-head { display: flex; align-items: center; gap: 12px; }
.apr-type-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: none; }
.apr-head-text { flex: 1; min-width: 0; }
.apr-decision { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); background: rgba(52,199,89,.12); color: var(--green); }
.apr-decision .sub { color: var(--label); margin-top: 2px; }
.apr-decision.ajustes { background: rgba(255,149,0,.14); color: var(--orange); }
.apr-preview { display: flex; flex-direction: column; gap: 12px; }
.apr-preview > .btn { align-self: flex-start; }
.apr-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.apr-k { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--label2); margin-bottom: 3px; }
.apr-hook { padding: 12px 14px; border-radius: var(--r); background: var(--tint-soft); }
.apr-hook-text { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.2px; }
.apr-blocks { display: flex; flex-direction: column; gap: 10px; }
.apr-block { padding: 10px 12px; border-radius: var(--r-s); background: var(--fill3); }
.apr-block-text { font-size: 15px; line-height: 1.45; white-space: pre-wrap; }
.apr-more { font-size: 13px; color: var(--label2); padding: 0 4px; }
.apr-media { border-radius: var(--r); overflow: hidden; background: #000; }
.apr-media video, .apr-media img { width: 100%; max-height: 60vh; object-fit: contain; display: block; margin: 0 auto; }
.apr-media-generic { background: var(--fill3); padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--label2); }
.apr-preview-err { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--orange); font-size: 14px; }
.apr-thread { display: flex; flex-direction: column; gap: 14px; }
.apr-thread-empty { padding: 4px 0; }
.apr-msg { display: flex; gap: 10px; align-items: flex-start; }
.apr-msg-body { flex: 1; min-width: 0; }
.apr-msg-head { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.apr-msg-name { font-size: 14px; font-weight: 600; }
.apr-msg-time { font-size: 12px; color: var(--label3); }
.apr-msg-del { width: 36px; height: 36px; margin: -6px 0 -6px auto; color: var(--label3); opacity: 0; transition: opacity .15s; }
.apr-msg:hover .apr-msg-del, .apr-msg-del:focus-visible { opacity: 1; }
@media (hover: none) { .apr-msg-del { opacity: 1; } }
.apr-msg-text { font-size: 15px; line-height: 1.45; padding: 8px 12px; border-radius: 4px 14px 14px 14px; background: var(--fill3); margin-top: 2px; }
.apr-msg.mine .apr-msg-text { background: var(--tint-soft); }
.apr-compose { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.apr-compose .textarea { min-height: 64px; }
.apr-row-comment { font-size: 12px; color: var(--label3); margin-top: 2px; }
@media (min-width: 900px) { .apr-hook-text { font-size: 15px; } .apr-block-text, .apr-msg-text { font-size: 14px; } .apr-msg-name { font-size: 13px; } }


/* ===== módulo: hoje ===== */
/* ---------- módulo hoje ---------- */
.hoje-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 5px; }
.hoje-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hoje-actions .btn { height: auto; flex-direction: column; gap: 6px; padding: 12px 6px; font-size: 13px; line-height: 1.2; white-space: normal; text-align: center; border-radius: 14px; }
.hoje-actions .btn .ic { width: 22px; height: 22px; }
.hoje-stat { cursor: pointer; border-radius: var(--r-l); transition: transform .2s var(--spring); }
.hoje-stat:active { transform: scale(.97); }
.hoje-act .rt { font-size: 14px; white-space: normal; line-height: 1.35; }
.hoje-act .rt b { font-weight: 600; }
@media (min-width: 900px) { .hoje-act .rt { font-size: 13px; } }


/* ===== módulo: marca-ajustes ===== */
/* ---------- posicionamento ---------- */
.pos-block { display: flex; flex-direction: column; gap: 4px; }
.pos-block + .pos-block, .pos-statement + .pos-block, .pos-aud .pos-block { margin-top: 14px; }
.pos-label { font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--label2); }
.pos-text { font-size: 16px; line-height: 1.45; }
.pos-statement { margin-top: 16px; padding: 12px 14px; border-left: 3px solid var(--tint); border-radius: 0 var(--r) var(--r) 0; background: var(--tint-soft); font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -.1px; }
.pos-quote { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.2px; }
.pos-chip, .idn-chip, .gui-chip { cursor: default; color: var(--label); }
.pos-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--fill3); }
.pos-bar span { display: block; height: 100%; min-width: 4px; transition: width .4s var(--ease); }
.pos-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: var(--label2); }
.pos-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pos-legend b { color: var(--label); font-variant-numeric: tabular-nums; }
.pos-pillar { position: relative; overflow: hidden; padding-left: 22px; }
.pos-pillar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--pc, var(--tint)); }
.pos-pillar .ph, .pos-aud .ph { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pos-pillar .share { font-size: 22px; font-weight: 700; letter-spacing: -.4px; color: var(--pc, var(--tint-text)); font-variant-numeric: tabular-nums; flex: none; }
.pos-aud .pct { font-size: 22px; font-weight: 700; letter-spacing: -.4px; color: var(--tint-text); font-variant-numeric: tabular-nums; flex: none; }
.pos-journey { display: flex; flex-direction: column; }
.pos-jitem { display: grid; grid-template-columns: 28px 1fr; gap: 0 12px; padding-bottom: 18px; position: relative; }
.pos-jitem:last-child { padding-bottom: 0; }
.pos-jitem::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 0; width: 2px; background: var(--sep); }
.pos-jitem:last-child::before { display: none; }
.pos-jitem .mk { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--on-tint); flex: none; }
.pos-jitem .mk.down { background: var(--red); color: #fff; }
.pos-jitem .yr { font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--label3); }
.pos-phase .n { width: 32px; height: 32px; border-radius: 50%; background: var(--tint); color: var(--on-tint); display: grid; place-items: center; font-weight: 700; flex: none; }
.pos-items { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pos-items li { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; line-height: 1.4; }
.pos-items li .ic { color: var(--tint-text); margin-top: 2px; flex: none; }
.pos-gate { margin-top: 12px; padding: 9px 12px; border-radius: 10px; background: var(--fill3); font-size: 13px; color: var(--label2); display: flex; gap: 8px; align-items: center; line-height: 1.35; }
.pos-gate .ic { color: var(--tint-text); flex: none; }
.pos-gate b { color: var(--label); font-weight: 600; }
@media (min-width: 900px) { .pos-text { font-size: 14px; } .pos-statement { font-size: 15px; } .pos-quote { font-size: 18px; } .pos-items li { font-size: 14px; } }

/* ---------- identidade ---------- */
.idn-bio-head { display: flex; align-items: center; gap: 14px; }
.idn-ring { width: 72px; height: 72px; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, var(--tint), var(--tint-strong)); flex: none; display: grid; place-items: center; }
.idn-ring img, .idn-ring .idn-ini { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg-elev); }
.idn-ring .idn-ini { display: grid; place-items: center; background: var(--tint-soft); color: var(--tint-text); font-weight: 700; font-size: 20px; }
.idn-lines { margin-top: 14px; font-size: 15px; line-height: 1.45; }
.idn-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--blue); }
.idn-hl { display: flex; gap: 14px; margin-top: 16px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.idn-hl::-webkit-scrollbar { display: none; }
.idn-hi { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; width: 64px; }
.idn-hi .c { width: 58px; height: 58px; border-radius: 50%; border: 2px solid var(--tint); display: grid; place-items: center; color: var(--tint-text); background: var(--bg-elev2); }
.idn-hi .t { font-size: 11px; font-weight: 500; color: var(--label2); text-align: center; white-space: nowrap; }
.idn-swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .idn-swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.idn-swb { height: 96px; display: flex; align-items: flex-end; padding: 10px 12px; font-size: 12px; font-weight: 600; letter-spacing: .3px; }
.idn-swm { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.idn-copy { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; height: 28px; padding: 0 10px; border-radius: 8px; background: var(--fill3); color: var(--tint-text); font-size: 12px; font-weight: 600; align-self: flex-start; transition: background .15s, transform .2s var(--spring); }
.idn-copy:active { transform: scale(.95); }
.idn-copy:hover { background: var(--tint-soft); }
.idn-aa { font-size: 17px; line-height: 1; color: var(--label); }
@media (min-width: 900px) { .idn-lines { font-size: 14px; } .idn-link { font-size: 14px; } }

/* ---------- guia de gravação ---------- */
.gui-svg { width: 100%; max-width: 220px; height: auto; display: block; margin: 0 auto; }
.gui-svg.wide { max-width: 360px; }
.gui-fig { display: grid; place-items: center; }
.gui-split { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 760px) { .gui-split { grid-template-columns: minmax(200px, 1fr) 2fr; align-items: start; } }
.gui-kit { display: flex; gap: 12px; align-items: flex-start; }
.gui-kit .ri, .gui-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--tint-soft); color: var(--tint-text); flex: none; }
.gui-chk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; }
.gui-flow { display: flex; flex-direction: column; }
.gui-step { display: grid; grid-template-columns: 30px 1fr; gap: 0 12px; padding-bottom: 18px; position: relative; }
.gui-step:last-child { padding-bottom: 0; }
.gui-step::before { content: ""; position: absolute; left: 14px; top: 32px; bottom: 0; width: 2px; background: var(--sep); }
.gui-step:last-child::before { display: none; }
.gui-step .n { width: 30px; height: 30px; border-radius: 50%; background: var(--tint); color: var(--on-tint); display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }

/* ---------- ajustes ---------- */
.cfg-profile { display: flex; align-items: center; gap: 14px; }
.cfg-inline { display: flex; gap: 8px; align-items: stretch; }
.cfg-inline .input { flex: 1; min-width: 0; }
.cfg-inline .btn { flex: none; height: auto; }
.cfg-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--tint); color: #fff; flex: none; }
.cfg-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; }
.cfg-toggle-row .rt { font-size: 16px; }
@media (min-width: 900px) { .cfg-toggle-row .rt { font-size: 14px; } }
.cfg-foot { text-align: center; font-size: 12px; color: var(--label3); padding: 8px 0 4px; }