:root { color-scheme: dark; --bg: #0f0f0f; --panel: #141414; --deep: #0a0a0a; --line: #272727; --soft-line: #1e1e1e; --text: #e0e0e0; --muted: #777; --blue: #60a5fa; --purple: #c084fc; --green: #00dd99; --amber: #ff9900; --red: #ff3300; }
* { box-sizing: border-box; }
body { margin: 0; padding: 24px; background: var(--bg); color: var(--text); font: 13px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input { font: inherit; }
h1 { margin: 0 0 4px; font-size: 20px; }
h2 { margin: 0 0 14px; font-size: 14px; color: #888; }
body:not(.workspace-ui) h2 { font-size: 14px; }
.live-bar-chart { display: flex; align-items: flex-end; gap: 8px; min-height: 140px; overflow-x: auto; padding-top: 20px; }
.live-day { display: flex; flex: 1 0 24px; flex-direction: column; justify-content: flex-end; align-items: center; height: 140px; gap: 6px; font-size: 10px; color: var(--muted); }
.live-day i { display: block; width: 16px; background: #3b82f6; border-radius: 3px 3px 0 0; }
h3 { margin: 0 0 14px; font-size: 12px; color: #777; }
h2, h3, .label, .eyebrow, th { font-family: "JetBrains Mono", "JetBrains Mono Fallback", monospace; letter-spacing: .04em; text-transform: uppercase; }
p { margin: 0; }
.skip-link { position: absolute; top: -100px; }
.skip-link:focus { top: 8px; background: var(--panel); padding: 10px; z-index: 10; }
.notice { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: -24px -24px 22px; padding: 9px 24px; border-bottom: 1px solid #4a3510; background: #211806; color: var(--amber); font-size: 12px; }
.header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; }
.eyebrow { font-size: 10px; color: var(--blue); margin-bottom: 5px; }
.muted, .note { color: var(--muted); }
.note { margin-top: 12px; font-size: 12px; }
.tabs, .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tabs { margin-bottom: 24px; }
.erp-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; margin-right: 7px; }
nav[aria-label="Áreas do Backoffice"] .button { font-size: 13px; font-weight: 500; border-radius: 6px; }
.erp-section-icon { vertical-align: -3px; color: var(--blue); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 4px; color: #c0c0c0; background-color: var(--panel); --button-rest-color: var(--panel); --button-hover-color: #232323; background-image: linear-gradient(90deg, var(--button-hover-color) 50%, var(--button-rest-color) 50%); background-size: 200% 100%; background-position: 100% 0; background-repeat: no-repeat; background-clip: padding-box; transition: background-position .34s ease; cursor: pointer; }
.button:hover, .button:focus-visible { background-position: 0 0; text-decoration: none; }
.button.active { border-color: #3b82f6; color: #93c5fd; --button-rest-color: #0a1628; --button-hover-color: #142c4c; }
.button:disabled { color: #777; cursor: default; background-image: none; transition: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.date-context { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 16px; margin-bottom: 24px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
.stats { display: flex; flex-wrap: wrap; gap: 20px 30px; padding: 16px 20px; margin-bottom: 24px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
.stat { min-width: 85px; }
.label { color: var(--muted); font-size: 10px; }
.value { display: block; margin-top: 4px; font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums; }
.blue { color: var(--blue); } .purple { color: var(--purple); } .green { color: var(--green); } .amber { color: var(--amber); } .red { color: var(--red); }
section { margin-bottom: 36px; scroll-margin-top: 20px; }
.panel { min-width: 0; padding: 16px 20px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
.grid { display: grid; gap: 12px; }
.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.section-gap { margin-top: 12px; }
.funnel { display: grid; grid-template-columns: 1fr 140px 1fr 140px 1fr; align-items: center; padding: 16px 0 24px; text-align: center; }
.funnel .value { font-size: 28px; }
.funnel .arrow { color: #939393; }
.divider { height: 1px; margin: 16px 0; background: var(--line); }
.row { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-top: 9px; color: #b4b4b4; }
.row strong { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.track { height: 5px; background: #242424; margin-top: 6px; border-radius: 3px; }
.funnel-conversion strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.funnel-conversion p { color: var(--muted); font-size: 11px; }
.funnel-line { position: relative; height: 1px; background: #404040; margin: 12px 10px; }
.funnel-line::after { content: ''; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid #888; border-right: 1px solid #888; transform: rotate(45deg); }
.bucket-row { display: grid; grid-template-columns: 82px minmax(0, 1fr) 24px 42px; align-items: center; gap: 10px; margin-top: 10px; color: #b4b4b4; font-size: 12px; font-variant-numeric: tabular-nums; }
.bucket-row strong, .bucket-percent { text-align: right; }
.bucket-percent { color: var(--muted); }
.bucket-track { height: 6px; border-radius: 3px; background: #242424; overflow: hidden; }
.bucket-fill { height: 100%; background: #3b82f6; }
.bucket-fill.purple-fill { background: #a855f7; }
.chart-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-size: 12px; margin-bottom: 12px; }
.chart-legend strong { font-variant-numeric: tabular-nums; }
.legend-key { display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle; }
.purple-key { background: var(--purple); } .blue-key { background: var(--blue); }
.dashed-key { background: repeating-linear-gradient(90deg, var(--purple) 0 4px, transparent 4px 6px); }
.chart-scroll { overflow-x: auto; }
.chart-scroll-hint { display: none; color: var(--muted); font-size: 11px; margin-top: 8px; }
.daily-scroll-hint { display: none; color: var(--muted); font-size: 11px; margin-top: 8px; }
.daily-active-plot { display: block; width: 100%; min-width: 720px; height: 230px; }
.search-history-plot { display: block; width: 100%; min-width: 720px; height: 230px; }
.green-key { background: var(--green); }
.channel-web { fill: #3b82f6; } .channel-api { fill: #10b981; } .channel-mcp { fill: #a855f7; }
.search-history-table { min-width: 720px; }
.search-history-table th[scope="row"] { background: var(--panel); font-family: system-ui, sans-serif; text-transform: none; letter-spacing: normal; border-top: 1px solid var(--soft-line); }
.search-history-table tfoot td, .search-history-table tfoot th { border-top: 1px solid #404040; background: var(--deep); font-weight: 600; }
.history-table { min-width: 960px; }
.history-table th[scope="row"] { background: var(--panel); font-family: system-ui, sans-serif; text-transform: none; letter-spacing: normal; border-top: 1px solid var(--soft-line); white-space: nowrap; }
.history-today td, .history-today th[scope="row"] { background: #101b28; }
.heatmap-scroll { overflow-x: auto; }
.heatmap-calendar { display: flex; gap: 3px; width: max-content; padding-bottom: 4px; padding-right: 20px; }
.heatmap-week { display: grid; grid-template-rows: 18px repeat(7, 9px); gap: 3px; width: 9px; }
.heatmap-weekdays { display: grid; grid-template-rows: 18px repeat(7, 9px); gap: 3px; width: 28px; color: var(--muted); font-size: 9px; line-height: 9px; }
.heatmap-month { color: var(--muted); font-size: 9px; white-space: nowrap; }
.heatmap-cell, .heatmap-spacer { display: block; width: 9px; height: 9px; border-radius: 2px; }
.heatmap-cell { background: #242424; border: 1px solid #303030; }
.heatmap-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 10px; color: var(--muted); }
.heatmap-legend { display: inline-flex; align-items: center; gap: 4px; }
.heatmap-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
.heatmap-level-1 { background: #163962; } .heatmap-level-2 { background: #2563a5; } .heatmap-level-3 { background: #60a5fa; }
.daily-active-bar { fill: #3b82f6; }
.daily-active-value { fill: var(--blue); font-size: 11px; font-variant-numeric: tabular-nums; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.cohort-table { min-width: 580px; }
.cohort-table th[scope="row"] { background: var(--panel); text-transform: none; font-family: system-ui, sans-serif; letter-spacing: normal; border-top: 1px solid var(--soft-line); }
.cohort-rate { font-weight: 600; }
.cohort-base { color: var(--muted); font-size: 11px; white-space: nowrap; }
.cohort-pending { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.distribution-row { margin-top: 14px; }
.distribution-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: #b4b4b4; font-size: 12px; }
.distribution-head strong { flex-shrink: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.distribution-track { height: 5px; margin-top: 5px; border-radius: 3px; background: #242424; overflow: hidden; }
.distribution-fill { height: 100%; }
.blue-fill { background: #3b82f6; } .purple-fill { background: #a855f7; } .red-fill { background: #dc2626; }
.distribution-detail { margin-top: 5px; font-size: 11px; color: var(--muted); }
.financial-context { margin: -4px 0 14px; font-size: 12px; color: var(--muted); }
.financial-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 4px 0; color: #b4b4b4; font-size: 12px; }
.financial-row strong { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.financial-row .financial-emphasis { font-size: 19px; font-weight: 650; }
.financial-grid .panel { align-self: start; }
.list-count { color: var(--muted); font-weight: 400; }
.list-metrics { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--muted); font-size: 12px; margin-bottom: 12px; }
.list-metrics strong { font-variant-numeric: tabular-nums; }
.empty-list-detail { display: block; margin-top: 6px; font-size: 11px; font-weight: 400; }
.admin-list-scroll { border-radius: 4px 4px 0 0; }
.list-empty-state { padding: 30px 16px; text-align: center; color: var(--muted); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 4px 4px; background: var(--panel); }
.list-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 10px; color: var(--muted); font-size: 11px; }
.admin-list-table tbody th { background: var(--panel); border-top: 1px solid var(--soft-line); text-transform: none; letter-spacing: normal; font-family: system-ui, sans-serif; }
.admin-list-table tbody td { min-width: 80px; }
.heatmap-cell.heatmap-demo-1 { background: #163962; } .heatmap-cell.heatmap-demo-2 { background: #2563a5; } .heatmap-cell.heatmap-demo-3 { background: #60a5fa; }
.operations-table { min-width: 800px; }
.operations-table th[scope="row"] { background: var(--panel); border-top: 1px solid var(--soft-line); font-family: system-ui, sans-serif; text-transform: none; letter-spacing: normal; }
.settings-table { min-width: 460px; }
.settings-table th[scope="row"] { background: var(--panel); border-top: 1px solid var(--soft-line); font-family: system-ui, sans-serif; text-transform: none; letter-spacing: normal; }
.settings-fields { display: grid; gap: 8px; margin-bottom: 12px; }
.settings-fields input { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--deep); color: var(--muted); }
.settings-fields select { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--deep); color: var(--muted); font: inherit; }
.demo-filters { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.demo-filters label { display: grid; gap: 5px; flex: 1 1 160px; color: var(--muted); font-size: 11px; }
.demo-filters input, .demo-filters select { width: 100%; min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--muted); font: inherit; }
.weekly-charts, .annual-maps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.growth-distributions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.weekly-charts { gap: 24px; }
.growth-distributions { gap: 14px; }
.growth-summary .value { font-size: 22px; }
.growth-summary { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.growth-summary h3 { font-size: 10px; font-weight: 400; }
.growth-summary .note { font-size: 11px; }
.legend-key { width: 12px; height: 12px; border-radius: 0; }
.plot-mrr-area { fill: #1e0a30; opacity: .65; }
.annual-value { fill: var(--blue); font-size: 11px; font-variant-numeric: tabular-nums; }
.financial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.financial-grid .panel { align-self: stretch; }
.financial-grid h3 { font-size: 10px; font-weight: 400; }
.financial-row { grid-template-columns: minmax(100px, .7fr) minmax(0, 1.3fr); padding: 2px 0; color: #777; }
.financial-row .financial-emphasis { font-size: 15px; }
.heatmap-week { grid-template-rows: 18px repeat(7, 11px); width: 11px; }
.heatmap-weekdays { grid-template-rows: 18px repeat(7, 11px); }
.heatmap-calendar { width: 100%; min-width: 790px; justify-content: space-between; }
.heatmap-cell, .heatmap-spacer { width: 11px; height: 11px; }
.annual-maps article:first-child .heatmap-demo-1, .annual-maps article:first-child .heatmap-level-1 { background: #064e3b; }
.annual-maps article:first-child .heatmap-demo-2, .annual-maps article:first-child .heatmap-level-2 { background: #008c4b; }
.annual-maps article:first-child .heatmap-demo-3, .annual-maps article:first-child .heatmap-level-3 { background: #22c55e; }
.annual-maps article:last-child .heatmap-demo-1, .annual-maps article:last-child .heatmap-level-1 { background: #2e1065; }
.annual-maps article:last-child .heatmap-demo-2, .annual-maps article:last-child .heatmap-level-2 { background: #6d28d9; }
.annual-maps article:last-child .heatmap-demo-3, .annual-maps article:last-child .heatmap-level-3 { background: #a855f7; }
.annual-maps h3 { display: inline-block; }
.annual-maps .chart-legend { float: right; margin-bottom: 8px; font-size: 11px; }
.annual-maps .heatmap-scroll { clear: both; }
.table-badge { display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 10px; font-weight: 600; margin-right: 3px; white-space: nowrap; }
.badge-green { color: var(--green); background: #0a2a1a; } .badge-blue { color: var(--blue); background: #0a1628; } .badge-purple { color: var(--purple); background: #1e0a30; } .badge-amber { color: var(--amber); background: #2a1a06; }
.table-volume { width: 100%; min-width: 130px; height: 7px; border-radius: 3px; background: #202020; overflow: hidden; display: flex; }
.table-volume span { display: block; height: 100%; }
.table-volume .bar-web { background: #3b82f6; } .table-volume .bar-api { background: #10b981; } .table-volume .bar-mcp { background: #a855f7; }
.admin-list-table td, .admin-list-table tbody th { font-size: 11px; padding: 7px 10px; font-weight: 400; }
.admin-list-table th { font-size: 10px; padding: 7px 10px; }
.reference-day-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.reference-day-nav input { color: var(--text); background: transparent; border: 1px solid var(--line); padding: 7px; }
@media (max-width: 700px) { .financial-grid { grid-template-columns: 1fr; } .annual-maps .chart-legend { float: none; } }
@media (max-width: 980px) { .weekly-charts, .annual-maps, .growth-distributions { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .growth-summary { grid-template-columns: 1fr; } }
.weekly-plot { display: block; width: 100%; min-width: 560px; height: 238px; }
.plot-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plot-axis, .plot-date { fill: var(--muted); font-size: 11px; font-family: system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.plot-line { fill: none; vector-effect: non-scaling-stroke; }
.mrr-line { stroke: var(--purple); stroke-width: 2; }
.annual-line { stroke: var(--blue); stroke-width: 2; }
.monthly-line { stroke: var(--purple); stroke-width: 1.5; stroke-dasharray: none; }
.point-purple { fill: var(--purple); } .point-blue { fill: var(--blue); }
.point-value { fill: var(--purple); font-size: 11px; font-variant-numeric: tabular-nums; }
.point-hit { fill: transparent; stroke: transparent; }
.plot-point:focus { outline: none; }
.plot-point:focus-visible .point-hit { stroke: var(--text); stroke-width: 1; }
.chart-details { margin-top: 14px; }
.chart-details summary { width: fit-content; font-size: 12px; }
.chart-details summary::before { content: '+'; margin-right: 8px; }
.chart-details[open] summary::before { content: '−'; }
.chart-details .table-wrap { margin-top: 12px; }
.chart-details th[scope="row"] { background: var(--panel); text-transform: none; font-family: system-ui, sans-serif; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.empty-chart { display: grid; place-items: center; min-height: 150px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to top, transparent 0, transparent 35px, var(--soft-line) 35px, var(--soft-line) 36px); color: var(--muted); text-align: center; padding: 20px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; }
table { width: 100%; border-collapse: collapse; background: var(--panel); font-size: 12px; }
th { padding: 9px 12px; text-align: left; white-space: nowrap; background: var(--deep); font-size: 10px; color: #c0c0c0; }
td { padding: 10px 12px; border-top: 1px solid var(--soft-line); vertical-align: top; }
.empty-cell { padding: 26px 12px; color: var(--muted); text-align: center; }
.status { display: inline-block; border: 1px solid var(--line); border-radius: 3px; padding: 2px 6px; font-size: 11px; }
footer { border-top: 1px solid var(--line); padding-top: 16px; color: var(--muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
@media (max-width: 1100px) { .five { grid-template-columns: repeat(3, minmax(0, 1fr)); } .three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { body { padding: 16px; } .notice { margin: -16px -16px 20px; padding: 10px 16px; } .header { align-items: flex-start; flex-direction: column; } .two, .three, .five { grid-template-columns: 1fr; } .funnel { grid-template-columns: 1fr; gap: 16px; } .funnel .arrow { transform: rotate(90deg); } .panel { padding: 16px; } }
.header > div:first-child { min-width:0; }
.header .actions { flex-shrink:0; }
@media (max-width: 700px) {
 .header { display:grid; grid-template-columns:minmax(0,1fr) auto; position:static; padding-right:0; min-height:0; align-items:start; column-gap:12px; row-gap:4px; }
 .header > div:first-child { display:contents; }
 .header .eyebrow { grid-column:1; grid-row:1; margin:0; }
 .header h1 { grid-column:1; grid-row:2; margin:0; }
 .header .muted { grid-column:1 / -1; grid-row:3; margin:0; }
 .header .actions { position:static; grid-column:2; grid-row:1 / 3; justify-content:flex-end; align-self:start; }
 .header .account-label { display:none; }
 .header .account-dropdown summary { width:40px; height:40px; padding:8px; justify-content:center; }
 .header .account-chevron { display:none; }
 .header .actions .button { min-height:40px; }
 .header h1 { overflow-wrap:anywhere; text-wrap:balance; }
 .header .eyebrow { overflow-wrap:anywhere; }
 .header .muted { line-height:1.5; }
 .tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 .tabs .button { min-width:0; min-height:44px; padding:10px 8px; font-size:12px; white-space:normal; justify-content:center; text-align:center; gap:6px; }
 .tabs .erp-icon { flex-shrink:0; }
}
@media (max-width: 700px) { .funnel-conversion { margin: 0 auto; width: 140px; } .funnel-line { width: 1px; height: 20px; margin: 10px auto; } .funnel-line::after { right: -3px; top: auto; bottom: 0; transform: rotate(135deg); } .bucket-row { grid-template-columns: 72px minmax(0, 1fr) 18px 40px; gap: 7px; font-size: 11px; } }
@media (max-width: 560px) { .chart-scroll-hint { display: block; } }
@media (max-width: 1050px) { .daily-scroll-hint { display: block; } }