:root {
  --bg: #0b0d10; --bg2: #0f1216; --panel: #14171c; --panel2: #1a1e24; --hover: #20252c; --line: #252a32; --line2: #2f353f;
  --text: #eef1f5; --muted: #8b93a1; --accent: #b5d334; --accent-2: #9fbd22; --accent-ink: #0b0d10; --accent-soft: rgba(181, 211, 52, .12);
  --bad: #ff5d63; --ok: #34d17c; --warn: #ffb224; --blue: #4ea1ff; --violet: #a68bff;
  --r: 14px; --r-sm: 10px; --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.25);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
h1, h2 { margin: 0; letter-spacing: -.01em; }
svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--muted); } .small { font-size: 13px; } .mono { font-family: ui-monospace, "JetBrains Mono", Consolas, monospace; letter-spacing: .02em; }
.hide { display: none !important; }

/* Controls */
label { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); margin: 14px 0 6px; }
input, select, textarea { width: 100%; height: 42px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line2); background: var(--bg2); color: var(--text); font: inherit; outline: none; transition: border-color .15s, box-shadow .15s; }
textarea { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); vertical-align: middle; }
input.color { width: 64px; padding: 4px; cursor: pointer; }
select { appearance: none; 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='%238b93a1' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
.field { position: relative; display: flex; align-items: center; }
.field svg { position: absolute; left: 12px; color: var(--muted); width: 16px; height: 16px; pointer-events: none; }
.field input { padding-left: 38px; }
.field.grow { flex: 1; }
label.check { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 14px; }

button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-sm); border: 1px solid var(--line2); background: var(--panel2); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, transform .05s; }
button:hover { background: var(--hover); border-color: #3a414c; }
button:active { transform: translateY(1px); }
button svg { width: 16px; height: 16px; }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
button.ghost, .btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
button.ghost:hover, .btn.ghost:hover { background: var(--panel2); color: var(--text); }
button.danger { color: var(--bad); }
button.danger:hover { background: rgba(255,93,99,.1); border-color: rgba(255,93,99,.4); }
button.sm, .btn.sm { height: 32px; padding: 0 12px; font-size: 13px; }
button.lg { height: 44px; padding: 0 22px; }
button.block { width: 100%; }
button:disabled { opacity: .55; cursor: default; }
.icon-btn { width: 40px; padding: 0; }

/* Login */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-side { position: relative; padding: 56px; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(1200px 600px at -10% 110%, rgba(181,211,52,.18), transparent 60%), radial-gradient(800px 500px at 110% -10%, rgba(78,161,255,.10), transparent 60%), var(--bg2); border-right: 1px solid var(--line); overflow: hidden; }
.auth-side::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.auth-side > * { position: relative; z-index: 1; max-width: 480px; }
.auth-logo { height: 54px; width: auto; margin-bottom: 40px; align-self: flex-start; }
.auth-side h1 { font-size: 40px; line-height: 1.1; font-weight: 800; margin-bottom: 14px; }
.auth-side p { color: var(--muted); font-size: 16px; margin: 0 0 28px; }
.auth-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.auth-points li { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.auth-points svg { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.auth-main { display: grid; place-items: center; padding: 32px 20px; }
.auth-card { width: 100%; max-width: 380px; }
.auth-card h2 { font-size: 26px; font-weight: 700; }
.auth-card > p.muted { margin: 6px 0 10px; }
.auth-logo-sm { display: none; height: 40px; margin-bottom: 28px; }
.auth-foot { margin-top: 22px; color: var(--muted); font-size: 13px; text-align: center; }

/* Shell */
.shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--bg2); border-right: 1px solid var(--line); padding: 18px 14px; }
.side-brand { padding: 4px 8px 20px; } .side-brand img { height: 34px; width: auto; }
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.nav-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #5f6775; padding: 16px 10px 6px; }
.nav button { justify-content: flex-start; height: 40px; border: 0; background: transparent; color: var(--muted); font-weight: 500; padding: 0 12px; }
.nav button:hover { background: var(--panel2); color: var(--text); }
.nav button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav button svg { width: 18px; height: 18px; }
.side-foot { border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 10px; }
.me { display: flex; align-items: center; gap: 10px; padding: 0 6px; min-width: 0; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 800; flex: 0 0 auto; }
.me-txt { min-width: 0; } .me-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .me-role { font-size: 12px; color: var(--muted); }
.side-foot button { justify-content: flex-start; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 14px; padding: 18px 32px; background: rgba(11,13,16,.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar h1 { font-size: 20px; font-weight: 700; }
.topbar .sp { flex: 1; }
.menu-btn { display: none; }
.credit-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-weight: 600; border: 1px solid rgba(181,211,52,.25); }
.content { padding: 28px 32px 48px; max-width: 1760px; width: 100%; }
.backdrop { display: none; }

/* Cards */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; margin-bottom: 20px; box-shadow: var(--shadow); }
.card.narrow { max-width: 720px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.card-head h2 { font-size: 16px; font-weight: 700; }
.card-head p { margin: 4px 0 0; max-width: 720px; }
.card h3 { font-size: 15px; margin: 22px 0 8px; }
.stats { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin-bottom: 20px; }
.stat-card { display: flex; align-items: center; gap: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow); }
.stat-ico { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; }
.stat-ico svg { width: 22px; height: 22px; }
.stat-ico.lime { background: var(--accent-soft); color: var(--accent); } .stat-ico.blue { background: rgba(78,161,255,.12); color: var(--blue); } .stat-ico.violet { background: rgba(166,139,255,.12); color: var(--violet); }
.stat-label { color: var(--muted); font-size: 13px; font-weight: 500; }
.stat-val { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.grid2 { display: grid; gap: 20px; grid-template-columns: minmax(320px, 420px) 1fr; align-items: start; }
.form-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.form-row > div { flex: 0 0 auto; } .form-row > .f-grow { flex: 1 1 220px; }
.form-grid { display: grid; gap: 0 16px; grid-template-columns: repeat(3, 1fr); }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.toolbar { display: flex; gap: 10px; margin-bottom: 14px; }
.stat-hint { color: var(--muted); font-size: 12px; margin-top: 2px; }
.hint { color: var(--muted); font-size: 12.5px; margin: 6px 0 0; line-height: 1.45; }
.video-prev { max-width: 320px; width: 100%; border-radius: 10px; background: #000; margin-bottom: 8px; }
.link-box { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.link-box input { flex: 1; min-width: 220px; }
.pill.current { background: rgba(181, 211, 52, .18); color: var(--primary, #b5d334); }
.info { color: var(--muted); font-size: 13px; margin: 14px 0 8px; }
.info:empty { display: none; }
.upload { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px dashed var(--line2); border-radius: var(--r-sm); background: var(--bg2); }
.upload input[type=file] { height: auto; border: 0; padding: 0; background: transparent; }
.logo-prev { height: 52px; max-width: 200px; object-fit: contain; background: var(--panel2); border-radius: 8px; padding: 6px; }

/* Tables */
.tbl { overflow-x: auto; margin: 0 -22px; padding: 0 22px; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:hover td { background: rgba(255,255,255,.015); }
tbody tr:last-child td { border-bottom: 0; }
td.empty { text-align: center; color: var(--muted); padding: 36px 12px; }
table.edit td { padding: 8px 6px; } table.edit input, table.edit select { height: 36px; }
table.edit td button { height: 34px; }

.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--panel2); color: var(--muted); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.trial { color: var(--warn); background: rgba(255,178,36,.1); } .pill.active { color: var(--ok); background: rgba(52,209,124,.1); } .pill.expired, .pill.blocked { color: var(--bad); background: rgba(255,93,99,.1); }

.seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; margin: 10px 0 4px; }
.seg button { height: 34px; border: 0; background: transparent; color: var(--muted); }
.seg button.on { background: var(--panel2); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.3); }

#toast { position: fixed; right: 24px; bottom: 24px; transform: translateY(16px); opacity: 0; pointer-events: none; background: var(--panel2); border: 1px solid var(--line2); border-left: 1px solid var(--line); padding: 12px 18px; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.4); transition: .2s; z-index: 50; max-width: min(420px, 90vw); font-weight: 500; }
#toast.show { opacity: 1; transform: none; } #toast.bad { border-left-color: var(--bad); }

/* Public activation page */
.public { max-width: 560px; margin: 0 auto; padding: 40px 16px; }
.public .logo { height: 52px; width: auto; display: block; margin: 0 auto 10px; }
.public .lead { text-align: center; color: var(--muted); margin: 0 0 24px; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); } .list-item:last-child { border-bottom: 0; }
.list-item > div { flex: 1; min-width: 0; }

@media (max-width: 1100px) { .grid2 { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; } .auth-side { display: none; } .auth-logo-sm { display: block; }
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; left: 0; top: 0; z-index: 40; width: 260px; transform: translateX(-100%); transition: transform .2s; }
  .shell.nav-open .side { transform: none; }
  .shell.nav-open .backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 30; }
  .menu-btn { display: inline-flex; }
  .topbar { padding: 14px 16px; } .content { padding: 20px 16px 40px; }
  .stats { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; }
  .credit-chip { display: none; }
  .tbl { margin: 0 -22px; }
}

/* ---------- Meu app (APK) ---------- */
.apk-sum { display: flex; gap: 20px; align-items: center; margin: 4px 0 18px; }
.apk-icon { width: 88px; height: 88px; border-radius: 20px; background: var(--bg); border: 1px solid var(--line); display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; }
.apk-icon img { max-width: 76px; max-height: 76px; object-fit: contain; }
.apk-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; flex: 1; min-width: 0; }
.apk-meta div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.apk-meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.btn { text-decoration: none; }
a.btn svg { width: 16px; height: 16px; }
a.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
a.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
@media (max-width: 720px) { .apk-sum { flex-direction: column; align-items: flex-start; } .apk-meta { grid-template-columns: 1fr; } }

/* Minha marca: form + preview */
.brand-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); align-items: start; }
.pv-card { position: sticky; top: 16px; }
@media (max-width: 1100px) { .brand-grid { grid-template-columns: minmax(0, 1fr); } .pv-card { position: static; } }
.logo-prev.sq { width: 52px; height: 52px; padding: 0; object-fit: cover; border-radius: 12px; }
.hint.warn { color: #f5a524; }
.crop { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; padding: 14px; border: 1px solid var(--line2); border-radius: var(--r-sm); background: var(--bg2); }
.crop-stage { width: 300px; max-width: 100%; aspect-ratio: 1; }
.crop-stage canvas { width: 100%; height: 100%; border-radius: 10px; cursor: grab; touch-action: none; background: #000; }
.crop-side { flex: 1; min-width: 200px; }
.crop-side input[type=range] { height: auto; padding: 0; border: 0; background: transparent; accent-color: var(--accent); }
.pv-bg { background: #090b0e; }
.tv { border: 6px solid #1d2128; border-radius: 10px; background: #000; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.tv-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
.pv-open-logo { width: 42%; max-height: 40%; object-fit: contain; }
.pv-open-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.pv-open { background-size: cover; background-position: center; }
.logo-prev.wide { width: 96px; height: 54px; padding: 0; object-fit: cover; border-radius: 6px; }
.phone { width: 230px; margin: 10px auto 0; border: 7px solid #1d2128; border-radius: 28px; overflow: hidden; }
.phone-screen { aspect-ratio: 9 / 15; background: linear-gradient(160deg, #3a4a7a, #7a3d6b 55%, #c2734a); padding: 22px 14px; }
.pv-apps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 10px; }
.pv-app { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); text-align: center; }
.pv-app.ghost { opacity: .55; }
.pv-ico { width: 62px; height: 62px; overflow: hidden; background: #090b0e; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.pv-ico.circle { border-radius: 50%; } .pv-ico.squircle { border-radius: 24%; }
.pv-ico.dummy { background: rgba(255,255,255,.35); }
.pv-ico img { width: 100%; height: 100%; object-fit: cover; }
.pv-ico img.logo-mode { width: 62%; height: 62%; object-fit: contain; }
.pv-name { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-banner { width: 240px; aspect-ratio: 16 / 9; border-radius: 8px; display: flex; align-items: center; justify-content: center; outline: 3px solid #fff; outline-offset: 2px; }
.pv-banner img { width: 80%; height: 80%; object-fit: contain; }
.home-mock { flex-direction: column; align-items: stretch; justify-content: flex-start; font-size: 9px; color: #eef1f5; }
.hm-head { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid #1c2027; }
.hm-logo { height: 14px; width: 56px; object-fit: contain; object-position: left; }
.hm-tab { color: #8b93a1; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.hm-tab.on { color: #eef1f5; border-color: var(--pv, #b5d334); }
.hm-hero { margin: 8px 10px; flex: 1; border-radius: 6px; background: linear-gradient(90deg, rgba(9,11,14,.95) 30%, rgba(9,11,14,.2)), linear-gradient(120deg, #2b3a55, #5a2e48); display: flex; align-items: flex-end; padding: 10px; }
.hm-hero b { display: block; font-size: 12px; margin-bottom: 6px; }
.hm-btn { display: inline-block; background: var(--pv, #b5d334); color: #0b0d10; font-weight: 700; padding: 3px 9px; border-radius: 4px; }
.hm-row { display: flex; gap: 6px; padding: 0 10px 10px; } .hm-row i { flex: 1; aspect-ratio: 2 / 3; border-radius: 4px; background: #1a1e24; }
.home-mock.dim::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.65); }
.msg-mock { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 62%; background: #14171c; border: 1px solid #252a32; border-radius: 8px; padding: 10px 12px; font-size: 9.5px; }
.msg-mock p { margin: 6px 0 8px; color: #c9ced6; } .msg-mock .hm-btn { float: right; }
.msg-head { display: flex; align-items: center; gap: 6px; } .msg-bell { width: 18px; height: 18px; border-radius: 50%; background: var(--pv, #b5d334); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; }
#pvTabs { flex-wrap: wrap; max-width: 100%; } @media (max-width: 500px) { #pvTabs button { padding-left: 10px; padding-right: 10px; } }

/* Payments */
.credit-chip { cursor: pointer; }
.pkg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 14px; }
.pkg { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; height: auto; padding: 16px; text-align: left; white-space: normal; border-radius: var(--r); }
.pkg b { font-size: 22px; } .pkg .pkg-name { color: var(--muted); font-size: 13px; font-weight: 500; } .pkg .pkg-price { margin-top: 8px; font-size: 16px; color: var(--accent); }
.pkg.on, .pay-method.on { border-color: var(--accent); background: var(--accent-soft); }
.pay-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 10px 0 16px; }
.pay-method { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; height: auto; padding: 14px 16px; text-align: left; white-space: normal; }
.pay-method span { color: var(--muted); font-weight: 500; font-size: 13px; }
.pix { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.pix-qr { background: #fff; padding: 12px; border-radius: var(--r); line-height: 0; }
.pix-qr img { width: 220px; height: 220px; }
.pix-info { flex: 1; min-width: 240px; }
.pix-info textarea { min-height: 84px; font-size: 12px; word-break: break-all; }
.pix-warn { margin-top: 12px; padding: 10px 12px; border-radius: var(--r-sm); background: rgba(255,178,36,.1); color: var(--warn); font-size: 13px; }
.pill.review { color: var(--blue); background: rgba(78,161,255,.12); } .pill.pending { color: var(--warn); background: rgba(255,178,36,.1); }
.pill.paid { color: var(--ok); background: rgba(52,209,124,.1); } .pill.rejected, .pill.canceled { color: var(--bad); background: rgba(255,93,99,.1); }
.card-head:has(#payFilter) { flex-wrap: wrap; gap: 10px; } #payFilter { max-width: 100%; flex-wrap: wrap; }

/* Profile avatar slots in "Minha marca" */
.av-slots { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 4px; }
.av-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; }
.av-slot img { width: 72px; height: 72px; object-fit: cover; border-radius: 14px; background: var(--panel2); border: 2px solid transparent; }
.av-slot.custom img { border-color: var(--accent, #b5d334); }
.av-slot label.btn { cursor: pointer; margin: 0; }
.av-slot input { display: none; }

/* ---------- Premium ---------- */
.nav button .lock { margin-left: auto; width: 14px; height: 14px; opacity: .6; }
.premium-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 20px; border-radius: var(--r); border: 1px solid rgba(255,178,36,.35); background: linear-gradient(90deg, rgba(255,178,36,.12), rgba(255,178,36,.03)); }
.premium-bar.on { border-color: rgba(181,211,52,.35); background: linear-gradient(90deg, rgba(181,211,52,.12), rgba(181,211,52,.03)); }
.premium-bar svg { width: 22px; height: 22px; color: var(--warn); flex: 0 0 auto; }
.premium-bar.on svg { color: var(--accent); }
.premium-bar .sp { flex: 1; }
.lock-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 20px; border-radius: var(--r); border: 1px solid rgba(255,178,36,.35); background: rgba(255,178,36,.08); }
.lock-banner svg { width: 22px; height: 22px; color: var(--warn); flex: 0 0 auto; }
.lock-banner .sp { flex: 1; }
section.locked .card { opacity: .62; }
section.locked .card :is(input, select, textarea, button):not(.keep) { pointer-events: none; }
.ico-inline { width: 18px; height: 18px; vertical-align: -3px; color: var(--accent); }
.prem-list { margin: 12px 0 4px; padding-left: 20px; line-height: 1.8; color: var(--text); }
.pill.premium { color: var(--accent); background: var(--accent-soft); }
.req { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; }
.req span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; font-size: 12.5px; background: var(--panel2); }
.req span.ok { color: var(--ok); background: rgba(52,209,124,.1); }
.req span.no { color: var(--bad); background: rgba(255,93,99,.1); }
.test-out { margin-top: 14px; padding: 14px 16px; border-radius: var(--r-sm); border: 1px solid var(--line2); background: var(--bg2); line-height: 1.7; }
.test-out.ok { border-color: rgba(52,209,124,.4); }
.test-out.bad { border-color: rgba(255,93,99,.4); }
.test-out b.big { font-size: 15px; }

/* ---------- Início numbers, activity, devices pager (2026-10-31) ---------- */
.stats.stats4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1300px) { .stats.stats4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .stats.stats4 { grid-template-columns: 1fr; } }
.stat-card .grow { flex: 1; min-width: 0; }
.stat-of { font-size: 16px; color: var(--muted); font-weight: 600; }
.stat-ico.green { background: rgba(52,209,124,.12); color: var(--ok); }
.meter { height: 5px; border-radius: 99px; background: var(--panel2); margin-top: 8px; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: var(--ok); border-radius: 99px; transition: width .4s; }
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(52,209,124,.6); animation: livePulse 2s infinite; vertical-align: middle; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(52,209,124,.5); } 70% { box-shadow: 0 0 0 8px rgba(52,209,124,0); } 100% { box-shadow: 0 0 0 0 rgba(52,209,124,0); } }
.grid2.even { grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px) { .grid2.even { grid-template-columns: 1fr; } }
.feed { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow: auto; }
.feed-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); }
.feed-item .ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--panel2); color: var(--muted); }
.feed-item .ico svg { width: 16px; height: 16px; }
.feed-item.warn .ico { color: var(--warn); background: rgba(255,178,36,.1); } .feed-item.critical .ico { color: var(--bad); background: rgba(255,93,99,.1); }
.feed-item b { font-weight: 600; } .feed-item .when { margin-left: auto; white-space: nowrap; color: var(--muted); font-size: 12px; }
.feed-empty { color: var(--muted); text-align: center; padding: 28px 8px; font-size: 13px; }
.sev { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.sev.info { color: var(--blue); background: rgba(78,161,255,.12); } .sev.warn { color: var(--warn); background: rgba(255,178,36,.12); } .sev.critical { color: var(--bad); background: rgba(255,93,99,.12); }
.pill.nolist { color: var(--warn); background: rgba(255,178,36,.1); } .pill.haslist { color: var(--muted); }
.online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-right: 6px; vertical-align: middle; }
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; color: var(--muted); font-size: 13px; }
.pager button { height: 32px; }
.page-sum { margin: 6px 0 8px; }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 12px; align-items: end; margin-bottom: 14px; }
.filters label { margin-top: 0; }
.filters-btns { display: flex; gap: 8px; }
.where { font-size: 12px; color: var(--muted); max-width: 220px; }

/* Stage 2: domains, sub-reseller limits, categories */
.lim-row td { background: var(--panel2, rgba(255,255,255,.02)); }
.lim-box { padding: 6px 4px; }
.chk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 16px; margin-top: 6px; }
.ct-sum { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 10px; font-size: 13px; color: var(--muted); }
.ct-tbl { max-height: 420px; overflow: auto; margin-top: 10px; }
.ct-tbl input[type=checkbox] { width: 18px; height: 18px; }
.ct-tbl thead th { position: sticky; top: 0; background: var(--bg2); z-index: 1; }

/* Stage 3: tickets, account sessions, API usage */
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: #0b0d10; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.tk-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; }
.tk-head h2 { margin: 0 0 4px; }
.tk-msgs { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; }
.tk-msg { max-width: 78%; padding: 12px 14px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line); white-space: pre-wrap; word-break: break-word; }
.tk-msg.admin { align-self: flex-start; border-color: var(--accent-soft); }
.tk-msg.reseller { align-self: flex-end; }
.tk-msg.mine { background: var(--accent-soft); }
.tk-msg .meta { font-size: 12px; color: var(--muted); margin-bottom: 6px; white-space: normal; }
.pill.open { color: #f5b74a; } .pill.answered { color: var(--accent); } .pill.closed { color: var(--muted); }
.ss-cur { font-size: 11px; font-weight: 700; color: var(--accent); margin-left: 6px; }
.usage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; height: 160px; margin: 6px 0 18px; }
.usage .bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; font-size: 12px; color: var(--muted); }
.usage .col { width: 100%; max-width: 44px; border-radius: 6px 6px 2px 2px; background: var(--accent); position: relative; min-height: 2px; overflow: hidden; }
.usage .col .err { position: absolute; left: 0; right: 0; bottom: 0; background: #e5534b; }
.usage .num { color: var(--text); font-weight: 600; }
@media (max-width: 700px) { .tk-msg { max-width: 92%; } .usage { gap: 4px; } }

/* =====================================================================
   Design v2 (2026-10-31): neutral, shadcn-style look.
   Zinc greys, thin borders, quiet type; the FuriaPlay lime only for small accents.
   Everything below overrides the older rules above.
   ===================================================================== */
:root {
  --bg: #09090b; --bg2: #09090b; --panel: #0c0c0e; --panel2: #18181b; --hover: #1f1f23; --line: #27272a; --line2: #27272a;
  --text: #fafafa; --muted: #a1a1aa; --faint: #71717a;
  --accent: #b5d334; --accent-2: #a3c02a; --accent-ink: #09090b; --accent-soft: rgba(181, 211, 52, .10);
  --fg-btn: #fafafa; --fg-btn-ink: #09090b;
  --bad: #f87171; --ok: #4ade80; --warn: #fbbf24; --blue: #60a5fa; --violet: #a78bfa;
  --r: 12px; --r-sm: 8px; --shadow: none;
}
html, body { font: 14px/1.5 Archivo, Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: -.006em; font-feature-settings: normal; }
.mono { font-family: "Geist Mono", ui-monospace, "JetBrains Mono", Consolas, monospace; letter-spacing: 0; font-size: .95em; }
h1, h2, h3 { letter-spacing: -.02em; }
a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; } a:hover { text-decoration-color: var(--muted); }

/* Controls */
label { font-size: 13px; font-weight: 500; color: var(--text); margin: 16px 0 6px; }
input, select, textarea { height: 36px; border-radius: var(--r-sm); border-color: var(--line); background: transparent; font-size: 14px; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus { border-color: #52525b; box-shadow: 0 0 0 3px rgba(161,161,170,.18); }
select option { background: var(--panel2); }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--fg-btn); }
select { 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='%23a1a1aa' stroke-width='2'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E"); }
.hint { color: var(--muted); font-size: 12.5px; }

button, .btn { height: 36px; padding: 0 14px; border-radius: var(--r-sm); border-color: var(--line); background: transparent; font-weight: 500; font-size: 14px; }
button:hover { background: var(--panel2); border-color: var(--line); }
button:active { transform: none; }
button.primary, a.btn.primary { background: var(--fg-btn); color: var(--fg-btn-ink); border-color: var(--fg-btn); }
button.primary:hover, a.btn.primary:hover { background: #e4e4e7; border-color: #e4e4e7; }
button.ghost { color: var(--muted); }
button.ghost:hover, .btn.ghost:hover { background: var(--panel2); color: var(--text); }
button.danger { color: var(--bad); border-color: var(--line); }
button.danger:hover { background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.35); }
button.sm, .btn.sm { height: 32px; padding: 0 12px; font-size: 13px; }
button.lg { height: 40px; padding: 0 20px; }
.icon-btn { width: 36px; }

/* Shell */
.shell { grid-template-columns: 252px 1fr; }
.side { background: #0b0b0d; border-right: 1px solid var(--line); padding: 16px 12px; }
.side-brand { padding: 4px 10px 18px; } .side-brand img { height: 28px; }
.nav { gap: 1px; }
.nav-label { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--faint); padding: 18px 10px 6px; }
.nav button { flex: none; height: 34px; padding: 0 10px; gap: 10px; border-radius: 6px; font-size: 14px; font-weight: 450; color: var(--muted); }
.nav button svg { width: 16px; height: 16px; opacity: .9; }
.nav button:hover { background: var(--panel2); color: var(--text); }
.nav button.on { background: var(--panel2); color: var(--text); font-weight: 500; box-shadow: inset 2px 0 0 var(--accent); }
.nav-badge { background: var(--fg-btn); color: var(--fg-btn-ink); min-width: 18px; height: 18px; font-size: 11px; font-weight: 600; }
.side-foot { padding-top: 12px; gap: 6px; }
.avatar { width: 32px; height: 32px; background: var(--panel2); color: var(--text); border: 1px solid var(--line); font-weight: 600; font-size: 13px; }
.me-name { font-size: 13.5px; font-weight: 500; } .me-role { color: var(--faint); }
.side-foot button { height: 34px; color: var(--muted); }

.topbar { padding: 14px 32px; background: rgba(9,9,11,.8); border-bottom: 1px solid var(--line); }
.topbar h1 { font-size: 17px; font-weight: 600; }
.topbar .muted { font-size: 13px; }
.credit-chip { height: 32px; padding: 0 12px; border-radius: var(--r-sm); background: transparent; color: var(--text); border: 1px solid var(--line); font-weight: 500; font-size: 13px; }
.credit-chip svg { color: var(--accent); width: 16px; height: 16px; }
.credit-chip:hover { background: var(--panel2); }
.content { padding: 28px 32px 56px; max-width: 1760px; }

/* Cards */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; margin-bottom: 20px; box-shadow: none; }
.card-head { margin-bottom: 8px; }
.card-head h2 { font-size: 15px; font-weight: 600; }
.card-head p { font-size: 13.5px; color: var(--muted); }
.card h3 { font-size: 14px; font-weight: 600; margin: 24px 0 8px; }

/* Stat cards: label + small icon on top, big number below */
.stats { gap: 16px; }
.stat-card { position: relative; display: block; padding: 20px 22px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: none; }
.stat-ico, .stat-ico.lime, .stat-ico.blue, .stat-ico.violet, .stat-ico.green { position: absolute; top: 18px; right: 18px; width: auto; height: auto; background: none; color: var(--faint); }
.stat-ico svg { width: 16px; height: 16px; }
.stat-label { font-size: 13px; font-weight: 500; color: var(--muted); padding-right: 28px; }
.stat-val { font-size: 30px; font-weight: 600; letter-spacing: -.03em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.stat-of { font-size: 15px; font-weight: 500; color: var(--faint); }
.stat-hint { color: var(--faint); font-size: 12.5px; margin-top: 4px; }
.meter { height: 4px; background: var(--panel2); margin-top: 10px; }
.meter i { background: var(--accent); }
.live-dot { width: 8px; height: 8px; background: var(--ok); }

/* Tables */
.tbl { margin: 0 -24px; padding: 0 24px; }
th { font-size: 12.5px; font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0; padding: 10px 12px; border-bottom: 1px solid var(--line); }
td { padding: 11px 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
tbody tr:hover td { background: rgba(39,39,42,.35); }
td.empty { color: var(--faint); padding: 40px 12px; }

/* Badges: outlined, small */
.pill { height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 500; background: transparent; border: 1px solid var(--line); color: var(--muted); gap: 6px; }
.pill::before { width: 6px; height: 6px; }
.pill.trial, .pill.pending, .pill.nolist, .pill.open { color: var(--warn); background: transparent; border-color: rgba(251,191,36,.25); }
.pill.active, .pill.paid { color: var(--ok); background: transparent; border-color: rgba(74,222,128,.25); }
.pill.expired, .pill.blocked, .pill.rejected, .pill.canceled { color: var(--bad); background: transparent; border-color: rgba(248,113,113,.25); }
.pill.review { color: var(--blue); background: transparent; border-color: rgba(96,165,250,.25); }
.pill.answered, .pill.premium, .pill.current { color: var(--accent); background: transparent; border-color: rgba(181,211,52,.25); }
.pill.haslist, .pill.closed { color: var(--muted); }
.sev { padding: 1px 7px; border-radius: 6px; font-size: 11.5px; font-weight: 500; border: 1px solid var(--line); background: transparent; }
.sev.info { color: var(--blue); border-color: rgba(96,165,250,.25); background: transparent; }
.sev.warn { color: var(--warn); border-color: rgba(251,191,36,.25); background: transparent; }
.sev.critical { color: var(--bad); border-color: rgba(248,113,113,.25); background: transparent; }

/* Tabs (segmented) */
.seg { gap: 2px; padding: 3px; background: var(--panel2); border: 0; border-radius: 9px; }
.seg button { height: 30px; padding: 0 12px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
.seg button:hover { background: transparent; color: var(--text); }
.seg button.on { background: var(--bg); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px var(--line); }

/* Feed: a plain list with dividers */
.feed { gap: 0; }
.feed-item { padding: 12px 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.feed-item:last-child { border-bottom: 0; }
.feed-item .ico { width: 28px; height: 28px; border-radius: 50%; background: var(--panel2); border: 1px solid var(--line); color: var(--muted); }
.feed-item.warn .ico { background: var(--panel2); } .feed-item.critical .ico { background: var(--panel2); }
.feed-item b { font-weight: 500; } .feed-item .when { color: var(--faint); }

/* Banners */
.premium-bar, .lock-banner { border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); }
.premium-bar.on { border-color: var(--line); background: var(--panel); }
.premium-bar svg, .lock-banner svg { width: 18px; height: 18px; }
.req span { border: 1px solid var(--line); background: transparent; font-size: 12.5px; }
.req span.ok { background: transparent; border-color: rgba(74,222,128,.25); } .req span.no { background: transparent; border-color: rgba(248,113,113,.25); }
.test-out, .upload, .crop { background: transparent; border-color: var(--line); }
.info { color: var(--muted); }

/* Payments, packages */
.pkg, .pay-method { background: transparent; border-color: var(--line); border-radius: var(--r); }
.pkg:hover, .pay-method:hover { background: var(--panel2); }
.pkg.on, .pay-method.on { border-color: var(--fg-btn); background: var(--panel2); box-shadow: 0 0 0 1px var(--fg-btn); }
.pkg .pkg-price { color: var(--text); }
.pix-warn { background: transparent; border: 1px solid rgba(251,191,36,.25); }

/* Tickets, usage, misc */
.tk-msg { border-radius: var(--r); background: var(--panel2); border-color: var(--line); }
.tk-msg.mine { background: #1c1c20; border-color: #3f3f46; }
.tk-msg.admin { border-color: var(--line); }
.usage .col { background: #e4e4e7; border-radius: 4px 4px 0 0; }
.usage .col .err { background: var(--bad); }
.lim-row td { background: rgba(39,39,42,.25); }
.ct-tbl thead th { background: var(--panel); }
#toast { background: var(--panel2); border: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: 0 10px 30px rgba(0,0,0,.5); font-size: 13.5px; }
#toast::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: 10px; vertical-align: 1px; }
#toast.bad::before { background: var(--bad); }
.ico-inline { color: var(--accent); }

/* Login */
.auth-side { background: #0b0b0d; border-right: 1px solid var(--line); }
.auth-side::after { opacity: .12; }
.auth-side h1 { font-size: 34px; font-weight: 600; letter-spacing: -.03em; }
.auth-side p { font-size: 15px; }
.auth-points svg { width: 30px; height: 30px; padding: 7px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line); color: var(--accent); }
.auth-points li { font-weight: 400; color: var(--muted); }
.auth-card h2 { font-size: 22px; font-weight: 600; }

@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); } .side { padding: 16px 12px; }
  .topbar { padding: 12px 16px; } .content { padding: 20px 16px 40px; }
  .tbl { margin: 0 -24px; }
}
select { background-color: transparent; background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; padding-right: 32px; }
input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; padding: 0; margin: 0; border: 1px solid #52525b; border-radius: 4px; background: transparent; display: inline-grid; place-content: center; cursor: pointer; flex: none; box-shadow: none; }
input[type=checkbox]::after { content: ""; width: 9px; height: 5px; border: 2px solid var(--fg-btn-ink); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
input[type=checkbox]:checked { background: var(--fg-btn); border-color: var(--fg-btn); }
input[type=checkbox]:checked::after { opacity: 1; }
input[type=checkbox]:focus-visible { box-shadow: 0 0 0 3px rgba(161,161,170,.25); }

/* Sidebar v2.1: fits without a scrollbar; profile menu replaces the loose "Sair" button */
.side { overflow: visible; }
.nav { scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior: contain; }
.nav::-webkit-scrollbar { display: none; }
.nav button { height: 32px; }
.nav-label { padding: 14px 10px 4px; }
.nav-label:first-child { padding-top: 0; }
@media (max-height: 820px) and (min-width: 901px) {
  .side { padding-top: 12px; padding-bottom: 10px; } .side-brand { padding-bottom: 10px; }
  .nav button { height: 29px; font-size: 13.5px; } .nav-label { padding: 10px 10px 2px; font-size: 11.5px; }
}
.side-foot { position: relative; border-top: 1px solid var(--line); padding-top: 10px; display: block; }
.me { width: 100%; height: auto; padding: 8px; border: 0; border-radius: var(--r-sm); background: transparent; display: flex; align-items: center; gap: 10px; text-align: left; color: var(--text); font-weight: 400; }
.me:hover, .me[aria-expanded=true] { background: var(--panel2); }
.me .me-txt { flex: 1; min-width: 0; }
.me-role { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-chev { width: 16px; height: 16px; color: var(--faint); flex: none; }
.me-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 60; padding: 4px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.55); }
.me-menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.me-menu-head .me-name { font-size: 13.5px; } .me-menu-head .me-role { font-size: 12.5px; }
.me-menu button { width: 100%; height: 32px; padding: 0 10px; justify-content: flex-start; gap: 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font-size: 13.5px; font-weight: 400; }
.me-menu button svg { width: 16px; height: 16px; color: var(--muted); }
.me-menu button:hover { background: var(--hover); }
.me-menu .danger-item, .me-menu .danger-item svg { color: var(--bad); }
.me-menu-sep { height: 1px; background: var(--line); margin: 4px -4px; }
.avatar.lg { width: 48px; height: 48px; font-size: 18px; }
.acc-id { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.acc-name { font-size: 15px; font-weight: 600; }

/* File and colour inputs in the same quiet style */
input[type=file] { height: auto; padding: 0; border: 0; background: none; color: var(--muted); font-size: 13px; }
input[type=file]::file-selector-button { height: 32px; margin-right: 12px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel2); color: var(--text); font: 500 13px Archivo, Inter, system-ui, sans-serif; cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--hover); }
input[type=color] { padding: 3px; width: 56px; cursor: pointer; }
.toolbar { flex-wrap: wrap; }
.toolbar .grow { min-width: 200px; }

/* Phone layout */
@media (max-width: 700px) {
  .content { padding: 16px 12px 40px; }
  .card { padding: 18px 16px; border-radius: 10px; margin-bottom: 14px; }
  .card-head { flex-wrap: wrap; gap: 10px; }
  .card-head > div:first-child { flex: 1 1 100%; }
  .card-head .seg { max-width: 100%; overflow-x: auto; }
  .topbar { gap: 10px; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); }
  .topbar h1 { font-size: 16px; } .topbar #pageSub { display: none; }
  .credit-chip { height: 30px; padding: 0 10px; }
  .toolbar { gap: 8px; } .toolbar .grow { flex: 1 1 100%; min-width: 0; }
  .toolbar > select, .toolbar > button { flex: 1 1 auto; }
  .form-row { flex-direction: column; align-items: stretch; }
  .form-row > *, .form-row > .f-grow { width: 100%; flex: 0 0 auto; }
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg button { flex: none; }
  .stat-val { font-size: 26px; }
  /* Lists become stacked cards: each cell shows its column name on the left */
  .tbl { margin: 0; padding: 0; overflow: visible; }
  .tbl:not(.keep) table, .tbl:not(.keep) tbody { display: block; width: 100%; }
  .tbl:not(.keep) thead { display: none; }
  .tbl:not(.keep) tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .tbl:not(.keep) tr:last-child { border-bottom: 0; }
  .tbl:not(.keep) tbody tr:hover td { background: none; }
  .tbl:not(.keep) td { display: block; padding: 4px 0; border: 0; text-align: right; min-height: 26px; white-space: normal; overflow-wrap: anywhere; }
  .tbl:not(.keep) td::after { content: ""; display: block; clear: both; }
  .tbl:not(.keep) td::before { content: attr(data-label); float: left; font: 400 12.5px Archivo, Inter, system-ui, sans-serif; letter-spacing: 0; margin-right: 12px; color: var(--faint); font-size: 12.5px; line-height: 22px; text-align: left; }
  .tbl:not(.keep) td[data-label=""]::before, .tbl:not(.keep) td:not([data-label])::before { display: none; }
  .tbl:not(.keep) td:first-child { text-align: left; font-weight: 500; padding-bottom: 6px; }
  .tbl:not(.keep) td:first-child::before { display: none; }
  .tbl:not(.keep) td[data-label=""] { text-align: left; padding-top: 8px; }
  .tbl:not(.keep) td[data-label=""] > * { margin: 0 6px 6px 0; }
  .tbl:not(.keep) td[colspan] { display: block; text-align: left; }
  .tbl:not(.keep) td.empty { text-align: center; }
  .tbl.keep { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
  .tk-msg { max-width: 100%; }
  #toast { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
}

/* Modals */
body.modal-open { overflow: hidden; }
.modal-wrap { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 20px 32px; overflow-y: auto; background: rgba(0,0,0,.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: mFade .15s ease-out; }
.modal-wrap.hide { display: none; }
.modal { position: relative; width: 100%; max-width: 560px; padding: 28px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 64px rgba(0,0,0,.6); animation: mPop .18s cubic-bezier(.2,.8,.2,1); }
.modal.sm { max-width: 440px; }
.modal.lg { max-width: 920px; }
.modal-x { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; padding: 0; border: 0; color: var(--muted); z-index: 2; }
.modal-x svg { width: 16px; height: 16px; }
.modal-x:hover { color: var(--text); }
.modal-head { padding-right: 36px; margin-bottom: 8px; }
.modal-head h2 { font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.modal-head p { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 28px; }
.modal .card { border: 0; padding: 0; margin: 0; background: none; border-radius: 0; box-shadow: none; }
.modal .card-head { padding-right: 36px; }
.modal #tkHide { display: none; }
.modal .tbl { margin: 0; padding: 0; }
button.danger-solid { background: #dc2626; border-color: #dc2626; color: #fff; }
button.danger-solid:hover { background: #b91c1c; border-color: #b91c1c; }
.chk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 16px; }
@keyframes mFade { from { opacity: 0; } }
@keyframes mPop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (max-width: 700px) {
  .modal-wrap { align-items: flex-end; padding: 0; }
  .modal, .modal.sm, .modal.lg { max-width: none; max-height: 92vh; overflow-y: auto; border-radius: 16px 16px 0 0; border-bottom: 0; padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); animation: mUp .22s cubic-bezier(.2,.8,.2,1); }
  .modal-foot { position: sticky; bottom: calc(-22px - env(safe-area-inset-bottom)); margin: 24px -18px calc(-22px - env(safe-area-inset-bottom)); padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--line); }
  .modal-foot button { flex: 1; }
}
@keyframes mUp { from { transform: translateY(40px); opacity: .4; } }

/* More breathing room */
.content { padding: 36px 40px 64px; }
.card { padding: 28px; margin-bottom: 24px; }
.stats { gap: 20px; margin-bottom: 24px; }
.grid2 { gap: 24px; }
.card-head { margin-bottom: 18px; gap: 20px; }
.card-head p { margin-top: 6px; line-height: 1.55; }
.card h3 { margin: 32px 0 12px; }
label { margin: 18px 0 8px; }
.hint { margin-top: 8px; line-height: 1.55; }
.form-row { gap: 16px; }
.btn-row { gap: 10px; margin-top: 22px; }
.toolbar { gap: 10px; margin-bottom: 20px; }
th { padding: 12px 16px; }
td { padding: 14px 16px; }
.tbl { margin: 0 -28px; padding: 0 28px; }
.feed-item { padding: 14px 2px; }
.premium-bar, .lock-banner { padding: 18px 22px; margin-bottom: 24px; }
.topbar { padding: 18px 40px; }
.side { padding: 20px 14px 14px; }
.side-brand { padding: 4px 10px 22px; }
.nav { gap: 2px; }
.nav button { height: 34px; padding: 0 12px; }
.nav-label { padding: 20px 12px 8px; }
.side-foot { padding-top: 12px; }
@media (max-height: 820px) and (min-width: 901px) {
  .side { padding-top: 14px; } .side-brand { padding-bottom: 12px; }
  .nav { gap: 1px; } .nav button { height: 30px; } .nav-label { padding: 12px 12px 4px; }
}
@media (max-width: 900px) { .content { padding: 24px 20px 48px; } .topbar { padding: 12px 20px; } }
@media (max-width: 700px) {
  .content { padding: 18px 14px 40px; }
  .card { padding: 20px 18px; margin-bottom: 16px; }
  .stats { gap: 12px; margin-bottom: 16px; } .grid2 { gap: 16px; }
  .tbl { margin: 0; padding: 0; }
  .topbar { padding: 10px 14px; }
}
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Activate flow: inline messages, cost on the button, receipt after success */
.field-msg { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); min-height: 19px; }
.field-msg.bad { color: var(--bad); }
.field-msg b { color: var(--text); font-weight: 600; }
.field-msg a { color: inherit; }
.act-form { align-items: flex-start; }
.act-form > div:last-child { padding-top: 27px; }
input[aria-invalid=true] { border-color: rgba(248,113,113,.6); }
input[aria-invalid=true]:focus { box-shadow: 0 0 0 3px rgba(248,113,113,.18); }
.act-receipt { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 16px; border: 1px solid rgba(74,222,128,.25); border-radius: var(--r-sm); background: rgba(74,222,128,.05); animation: mPop .2s ease-out; }
.act-receipt.hide { display: none; }
.act-receipt .ok-ico { width: 20px; height: 20px; flex: none; color: var(--ok); }
.act-receipt .rc-main { flex: 1; min-width: 0; }
.act-receipt .rc-main .small { margin-top: 2px; }
.credit-chip.bump { animation: chipBump .6s ease-out; }
@keyframes chipBump { 30% { transform: scale(1.06); border-color: var(--accent); } }
@media (max-width: 700px) {
  .act-form > div:last-child { padding-top: 4px; }
  .act-form button { width: 100%; }
  .act-receipt { flex-wrap: wrap; }
  .act-receipt .rc-main { flex-basis: calc(100% - 40px); }
}
@media (prefers-reduced-motion: reduce) { .credit-chip.bump, .act-receipt { animation: none; } }

/* Brand v2.2: FuriaPlay lime is the action colour again (critique item 2) */
:root { --fg-btn: #b5d334; --fg-btn-ink: #0b0d06; --accent-soft: rgba(181,211,52,.12); --ring: rgba(181,211,52,.55); }
button.primary, a.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
button.primary:hover, a.btn.primary:hover { background: #c4e04a; border-color: #c4e04a; }
button.primary:disabled { background: var(--panel2); border-color: var(--line); color: var(--faint); opacity: 1; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input:focus, select:focus, textarea:focus { border-color: rgba(181,211,52,.7); box-shadow: 0 0 0 3px rgba(181,211,52,.15); outline: none; }
input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); }
input[type=checkbox]::after { border-color: var(--accent-ink); }
.side { background: linear-gradient(180deg, rgba(181,211,52,.035), transparent 40%), #0b0b0d; }
.nav button.on { background: var(--accent-soft); color: #f4f9dc; box-shadow: inset 2px 0 0 var(--accent); }
.nav button.on svg { color: var(--accent); opacity: 1; }
.nav-badge { background: var(--accent); color: var(--accent-ink); }
.seg button.on { box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px var(--line), inset 0 -2px 0 var(--accent); }
.pkg.on, .pay-method.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.credit-chip { border-color: rgba(181,211,52,.3); }
.stat-card:first-child .stat-val { color: var(--accent); }
.usage .col { background: var(--accent); opacity: .85; }
.live-dot { animation: none; box-shadow: none; }
::selection { background: rgba(181,211,52,.35); color: #fff; }

/* Clearer type scale: body 14 → card title 17 → page title 22 */
.topbar h1 { font-size: 22px; font-weight: 650; letter-spacing: -.025em; }
.card-head h2, .modal-head h2 { font-size: 17px; font-weight: 600; }
.card h3 { font-size: 15px; }

/* Expiry runway */
.exp { min-width: 132px; }
.exp-top { display: flex; justify-content: space-between; gap: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.exp-left { font-size: 12px; color: var(--muted); }
.exp-bar { height: 3px; margin-top: 6px; border-radius: 3px; background: var(--panel2); overflow: hidden; }
.exp-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.exp.warn .exp-bar i { background: var(--warn); } .exp.warn .exp-left { color: var(--warn); }
.exp.bad .exp-bar i { background: var(--bad); } .exp.bad .exp-left { color: var(--bad); }
.exp.off .exp-bar i { background: var(--faint); }
@media (max-width: 700px) { .tbl:not(.keep) td .exp { display: inline-block; min-width: 170px; text-align: left; } }

/* Login: no grid, a quiet lime glow instead */
.auth-side::after { background-image: radial-gradient(520px 360px at 25% 70%, rgba(181,211,52,.10), transparent 70%); background-size: auto; opacity: 1; mask-image: none; }
.auth-side h1 span, .auth-accent { color: var(--accent); }

/* Accessibility pass (critique item 3) */
:root { --faint: #8e8e98; }
input::placeholder, textarea::placeholder { color: #80808a; }
.hint, .card-head p, .modal-head p, p.muted { max-width: 72ch; }
#toast { cursor: default; }
#toast.bad { cursor: pointer; }
.nav button:focus-visible, .me:focus-visible, .credit-chip:focus-visible { outline-offset: -2px; }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 14px; border-radius: var(--r-sm); background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ===== Device modal v2 (critique item 4): routine on top, risky actions tucked away ===== */
.dv-exp { max-width: 340px; margin-top: 14px; }
.dv-exp .exp-top { font-size: 14px; }
.dv-main { margin-top: 18px; align-items: flex-end; }
#dvBal { margin: 6px 0 0; font-variant-numeric: tabular-nums; }
.dv-sec { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 28px 0 10px; }
.dv-sec h3 { margin: 0; }
.dv-listform { margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-md, 10px); background: var(--panel2); }
.dv-listform h3 { margin-top: 0; }
.dv-more { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 14px; }
.dv-more > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; font-weight: 500; padding: 6px 0; border-radius: 6px; }
.dv-more > summary::-webkit-details-marker { display: none; }
.dv-more > summary::before { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.dv-more[open] > summary::before { transform: rotate(45deg); }
.dv-more > summary:hover { color: var(--fg, #fafafa); }
.dv-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.dv-row:last-child { border-bottom: 0; }
.dv-row b { font-weight: 500; font-size: 14px; }
.dv-row .hint { margin: 4px 0 0; }
.dv-row-act { display: flex; gap: 8px; flex-shrink: 0; }
.dv-row-act select { width: auto; min-width: 180px; }
.dv-row.danger-zone b { color: var(--bad); }
@media (max-width: 700px) {
  .dv-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .dv-row-act { flex-wrap: wrap; } .dv-row-act > * { flex: 1 1 auto; }
  .dv-exp { max-width: none; }
}

/* ===== Início v2 (critique item 5): Ativar first, then what needs attention ===== */
.act-card { border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, var(--panel)), var(--panel) 70%); }
.act-card h2 { font-size: 19px; }
.code-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.code-chip b { color: var(--fg, #fafafa); font-weight: 600; letter-spacing: .04em; }
section[data-view=dash] > .act-card { margin-bottom: 24px; }
.stat-card.warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.stat-card.warn .stat-val, .stat-card.warn .stat-ico { color: var(--warn); }
.stat-card.warn .stat-hint { color: var(--warn); }
.stat-card .stat-hint a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
button.stat-card.stat-link { display: block; align-self: stretch; padding: 20px 22px; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; height: auto; transition: border-color .15s, background .15s; }
button.stat-card.stat-link:hover { border-color: #3f3f46; background: var(--panel2); }
.stat-ico.amber { color: var(--faint); }
.stat-card.warn .stat-ico.amber { color: var(--warn); }

.todo { display: flex; flex-direction: column; gap: 18px; }
.todo-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.todo-head b { font-weight: 500; font-size: 14px; }
.todo-head .sm { margin-left: auto; }
.todo-n { font-size: 12px; font-variant-numeric: tabular-nums; padding: 1px 8px; border-radius: 999px; background: var(--panel2); color: var(--muted); }
.todo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex-shrink: 0; }
.todo-group.warn .todo-dot { background: var(--warn); } .todo-group.bad .todo-dot { background: var(--bad); } .todo-group.info .todo-dot { background: var(--blue); }
.todo-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 8px 0 8px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.todo-row:last-child { border-bottom: 0; }
.todo-txt { color: var(--muted); font-size: 13px; }
.todo-group.warn .todo-txt { color: var(--warn); } .todo-group.bad .todo-txt { color: var(--bad); }
.todo-empty { display: flex; gap: 14px; align-items: center; padding: 18px 4px; }
.todo-empty svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; }
@media (max-width: 700px) {
  .act-card .card-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .todo-row { grid-template-columns: 1fr auto; padding-left: 0; } .todo-txt { grid-column: 1; grid-row: 2; }
  .todo-row .sm { grid-row: 1 / span 2; grid-column: 2; }
}

/* ===== /ativar: subscribe from the phone ===== */
.sub-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 4px; }
button.sub-plan { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; height: auto; padding: 14px 16px; text-align: left; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel2); color: var(--text, #fafafa); font: inherit; cursor: pointer; }
button.sub-plan b { font-weight: 600; font-size: 15px; }
.sub-days { font-size: 12.5px; color: var(--muted); }
.sub-price { margin-top: 6px; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
button.sub-plan.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
button.sub-plan.on .sub-price { color: var(--accent); }
.sub-methods { margin-top: 16px; }
.pix-ok { margin-top: 18px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.field-msg.good { color: var(--ok); }

/* ===== Logo position on the opening (Minha marca) ===== */
.pos-pick { display: inline-grid; grid-template-columns: repeat(3, 34px); grid-auto-rows: 22px; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel2); vertical-align: middle; }
.pos-pick button { width: 34px; height: 22px; min-height: 0; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); cursor: pointer; }
.pos-pick button:hover { border-color: var(--muted); }
.pos-pick button.on { background: var(--accent); border-color: var(--accent); }
.pos-name { margin-left: 12px; vertical-align: middle; }
.pv-open[data-pos] { padding: 6% 7%; }
.pv-open[data-pos^="t"] { align-items: flex-start; } .pv-open[data-pos^="b"] { align-items: flex-end; }
.pv-open[data-pos$="l"] { justify-content: flex-start; } .pv-open[data-pos$="r"] { justify-content: flex-end; }
.pv-open[data-pos] .pv-open-logo { width: 30%; }
.pv-open[data-pos="c"] .pv-open-logo { width: 42%; }

/* Phone: 100vh counts the browser's address bar, which pushed the profile/Sair button off screen. */
.side { height: 100vh; height: 100dvh; }
.nav { min-height: 0; }
@media (max-width: 900px) {
  .side { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* Minha marca v2: one card per topic, short hints, sticky save bar */
.br-col { display: grid; gap: 16px; min-width: 0; }
.br-col > .card { margin: 0; }
.br-sec .card-head { margin-bottom: 14px; }
.br-sec .card-head h2 { font-size: 16px; }
.opt { font-size: 11.5px; font-weight: 500; color: var(--faint); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: 2px; }
details.more { margin-top: 10px; }
details.more summary { cursor: pointer; font-size: 12.5px; color: var(--muted); width: fit-content; }
details.more summary:hover { color: var(--text); }
details.more .hint { margin-top: 6px; }
.upload input[type=file] { color: transparent; width: auto; max-width: 100%; }
.upload input[type=file]::file-selector-button { color: var(--text); }
.save-bar { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.save-state { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.save-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.save-bar.dirty { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.save-bar.dirty .save-state { color: var(--text); }
.save-bar.dirty .save-state::before { background: var(--accent); }
.pv-card { top: 106px; }
#brLogoBgBox .form-row { align-items: flex-start; }

/* ---------- Assistindo agora ---------- */
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); margin-right: 8px; vertical-align: middle; }
.live-dot.on { background: var(--ok); box-shadow: 0 0 0 0 rgba(52,209,124,.6); animation: livePulse 2s infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(52,209,124,.5); } 70% { box-shadow: 0 0 0 8px rgba(52,209,124,0); } 100% { box-shadow: 0 0 0 0 rgba(52,209,124,0); } }
@media (prefers-reduced-motion: reduce) { .live-dot.on { animation: none; } }
.lv-top { font-size: 16px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pill.playing { color: var(--ok); background: rgba(52,209,124,.1); } .pill.paused { color: var(--warn); background: rgba(255,178,36,.1); }
.pill.ended { color: var(--blue); background: rgba(78,161,255,.1); } .pill.stopped { color: var(--muted); }
.lv-bar { height: 4px; border-radius: 2px; background: var(--line2); overflow: hidden; margin-top: 6px; min-width: 120px; }
.lv-bar i { display: block; height: 100%; background: var(--ok); }
.lv-kind { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }
tr.lv-new td { animation: lvFlash 1.6s ease-out; }
@keyframes lvFlash { from { background: var(--accent-soft); } to { background: transparent; } }
.nav-badge.live { background: var(--ok); color: #06210f; }

/* ---------- Mensagens ---------- */
.msg-st { font-size: 12px; line-height: 1.5; white-space: nowrap; }
.msg-st .ok { color: var(--ok); } .msg-st .wait { color: var(--muted); } .msg-st .read { color: var(--blue); }
.ac-admin { align-items: center; padding: 10px 12px; border: 1px dashed var(--line2); border-radius: var(--r-sm); }

/* ---------- Temas e layouts ---------- */
.look-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); gap: 28px; align-items: start; }
.look-prev-col { position: sticky; top: 108px; }
@media (max-width: 1100px) { .look-wrap { grid-template-columns: minmax(0, 1fr); } .look-prev-col { position: static; } }
.look-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.look-card { display: block; height: auto; padding: 10px; text-align: left; white-space: normal; border-radius: var(--r-sm); border: 1px solid var(--line2); background: var(--bg2); }
.look-card.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.look-card b { display: block; font-size: 13px; margin-top: 8px; }
.look-card span { display: block; font-size: 11.5px; color: var(--muted); font-weight: 500; margin-top: 2px; line-height: 1.35; }
.look-sw { display: flex; height: 34px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); }
.look-sw i { flex: 1; }
.look-mini { height: 34px; border-radius: 6px; background: var(--panel2); padding: 4px; display: grid; gap: 3px; }
.look-mini i { background: var(--line2); border-radius: 2px; display: block; }
.look-event { margin-top: 10px; padding: 12px; border: 1px solid var(--line2); border-radius: var(--r-sm); }
.look-event input[type=color] { width: 64px; padding: 4px; }
/* The TV mock-up: a 16:9 screen drawn with the chosen palette and layout. */
.tvprev { --tb: #090b0e; --ts: #111317; --ts2: #1b1e24; --tt: #f4f6f8; --td: #9aa4b2; --tp: #b2d235; --top: #0b0d10;
  position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--tb); color: var(--tt); border: 6px solid #000; box-shadow: 0 10px 30px rgba(0,0,0,.4); font-size: 7px; }
.tvprev .tp-top { position: absolute; left: 0; right: 0; top: 0; height: 9%; display: flex; align-items: center; gap: 6px; padding: 0 4%; z-index: 2; }
.tvprev .tp-logo { width: 12%; height: 50%; border-radius: 2px; background: var(--tp); }
.tvprev .tp-tab { padding: 1px 5px; border-radius: 6px; color: var(--td); font-weight: 600; }
.tvprev .tp-tab.on { background: var(--tp); color: var(--top); }
.tvprev .tp-body { position: absolute; inset: 9% 0 0 0; padding: 0 4%; overflow: hidden; }
.tvprev .tp-hero { position: relative; margin: 0 -4.3%; height: 36%; background: linear-gradient(90deg, var(--tb) 10%, transparent 70%), linear-gradient(135deg, #5a3b8c, #b24c3b 60%, #e0a43b); }
.tvprev .tp-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, var(--tb)); }
.tvprev .tp-hero b { position: absolute; left: 6%; top: 28%; font-size: 11px; z-index: 1; }
.tvprev .tp-hero em { position: absolute; left: 6%; top: 58%; z-index: 1; font-style: normal; padding: 2px 6px; border-radius: 3px; background: var(--tp); color: var(--top); font-weight: 700; }
.tvprev.l-streaming .tp-hero { height: 52%; }
.tvprev .tp-row { margin-top: 4%; }
.tvprev .tp-row > b { display: block; margin-bottom: 2%; font-size: 7.5px; }
.tvprev .tp-cards { display: flex; gap: 2%; }
.tvprev .tp-card { flex: 0 0 9%; aspect-ratio: 2 / 3; border-radius: 3px; background: var(--ts2); }
.tvprev .tp-card:nth-child(3n+1) { background: linear-gradient(160deg, #2b4f7a, #142233); } .tvprev .tp-card:nth-child(3n+2) { background: linear-gradient(160deg, #7a2b45, #2a1220); }
.tvprev .tp-card.f { outline: 2px solid var(--tf, var(--tp)); outline-offset: 1px; }
/* Focus and card styles of the theme packs (app 0.12+) */
.tvprev .tp-card { border-radius: var(--tr, 3px); }
.tvprev[data-focus="glow"] .tp-card.f { box-shadow: 0 0 10px 2px var(--tf, var(--tp)); }
.tvprev[data-focus="lift"] .tp-card.f { outline-color: rgba(255,255,255,.5); transform: translateY(-3px) scale(1.08); box-shadow: 0 6px 12px rgba(0,0,0,.6); }
.tvprev[data-focus="fill"] .tp-card.f { box-shadow: inset 0 0 0 100px color-mix(in srgb, var(--tf, var(--tp)) 25%, transparent); }
.tvprev[data-focus="underline"] .tp-card.f { outline: none; border-bottom: 2px solid var(--tf, var(--tp)); }
.tvprev[data-card="glass"] .tp-banner, .tvprev[data-card="glass"] .tp-chips i { background: rgba(255,255,255,.07); }
.tvprev[data-card="outline"] .tp-banner { background: transparent; border: 1px solid var(--ts2); }
.look-new { font-style: normal; font-size: 10px; font-weight: 700; padding: 1px 6px; margin-left: 4px; border-radius: 99px; background: var(--accent); color: var(--on-accent, #0b0d10); vertical-align: 1px; }
.tvprev.l-bigcards .tp-card { flex-basis: 13%; }
.tvprev.l-streaming .tp-card, .tvprev.l-carousel .tp-card.wide { flex-basis: 22%; aspect-ratio: 16 / 9; }
.tvprev.l-grid .tp-cards { flex-wrap: wrap; row-gap: 6px; } .tvprev.l-grid .tp-card { flex-basis: 9.5%; }
.tvprev .tp-banner { height: 15%; margin-top: 3%; border-radius: 4px; background: linear-gradient(90deg, var(--ts2), var(--ts) 60%), var(--ts); border-left: 3px solid var(--tp); display: flex; align-items: center; padding-left: 4%; font-weight: 700; }
.tvprev .tp-car { display: flex; gap: 3%; margin: 0 -4%; padding: 2% 4% 0; height: 34%; }
.tvprev .tp-car i { flex: 0 0 62%; border-radius: 5px; background: linear-gradient(135deg, #5a3b8c, #b24c3b 60%, #e0a43b); }
.tvprev .tp-car i + i { flex-basis: 30%; opacity: .55; background: linear-gradient(135deg, #2b4f7a, #142233); }
.tvprev .tp-dots { display: flex; gap: 3px; justify-content: center; margin-top: 2%; } .tvprev .tp-dots i { width: 4px; height: 4px; border-radius: 2px; background: var(--td); } .tvprev .tp-dots i:first-child { width: 10px; background: var(--tp); }
.tvprev .tp-chips { display: flex; gap: 4px; margin-top: 3%; } .tvprev .tp-chips i { font-style: normal; padding: 1px 6px; border-radius: 8px; background: var(--ts2); color: var(--td); } .tvprev .tp-chips i:first-child { background: var(--tp); color: var(--top); }
.tvprev .tp-deco { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.tvprev .tp-deco span { position: absolute; top: -10%; font-size: 10px; opacity: .85; animation: tpFall linear infinite; }
@keyframes tpFall { to { transform: translateY(1100%) rotate(200deg); } }
.tvprev .tp-deco span.m-rise { animation-name: tpRise; } .tvprev .tp-deco span.m-float { animation-name: tpFloat; animation-direction: alternate; animation-timing-function: ease-in-out; }
.tvprev .tp-deco span.m-twinkle { animation-name: tpTwinkle; animation-direction: alternate; animation-timing-function: ease-in-out; animation-duration: 1.6s !important; }
.tvprev .tp-deco span.m-drift { animation-name: tpDrift; }
@keyframes tpRise { from { transform: translateY(400%); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(-600%); opacity: 0; } }
@keyframes tpFloat { to { transform: translate(6px, -10px); opacity: .4; } }
@keyframes tpTwinkle { from { opacity: .1; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes tpDrift { from { transform: translateX(-200%); } to { transform: translateX(3000%); } }
@media (prefers-reduced-motion: reduce) { .tvprev .tp-deco span { animation: none; top: 20%; } }

/* ---------- Cupons ---------- */
.coupon-box { margin-top: 14px; }
.coupon-row { display: flex; gap: 8px; }
.coupon-row input { text-transform: uppercase; }
.coupon-row button { flex: none; }
.price-old { text-decoration: line-through; color: var(--muted); margin-right: 6px; font-weight: 500; }
.cp-code { font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 700; letter-spacing: .04em; }
.cp-prod { display: inline-block; margin: 2px 4px 2px 0; padding: 1px 8px; border-radius: 99px; background: var(--panel2); font-size: 12px; }
.cp-meter { height: 4px; border-radius: 2px; background: var(--line2); overflow: hidden; margin-top: 6px; max-width: 120px; }
.cp-meter i { display: block; height: 100%; background: var(--accent); }
.pill.cp-on { color: var(--ok); background: rgba(52,209,124,.1); } .pill.cp-soon { color: var(--blue); background: rgba(78,161,255,.1); }
.pill.cp-over { color: var(--warn); background: rgba(255,178,36,.1); } .pill.cp-off { color: var(--muted); }
.cp-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; margin-top: 6px; }
.cp-products .grp { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 8px; }

/* ---------- Avisos (Phase 4) ---------- */
.pill.nt-info { color: var(--blue); background: rgba(78,161,255,.12); }
.pill.nt-news { color: var(--accent); background: var(--accent-soft); }
.pill.nt-promo { color: #c084fc; background: rgba(192,132,252,.12); }
.pill.nt-maintenance { color: var(--warn); background: rgba(255,178,36,.1); }
.pill.nt-urgent { color: var(--bad); background: rgba(255,93,99,.12); }
.pill.na-live { color: var(--ok); background: rgba(52,209,124,.1); }
.pill.na-scheduled { color: var(--blue); background: rgba(78,161,255,.12); }
.pill.na-expired, .pill.na-off { color: var(--muted); }
.na-title { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.na-thumb { width: 52px; height: 36px; border-radius: 6px; object-fit: cover; background: var(--panel2); flex: none; }
.na-thumb.empty { display: grid; place-items: center; color: var(--muted); }
.na-thumb.empty svg { width: 16px; height: 16px; }
.na-meter { height: 4px; border-radius: 2px; background: var(--panel2); margin-top: 6px; width: 110px; overflow: hidden; }
.na-meter i { display: block; height: 100%; background: var(--accent); }
.na-pick { max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; display: grid; gap: 2px; }
.na-pick label.check { padding: 5px 0; }
.na-img { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.na-img img { max-width: 220px; max-height: 120px; border-radius: 8px; border: 1px solid var(--line); }
.nt-list { display: grid; gap: 10px; }
.nt-item { display: flex; gap: 14px; align-items: flex-start; width: 100%; text-align: left; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); cursor: pointer; height: auto; font-weight: 400; }
.nt-item:hover { border-color: var(--muted); }
.nt-item.unread { border-color: var(--accent); }
.nt-item img { width: 96px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; }
.nt-item .nt-main { flex: 1; min-width: 0; }
.nt-item .nt-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.nt-item .nt-snip { color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nt-new { font-size: 11px; font-weight: 700; color: var(--accent-ink, #0b0d10); background: var(--accent); border-radius: 6px; padding: 1px 6px; }
.nt-pop-img { display: block; width: 100%; max-height: 300px; object-fit: cover; border-radius: 10px; margin: 4px 0 14px; }
.nt-pop-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.nt-pop-body { white-space: pre-wrap; line-height: 1.55; overflow-wrap: anywhere; }
.nt-pop-body a { color: var(--accent); }
@media (max-width: 640px) { .nt-item img { width: 72px; height: 48px; } }

/* ---------- Cliente do aparelho ---------- */
.act-cust { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r-sm, 10px); padding: 10px 14px; }
.act-cust summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.act-cust[open] summary { margin-bottom: 10px; color: var(--text); }
.cust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.cust-grid .span2 { grid-column: span 3; }
.cust-cell b { display: block; font-weight: 600; }
.cust-cell a { color: var(--accent); text-decoration: none; font-size: 12px; }
.wa-btn { display: inline-flex; align-items: center; gap: 6px; }
.dv-cust { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin: 14px 0 6px; }
.dv-cust .dv-sec { margin-top: 0; }
@media (max-width: 760px) { .cust-grid { grid-template-columns: 1fr; } .cust-grid .span2 { grid-column: auto; } }

/* ---------- Menu groups and page tabs ---------- */
.nav button.in-group { display: none; }
.pt-off { display: none !important; }
.page-tabs, .ptabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.page-tabs::-webkit-scrollbar, .ptabs::-webkit-scrollbar { display: none; }
.page-tabs { margin: -8px 0 24px; }
.ptabs { margin: 0 0 20px; }
.page-tabs button, .ptabs button { flex: none; height: 40px; padding: 0 14px; border: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: 14px; font-weight: 500; gap: 8px; box-shadow: inset 0 -2px 0 transparent; white-space: nowrap; }
.page-tabs button:hover, .ptabs button:hover { background: transparent; color: var(--text); }
.page-tabs button.on, .ptabs button.on { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.page-tabs .lock { width: 13px; height: 13px; opacity: .6; }
.page-tabs .nav-badge { margin-left: 0; }
.ptabs button { height: 36px; font-size: 13px; padding: 0 12px; }
.brand-grid .ptabs { margin-bottom: 16px; }
@media (max-width: 720px) { .page-tabs { margin: -4px 0 18px; } }

/* ---------- Início ---------- */
section[data-view=dash] { font-variant-numeric: tabular-nums; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; }
.kpi { white-space: normal; overflow-wrap: anywhere; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; height: auto; padding: 16px 20px 18px; border: 0; border-radius: 0; border-left: 1px solid var(--line); background: transparent; color: var(--text); text-align: left; font: inherit; justify-content: flex-start; }
.kpi:first-child { border-left: 0; }
.kpi-link { cursor: pointer; transition: background .15s ease-out; }
.kpi-link:hover { background: var(--panel2); }
.kpi-label { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 500; }
.kpi-val { font-size: 28px; font-weight: 600; letter-spacing: -.03em; line-height: 1.25; }
.kpi-of { font-size: 14px; font-weight: 500; color: var(--faint); letter-spacing: 0; }
.kpi-hint { color: var(--faint); font-size: 12.5px; line-height: 1.4; }
.kpi-hint a { color: var(--accent); }
.kpi.warn .kpi-val { color: var(--warn); }
#stSoonCard.warn .kpi-val { color: var(--warn); }
.kpi.warn:first-child .kpi-val { color: var(--warn); }
.mix { display: flex; gap: 2px; width: 100%; max-width: 220px; height: 4px; margin: 6px 0 4px; }
.mix i { display: block; height: 100%; border-radius: 2px; min-width: 3px; }
.mix .m-active { background: var(--accent); } .mix .m-trial { background: var(--blue); } .mix .m-expired { background: var(--faint); } .mix .m-blocked { background: var(--bad); } .mix .m-none { background: var(--line); }
.dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.act-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.act-top h2 { margin: 0; font-size: 17px; }
section[data-view=dash] > .act-card { padding: 20px 22px; margin-bottom: 20px; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 20px; align-items: start; }
.dash-side { display: flex; flex-direction: column; gap: 20px; }
.dash-side .card { margin: 0; }
.ag-card { margin: 0; }
.ag-card .card-head { margin-bottom: 16px; }
/* Renewals strip: one column per day */
.agenda { display: grid; grid-template-columns: repeat(22, minmax(0, 1fr)); gap: 3px; padding: 4px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.ag-day { display: flex; flex-direction: column; align-items: center; gap: 3px; height: auto; min-width: 0; padding: 4px 0 6px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.ag-day:hover { background: var(--panel2); }
.ag-day.zero { cursor: default; } .ag-day.zero:hover { background: transparent; }
.ag-day.on { background: var(--panel2); box-shadow: inset 0 0 0 1px var(--line2), inset 0 0 0 1px color-mix(in srgb, var(--text) 25%, transparent); }
.ag-n { height: 16px; font-size: 12px; font-weight: 600; color: var(--text); }
.ag-bar { display: flex; align-items: flex-end; width: 100%; max-width: 18px; height: 64px; border-radius: 3px 3px 0 0; box-shadow: inset 0 -1px 0 var(--line2); overflow: hidden; }
.ag-bar i { display: block; width: 100%; background: color-mix(in srgb, var(--text) 70%, transparent); border-radius: 3px 3px 0 0; }
.ag-day.past .ag-bar i { background: var(--bad); }
.ag-day.today .ag-bar { box-shadow: inset 0 -2px 0 var(--accent); }
.ag-day.today .ag-bar i { background: var(--accent); }
.ag-d { font-size: 12px; color: var(--text); font-weight: 500; }
.ag-w { font-size: 11.5px; color: var(--faint); }
.ag-day.past .ag-d { color: var(--muted); }
.ag-day.today .ag-d, .ag-day.today .ag-w { color: var(--accent); font-weight: 600; }
/* Renewals list */
.ag-row { display: grid; grid-template-columns: 118px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.ag-row:last-child { border-bottom: 0; }
.ag-when { font-size: 13px; color: var(--muted); white-space: nowrap; }
.ag-row.late .ag-when { color: var(--bad); } .ag-row.near .ag-when { color: var(--warn); }
.ag-who { display: flex; flex-direction: column; min-width: 0; }
.ag-who b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-meta { color: var(--faint); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-meta .mono { font-size: 12px; }
.ag-acts { display: flex; gap: 6px; justify-content: flex-end; }
.ag-empty { padding: 22px 2px; color: var(--muted); font-size: 13.5px; }
.ag-more { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--line); font-size: 13px; }
.ag-more:empty { display: none; }
.ag-more .sep { color: var(--faint); }
.ag-rest { margin-top: 10px; }
.linkish { display: inline-flex; align-items: center; min-height: 28px; height: auto; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line2); cursor: pointer; }
.linkish:hover { color: var(--text); background: none; text-decoration-color: currentColor; }
/* Side column */
.side-card { padding: 18px 20px; }
.side-card h2 { font-size: 15px; margin: 0; }
.side-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.side-card > h2 { margin-bottom: 10px; }
.todo-links { display: flex; flex-direction: column; }
.todo-link { display: flex; align-items: center; gap: 10px; height: auto; padding: 10px 2px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; color: var(--text); font: inherit; text-align: left; justify-content: flex-start; }
.todo-link:first-child { border-top: 0; }
.todo-link b { min-width: 22px; color: var(--warn); font-weight: 600; }
.todo-link span { flex: 1; color: var(--muted); font-size: 13.5px; }
.todo-link svg { width: 14px; height: 14px; color: var(--faint); }
.todo-link:hover { background: none; } .todo-link:hover span { color: var(--text); }
.feed.compact .feed-item { padding: 9px 0; gap: 10px; font-size: 13px; }
.feed.compact .feed-item .ico { display: none; }
.feed.compact .feed-item b { font-weight: 500; }
.feed.compact .feed-item .muted, .feed.compact .feed-item .small { font-size: 12.5px; }
@media (max-width: 1200px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi:nth-child(3) { border-left: 0; } .kpi:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 640px) {
  .agenda { grid-template-columns: repeat(22, 30px); overflow-x: auto; scrollbar-width: none; } .agenda::-webkit-scrollbar { display: none; }
  .ag-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .ag-when { grid-column: 1 / -1; font-size: 12.5px; }
  .act-top { flex-direction: column; align-items: flex-start; }
}
section[data-view=dash] .act-card { background: var(--panel); }
section[data-view=dash] > .premium-bar { padding: 12px 18px; margin-bottom: 16px; }
/* Audit fixes: bigger hit areas, inset focus ring inside the clipped number strip */
.kpi:focus-visible { outline-offset: -3px; }
.act-cust { padding: 0; }
.act-cust summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; }
.act-cust[open] summary { margin-bottom: 0; }
.act-cust .cust-grid { padding: 4px 14px 14px; }
.act-cust { margin-top: 12px; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.act-cust summary { padding: 0 2px; }
.act-cust .cust-grid { padding: 4px 2px 2px; }
.act-cust summary { list-style: none; }
.act-cust summary::-webkit-details-marker { display: none; }
.act-cust summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); margin-right: 4px; transition: transform .15s ease-out; }
.act-cust[open] summary::before { transform: rotate(45deg); }
.ag-acts .btn.ghost { border-color: transparent; background: none; }
.ag-acts .btn.ghost:hover, .ag-acts button.ghost:hover { background: var(--panel2); }
.ag-acts .btn.ghost, .ag-acts button.ghost { color: var(--text); font-weight: 500; }

/* ---- Audit 2 (Aparelhos, Minha marca, Comprar créditos) ---- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.card-head:has(h2.sr-only) p { margin-top: 0; }
p, .hint, .card-head p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
/* Devices: the normal state stays quiet, so only the rows that need attention stand out. */
#devRows .pill.active { border-color: transparent; padding-left: 0; }
#devRows .pill.haslist { border-color: transparent; padding-left: 0; }
.dev-row { cursor: pointer; }
.dev-row:hover td { background: var(--hover, rgba(255,255,255,.03)); }
.cust-meta { display: flex; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cust-meta a { display: inline-flex; align-items: center; min-height: 24px; color: var(--accent); text-decoration: none; }
.cust-meta a:hover { text-decoration: underline; }
/* In-page tabs read as a switch inside the page, not as a second row of page tabs. */
.ptabs { display: inline-flex; max-width: 100%; gap: 2px; padding: 3px; border: 0; border-radius: 9px; background: var(--panel2); }
.ptabs button { height: 30px; padding: 0 12px; border-radius: 6px; font-size: 13px; box-shadow: none; }
.ptabs button.on { background: var(--bg); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px var(--line); }
/* Upload fields: a plain row (preview + button), not a box inside the card. */
.upload { padding: 0; border: 0; background: none; }
.cust-meta .sep { margin: 0 6px; color: var(--faint); }
.pkg .pkg-unit { color: var(--muted); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
.ptabs { width: fit-content; justify-self: start; align-self: start; }
.ptabs button.on { box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px var(--line), inset 0 -2px 0 var(--accent); }
/* Type: Archivo. Titles and big numbers use its wider cut, which echoes the FuriaPlay wordmark. */
h1, h2, .kpi-val, .pkg b, .brand-name { font-stretch: 112%; letter-spacing: -.01em; }
h1 { font-weight: 700; }

/* ---------- Estúdio de Temas ---------- */
.st-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 4px 0 16px; }
.st-card { padding: 10px; border: 1px solid var(--line2); border-radius: var(--r-sm); background: var(--bg2); display: flex; flex-direction: column; gap: 4px; }
.st-card.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.st-card b { font-size: 13.5px; margin-top: 6px; }
.st-card .ok { color: var(--accent); font-weight: 600; }
.st-card .btn-row { margin-top: 8px; flex-wrap: wrap; }
.st-thumb { height: 64px; border-radius: 6px; display: flex; align-items: flex-end; gap: 6px; padding: 8px; border: 1px solid rgba(255,255,255,.06); }
.st-thumb i { flex: 0 0 18%; height: 70%; border-radius: 3px; }
.st-thumb i:nth-child(2) { height: 85%; }
.modal.xl { max-width: 1320px; }
.modal.st-modal { padding: 20px; }
.st-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 36px 14px 0; }
.st-top input { max-width: 280px; font-weight: 600; }
.st-top .btn-row { margin-left: auto; flex-wrap: wrap; }
.st-wrap { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 20px; align-items: start; }
.st-opts { max-height: 72vh; overflow-y: auto; padding-right: 6px; }
.st-opts details { border-bottom: 1px solid var(--line); padding: 10px 0; }
.st-opts summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 4px 0; }
.st-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.st-f label { font-size: 12px; margin-top: 10px; }
.st-f select, .st-f input:not([type=range]):not([type=color]):not([type=checkbox]) { width: 100%; }
.st-range { display: flex; align-items: center; gap: 8px; }
.st-range input { flex: 1; }
.st-range output { min-width: 40px; text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.st-colors { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 8px; }
.st-color { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin: 0; }
.st-color input[type=color], .st-f input[type=color] { width: 36px; height: 30px; padding: 2px; border-radius: 6px; flex: none; }
.st-opts .hint.warn { color: var(--warn, #f5b544); }
.st-layer { border: 1px solid var(--line2); border-radius: var(--r-sm); padding: 10px; margin: 10px 0; }
.st-layer-head { display: flex; align-items: center; justify-content: space-between; }
.st-img { display: block; max-height: 48px; margin-top: 6px; border-radius: 4px; }
.st-img.wide { max-height: 72px; }
.st-prev { position: sticky; top: 0; }
.st-tv { position: relative; aspect-ratio: 16 / 9; border: 8px solid #000; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.st-tv iframe { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; border: 0; transform-origin: 0 0; }
.st-versions > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 900px) {
  .st-wrap { grid-template-columns: 1fr; }
  .st-prev { position: static; order: -1; }
  .st-opts { max-height: none; }
  .st-top .btn-row { margin-left: 0; }
}

/* Estúdio: dates of the special moments */
.st-when { display: flex; gap: 6px; flex-wrap: wrap; }
.st-when select { flex: 1 1 140px; }
.st-when input { flex: 1 1 120px; }
.st-sub { margin: 14px 0 6px; }
.st-sub .muted { display: block; margin-top: 2px; }
[data-play] { margin: 6px 6px 0 0; }

/* Temas e layouts: calendar, Kids, customer's choices */
.lk-cal { display: grid; gap: 6px; margin-bottom: 8px; }
.lk-cal-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line2); border-radius: var(--r-sm); }
.lk-cal-row .check { flex: 1 1 220px; margin: 0; }
.lk-cal-row select { flex: 0 1 220px; }
.lk-cal-row.own input { flex: 1 1 120px; }
.lk-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; }

/* Estúdio: gallery of the official themes */
.st-gal-wrap { align-items: start; }
.st-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; max-height: 64vh; overflow: auto; padding: 2px; }
.st-gal-card { display: flex; flex-direction: column; align-items: stretch; gap: 4px; height: auto; padding: 10px; text-align: left; white-space: normal; font-weight: 400; }
.st-gal-card b { font-weight: 700; }
.st-gal-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.st-gal-act { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.st-gal-act .btn-row { margin-top: 0; }
.st-import { cursor: pointer; }
.modal-foot label.btn { margin: 0; }
.st-remote { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; }
.st-remote .hint { margin: 4px 0 0; }

/* ---------- Home editor (blocks + preview, app 0.13+) ---------- */
.he-card .card-head .btn-row { margin-top: 0; }
.he-wrap { display: grid; grid-template-columns: minmax(340px, 440px) 1fr; gap: 20px; align-items: start; margin-top: 6px; }
.he-side .seg { margin-top: 0; }
.he-prev { top: 12px; }
.he-testlist { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 12px; margin: 10px 0; }
.he-testlist summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.he-testlist .form-row { margin-top: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.he-testlist .form-row > :first-child { grid-column: 1 / -1; }
.he-testlist label { margin-top: 6px; }
.he-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.he-item { border: 1px solid var(--line2); border-radius: var(--r-sm); background: var(--bg2); }
.he-item.open { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft); }
.he-item.off .he-name, .he-item.off .he-ico { opacity: .45; }
.he-item.drag { opacity: .4; }
.he-item.drop { box-shadow: 0 -3px 0 var(--accent); }
.he-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px; }
.he-grip { cursor: grab; color: var(--faint, var(--muted)); font-size: 14px; letter-spacing: -2px; user-select: none; }
.he-ico { font-size: 18px; width: 24px; text-align: center; flex: none; }
.he-name { flex: 1; min-width: 0; height: auto; padding: 4px 2px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; border: 0; background: transparent; text-align: left; white-space: normal; font-weight: 600; }
.he-name:hover { background: transparent; }
.he-title { font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.he-sum { font-weight: 400; }
.he-found { font-size: 11.5px; font-weight: 500; }
.he-found.ok { color: var(--ok); }
.he-found.warn { color: var(--warn); }
.he-btns { display: flex; align-items: center; gap: 4px; flex: none; }
.he-btns .icon-btn { width: 30px; height: 30px; }
.he-opts { padding: 4px 12px 12px; border-top: 1px solid var(--line); }
.he-row-act { justify-content: space-between; }
.he-empty { padding: 14px; border: 1px dashed var(--line2); border-radius: var(--r-sm); font-size: 13px; }
.switch { position: relative; display: inline-block; width: 36px; height: 20px; margin: 0 2px; cursor: pointer; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: 99px; background: var(--line2); transition: background .15s; pointer-events: none; }
.switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--text); transition: transform .15s; }
.switch input:checked + i { background: var(--accent); }
.switch input:checked + i::after { transform: translateX(16px); background: var(--accent-ink); }
.switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.he-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.he-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 99px; background: var(--panel2); border: 1px solid var(--line2); font-size: 12.5px; }
.he-chip i { font-style: normal; color: var(--muted); font-size: 11px; margin-right: 2px; }
.he-chip b { color: var(--warn); }
.he-chip button { height: 22px; width: 22px; padding: 0; border: 0; background: transparent; color: var(--muted); border-radius: 50%; }
.he-chip button:hover { color: var(--text); background: var(--hover); }
.he-chip-add { display: flex; gap: 6px; }
.he-chip-add input { flex: 1; min-width: 0; }
.he-chip-add select { flex: 0 0 110px; }
.he-when { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.he-when summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.he-days { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; }
.he-days .check { font-size: 13px; }
.he-brands { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.he-brand { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 4px 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.he-brand.off { opacity: .6; }
.he-brand .check { margin: 0; font-size: 13px; }
.he-brand-btns { display: flex; gap: 4px; }
.he-brand-btns .icon-btn { width: 28px; height: 28px; font-size: 11px; }
.he-brand-words { grid-column: 1 / -1; font-size: 12.5px; }
.he-brand-own { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.he-brand-thumb { width: 96px; height: 54px; flex: none; border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); }
.he-brand-thumb img { width: 100%; height: 100%; object-fit: cover; }
.he-brand-thumb img.own { object-fit: contain; }
.he-brand-thumb b { font-size: 13px; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.he-brand-own input[type=color] { width: 36px; height: 30px; padding: 2px; border-radius: 6px; }
.he-img { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.he-img img { height: 52px; max-width: 200px; object-fit: cover; border-radius: 6px; }
.he-file { cursor: pointer; }
.he-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.he-gal-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; height: auto; padding: 12px; text-align: left; white-space: normal; font-weight: 400; }
.he-gal-card b { font-weight: 700; font-size: 14px; }
.he-gal-card .he-ico { font-size: 22px; width: auto; }
@media (max-width: 1000px) {
  .he-wrap { grid-template-columns: 1fr; }
  .he-prev { position: static; order: -1; }
}

/* iPhone home-screen app (PWA): the status bar is see-through (black-translucent), so the page
   starts under the clock/battery and, in landscape, under the notch. env(safe-area-inset-*) is 0
   everywhere else (Android, desktop, normal browser tab), so these rules only add space on iPhone.
   Kept last so the older padding rules above can't override them. */
.topbar { padding-top: calc(18px + env(safe-area-inset-top)); padding-right: calc(40px + env(safe-area-inset-right)); }
.side { padding-top: calc(20px + env(safe-area-inset-top)); padding-left: calc(14px + env(safe-area-inset-left)); padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
@media (max-height: 820px) and (min-width: 901px) { .side { padding-top: calc(14px + env(safe-area-inset-top)); } }
.auth-main { padding-top: calc(32px + env(safe-area-inset-top)); padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
#toast { bottom: calc(24px + env(safe-area-inset-bottom)); }
@media (max-width: 900px) {
  .topbar { padding: calc(12px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) 12px calc(20px + env(safe-area-inset-left)); }
  .content { padding-left: calc(20px + env(safe-area-inset-left)); padding-right: calc(20px + env(safe-area-inset-right)); }
  .modal-wrap { padding-top: max(8vh, calc(12px + env(safe-area-inset-top))); }
}
@media (max-width: 700px) {
  .topbar { padding: calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 10px calc(14px + env(safe-area-inset-left)); }
  .content { padding-left: calc(14px + env(safe-area-inset-left)); padding-right: calc(14px + env(safe-area-inset-right)); }
  #toast { bottom: calc(12px + env(safe-area-inset-bottom)); }
  .modal-wrap { padding-top: env(safe-area-inset-top); }
}

/* "Nova versão disponível" bar, shown when a deploy happened while the panel was open */
.update-bar { position: fixed; z-index: 95; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 24px); padding: 10px 10px 10px 16px; background: var(--panel2); border: 1px solid var(--line2); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.45); font-size: 13.5px; font-weight: 500; }
.update-bar button { flex: none; }

/* Revendas > Solicitações (sign-up requests from /cadastro) */
.sr-list { display: grid; gap: 10px; }
.sr-item { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg2); }
.sr-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.sr-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; }
.sr-code { font-size: 12.5px; padding: 2px 8px; border-radius: 6px; background: var(--panel2); border: 1px solid var(--line2); }
.sr-meta { font-size: 13.5px; overflow-wrap: anywhere; }
.sr-note { margin: 6px 0 0; padding: 10px 12px; border-left: 2px solid var(--accent); background: var(--panel); border-radius: 0 8px 8px 0; font-size: 13.5px; white-space: pre-wrap; }
.sr-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.ptabs .nav-badge { margin-left: 6px; }
@media (max-width: 640px) { .sr-item { flex-direction: column; } .sr-actions { width: 100%; } .sr-actions button { flex: 1; } }

/* Login, same look as the landing page (/revenda/): grid floor, big headline, mascot. */
.auth { min-height: 100vh; min-height: 100svh; }
.auth-side { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; padding: 40px 48px 0; justify-content: flex-start;
  background: radial-gradient(700px 420px at 30% 85%, rgba(181,211,52,.18), transparent 70%), radial-gradient(600px 400px at 100% 0%, rgba(78,161,255,.06), transparent 70%), #0e1013; }
.auth-side::after { display: none; }
.auth-side > * { max-width: 560px; }
.auth-floor { position: absolute !important; left: -50%; right: -50%; bottom: 0; height: 260px; z-index: -1 !important; max-width: none !important; pointer-events: none;
  background-image: linear-gradient(rgba(181,211,52,.32) 1px, transparent 1px), linear-gradient(90deg, rgba(181,211,52,.32) 1px, transparent 1px);
  background-size: 64px 64px; transform: perspective(420px) rotateX(64deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 80%); mask-image: linear-gradient(to top, #000 0%, transparent 80%);
  animation: authFloor 3.2s linear infinite; }
@keyframes authFloor { to { background-position: 0 64px; } }
.auth-logo { height: 36px; margin-bottom: 0; }
.auth-eyebrow { margin-top: clamp(20px, 6vh, 64px); font: 600 12px/1 "Archivo", sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.auth-side h1 { font-family: "Archivo", sans-serif; font-size: clamp(30px, min(3.6vw, 5.6vh), 56px); line-height: 1.02; font-weight: 800; font-stretch: 112%; letter-spacing: -.015em; text-transform: uppercase; margin: 14px 0 22px; }
.auth-side h1 .auth-accent { display: block; color: var(--accent); text-shadow: 0 0 40px rgba(181,211,52,.35); }
.auth-points { gap: 12px; }
.auth-points li { color: #cdd2da; font-size: 15px; }
.auth-points svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; border: 0; background: var(--accent-soft); color: var(--accent); stroke-width: 3; }
.auth-mascot { flex: 1 1 0; min-height: 120px; display: flex; align-items: flex-end; padding-top: 16px; position: relative; }
.auth-mascot img { height: 100%; max-height: 400px; width: auto; object-fit: contain; object-position: left bottom; filter: drop-shadow(0 30px 60px rgba(0,0,0,.6)); animation: authBob 6s ease-in-out infinite; }
.auth-mascot::after { content: ""; position: absolute; left: 0; width: 220px; bottom: 0; height: 30px; border-radius: 50%; background: radial-gradient(closest-side, rgba(181,211,52,.45), transparent); filter: blur(6px); z-index: -1; }
@keyframes authBob { 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .auth-floor, .auth-mascot img { animation: none; } }