:root {
  --ink: #18252d;
  --muted: #66767f;
  --line: #d9e1e4;
  --surface: #ffffff;
  --page: #f4f7f8;
  --orange: #f05a18;
  --orange-soft: #fff0e8;
  --teal: #087b83;
  --teal-soft: #e6f5f4;
  --blue: #1672b7;
  --blue-soft: #eaf4fb;
  --red: #bd3227;
  --red-soft: #fff0ee;
  --green: #277443;
  --green-soft: #eaf6ed;
  --shadow: 0 12px 28px rgba(26, 42, 50, 0.09);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--page); }
body {
  margin: 0;
  min-width: 0;
  color: var(--ink);
  background: var(--page);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: 0; }

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #eef3f3;
  transition: opacity 160ms ease, transform 160ms ease;
}
.login-shell.is-leaving { opacity: 0; transform: translateY(-8px); }
.login-panel {
  width: min(100%, 420px);
  padding: 34px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--orange);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.brand-lockup { display: flex; align-items: center; min-width: 0; gap: 10px; }
.brand-coca { display: block; width: 150px; height: 30px; object-fit: contain; object-position: left center; }
.brand-shop { display: block; width: 58px; height: 30px; object-fit: contain; object-position: left center; }
.brand-title, .app-brand { margin: 0; color: var(--ink); font-size: 21px; font-weight: 800; white-space: nowrap; }
.login-lockup { min-height: 34px; }
.app-lockup { gap: 12px; }
.login-heading { margin: 38px 0 26px; }
.login-heading h1 { max-width: 260px; margin: 7px 0 0; font-size: 29px; line-height: 1.12; }
.eyebrow { margin: 0; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 0; }
form { display: grid; gap: 9px; }
label { margin-top: 8px; color: #2c3941; font-size: 13px; font-weight: 800; }
input {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid #b9c5ca;
  border-radius: 5px;
  color: var(--ink);
  background: #fff;
  outline: none;
}
input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px #cdebea; }
button[type="submit"] {
  min-height: 48px;
  margin-top: 18px;
  border: 0;
  border-radius: 5px;
  color: #fff;
  background: var(--ink);
  font-weight: 800;
}
button[type="submit"]:hover { background: #2a3a44; }
button[type="submit"]:disabled { cursor: wait; opacity: 0.7; }
.form-error {
  display: none;
  margin: 13px 0 0;
  padding: 10px 12px;
  border: 1px solid #f6b9b2;
  border-radius: 5px;
  color: #9b2d24;
  background: var(--red-soft);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.form-error:not([hidden]) { display: block; }

.dashboard-shell { min-height: 100vh; padding-bottom: 34px; }
.app-frame { width: min(100% - 40px, 1320px); margin: 0 auto; }
.app-header { border-bottom: 1px solid var(--line); background: var(--surface); }
.header-content { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.session-actions { display: flex; align-items: center; gap: 12px; }
.user-summary { display: grid; gap: 3px; text-align: right; font-size: 13px; }
.user-summary span { color: var(--muted); }
.logout-button {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid #b7c3c8;
  border-radius: 5px;
  color: var(--ink);
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}
.logout-button:hover { border-color: var(--ink); background: #f3f6f7; }
.password-button {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid #b7c3c8;
  border-radius: 5px;
  color: var(--ink);
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}
.password-button:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-soft); }
.password-dialog {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(20, 36, 43, 0.52);
}
.password-panel {
  width: min(100%, 430px);
  display: grid;
  gap: 9px;
  padding: 24px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 20px 50px rgba(14, 31, 38, 0.28);
}
.password-dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.password-dialog-heading h2 { margin: 6px 0 6px; font-size: 23px; }
.password-dialog-heading > div > p:last-child { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.42; }
.dialog-close {
  display: grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 1px solid #b7c3c8;
  border-radius: 5px;
  color: var(--ink);
  background: #fff;
  font-size: 23px;
  line-height: 1;
}
.dialog-close:hover { border-color: var(--ink); background: #f3f6f7; }
.form-success {
  margin: 13px 0 0;
  padding: 10px 12px;
  border: 1px solid #a9d6b6;
  border-radius: 5px;
  color: #1f6b39;
  background: var(--green-soft);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.password-actions { display: flex; justify-content: end; gap: 10px; margin-top: 12px; }
.password-actions button { min-height: 42px; padding: 0 15px; border-radius: 5px; font-size: 12px; font-weight: 800; }
.dialog-cancel { border: 1px solid #b7c3c8; color: var(--ink); background: #fff; }
.dialog-cancel:hover { border-color: var(--ink); background: #f3f6f7; }
.password-actions button[type="submit"] { min-width: 126px; margin: 0; }
.app-nav { position: sticky; z-index: 3; top: 0; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.96); }
.nav-list { display: flex; gap: 4px; overflow-x: auto; }
.nav-button {
  min-height: 48px;
  padding: 0 15px;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  background: transparent;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.nav-button:hover { color: var(--ink); }
.nav-button.is-active { border-bottom-color: var(--orange); color: var(--ink); }
.app-content { padding-top: 30px; }
.app-page { display: none; animation: page-in 180ms ease both; }
.app-page.is-active { display: block; }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.context-strip {
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: 64px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.context-strip > div { display: grid; gap: 4px; }
.context-strip span { color: var(--muted); font-size: 11px; font-weight: 800; }
.context-strip strong { font-size: 14px; }
.data-mode { margin: 0 0 0 auto; color: var(--teal); font-size: 12px; font-weight: 800; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 28px 0 16px; }
.page-heading h2 { margin: 6px 0 0; font-size: 25px; }
.page-subtitle { max-width: 360px; margin: 0; color: var(--muted); font-size: 13px; text-align: right; }
.count-label { color: var(--muted); font-size: 12px; font-weight: 800; }

.goal-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.goal-card { min-height: 238px; padding: 19px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 2px 5px rgba(26, 42, 50, 0.03); }
.goal-card.coverage { border-top: 4px solid var(--orange); }
.goal-card.repurchase { border-top: 4px solid var(--teal); }
.goal-card.billing { border-top: 4px solid var(--purple); }
.goal-card-label { display: block; color: var(--muted); font-size: 11px; font-weight: 800; }
.goal-card-result-label { display: block; margin-top: 17px; color: var(--muted); font-size: 11px; font-weight: 800; }
.goal-card-value { display: block; margin-top: 4px; font-size: 31px; line-height: 1; }
.goal-card-detail { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; }
.goal-presale { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--muted); font-size: 12px; font-weight: 700; }
.goal-presale strong { color: var(--orange); font-size: 15px; }
.repurchase .goal-presale strong { color: var(--teal); }
.billing .goal-presale strong { color: var(--blue); }
.goal-additional { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.goal-additional strong { color: var(--blue); font-size: 12px; }
.progress-track { height: 8px; margin: 17px 0 10px; overflow: hidden; border-radius: 999px; background: #e8eef0; }
.progress-track span { display: block; height: 100%; border-radius: inherit; }
.coverage .progress-track span { background: var(--orange); }
.repurchase .progress-track span { background: var(--teal); }
.billing .progress-track span { background: var(--blue); }
.goal-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; }
.goal-percent { color: var(--ink); font-weight: 800; }
.goal-gap { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; }
.goal-gap.is-complete { color: var(--green); }

.panel { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 2px 5px rgba(26, 42, 50, 0.03); }
.ranking-panel { margin-top: 14px; }
.panel-heading { min-height: 76px; padding: 16px 19px; border-bottom: 1px solid var(--line); }
.panel-heading h2 { margin: 6px 0 0; font-size: 18px; }
.ranking-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ranking-item { min-height: 185px; padding: 20px; border-right: 1px solid var(--line); }
.ranking-item:last-child { border-right: 0; }
.ranking-item > p { margin-bottom: 17px; color: var(--muted); font-size: 12px; font-weight: 800; }
.ranking-number { display: flex; align-items: end; gap: 8px; margin-bottom: 16px; }
.ranking-number strong { font-size: 38px; line-height: 0.9; }
.ranking-number span { color: var(--muted); font-size: 12px; font-weight: 700; }
.ranking-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ranking-details > div { display: grid; gap: 4px; }
.ranking-details span { color: var(--muted); font-size: 11px; font-weight: 800; }
.ranking-details strong { font-size: 14px; }
.status { display: inline-flex; width: max-content; align-items: center; min-height: 24px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.status.yes { color: var(--green); background: var(--green-soft); }
.status.no { color: var(--red); background: var(--red-soft); }
.empty-state { margin: 0; padding: 28px 20px; color: var(--muted); font-size: 13px; }

.opportunities-list { display: grid; gap: 12px; }
.download-group { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.download-group summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 76px; padding: 18px; cursor: pointer; list-style: none; }
.download-group summary::-webkit-details-marker { display: none; }
.download-group summary::after { content: "+"; color: var(--teal); font-size: 24px; font-weight: 400; }
.download-group[open] summary::after { content: "-"; }
.download-group h3 { margin: 0; font-size: 17px; }
.download-group p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.download-scroller { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; gap: 8px; padding: 0 18px 18px; }
.download-actions { display: flex; min-width: 0; gap: 10px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: thin; }
.download-button { flex: 0 0 148px; min-height: 48px; padding: 7px 12px; border: 1px solid #b8c7cc; border-radius: 5px; color: var(--ink); background: #fff; font-size: 12px; font-weight: 800; line-height: 1.25; scroll-snap-align: start; }
.download-button:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-soft); }
.download-button:disabled { cursor: wait; opacity: 0.65; }
.download-scroll-button { width: 36px; height: 40px; border: 1px solid #b8c7cc; border-radius: 5px; color: var(--teal); background: #fff; font-size: 22px; line-height: 1; }
.download-scroll-button:hover:not(:disabled) { border-color: var(--teal); background: var(--teal-soft); }
.download-scroll-button:disabled { visibility: hidden; }

.table-wrap { overflow-x: auto; }
.access-mobile-list { display: none; }
table { width: 100%; min-width: 560px; border-collapse: collapse; }
th, td { padding: 13px 14px; border-bottom: 1px solid #e4eaec; text-align: left; white-space: nowrap; font-size: 12px; }
th { color: var(--muted); background: #f5f8f9; font-size: 11px; font-weight: 800; }
thead tr:first-child th[colspan] { border-bottom: 1px solid #cfd9dd; color: var(--ink); text-align: center; }
td:first-child { font-weight: 800; }
td:first-child span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 500; }
.percent-value { color: var(--teal); font-weight: 800; }
.presale-value { color: var(--orange); font-weight: 800; }
.rank-value { color: var(--blue); font-weight: 800; }
.empty-row { color: var(--muted); text-align: center; }
tbody tr:hover { background: #f7fafb; }

.team-tree { display: grid; }
.hierarchy-item { border-bottom: 1px solid var(--line); background: var(--surface); }
.hierarchy-item:last-child { border-bottom: 0; }
.hierarchy-item summary { display: flex; align-items: center; justify-content: space-between; min-height: 70px; padding: 15px 18px; cursor: pointer; list-style: none; }
.hierarchy-item summary::-webkit-details-marker { display: none; }
.hierarchy-item summary::after { content: "+"; color: var(--teal); font-size: 23px; font-weight: 400; }
.hierarchy-item[open] > summary { background: #f6fafb; }
.hierarchy-item[open] > summary::after { content: "-"; }
.hierarchy-summary { display: grid; gap: 5px; min-width: 0; }
.hierarchy-summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.hierarchy-summary span { color: var(--muted); font-size: 12px; }
.hierarchy-details { padding: 18px; border-top: 1px solid var(--line); background: #fbfcfc; }
.detail-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.detail-metric { min-width: 0; padding-left: 12px; border-left: 3px solid var(--line); }
.detail-metric.coverage { border-left-color: var(--orange); }
.detail-metric.repurchase { border-left-color: var(--teal); }
.detail-metric.billing { border-left-color: var(--blue); }
.detail-metric h3 { margin: 0 0 11px; font-size: 13px; }
.detail-metric dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin: 0; }
.detail-metric dt, .detail-ranking dt { color: var(--muted); font-size: 10px; font-weight: 800; }
.detail-metric dd, .detail-ranking dd { margin: 4px 0 0; font-size: 13px; font-weight: 800; }
.detail-gap { margin: 13px 0 0; color: var(--muted); font-size: 12px; font-weight: 800; }
.detail-gap.is-complete { color: var(--green); }
.detail-ranking { display: flex; flex-wrap: wrap; gap: 20px; margin: 17px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.detail-ranking > div { display: grid; gap: 2px; }
.nested-hierarchy { margin: 0 18px 18px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.nested-title { margin: 0; padding: 12px 14px; color: var(--muted); background: #f5f8f9; font-size: 11px; font-weight: 800; }
.nested-hierarchy .hierarchy-item summary { min-height: 62px; padding: 13px 14px; }
.nested-hierarchy .hierarchy-details { padding: 15px; }
.coordinator-supervisors { background: #f8fbfc; }

.winners-list { display: grid; gap: 12px; }
.winner-month { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 2px 5px rgba(26, 42, 50, 0.03); }
.winner-month summary { display: flex; align-items: center; justify-content: space-between; min-height: 74px; padding: 16px 19px; cursor: pointer; list-style: none; }
.winner-month summary::-webkit-details-marker { display: none; }
.winner-month summary::after { content: "+"; color: var(--orange); font-size: 24px; font-weight: 400; }
.winner-month[open] summary { border-bottom: 1px solid var(--line); background: #f8fbfc; }
.winner-month[open] summary::after { content: "-"; }
.winner-month summary > span { display: grid; gap: 5px; }
.winner-month summary strong { font-size: 16px; }
.winner-month summary small { color: var(--muted); font-size: 12px; }
.winner-month-content { padding: 18px; }
.winner-report-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; }
.winner-report-actions p { margin: 0; color: var(--muted); font-size: 13px; }
.winner-rows { display: grid; gap: 18px; }
.winners-role-section { overflow: hidden; border: 1px solid var(--line); border-radius: 6px; }
.winners-role-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; background: #f5f8f9; border-bottom: 1px solid var(--line); }
.winners-role-heading h3 { margin: 0; font-size: 14px; }
.winners-role-heading span { color: var(--muted); font-size: 11px; font-weight: 800; }
.winner-empty { margin: 0; padding: 18px 15px; color: var(--muted); font-size: 13px; }
.winners-table-wrap { border: 0; border-radius: 0; }
.winners-table th { background: #20343a; color: #fff; }
.winners-table td { vertical-align: middle; }
.winners-table td:nth-child(2), .winners-table td:nth-child(5), .winners-table td:nth-child(6) { min-width: 160px; }
.winners-table td span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.winners-table td .status { display: inline-flex; margin-top: 5px; }
.winner-draws { border-top: 1px solid var(--line); background: #f8fbfc; }
.winner-draws summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 15px; cursor: pointer; color: var(--teal); font-size: 12px; font-weight: 800; list-style: none; }
.winner-draws summary::-webkit-details-marker { display: none; }
.winner-draws summary::after { content: "+"; margin-left: auto; color: var(--orange); font-size: 18px; font-weight: 400; }
.winner-draws[open] summary { border-bottom: 1px solid var(--line); }
.winner-draws[open] summary::after { content: "-"; }
.winner-draws .winners-table-wrap { background: var(--surface); }

.rules-intro {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--orange);
  border-radius: 8px;
  background: var(--surface);
}
.rules-intro > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
#rules-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
#rules-period { color: var(--teal); font-size: 15px; font-weight: 800; }
.rule-baselines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 17px; }
.rule-baselines > div { display: grid; gap: 4px; padding-left: 12px; border-left: 2px solid #ccd7da; }
.rule-baselines span, .rule-card-role { color: var(--muted); font-size: 11px; font-weight: 800; }
.rule-baselines strong { font-size: 14px; line-height: 1.25; }
.rules-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 14px; }
.rule-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.rule-card { min-height: 190px; padding: 19px; border: 1px solid var(--line); border-top: 4px solid var(--teal); border-radius: 8px; background: var(--surface); box-shadow: 0 2px 5px rgba(26, 42, 50, 0.03); }
.rule-card:nth-child(2n) { border-top-color: var(--orange); }
.rule-card h3 { margin: 9px 0 12px; font-size: 23px; }
.rule-card p { margin: 0; color: #43535b; font-size: 13px; line-height: 1.46; white-space: pre-line; }
.rule-card .rule-bonus { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--ink); white-space: pre-line; }
.rules-notes { margin-top: 20px; padding: 19px; border-top: 2px solid var(--ink); background: transparent; }
.rules-notes h3 { margin: 6px 0 10px; font-size: 17px; }
.rules-notes ul { display: grid; gap: 8px; margin: 0; padding-left: 19px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.rules-general, .rules-quarterly-notes { padding: 19px; border-top: 2px solid var(--ink); background: transparent; }
.rules-general h3, .rules-quarterly-notes h3 { margin: 6px 0 10px; font-size: 17px; }
.rules-general ul, .rules-quarterly-notes ul { display: grid; gap: 8px; margin: 0; padding-left: 19px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.rules-quarterly { display: grid; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.rules-quarterly-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.rules-quarterly-heading h3 { margin: 5px 0 0; font-size: 21px; }
.rules-quarterly-heading > span { color: var(--muted); font-size: 13px; font-weight: 800; text-align: right; }

.analytics-console { display: grid; grid-template-columns: 214px minmax(0, 1fr); min-height: 690px; overflow: hidden; border: 1px solid #30393b; border-radius: 8px; color: #f3f6f5; background: #101415; box-shadow: 0 8px 20px rgba(16, 20, 21, 0.17); }
.console-sidebar { display: flex; flex-direction: column; gap: 11px; padding: 15px 12px; border-right: 1px solid #30393b; background: #141a1b; }
.console-brand { display: grid; gap: 4px; margin-bottom: 8px; padding: 8px 9px 16px; border-bottom: 1px solid #30393b; }
.console-brand span, .console-heading > div > p, .console-panel-heading p { color: #f15b2a; font-size: 10px; font-weight: 800; letter-spacing: 0; }
.console-brand strong { font-size: 17px; line-height: 1.15; }
.console-filter-heading { display: flex; align-items: center; justify-content: space-between; margin: 2px 4px 1px; color: #e6ece9; font-size: 14px; font-weight: 800; }
.console-filter-heading button { min-height: 25px; padding: 0 7px; border: 1px solid #465357; border-radius: 4px; color: #d7e0dd; background: transparent; font-size: 10px; font-weight: 800; }
.console-filter-heading button:hover { border-color: #f15b2a; color: #fff; }
.console-sidebar label, .console-sidebar .console-filter, .console-top-controls label { display: grid; gap: 6px; margin: 0; color: #bcc7c6; font-size: 10px; font-weight: 800; }
.console-sidebar select, .console-top-controls select { width: 100%; min-height: 36px; padding: 0 28px 0 9px; border: 1px solid #536064; border-radius: 4px; color: #f4f7f5; background: #171e20; font-size: 12px; font-weight: 700; }
.console-sidebar select:focus, .console-top-controls select:focus { border-color: #f15b2a; outline: 2px solid #4c2920; outline-offset: 1px; }
.console-sidebar select[hidden] { display: none; }
.multi-filter-control { position: relative; min-width: 0; color: #f4f7f5; font-size: 12px; font-weight: 700; }
.multi-filter-control summary { display: flex; align-items: center; justify-content: space-between; min-height: 36px; padding: 0 30px 0 9px; border: 1px solid #536064; border-radius: 4px; background: #171e20; cursor: pointer; list-style: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-filter-control summary::-webkit-details-marker { display: none; }
.multi-filter-control summary::after { position: absolute; right: 12px; width: 7px; height: 7px; border-right: 2px solid #b8c5c4; border-bottom: 2px solid #b8c5c4; content: ""; transform: rotate(45deg) translateY(-2px); transition: transform 150ms ease; }
.multi-filter-control[open] summary { border-color: #f15b2a; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.multi-filter-control[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.multi-filter-menu { position: absolute; z-index: 12; top: calc(100% - 1px); right: 0; left: 0; min-width: 100%; max-height: 250px; overflow: auto; border: 1px solid #f15b2a; border-top: 0; border-radius: 0 0 4px 4px; background: #171e20; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32); }
.multi-filter-menu label { display: flex; grid-template-columns: none; align-items: center; gap: 8px; min-height: 30px; padding: 0 9px; color: #e4ebe8; font-size: 11px; font-weight: 700; cursor: pointer; }
.multi-filter-menu label:hover { background: #263033; }
.multi-filter-menu input { width: 15px; height: 15px; margin: 0; accent-color: #f15b2a; }
.multi-filter-all { border-bottom: 1px solid #465154; }
.multi-filter-options { display: grid; }
.multi-filter-options label span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-filter-empty { display: block; padding: 10px; color: #9eadaa; font-size: 11px; }
.multi-filter-footer { display: block; padding: 7px 9px; border-top: 1px solid #465154; color: #cbd5d2; font-size: 10px; font-weight: 800; }
.console-scope { margin: auto 4px 1px; padding-top: 12px; border-top: 1px solid #30393b; color: #8e9c9d; font-size: 10px; line-height: 1.45; }
.console-main { min-width: 0; padding: 14px; }
.console-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; padding-bottom: 12px; border-bottom: 1px solid #30393b; }
.console-tab { display: inline-flex; align-items: center; min-height: 28px; padding: 0 11px; border: 1px solid #465357; border-radius: 5px; color: #aebbb9; font-size: 12px; font-weight: 800; }
.console-tab.is-active { border-color: #f15b2a; color: #fff; background: #d9471b; }
.console-top-controls { display: flex; align-items: end; gap: 10px; }
.console-top-controls select { width: 166px; min-height: 32px; }
.console-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 17px 2px 13px; }
.console-heading > div > p { margin: 0; }
.console-heading h2 { margin: 4px 0 5px; color: #fff; font-size: 29px; line-height: 1.05; }
.console-heading > div > span { color: #aebbb9; font-size: 12px; }
.analytics-status { max-width: 260px; margin: 0; color: #9eadaa; font-size: 11px; font-weight: 700; text-align: right; }
.analytics-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
.analytics-kpi { min-width: 0; min-height: 125px; padding: 14px; border: 1px solid #364145; border-top: 3px solid #647176; border-radius: 7px; background: #1a2021; }
.analytics-kpi.coverage { border-top-color: #f15b2a; }
.analytics-kpi.repurchase { border-top-color: #11a7a5; }
.analytics-kpi.billing { border-top-color: #2c90d3; }
.analytics-kpi.base { border-top-color: #e0b72f; }
.analytics-kpi.presale { border-top-color: #c44f73; }
.analytics-kpi > span { display: block; color: #bac5c4; font-size: 10px; font-weight: 800; line-height: 1.2; }
.analytics-kpi > strong { display: block; margin-top: 10px; color: #fff; font-size: 18px; line-height: 1.12; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.analytics-kpi.billing > strong { font-size: 17px; }
.analytics-kpi > p { margin: 12px 0 0; color: #94a2a1; font-size: 10px; font-weight: 700; line-height: 1.35; }
.analytics-indicator-panel { margin-top: 10px; }
.analytics-indicator-detail { min-height: 108px; padding: 15px; }
.indicator-focus { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 7px 22px; }
.indicator-focus > span { color: #b9c5c2; font-size: 11px; font-weight: 800; }
.indicator-focus > strong { color: #f3f7f5; font-size: 28px; line-height: 1; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; text-align: right; }
.indicator-focus > p { grid-column: 1 / -1; margin: 0; color: #96a5a3; font-size: 11px; font-weight: 700; }
.repurchase-detail-grid { display: grid; grid-template-columns: minmax(255px, 0.7fr) minmax(0, 1.3fr); gap: 18px; }
.repurchase-breakdown { display: flex; align-items: center; justify-content: center; gap: 18px; min-width: 0; }
.repurchase-donut { display: grid; flex: 0 0 148px; width: 148px; aspect-ratio: 1; place-items: center; border-radius: 50%; }
.repurchase-donut > div { display: grid; width: 88px; aspect-ratio: 1; place-items: center; align-content: center; border-radius: 50%; background: #171d1e; }
.repurchase-donut strong { color: #f4f6f5; font-size: 20px; line-height: 1; }
.repurchase-donut span { margin-top: 4px; color: #9eadaa; font-size: 10px; font-weight: 800; }
.repurchase-legend { display: grid; gap: 8px; min-width: 0; }
.repurchase-legend p { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; align-items: center; gap: 6px; margin: 0; color: #bec9c6; font-size: 10px; font-weight: 700; }
.repurchase-legend i { display: block; width: 9px; height: 9px; border-radius: 50%; }
.repurchase-legend p > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repurchase-legend strong { color: #fff; font-variant-numeric: tabular-nums; }
.repurchase-rules { display: grid; gap: 11px; min-width: 0; }
.repurchase-rule-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.repurchase-rule-summary > div { padding: 10px; border-left: 3px solid #f15b2a; background: #1a2021; }
.repurchase-rule-summary > div:last-child { border-left-color: #11a7a5; }
.repurchase-rule-summary span { display: block; color: #b7c3c0; font-size: 10px; font-weight: 800; }
.repurchase-rule-summary strong { display: block; margin-top: 5px; color: #fff; font-size: 21px; line-height: 1; }
.repurchase-rule-summary p { margin: 6px 0 0; color: #94a2a1; font-size: 10px; font-weight: 700; line-height: 1.3; }
.repurchase-table-wrap { overflow-x: auto; }
.repurchase-table-wrap table { width: 100%; border-collapse: collapse; font-size: 11px; }
.repurchase-table-wrap th, .repurchase-table-wrap td { padding: 7px 8px; border-bottom: 1px solid #30393b; text-align: right; font-variant-numeric: tabular-nums; }
.repurchase-table-wrap th { color: #bfcac8; font-size: 10px; white-space: nowrap; }
.repurchase-table-wrap th:first-child, .repurchase-table-wrap td:first-child { max-width: 210px; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.repurchase-table-wrap td { color: #f0f4f2; font-weight: 700; }
.repurchase-table-wrap td:last-child { color: #f2c945; }
.analytics-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.82fr); gap: 10px; margin-top: 10px; }
.console-panel { overflow: hidden; border: 1px solid #364145; border-radius: 7px; background: #171d1e; }
.console-panel-heading { min-height: 60px; padding: 13px 15px; border-bottom: 1px solid #30393b; }
.console-panel-heading p { margin: 0; }
.console-panel-heading h3 { margin: 5px 0 0; color: #f5f7f6; font-size: 16px; }
.monthly-chart { min-height: 265px; padding: 16px 18px 13px; overflow-x: auto; }
.monthly-bars { display: grid; grid-auto-columns: minmax(51px, 1fr); grid-auto-flow: column; align-items: stretch; gap: 12px; height: 225px; border-bottom: 1px solid #4b5759; }
.monthly-bar-item { display: grid; grid-template-rows: 34px 158px 16px; min-width: 51px; height: 100%; gap: 6px; text-align: center; }
.monthly-bar-item > strong { align-self: end; color: #dae2df; font-size: 10px; line-height: 1.2; white-space: nowrap; }
.monthly-bar-well { position: relative; display: block; height: 158px; overflow: hidden; background: repeating-linear-gradient(to top, transparent 0, transparent 42px, rgba(111, 130, 131, 0.17) 43px); }
.monthly-bar { position: absolute; right: 0; bottom: 0; left: 0; display: block; min-height: 10px; border-radius: 4px 4px 0 0; }
.monthly-bar.coverage { background: #f15b2a; }
.monthly-bar.repurchase { background: #11a7a5; }
.monthly-bar.billing { background: #2c90d3; }
.monthly-bar.presale { background: #c44f73; }
.monthly-bar-item > span:last-child { color: #9ba9a8; font-size: 10px; font-weight: 800; text-transform: capitalize; }
.analytics-ranking-list { display: grid; }
.analytics-ranking-item { display: grid; grid-template-columns: 29px minmax(0, 1fr) minmax(96px, 0.76fr); align-items: center; gap: 9px; min-height: 56px; padding: 9px 13px; border-bottom: 1px solid #30393b; }
.analytics-ranking-item:last-child { border-bottom: 0; }
.analytics-position { color: #f1c93e; font-size: 12px; font-weight: 800; }
.analytics-ranking-name { display: grid; gap: 3px; min-width: 0; }
.analytics-ranking-name strong { overflow: hidden; color: #edf2ef; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.analytics-ranking-name span { color: #96a5a4; font-size: 10px; }
.analytics-ranking-value { display: grid; justify-items: end; gap: 6px; min-width: 0; }
.analytics-ranking-value strong { color: #f2f6f4; font-size: 11px; white-space: nowrap; }
.analytics-ranking-value span { display: block; height: 4px; min-width: 10px; max-width: 100%; border-radius: 999px; background: #d9471b; }
.analytics-ranking-panel { grid-column: 2; grid-row: 1; }
.analytics-trend-panel { grid-column: 1; grid-row: 1; }
.analytics-trend { min-height: 250px; padding: 12px 14px 8px; }
.trend-svg { display: block; width: 100%; height: 225px; overflow: visible; }
.trend-svg .trend-grid line { stroke: #344043; stroke-dasharray: 3 4; }
.trend-svg path { fill: none; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.trend-svg circle { stroke: #171d1e; stroke-width: 2; }
.trend-svg.coverage path, .trend-svg.coverage circle { fill: #f15b2a; stroke: #f15b2a; }
.trend-svg.coverage path { fill: none; }
.trend-svg.repurchase path, .trend-svg.repurchase circle { fill: #11a7a5; stroke: #11a7a5; }
.trend-svg.repurchase path { fill: none; }
.trend-svg.billing path, .trend-svg.billing circle { fill: #2c90d3; stroke: #2c90d3; }
.trend-svg.billing path { fill: none; }
.trend-svg.presale path, .trend-svg.presale circle { fill: #c44f73; stroke: #c44f73; }
.trend-svg.presale path { fill: none; }
.trend-svg text { fill: #aebbb9; font-size: 11px; font-weight: 700; }
.trend-svg .trend-value { fill: #e8eeeb; font-size: 10px; }
.console-panel .empty-state { color: #9eadaa; }

/* Central de Desempenho: graficos internos em SVG, sem bibliotecas externas. */
.analytics-console { border-color: #2b3639; border-radius: 9px; color: #f3f5f5; background: #070b0f; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2); }
.console-sidebar { border-color: #293438; background: #0d1317; }
.console-brand { border-color: #293438; }
.console-brand strong { font-size: 19px; }
.console-sidebar select, .console-top-controls select, .multi-filter-control summary { border-color: #465256; background: #141b1f; }
.console-main { padding: 10px 14px 14px; background: #070b0f; }
.console-topbar { min-height: 35px; padding-bottom: 8px; border-color: #293438; }
.console-tab { min-height: 29px; border-radius: 5px; }
.console-tab.is-active { border-color: #e95a2a; background: #e95a2a; }
.console-heading { padding: 10px 2px 9px; }
.console-heading h2 { font-size: 27px; }
.analytics-status { max-width: 285px; color: #aab6b5; }
.analytics-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.analytics-kpi { position: relative; min-height: 137px; padding: 12px; border: 1px solid #354146; border-top: 2px solid #536064; border-radius: 8px; background: #151d21; overflow: hidden; }
.analytics-kpi.coverage { border-top-color: #e1be37; }
.analytics-kpi.repurchase { border-top-color: #903795; }
.analytics-kpi.billing { border-top-color: #2f9dce; }
.analytics-kpi.base { border-top-color: #2937a6; }
.analytics-kpi.presale { border-top-color: #b44c55; }
.analytics-kpi.primary { border-color: #b62c32; background: #7d171b; }
.analytics-kpi.target { border-color: #752d31; background: #311417; }
.analytics-kpi.no-target { background: #202326; border-color: #4f5659; }
.analytics-kpi.no-target .analytics-kpi-icon { color: #c5cfcc; background: rgba(255, 255, 255, 0.08); }
.analytics-kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.analytics-kpi-head > span:first-child { min-width: 0; max-width: calc(100% - 34px); overflow: hidden; color: #d8dfdc; font-size: 10px; font-weight: 800; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.analytics-kpi-icon { display: grid; flex: 0 0 29px; width: 29px; height: 29px; place-items: center; border-radius: 50%; color: #edf3ef; background: rgba(255, 255, 255, 0.08); }
.analytics-kpi-icon svg { width: 17px; height: 17px; }
.analytics-kpi.primary .analytics-kpi-icon { color: #fff; background: rgba(255, 255, 255, 0.16); }
.analytics-kpi.target .analytics-kpi-icon { color: #ffb0b3; background: rgba(227, 34, 42, 0.17); }
.analytics-kpi > strong, .analytics-kpi.billing > strong { margin-top: 9px; color: #f5f7f6; font-size: 20px; letter-spacing: 0; line-height: 1.05; white-space: nowrap; }
.analytics-kpi > p { margin: 7px 0 0; color: #aeb9b8; font-size: 10px; }
.analytics-kpi.no-target > p { max-width: 136px; color: #c1cbca; line-height: 1.3; }
.analytics-kpi .kpi-positive { color: #63d438; }
.analytics-kpi .kpi-inline { display: block; margin-top: 6px; font-size: 10px; }
.analytics-kpi-sparkline { position: absolute; right: 12px; bottom: 9px; left: 12px; width: calc(100% - 24px); height: 24px; }
.analytics-kpi-sparkline path { fill: none; stroke: #e94b50; stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.analytics-kpi-sparkline circle { fill: #e94b50; }
.analytics-kpi-progress { position: absolute; right: 12px; bottom: 12px; left: 12px; height: 7px; overflow: hidden; border-radius: 12px; background: #adb5b6; }
.analytics-kpi-progress i { display: block; height: 100%; border-radius: inherit; background: #e3222a; }
.analytics-kpi.primary .analytics-kpi-progress { background: rgba(255, 255, 255, 0.68); }
.analytics-kpi.primary .analytics-kpi-progress i { background: #f5f7f6; }
.analytics-indicator-panel { display: none; }
.console-panel { border-color: #354146; border-radius: 8px; background: #11191d; }
.console-panel-heading { min-height: 49px; padding: 10px 15px; border-color: #2d383b; }
.console-panel-heading h3 { font-size: 16px; }
.analytics-layout { grid-template-columns: minmax(0, 1.7fr) minmax(350px, 0.94fr); gap: 9px; margin-top: 9px; }
.analytics-trend-panel { grid-column: 1; grid-row: 1; }
.analytics-ranking-panel { grid-column: 2; grid-row: 1; }
.analytics-trend { min-height: 238px; padding: 7px 14px 5px; overflow: hidden; }
.executive-trend-legend { display: flex; align-items: center; gap: 16px; min-height: 20px; padding: 0 0 3px 45px; color: #bec8c6; font-size: 10px; font-weight: 700; }
.executive-trend-legend span { display: inline-flex; align-items: center; gap: 6px; }
.executive-trend-legend i { display: inline-block; width: 20px; height: 3px; border-radius: 2px; }
.executive-trend-legend .legend-current { background: #e3222a; }
.executive-trend-legend .legend-previous { background: #89908f; }
.executive-trend-legend .legend-target { height: 0; border-top: 2px dashed #c7d0ce; }
.executive-trend-svg { display: block; width: 100%; height: 214px; overflow: visible; }
.executive-trend-svg .grid-line { stroke: #2f3c3f; stroke-dasharray: 3 5; }
.executive-trend-svg .axis-line { stroke: #4a5758; }
.executive-trend-svg .current-line { fill: none; stroke: #e3222a; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; }
.executive-trend-svg .previous-line { fill: none; stroke: #89908f; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.executive-trend-svg .target-line { fill: none; stroke: #c7d0ce; stroke-dasharray: 3 4; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.executive-trend-svg .current-dot { fill: #e3222a; stroke: #f46b70; stroke-width: 1.5; }
.executive-trend-svg .previous-dot { fill: #8c9290; stroke: #afb6b4; stroke-width: 1; }
.executive-trend-svg text { fill: #b9c4c2; font-size: 11px; font-weight: 700; }
.executive-trend-svg .axis-label { fill: #c2ccca; font-size: 11px; }
.executive-trend-svg .trend-label { fill: #fff; font-size: 10px; font-weight: 800; }
.executive-trend-svg .partial-area { fill: #1b1718; opacity: 0.78; }
.executive-trend-svg .partial-line { stroke: #a4383c; stroke-dasharray: 3 4; }
.analytics-ranking-list { min-height: 250px; padding: 10px 14px 7px; }
.ranking-chart { width: 100%; min-width: 0; }
.ranking-chart-head { display: grid; grid-template-columns: 29px minmax(88px, 0.82fr) minmax(176px, 1.75fr) 52px; align-items: end; gap: 8px; margin: 0 0 8px; color: #aeb9b8; font-size: 9px; font-weight: 700; }
.ranking-chart-head span:nth-child(3), .ranking-chart-head span:last-child { text-align: center; }
.ranking-chart-row { display: grid; grid-template-columns: 29px minmax(88px, 0.82fr) minmax(176px, 1.75fr) 52px; align-items: center; gap: 8px; min-height: 35px; }
.ranking-chart-position { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid #667477; border-radius: 50%; color: #f5f7f6; background: #11191d; font-size: 11px; font-weight: 800; }
.ranking-chart-name { overflow: hidden; color: #f1f5f3; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ranking-chart-bar-well { position: relative; height: 23px; min-width: 0; overflow: hidden; border: 1px solid #39484d; border-radius: 4px; background: #202c31; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28); }
.ranking-chart-bar-well::after { content: ""; position: absolute; z-index: 2; inset: 0; border-radius: inherit; background: linear-gradient(90deg, transparent 49.7%, rgba(255, 255, 255, 0.10) 50%, transparent 50.3%); pointer-events: none; }
.ranking-chart-progress { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 3px; appearance: none; -webkit-appearance: none; background: transparent; overflow: hidden; }
.ranking-chart-progress::-webkit-progress-bar { background: #202c31; }
.ranking-chart-progress::-webkit-progress-value { background: linear-gradient(90deg, #e3222a 0%, #ef2831 100%); border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 74, 81, 0.12); }
.ranking-chart-progress::-moz-progress-bar { background: linear-gradient(90deg, #e3222a 0%, #ef2831 100%); border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 74, 81, 0.12); }
.ranking-chart-value { position: absolute; z-index: 3; top: 50%; left: 9px; max-width: calc(100% - 18px); overflow: hidden; color: #fff; font-size: 11px; font-weight: 800; line-height: 1; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.82); transform: translateY(-50%); }
.ranking-chart-badge { justify-self: center; min-width: 43px; padding: 4px 5px; border: 1px solid #526260; border-radius: 13px; color: #f2f5f3; background: #20282b; font-size: 10px; font-weight: 800; text-align: center; }
.ranking-chart-badge.good { border-color: #49b934; color: #88e765; background: #15331a; }
.ranking-chart-badge.warn { border-color: #d7a900; color: #ffd334; background: #342b0d; }
.ranking-chart-badge.bad { border-color: #dc3d45; color: #ff7e83; background: #37191d; }
.ranking-chart-axis { display: grid; grid-template-columns: 29px minmax(88px, 0.82fr) minmax(176px, 1.75fr) 52px; gap: 8px; margin-top: 8px; color: #b3bdbb; font-size: 9px; font-weight: 700; }
.ranking-chart-axis > span { grid-column: 3; display: flex; justify-content: space-between; }
.ranking-chart-note { margin: 7px 0 0 37px; color: #94a2a1; font-size: 9px; line-height: 1.3; }
.analytics-lower-grid { display: grid; grid-template-columns: 1fr 1.12fr 1.3fr; gap: 9px; margin-top: 9px; }
.analytics-lower-grid .console-panel-heading { min-height: 43px; padding: 10px 14px 8px; }
.analytics-lower-grid .console-panel-heading > div { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.analytics-lower-grid .console-panel-heading p { flex: 0 0 auto; color: #ff6731; font-size: 10px; font-weight: 900; }
.analytics-lower-grid .console-panel-heading h3 { min-width: 0; margin: 0; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.analytics-client-split, .analytics-orders-ticket, .analytics-highlights { min-height: 194px; padding: 9px 14px 12px; }
.client-split-grid { display: grid; grid-template-columns: minmax(144px, 0.92fr) minmax(142px, 1fr); align-items: center; gap: 12px; min-height: 170px; }
.client-split-visual { min-width: 0; align-self: stretch; }
.client-split-legend { display: flex; align-items: center; gap: 13px; color: #cbd4d1; font-size: 9px; font-weight: 700; }
.client-split-legend span { display: inline-flex; align-items: center; gap: 5px; }
.client-dot { display: inline-block; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; }
.client-dot-new { background: #979b99; }
.client-dot-repurchase { background: #e3222a; }
.client-donut { width: 132px; height: 132px; margin: 3px auto 0; }
.client-donut svg { display: block; width: 100%; height: 100%; overflow: visible; }
.client-donut .donut-track { fill: none; stroke: #858a89; stroke-width: 19; stroke-linecap: round; opacity: 0.98; }
.client-donut .donut-repurchase { fill: none; stroke: #e3222a; stroke-width: 19; stroke-linecap: round; }
.client-donut text { text-anchor: middle; }
.client-donut .donut-total-label { fill: #dfe5e2; font-size: 10px; font-weight: 700; }
.client-donut .donut-total { fill: #fff; font-size: 19px; font-weight: 800; }
.client-donut .donut-unit { fill: #d4dcda; font-size: 10px; font-weight: 700; }
.client-split-summary { display: grid; min-width: 0; gap: 12px; align-content: center; }
.client-split-values { display: grid; gap: 13px; margin: 0; }
.client-split-value-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.client-split-value-row > span { color: #c9d2cf; font-size: 10px; font-weight: 700; }
.client-split-value-row > strong { color: #fff; font-size: 18px; line-height: 1; font-variant-numeric: tabular-nums; text-align: right; }
.client-split-value-row > small { grid-column: 3; color: #c5cecc; font-size: 9px; font-weight: 700; text-align: right; }
.client-split-values.pending strong { color: #b9c4c1; }
.client-split-footer { display: grid; justify-items: center; gap: 2px; min-height: 50px; padding: 7px 9px 6px; border: 1px solid #4b5a5e; border-radius: 8px; color: #cbd4d2; text-align: center; }
.client-split-comparison { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 3px 6px; }
.client-split-footer strong { color: #63d438; font-size: 14px; }
.client-split-footer strong.is-negative { color: #ff696e; }
.client-split-footer span { font-size: 9px; font-weight: 700; }
.client-split-footer > small { color: #d9dfdd; font-size: 9px; font-weight: 700; }
.client-split-grid.is-pending .client-split-footer { color: #bbc6c3; }
.orders-ticket-grid { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 13px; height: 100%; }
.orders-ticket-divider { width: 1px; height: 132px; background: #415054; }
.orders-ticket-side { min-width: 0; }
.orders-ticket-side > span { display: block; color: #c7d0cd; font-size: 10px; font-weight: 700; }
.orders-ticket-side > strong { display: block; margin-top: 6px; color: #f6f8f7; font-size: 22px; line-height: 1; white-space: nowrap; }
.orders-ticket-side > p { margin: 6px 0 0; color: #b8c4c0; font-size: 10px; font-weight: 700; }
.orders-ticket-side > p strong { color: #63d438; font-size: 13px; }
.orders-ticket-svg { display: block; width: 100%; height: 76px; margin-top: 5px; overflow: visible; }
.orders-ticket-svg .orders-grid { stroke: #334145; stroke-width: 1; }
.orders-ticket-svg .orders-bar { fill: #df252d; }
.orders-ticket-svg .ticket-line { fill: none; stroke: #e3222a; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.orders-ticket-svg .ticket-dot { fill: #e3222a; stroke: #f98588; stroke-width: 1; }
.orders-ticket-svg text { fill: #bbc5c3; font-size: 8px; font-weight: 700; text-anchor: middle; }
.analytics-highlights { display: grid; align-content: center; gap: 10px; }
.analytics-highlight { display: grid; grid-template-columns: 29px minmax(0, 1fr); align-items: center; gap: 10px; color: #e1e7e4; font-size: 12px; font-weight: 700; line-height: 1.35; }
.analytics-highlight i { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: #fff; font-size: 15px; font-style: normal; }
.analytics-highlight.positive i { background: #277b3d; }
.analytics-highlight.warning i { background: #8d6517; }
.analytics-highlight.info i { background: #275c8b; }
.analytics-highlight.period i { background: #633c83; }

@media (min-width: 1400px) {
  .app-frame.app-content:has(#analytics-panel.is-active) { width: min(100% - 32px, 1640px); }
}

@media (max-width: 880px) {
  .goal-cards { grid-template-columns: 1fr; }
  .goal-card { min-height: 198px; }
  .ranking-content { grid-template-columns: 1fr; }
  .ranking-item { border-right: 0; border-bottom: 1px solid var(--line); }
  .ranking-item:last-child { border-bottom: 0; }
  .detail-metrics { grid-template-columns: 1fr; gap: 14px; }
  .rule-baselines { grid-template-columns: 1fr; }
  .analytics-console { grid-template-columns: 1fr; }
  .console-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-right: 0; border-bottom: 1px solid #30393b; }
  .console-brand, .console-filter-heading, .console-scope { grid-column: 1 / -1; }
  .analytics-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .analytics-layout { grid-template-columns: 1fr; }
  .analytics-ranking-panel { grid-column: auto; grid-row: auto; }
  .analytics-trend-panel { grid-column: auto; }
  .repurchase-detail-grid { grid-template-columns: 1fr; }
  .analytics-lower-grid { grid-template-columns: 1fr 1fr; }
  .analytics-highlights-panel { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .login-shell { align-items: start; padding: 16px; }
  .login-panel { margin-top: 7vh; padding: 26px 22px; }
  .login-heading { margin: 31px 0 24px; }
  .login-heading h1 { font-size: 26px; }
  .app-frame { width: min(100% - 24px, 1320px); }
  .header-content { min-height: 0; padding: 10px 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .brand-lockup { gap: 7px; }
  .brand-coca { width: 100px; height: 24px; }
  .brand-shop { width: 44px; height: 24px; }
  .brand-title, .app-brand { font-size: 18px; }
  .app-lockup { min-width: 0; }
  .session-actions { width: 100%; min-width: 0; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--line); }
  .user-summary { min-width: 0; max-width: none; flex: 1; overflow: hidden; text-align: left; }
  .user-summary strong, .user-summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .logout-button { flex: 0 0 auto; min-width: 48px; padding: 0 10px; }
  .password-button { flex: 0 0 auto; min-width: 58px; padding: 0 10px; }
  .password-dialog { align-items: end; padding: 12px; }
  .password-panel { max-height: calc(100vh - 24px); overflow-y: auto; padding: 20px; }
  .password-dialog-heading h2 { font-size: 21px; }
  .password-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .password-actions button[type="submit"] { min-width: 0; }
  .nav-list { width: 100%; }
  .nav-button { min-height: 45px; padding: 0 12px; font-size: 12px; }
  .app-content { padding-top: 18px; }
  .context-strip { gap: 17px; min-height: 0; flex-wrap: wrap; }
  .data-mode { width: 100%; margin-left: 0; }
  .page-heading { align-items: start; margin: 22px 0 13px; }
  .page-heading h2 { font-size: 22px; }
  .page-subtitle { display: none; }
  .goal-cards { gap: 10px; }
  .goal-card { min-height: 200px; padding: 16px; }
  .goal-card-value { font-size: 28px; }
  .ranking-item { min-height: 0; padding: 17px; }
  .download-group summary { min-height: 68px; padding: 15px; }
  .download-scroller { grid-template-columns: 32px minmax(0, 1fr) 32px; gap: 6px; padding: 0 15px 15px; }
  .download-scroll-button { width: 32px; height: 40px; }
  .download-button { flex-basis: 132px; min-height: 52px; padding: 7px 8px; }
  .table-wrap { display: none; }
  .access-mobile-list { display: grid; }
  .access-mobile-card { padding: 15px; border-bottom: 1px solid var(--line); display: grid; gap: 4px; }
  .access-mobile-card:last-child { border-bottom: 0; }
  .access-mobile-card span, .access-mobile-card time { color: var(--muted); font-size: 11px; }
  .hierarchy-item summary { min-height: 66px; padding: 14px; }
  .hierarchy-summary strong { font-size: 13px; }
  .hierarchy-details { padding: 15px; }
  .detail-metric dl { gap: 10px; }
  .detail-metric dd { font-size: 12px; }
  .detail-ranking { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .nested-hierarchy { margin: 0 14px 14px; }
  .winner-month summary { min-height: 68px; padding: 14px; }
  .winner-month-content { padding: 14px; }
  .winner-report-actions { align-items: stretch; flex-direction: column; }
  .winner-report-actions .download-button { width: 100%; }
  .winners-role-heading { padding: 12px 14px; }
  .winners-table { min-width: 720px; }
  .rules-intro { padding: 16px; }
  #rules-period { font-size: 13px; }
  .rule-baselines { gap: 12px; }
  .rule-card { min-height: 0; padding: 16px; }
  .analytics-console { min-height: 0; border-radius: 7px; }
  .console-sidebar { grid-template-columns: 1fr; gap: 10px; padding: 13px; }
  .console-brand, .console-filter-heading, .console-scope { grid-column: auto; }
  .console-brand { margin-bottom: 1px; padding-bottom: 12px; }
  .console-scope { margin-top: 1px; }
  .console-main { padding: 12px; }
  .console-topbar { align-items: stretch; flex-direction: column; gap: 10px; }
  .console-top-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 8px; }
  .console-top-controls select { width: 100%; }
  .console-heading { align-items: start; flex-direction: column; gap: 7px; padding: 16px 1px 12px; }
  .console-heading h2 { font-size: 23px; }
  .analytics-status { max-width: none; text-align: left; }
  .analytics-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .analytics-kpi { min-height: 108px; padding: 12px; }
  .analytics-kpi > strong, .analytics-kpi.billing > strong { font-size: 16px; }
  .analytics-indicator-detail { padding: 13px; }
  .indicator-focus { grid-template-columns: 1fr; gap: 6px; }
  .indicator-focus > strong { font-size: 24px; text-align: left; }
  .repurchase-breakdown { align-items: start; flex-direction: column; }
  .repurchase-donut { flex-basis: 136px; width: 136px; }
  .repurchase-rule-summary { grid-template-columns: 1fr; }
  .monthly-chart { min-height: 255px; padding: 15px 12px 12px; overflow-x: auto; }
  .monthly-bars { width: max(100%, 420px); height: 220px; gap: 9px; }
  .monthly-bar-item { min-width: 50px; }
  .monthly-bar-item > strong { font-size: 10px; }
  .analytics-ranking-item { grid-template-columns: 27px minmax(0, 1fr) 103px; padding: 10px 12px; }
  .analytics-trend { min-height: 220px; padding: 10px 8px 4px; overflow-x: auto; }
  .trend-svg { width: 610px; max-width: none; height: 205px; }
  .analytics-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-kpi { min-height: 116px; }
  .analytics-kpi > strong, .analytics-kpi.billing > strong { font-size: 17px; }
  .analytics-layout, .analytics-lower-grid { grid-template-columns: 1fr; }
  .analytics-highlights-panel { grid-column: auto; }
  .analytics-trend { min-height: 250px; padding: 8px 4px 4px; overflow-x: auto; }
  .executive-trend-svg { width: 660px; max-width: none; height: 232px; }
  .analytics-ranking-list { min-height: 250px; padding: 12px 10px 8px; overflow-x: auto; }
  .ranking-chart { min-width: 360px; }
  .analytics-client-split, .analytics-orders-ticket, .analytics-highlights { min-height: 0; padding: 14px; }
  .client-split-grid { grid-template-columns: 138px minmax(0, 1fr); }
  .client-donut { width: 132px; height: 132px; }
  .client-donut .donut-repurchase { transform-origin: 74px 74px; }
  .client-split-summary { gap: 12px; }
  .orders-ticket-grid { gap: 9px; }
  .orders-ticket-side > strong { font-size: 18px; }
  .orders-ticket-divider { height: 155px; }
}

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


/* ==========================================================================\n   INCENTIVO APP — REDESIGN UX FINAL\n   Mantém a lógica do projeto e moderniza web + mobile.\n   ========================================================================== */
:root {
  --ink: #11242f;
  --ink-2: #1c3541;
  --muted: #647883;
  --line: #dce5e9;
  --line-strong: #c9d6dc;
  --surface: #ffffff;
  --surface-2: #f7fafb;
  --page: #f1f5f7;
  --navy: #061f2e;
  --navy-2: #0a3144;
  --orange: #ff5b1a;
  --orange-soft: #fff0e8;
  --teal: #00898f;
  --teal-soft: #e8f7f6;
  --blue: #176fd1;
  --blue-soft: #eaf3ff;
  --purple: #8e3fc1;
  --purple-soft: #f5ebfb;
  --gold: #d88a00;
  --gold-soft: #fff5dd;
  --red: #c7333b;
  --red-soft: #fff0f1;
  --green: #148448;
  --green-soft: #e9f7ef;
  --sidebar-width: 236px;
  --header-height: 78px;
  --shadow-xs: 0 3px 10px rgba(17, 36, 47, .05);
  --shadow-sm: 0 10px 28px rgba(17, 36, 47, .08);
  --shadow-md: 0 22px 52px rgba(17, 36, 47, .14);
}

html { scroll-behavior: smooth; }
body { background: var(--page); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body.mobile-sheet-open { overflow: hidden; }
button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(23, 111, 209, .25); outline-offset: 2px; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; translate: 0 -160%; padding: 11px 15px; border-radius: 10px; color: #fff; background: var(--navy); font-size: 13px; font-weight: 800; box-shadow: var(--shadow-md); transition: translate .18s ease; }
.skip-link:focus { translate: 0; }

/* Login */
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at 12% 10%, #fff 0, #eef4f6 35%, #e8eff2 100%); }
.login-shell::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .45; background-image: radial-gradient(#b9c8ce 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(135deg, #000, transparent 60%); }
.login-panel { position: relative; width: min(1080px, 100%); min-height: 650px; display: grid; grid-template-columns: minmax(380px, .92fr) minmax(430px, 1.08fr); overflow: hidden; padding: 0; border: 1px solid rgba(255,255,255,.8); border-top: 0; border-radius: 28px; background: #fff; box-shadow: 0 30px 90px rgba(8, 38, 53, .18); }
.login-hero { position: relative; min-height: 650px; display: flex; flex-direction: column; overflow: hidden; padding: 38px; color: #fff; background: linear-gradient(155deg, #051d2b 0%, #0b3043 48%, #e5411d 100%); }
.login-hero::before { content: ""; position: absolute; width: 390px; height: 390px; right: -170px; bottom: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(255,139,50,.9), rgba(255,81,26,.08) 68%, transparent 70%); }
.login-hero::after { content: ""; position: absolute; inset: 0; opacity: .18; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 18px 18px; mask-image: linear-gradient(to bottom, transparent, #000 35%, transparent 85%); }
.login-hero-brands { position: relative; z-index: 2; flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 11px 14px; width: max-content; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: 0 12px 24px rgba(0,0,0,.12); }
.login-hero-brands img:first-child { width: 158px; height: 30px; object-fit: contain; }
.login-hero-brands img:last-child { width: 58px; height: 30px; object-fit: contain; }
.login-hero-copy { position: relative; z-index: 3; flex: 0 0 auto; margin-top: 48px; padding-right: 8px; }
.login-kicker { font-size: 15px; font-weight: 900; letter-spacing: .04em; }
.login-hero-copy h2 { max-width: 420px; margin: 14px 0; font-size: clamp(34px, 4vw, 50px); line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; }
.login-hero-copy p { max-width: 390px; margin: 0; color: rgba(255,255,255,.84); font-size: 14px; line-height: 1.65; }
.login-art { position: relative; z-index: 2; flex: 0 0 auto; width: 270px; height: 195px; margin: auto 0 0 auto; }
.art-orbit { position: absolute; border: 1px dashed rgba(255,255,255,.25); border-radius: 50%; transform: rotate(-18deg); }
.orbit-one { inset: 25px 8px 12px 10px; }
.orbit-two { inset: 58px 42px 40px 50px; }
.art-cube { position: absolute; display: grid; place-items: center; border-radius: 20px; box-shadow: 0 22px 35px rgba(0,0,0,.22); transform: rotate(-8deg); }
.cube-one { width: 95px; height: 95px; left: 12px; bottom: 10px; background: linear-gradient(145deg, #fff, #dfe7eb); }
.cube-two { width: 76px; height: 76px; right: 16px; bottom: 22px; background: linear-gradient(145deg, #fff5ea, #ff9c43); }
.cube-three { width: 112px; height: 112px; left: 92px; top: 16px; color: #fff; background: linear-gradient(145deg, #ff812f, #ff4b16); }
.cube-three svg { width: 44px; height: 44px; stroke-width: 1.5; }
.login-form-panel { display: flex; flex-direction: column; justify-content: center; padding: 56px 68px; }
.login-lockup { min-height: 34px; }
.login-heading { margin: 50px 0 28px; }
.login-heading h1 { max-width: 430px; margin: 8px 0 10px; font-size: 34px; line-height: 1.12; letter-spacing: -.025em; }
.login-heading > p:last-child { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.form-field { display: grid; gap: 8px; }
.form-field label { margin: 0; font-size: 12px; font-weight: 850; }
.input-shell { position: relative; display: flex; align-items: center; min-height: 52px; border: 1px solid var(--line-strong); border-radius: 13px; background: #fff; transition: border-color .18s ease, box-shadow .18s ease; }
.input-shell:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(23,111,209,.11); }
.input-shell > svg { flex: 0 0 20px; margin-left: 15px; color: #84969f; }
.input-shell input { min-height: 50px; padding: 10px 48px 10px 12px; border: 0; border-radius: inherit; box-shadow: none; background: transparent; }
.input-shell input:focus { box-shadow: none; }
.input-action { position: absolute; right: 8px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 10px; color: var(--muted); background: transparent; }
.input-action:hover { color: var(--ink); background: var(--surface-2); }
#login-form { gap: 16px; }
#login-submit { min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 7px; border-radius: 13px; background: linear-gradient(90deg, #ff5b1a, #f14314); box-shadow: 0 12px 24px rgba(255,91,26,.2); }
#login-submit:hover { background: linear-gradient(90deg, #ed4d10, #d9380e); transform: translateY(-1px); }
#login-submit svg { width: 18px; height: 18px; }
.login-security { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 22px 0 0; color: var(--muted); font-size: 11px; font-weight: 700; }
.login-security svg { width: 15px; height: 15px; color: var(--green); }
.form-error { border-radius: 11px; }

/* Desktop shell */
.dashboard-shell { min-height: 100vh; padding: 0 0 44px var(--sidebar-width); background: var(--page); transition: padding-left .22s ease; }
.app-header { position: sticky; z-index: 20; top: 0; border-bottom: 1px solid rgba(207,219,224,.9); background: rgba(255,255,255,.92); backdrop-filter: blur(18px); }
.app-frame { width: min(calc(100% - 48px), 1440px); }
.header-content { min-height: var(--header-height); }
.app-lockup { gap: 12px; }
.app-lockup .brand-coca { width: 162px; height: 31px; }
.app-lockup .brand-shop { width: 62px; height: 31px; }
.app-brand { font-size: 22px; letter-spacing: -.02em; }
.session-actions { gap: 10px; }
.notification-button { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: #fff; }
.notification-button:hover { border-color: var(--orange); color: var(--orange); background: var(--orange-soft); }
.notification-badge { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; display: grid; place-items: center; padding: 0 5px; border: 2px solid #fff; border-radius: 999px; color: #fff; background: var(--red); font-size: 9px; font-weight: 900; }
.profile-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #e8314d, #b41038); font-size: 12px; font-weight: 900; box-shadow: 0 7px 16px rgba(180,16,56,.18); }
.user-summary { min-width: 170px; text-align: left; }
.user-summary strong { font-size: 12px; }
.user-summary span { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.password-button, .logout-button { min-height: 42px; display: flex; align-items: center; gap: 7px; padding: 0 13px; border-radius: 12px; }
.password-button svg, .logout-button svg { width: 16px; height: 16px; }

.app-nav { position: fixed; z-index: 30; inset: 0 auto 0 0; width: var(--sidebar-width); display: flex; flex-direction: column; overflow: hidden; border: 0; color: #fff; background: linear-gradient(180deg, #061f2e, #082c3e 58%, #051c29); box-shadow: 8px 0 28px rgba(7,30,44,.12); transition: width .22s ease; }
.sidebar-brand { min-height: var(--header-height); display: flex; align-items: center; gap: 11px; padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-logo { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: #fff; box-shadow: 0 10px 20px rgba(0,0,0,.18); }
.sidebar-logo img { width: 34px; height: 34px; object-fit: contain; }
.sidebar-brand-copy { display: grid; min-width: 0; }
.sidebar-brand-copy strong { font-size: 16px; }
.sidebar-brand-copy small { overflow: hidden; color: rgba(255,255,255,.58); text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.nav-list { width: 100%; display: grid; align-content: start; gap: 6px; padding: 20px 12px; overflow-y: auto; }
.nav-button { position: relative; width: 100%; min-height: 50px; display: flex; align-items: center; gap: 13px; padding: 0 14px; border: 0; border-bottom: 0; border-radius: 13px; color: rgba(255,255,255,.68); background: transparent; font-size: 12px; text-align: left; transition: color .16s ease, background .16s ease, transform .16s ease; }
.nav-button svg { flex: 0 0 20px; width: 20px; height: 20px; }
.nav-button:hover { color: #fff; background: rgba(255,255,255,.08); transform: translateX(2px); }
.nav-button.is-active { color: #fff; background: linear-gradient(90deg, rgba(255,91,26,.3), rgba(255,255,255,.07)); box-shadow: inset 3px 0 0 var(--orange); }
.nav-button.is-active::after { content: ""; position: absolute; right: 12px; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(255,91,26,.15); }
.sidebar-footer { margin-top: auto; padding: 16px 14px 18px; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-footer > div { display: grid; gap: 4px; padding: 0 4px 14px; }
.sidebar-footer span { color: rgba(255,255,255,.48); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.sidebar-footer strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
#sidebar-toggle { width: 100%; min-height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; color: rgba(255,255,255,.68); background: rgba(255,255,255,.05); font-size: 10px; font-weight: 800; }
#sidebar-toggle:hover { color: #fff; background: rgba(255,255,255,.1); }
#sidebar-toggle svg { width: 17px; height: 17px; transform: rotate(180deg); transition: transform .22s ease; }
body.sidebar-collapsed { --sidebar-width: 86px; }
body.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 0; }
body.sidebar-collapsed .sidebar-brand-copy, body.sidebar-collapsed .nav-button span, body.sidebar-collapsed .sidebar-footer > div, body.sidebar-collapsed #sidebar-toggle span { display: none; }
body.sidebar-collapsed .nav-button { justify-content: center; padding: 0; }
body.sidebar-collapsed .nav-button.is-active::after { right: 8px; }
body.sidebar-collapsed #sidebar-toggle { justify-content: center; padding: 0; }
body.sidebar-collapsed #sidebar-toggle svg { transform: none; }

.app-content { padding-top: 25px; }
.app-page { min-height: calc(100vh - 150px); }
.context-strip { min-height: 72px; gap: 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.86); box-shadow: var(--shadow-xs); }
.context-strip > div { min-width: 170px; padding: 3px 20px; border-right: 1px solid var(--line); }
.context-strip > div:first-child { padding-left: 4px; }
.context-strip span { font-size: 9px; letter-spacing: .02em; text-transform: uppercase; }
.context-strip strong { font-size: 13px; }
.data-mode { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; margin-left: auto; padding: 0 13px; border: 1px solid #bfe4cb; border-radius: 11px; color: var(--green); background: var(--green-soft); font-size: 10px; }
.data-mode::before { content: "✓"; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-size: 10px; }
.page-heading { align-items: center; margin: 28px 0 15px; }
.page-heading h2 { margin-top: 5px; font-size: clamp(24px, 2.2vw, 31px); letter-spacing: -.025em; }
.page-subtitle { line-height: 1.55; }
.eyebrow { color: #72858f; font-size: 9px; letter-spacing: .06em; }
.count-label { display: inline-flex; min-height: 31px; align-items: center; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.panel { overflow: hidden; border-color: var(--line); border-radius: 16px; box-shadow: var(--shadow-xs); }
.panel-heading { min-height: 72px; padding: 15px 17px; }
.panel-heading h2 { font-size: 16px; }
.compact-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.panel-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--blue); background: var(--blue-soft); }
.panel-icon svg { width: 18px; height: 18px; }
.panel-icon.alert { color: var(--red); background: var(--red-soft); }
.panel-link { min-height: 36px; display: flex; align-items: center; gap: 4px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--orange); background: #fff; font-size: 10px; font-weight: 850; }
.panel-link svg { width: 14px; height: 14px; }

/* Summary */
.overview-insight { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin-bottom: 14px; padding: 13px 15px; border: 1px solid #ffd2bd; border-radius: 15px; background: linear-gradient(90deg, #fff5ef, #fff); box-shadow: var(--shadow-xs); }
.insight-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--orange); background: var(--orange-soft); }
.insight-icon svg { width: 21px; height: 21px; }
.insight-copy strong { display: block; margin-bottom: 3px; font-size: 12px; }
.insight-copy p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.insight-button { min-height: 40px; padding: 0 13px; border: 1px solid #ffb998; border-radius: 11px; color: #b83a08; background: #fff; font-size: 10px; font-weight: 900; }
.insight-button:hover { background: var(--orange-soft); }
.goal-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.goal-card { --tone: var(--blue); --tone-soft: var(--blue-soft); min-height: 248px; display: grid; grid-template-rows: auto 1fr auto; padding: 18px; border: 1px solid var(--line); border-top: 0; border-radius: 17px; box-shadow: var(--shadow-xs); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.goal-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.goal-card.coverage { --tone: var(--orange); --tone-soft: var(--orange-soft); border-left: 3px solid var(--orange); }
.goal-card.repurchase { --tone: var(--teal); --tone-soft: var(--teal-soft); border-left: 3px solid var(--teal); }
.goal-card.billing { --tone: var(--purple); --tone-soft: var(--purple-soft); border-left: 3px solid var(--purple); }
.goal-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.goal-card-title { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 900; }
.goal-card-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; color: var(--tone); background: var(--tone-soft); }
.goal-card-icon svg { width: 18px; height: 18px; }
.goal-card-state { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 800; }
.goal-card-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tone); }
.goal-card-main { display: grid; grid-template-columns: 148px minmax(0,1fr); align-items: center; gap: 17px; padding: 11px 0 12px; }
.progress-ring { position: relative; width: 144px; height: 144px; display: grid; place-items: center; border-radius: 50%; }
.progress-ring::before { content: ""; position: absolute; z-index: 1; inset: 15px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(17,36,47,.08); }
.progress-ring-svg { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; }
.progress-ring-track, .progress-ring-value { fill: none; stroke-width: 10; }
.progress-ring-track { stroke: #e3ebee; }
.progress-ring-value { stroke: var(--tone); stroke-linecap: round; transition: stroke-dasharray .35s ease; }
.progress-ring.no-target .progress-ring-value { stroke: #b9c8ce; stroke-linecap: butt; }
.progress-ring-content { position: relative; z-index: 2; display: grid; justify-items: center; gap: 1px; max-width: 112px; text-align: center; }
.progress-ring-content span { color: var(--tone); font-size: 12px; font-weight: 900; }
.progress-ring-content strong { max-width: 110px; overflow-wrap: anywhere; font-size: 22px; line-height: 1.04; letter-spacing: -.025em; }
.progress-ring-content small { color: var(--muted); font-size: 9px; font-weight: 750; }
.goal-card.billing .progress-ring-content strong { font-size: 16px; }
.goal-stat-list { display: grid; gap: 13px; }
.goal-stat { display: grid; gap: 3px; }
.goal-stat span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.goal-stat strong { overflow-wrap: anywhere; font-size: 14px; }
.goal-stat.gap strong { color: var(--tone); }
.goal-stat.gap.is-complete strong { color: var(--green); }
.goal-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.goal-card-foot > span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 750; }
.goal-card-foot i { width: 7px; height: 7px; border-radius: 50%; background: var(--tone); }
.goal-card-foot strong { color: var(--ink); font-size: 11px; }
.goal-additional-inline { margin-left: auto; padding-left: 10px; border-left: 1px solid var(--line); }
.goal-additional-inline b { color: var(--blue); }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .9fr); gap: 14px; margin-top: 14px; }
.overview-performance { display: grid; gap: 16px; padding: 18px; }
.performance-row { display: grid; grid-template-columns: 115px minmax(0,1fr) 52px; align-items: center; gap: 12px; }
.performance-row > span { color: var(--muted); font-size: 10px; font-weight: 800; }
.performance-row strong { text-align: right; font-size: 11px; }
.performance-progress { width: 100%; height: 9px; overflow: hidden; border: 0; border-radius: 999px; appearance: none; -webkit-appearance: none; background: #e8eef1; }
.performance-progress::-webkit-progress-bar { border-radius: 999px; background: #e8eef1; }
.performance-progress::-webkit-progress-value { border-radius: 999px; background: var(--tone); }
.performance-progress::-moz-progress-bar { border-radius: 999px; background: var(--tone); }
.performance-progress.no-target::-webkit-progress-value { background: transparent; }
.performance-progress.no-target::-moz-progress-bar { background: transparent; }
.performance-row.coverage { --tone: var(--orange); }
.performance-row.repurchase { --tone: var(--teal); }
.performance-row.billing { --tone: var(--purple); }
.ranking-panel { margin: 0; }
.ranking-content { grid-template-columns: 1fr; }
.ranking-item { min-height: 0; padding: 18px; border-right: 0; }
.ranking-item > p { margin-bottom: 12px; }
.ranking-number { margin-bottom: 13px; }
.ranking-number strong { color: var(--orange); font-size: 34px; }
.ranking-details { gap: 10px; }
.ranking-details > div { padding: 9px; border-radius: 10px; background: var(--surface-2); }
.empty-state { padding: 24px 18px; line-height: 1.55; }
.overview-alerts { display: grid; gap: 9px; padding: 15px; }
.alert-item { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.alert-item-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--tone); background: var(--tone-soft); }
.alert-item-icon svg { width: 17px; height: 17px; }
.alert-item.coverage { --tone: var(--orange); --tone-soft: var(--orange-soft); }
.alert-item.repurchase { --tone: var(--teal); --tone-soft: var(--teal-soft); }
.alert-item.billing { --tone: var(--purple); --tone-soft: var(--purple-soft); }
.alert-item.success { --tone: var(--green); --tone-soft: var(--green-soft); }
.alert-item strong { display: block; font-size: 11px; }
.alert-item small { color: var(--muted); font-size: 9px; }
.alert-item > b { color: var(--tone); font-size: 10px; }
.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 15px; }
.quick-actions > button { min-height: 64px; display: grid; grid-template-columns: 38px 1fr 15px; align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fff; text-align: left; }
.quick-actions > button:hover { border-color: var(--line-strong); background: var(--surface-2); }
.quick-actions > button > span:nth-child(2) { display: grid; gap: 2px; }
.quick-actions strong { font-size: 10px; }
.quick-actions small { color: var(--muted); font-size: 8px; }
.quick-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--blue); background: var(--blue-soft); }
.quick-icon svg { width: 17px; height: 17px; }
.quick-icon.orange { color: var(--orange); background: var(--orange-soft); }
.quick-icon.teal { color: var(--teal); background: var(--teal-soft); }
.quick-icon.purple { color: var(--purple); background: var(--purple-soft); }
.quick-icon.gold { color: var(--gold); background: var(--gold-soft); }
.quick-arrow { width: 14px; height: 14px; color: #9aabb3; }

/* Opportunities */
.opportunities-list { gap: 14px; }
.download-group { border-radius: 16px; box-shadow: var(--shadow-xs); }
.download-group summary { min-height: 82px; padding: 17px 18px; }
.download-group summary::after { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; font-size: 19px; background: var(--surface-2); }
.download-group-title { display: flex; align-items: center; gap: 12px; }
.opportunity-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 13px; color: var(--orange); background: var(--orange-soft); }
.download-group.repurchase-group .opportunity-icon { color: var(--teal); background: var(--teal-soft); }
.opportunity-icon svg { width: 20px; height: 20px; }
.download-group h3 { font-size: 15px; }
.download-scroller { padding: 0 18px 18px; }
.download-actions { gap: 9px; }
.download-button { flex-basis: 165px; min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 11px; }
.download-button svg { flex: 0 0 17px; width: 17px; height: 17px; color: var(--teal); }
.download-scroll-button { border-radius: 10px; }

/* Team */
.team-panel { background: transparent; box-shadow: none; border: 0; }
.team-tree { gap: 12px; }
.hierarchy-item { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow-xs); }
.hierarchy-item:last-child { border-bottom: 1px solid var(--line); }
.hierarchy-item summary { min-height: 76px; padding: 14px 17px; }
.hierarchy-item summary::after { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); font-size: 19px; }
.hierarchy-summary-wrap { display: flex; align-items: center; gap: 11px; min-width: 0; }
.hierarchy-avatar { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--teal); background: var(--teal-soft); }
.coordinator-item > summary .hierarchy-avatar { color: var(--orange); background: var(--orange-soft); }
.supervisor-item > summary .hierarchy-avatar { color: var(--blue); background: var(--blue-soft); }
.hierarchy-avatar svg { width: 19px; height: 19px; }
.hierarchy-summary strong { font-size: 13px; }
.hierarchy-details { background: #fbfdfd; }
.detail-metrics { gap: 13px; }
.detail-metric { padding: 14px; border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 12px; background: #fff; }
.detail-metric h3 { margin-bottom: 13px; }
.nested-hierarchy { border-radius: 13px; }
.nested-title { padding: 13px 15px; }

/* Access */
.access-toolbar { display: flex; align-items: end; gap: 10px; margin-bottom: 13px; padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow-xs); }
.search-field { flex: 1; min-height: 44px; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); }
.search-field svg { width: 17px; height: 17px; color: #80929b; }
.search-field input { min-height: 42px; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 12px; }
.search-field input:focus { box-shadow: none; }
.select-field { min-width: 190px; display: grid; gap: 5px; margin: 0; }
.select-field span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.select-field select { min-height: 44px; padding: 0 32px 0 11px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: var(--surface-2); font-size: 11px; font-weight: 750; }
.filter-count { align-self: center; color: var(--muted); font-size: 10px; font-weight: 800; }
.access-panel-card table { min-width: 720px; }
th { padding: 14px 15px; background: #f5f8f9; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }
td { padding: 15px; font-size: 11px; }
tbody tr:hover { background: #fbfdfd; }
.access-mobile-card { border-radius: 12px; }

/* Rules */
.rules-intro { border: 1px solid var(--line); border-left: 3px solid var(--orange); border-radius: 16px; box-shadow: var(--shadow-xs); }
.rule-baselines { gap: 0; margin-top: 0; }
.rule-baselines > div { padding: 9px 18px; border-left: 1px solid var(--line); }
.rule-baselines > div:first-child { border-left: 0; }
.rule-baselines span { font-size: 9px; }
.rule-baselines strong { font-size: 13px; }
.rules-grid { gap: 14px; }
.rule-cards { gap: 12px; }
.rule-card { min-height: 170px; padding: 18px; border-radius: 15px; box-shadow: var(--shadow-xs); }
.rule-card::before { content: ""; display: block; width: 34px; height: 4px; margin-bottom: 16px; border-radius: 999px; background: var(--orange); }
.rule-card:nth-child(3n+2)::before { background: var(--teal); }
.rule-card:nth-child(3n+3)::before { background: var(--purple); }
.rule-card h3 { font-size: 20px; letter-spacing: -.02em; }
.rules-general, .rules-quarterly { border-radius: 15px; }

/* Winners */
.winners-list { gap: 14px; }
.winner-month { border-radius: 16px; }
.winner-month summary { min-height: 80px; padding: 17px 19px; }
.winner-month summary::before { content: "🏆"; width: 42px; height: 42px; display: grid; place-items: center; margin-right: 12px; border-radius: 13px; background: var(--gold-soft); font-size: 18px; }
.winner-month summary > span { margin-right: auto; }
.winner-month summary::after { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.winner-report-actions { padding: 0 0 17px; }
.winners-role-section { border-radius: 13px; }
.winners-role-heading { padding: 14px 16px; }
.winners-table th { background: var(--navy); }
.status { min-height: 23px; }

/* Password */
.password-dialog { backdrop-filter: blur(5px); }
.password-panel { border-top: 0; border-radius: 18px; box-shadow: var(--shadow-md); }
.password-panel input { border-radius: 11px; }
.dialog-close { border-radius: 10px; }
.password-actions button { border-radius: 11px; }

/* Mobile nav / sheet */
.mobile-bottom-nav, .mobile-more-sheet, .mobile-sheet-backdrop { display: none; }
.ux-toast { position: fixed; z-index: 80; right: 20px; bottom: 20px; max-width: 360px; padding: 12px 15px; border-radius: 12px; color: #fff; background: var(--navy); box-shadow: var(--shadow-md); font-size: 11px; font-weight: 750; }

@media (max-width: 1120px) and (min-width: 761px) {
  body { --sidebar-width: 86px; }
  .sidebar-brand { justify-content: center; padding: 0; }
  .sidebar-brand-copy, .nav-button span, .sidebar-footer > div, #sidebar-toggle span { display: none; }
  .nav-button { justify-content: center; padding: 0; }
  #sidebar-toggle { justify-content: center; padding: 0; }
  #sidebar-toggle svg { transform: none; }
  .goal-card-main { grid-template-columns: 118px minmax(0,1fr); }
  .progress-ring { width: 116px; height: 116px; }
  .progress-ring::before { inset: 10px; }
  .progress-ring-content strong { font-size: 18px; }
  .goal-card.billing .progress-ring-content strong { font-size: 13px; }
  .quick-actions { grid-template-columns: 1fr; }
}

@media (max-width: 900px) and (min-width: 761px) {
  .goal-cards { grid-template-columns: 1fr; }
  .goal-card { min-height: 210px; }
  .goal-card-main { grid-template-columns: 150px minmax(0,1fr); }
  .progress-ring { width: 140px; height: 140px; }
  .overview-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --header-height: 66px; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .dashboard-shell { padding: 0 0 22px; }
  .app-nav { display: none; }
  .app-header { top: 0; }
  .app-frame { width: min(calc(100% - 20px), 1440px); }
  .header-content { min-height: 66px; gap: 8px; }
  .app-lockup { flex: 1; gap: 7px; }
  .app-lockup .brand-coca { width: 92px; height: 24px; }
  .app-lockup .brand-shop { width: 42px; height: 24px; }
  .app-brand { display: none; }
  .session-actions { gap: 7px; }
  .notification-button { width: 42px; height: 42px; }
  .profile-avatar { width: 36px; height: 36px; font-size: 10px; }
  .user-summary, .password-button, .logout-button { display: none; }
  .app-content { padding-top: 14px; }
  .context-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 9px; }
  .context-strip > div { min-width: 0; padding: 9px 10px; border: 0; border-radius: 11px; background: var(--surface-2); }
  .context-strip > div:first-child { padding-left: 10px; }
  .context-strip strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
  .data-mode { grid-column: 1 / -1; justify-content: center; width: 100%; margin: 0; }
  .page-heading { align-items: start; margin: 21px 0 12px; }
  .page-heading h2 { font-size: 24px; }
  .page-subtitle { display: none; }
  .count-label { font-size: 9px; }
  .overview-insight { grid-template-columns: 39px 1fr; padding: 12px; }
  .insight-icon { width: 39px; height: 39px; }
  .insight-button { grid-column: 1 / -1; width: 100%; }
  .goal-cards { grid-template-columns: 1fr; gap: 11px; }
  .goal-card { min-height: 0; padding: 15px; }
  .goal-card-main { grid-template-columns: 112px minmax(0,1fr); gap: 14px; }
  .progress-ring { width: 110px; height: 110px; }
  .progress-ring::before { inset: 9px; }
  .progress-ring-content span { font-size: 10px; }
  .progress-ring-content strong { max-width: 84px; font-size: 18px; }
  .goal-card.billing .progress-ring-content strong { font-size: 12px; }
  .goal-card-foot { flex-wrap: wrap; }
  .goal-additional-inline { width: 100%; margin-left: 14px; padding: 8px 0 0; border: 0; }
  .overview-grid { grid-template-columns: 1fr; gap: 11px; margin-top: 11px; }
  .performance-row { grid-template-columns: 88px minmax(0,1fr) 42px; gap: 8px; }
  .quick-actions { grid-template-columns: 1fr; }
  .ranking-details { grid-template-columns: 1fr 1fr; }
  .alert-item { grid-template-columns: 36px 1fr; }
  .alert-item > b { grid-column: 2; }
  .panel { border-radius: 14px; }
  .panel-heading { min-height: 66px; padding: 13px 14px; }
  .panel-heading h2 { font-size: 15px; }
  .download-group { border-radius: 14px; }
  .download-group summary { min-height: 75px; padding: 14px; }
  .opportunity-icon { width: 39px; height: 39px; }
  .download-scroller { grid-template-columns: 32px minmax(0,1fr) 32px; padding: 0 14px 14px; }
  .download-button { flex-basis: 154px; min-height: 52px; }
  .hierarchy-item { border-radius: 14px; }
  .hierarchy-item summary { min-height: 70px; padding: 12px 13px; }
  .hierarchy-avatar { flex-basis: 38px; width: 38px; height: 38px; }
  .detail-metrics { grid-template-columns: 1fr; }
  .access-toolbar { position: sticky; z-index: 5; top: 74px; display: grid; grid-template-columns: 1fr; padding: 10px; background: rgba(255,255,255,.94); backdrop-filter: blur(15px); }
  .select-field { min-width: 0; }
  .filter-count { display: none; }
  .access-panel-card .table-wrap { display: none; }
  .access-mobile-list { display: grid; gap: 9px; padding: 9px; }
  .access-mobile-card { padding: 13px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-xs); }
  .rule-baselines { grid-template-columns: 1fr; }
  .rule-baselines > div { padding: 10px 5px; border: 0; border-bottom: 1px solid var(--line); }
  .rule-baselines > div:last-child { border-bottom: 0; }
  .rule-cards { grid-template-columns: 1fr; }
  .winner-month summary { flex-wrap: nowrap; padding: 14px; }
  .winner-month summary::before { flex: 0 0 38px; width: 38px; height: 38px; margin-right: 9px; }
  .winner-month summary strong { font-size: 13px; }
  .winner-month summary small { font-size: 9px; }
  .winner-month-content { padding: 12px; }
  .winner-report-actions { align-items: stretch; flex-direction: column; }
  .winner-report-actions .download-button { width: 100%; flex-basis: auto; }
  .winners-table-wrap { overflow: visible; }
  .winners-table { min-width: 0; }
  .winners-table thead { display: none; }
  .winners-table tbody { display: grid; gap: 9px; padding: 9px; }
  .winners-table tr { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
  .winners-table td { min-width: 0 !important; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: normal; text-align: right; }
  .winners-table td:last-child { border-bottom: 0; }
  .winners-table td::before { content: attr(data-label); flex: 0 0 40%; color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
  .winners-table td > * { max-width: 58%; }
  .password-dialog { align-items: end; padding: 10px; }
  .password-panel { width: 100%; max-height: calc(100vh - 20px); overflow-y: auto; border-radius: 20px; }

  .mobile-bottom-nav { position: fixed; z-index: 42; inset: auto 0 0; min-height: calc(70px + env(safe-area-inset-bottom)); display: flex; align-items: start; justify-content: space-around; gap: 2px; padding: 6px 7px env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: rgba(255,255,255,.96); box-shadow: 0 -12px 30px rgba(17,36,47,.09); backdrop-filter: blur(18px); }
  .mobile-bottom-nav[hidden] { display: none !important; }
  .mobile-nav-button { flex: 1; min-width: 0; min-height: 56px; display: grid; place-items: center; align-content: center; gap: 3px; padding: 5px 2px; border: 0; border-radius: 12px; color: #6f828c; background: transparent; font-size: 8px; font-weight: 850; }
  .mobile-nav-button svg { width: 19px; height: 19px; }
  .mobile-nav-button.is-active { color: var(--orange); background: var(--orange-soft); }
  .mobile-nav-button span { max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-sheet-backdrop { position: fixed; z-index: 47; inset: 0; display: block; min-height: 100vh; border: 0; background: rgba(4,26,38,.55); backdrop-filter: blur(3px); animation: ux-fade .18s ease both; }
  .mobile-sheet-backdrop[hidden] { display: none !important; }
  .mobile-more-sheet { position: fixed; z-index: 48; inset: auto 0 0; display: block; max-height: min(78vh, 650px); overflow-y: auto; padding: 9px 14px calc(18px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: #fff; box-shadow: 0 -24px 58px rgba(7,30,44,.24); animation: ux-sheet .22s ease both; }
  .mobile-more-sheet[hidden] { display: none !important; }
  .sheet-handle { width: 42px; height: 4px; margin: 0 auto 10px; border-radius: 999px; background: #c6d2d7; }
  .sheet-heading { display: flex; align-items: center; justify-content: space-between; padding: 2px 1px 12px; }
  .sheet-heading h2 { margin: 4px 0 0; font-size: 20px; }
  #mobile-sheet-close { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: var(--surface-2); }
  .sheet-actions { display: grid; gap: 8px; }
  .sheet-actions > button { min-height: 66px; display: grid; grid-template-columns: 42px 1fr 18px; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: #fff; text-align: left; }
  .sheet-actions > button > span:nth-child(2) { display: grid; gap: 2px; }
  .sheet-actions strong { font-size: 12px; }
  .sheet-actions small { color: var(--muted); font-size: 9px; }
  .sheet-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--teal); background: var(--teal-soft); }
  .sheet-icon.gold { color: var(--gold); background: var(--gold-soft); }
  .sheet-icon svg { width: 19px; height: 19px; }
  .sheet-arrow { width: 15px; height: 15px; color: #9aabb3; }
  .sheet-actions .danger { color: #a52830; border-color: #f0c8cb; background: var(--red-soft); }
  .sheet-actions .danger .sheet-icon { color: var(--red); background: rgba(255,255,255,.75); }
  .ux-toast { right: 10px; bottom: calc(82px + env(safe-area-inset-bottom)); left: 10px; max-width: none; }
  @keyframes ux-sheet { from { translate: 0 100%; } to { translate: 0; } }
  @keyframes ux-fade { from { opacity: 0; } to { opacity: 1; } }
}

@media (max-width: 620px) {
  .login-shell { align-items: start; padding: 10px; }
  .login-panel { min-height: 0; grid-template-columns: 1fr; border-radius: 22px; }
  .login-hero { min-height: 0; padding: 20px 20px 14px; }
  .login-hero-brands { padding: 7px 9px; }
  .login-hero-brands img:first-child { width: 112px; height: 24px; }
  .login-hero-brands img:last-child { width: 43px; height: 24px; }
  .login-hero-copy { margin-top: 24px; padding-right: 0; }
  .login-hero-copy h2 { max-width: 320px; margin: 8px 0 10px; font-size: clamp(27px, 8.2vw, 32px); line-height: 1.06; }
  .login-hero-copy p { max-width: 320px; color: rgba(255,255,255,.88); font-size: 12px; line-height: 1.55; }
  .login-art { width: 238px; height: 166px; margin: 14px auto -2px; }
  .login-art .orbit-one { inset: 18px 2px 8px 4px; }
  .login-art .orbit-two { inset: 42px 35px 29px 39px; }
  .login-art .cube-one { width: 76px; height: 76px; left: 6px; bottom: 4px; border-radius: 16px; }
  .login-art .cube-two { width: 61px; height: 61px; right: 6px; bottom: 12px; border-radius: 16px; }
  .login-art .cube-three { width: 90px; height: 90px; left: 75px; top: 6px; border-radius: 17px; }
  .login-art .cube-three svg { width: 34px; height: 34px; }
  .login-form-panel { padding: 27px 22px 25px; }
  .login-lockup { display: none; }
  .login-heading { margin: 0 0 22px; }
  .login-heading h1 { font-size: 26px; }
  input, select { font-size: 16px; }
}


@media (max-width: 360px) {
  .login-hero { padding-inline: 17px; }
  .login-hero-copy h2 { font-size: 27px; }
  .login-hero-copy p { font-size: 11.5px; }
  .login-art { width: 220px; height: 154px; }
  .login-art .cube-three { left: 69px; }
}

@media (max-width: 380px) {
  .app-lockup .brand-coca { width: 82px; }
  .app-lockup .brand-shop { width: 36px; }
  .goal-card-main { grid-template-columns: 98px minmax(0,1fr); gap: 10px; }
  .progress-ring { width: 96px; height: 96px; }
  .progress-ring::before { inset: 8px; }
  .progress-ring-content strong { font-size: 15px; }
  .goal-card.billing .progress-ring-content strong { font-size: 10px; }
  .goal-stat strong { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

#login-submit.is-loading { cursor: wait; opacity: .82; }
#login-submit.is-loading::after { content: ""; width: 17px; height: 17px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: login-spin .7s linear infinite; }
@keyframes login-spin { to { transform: rotate(360deg); } }

.sheet-icon.blue { color: var(--blue); background: var(--blue-soft); }

.panel-heading-note { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 700; }


/* ========================================================================== 
   UX V3 — progresso determinístico + dashboard mobile de alto contraste
   ========================================================================== */

/* Resumo: evita SVG/progress nativo e usa preenchimento CSS explícito. */
.progress-ring {
  overflow: hidden;
  background: #e3ebee;
  isolation: isolate;
}
.progress-ring.no-target { background: #e3ebee; }
.progress-ring::before {
  z-index: 1;
  inset: 13px;
  border: 1px solid rgba(17, 36, 47, .04);
  box-shadow: 0 5px 16px rgba(17, 36, 47, .08);
}
.progress-ring-content { z-index: 2; }
.progress-ring-svg { display: none !important; }

.performance-track {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eef1;
  box-shadow: inset 0 1px 2px rgba(17, 36, 47, .08);
}
.performance-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--tone);
  transition: width .45s ease;
}
.performance-track.no-target .performance-fill { width: 0 !important; }

/* Dashboard: componentes de progresso compatíveis com CSP. */
.analytics-kpi-progress i,
.analytics-ranking-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
}
.analytics-kpi-progress i { background: #f7faf9; }
.analytics-ranking-value > span:not(.analytics-ranking-track) { display: none; }
.analytics-ranking-track {
  display: block;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #344148;
}
.analytics-ranking-track i { background: #ff6740; }

/* Distribuição por quantidade de pedidos: leitura direta e responsiva. */
.repurchase-composition {
  width: min(100%, 300px);
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #405058;
  border-radius: 12px;
  background: #0c151a;
}
.repurchase-composition-total { display: grid; gap: 4px; }
.repurchase-composition-total strong { color: #fff; font-size: 28px; line-height: 1; }
.repurchase-composition-total span { color: #c9d4d8; font-size: 11px; font-weight: 750; }
.repurchase-composition-bar {
  display: flex;
  width: 100%;
  height: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: #27343a;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
}
.repurchase-segment { flex: 0 0 0; height: 100%; }
.band-one { background: #f23b42 !important; }
.band-two { background: #f4d64a !important; }
.band-three { background: #23b8b3 !important; }
.band-four { background: #55bd72 !important; }
.repurchase-legend i.band-one,
.repurchase-legend i.band-two,
.repurchase-legend i.band-three,
.repurchase-legend i.band-four { width: 9px; height: 9px; border-radius: 50%; }
.repurchase-legend strong small { margin-left: 4px; color: #bfcbd0; font-size: 9px; }

/* Rosca clientes novos x recompra sem deslocamentos SVG. */
.client-donut {
  width: 148px;
  height: 148px;
  display: grid;
  place-items: center;
  padding: 19px;
  border-radius: 50%;
  background: #8d989b;
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
}
.client-donut.is-pending { background: #59666b; }
.client-donut-core {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  border: 1px solid #334149;
  border-radius: 50%;
  color: #fff;
  background: #0c1418;
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.015);
  text-align: center;
}
.client-donut-core span,
.client-donut-core small { color: #d3dde1; font-size: 10px; font-weight: 800; }
.client-donut-core strong { color: #fff; font-size: 24px; line-height: 1; }
.client-donut svg { display: none !important; }

.console-topbar-leading { display: flex; align-items: center; gap: 8px; }
.analytics-filter-toggle {
  display: none;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid #52636b;
  border-radius: 9px;
  color: #fff;
  background: #172229;
  font-size: 11px;
  font-weight: 850;
}
.analytics-filter-toggle:hover { border-color: #ff6840; background: #202d34; }

/* Contraste nítido: remove transparências fracas e melhora legibilidade. */
.analytics-console { color: #f8fafb; background: #090f13; }
.console-main { background: #090f13; }
.console-sidebar { background: #0f171c; }
.console-heading > div > span,
.analytics-status,
.console-panel .empty-state,
.analytics-kpi > p,
.analytics-kpi-head > span:first-child,
.client-split-legend,
.client-split-value-row > span,
.client-split-value-row > small { color: #c7d2d7; }
.console-panel { border-color: #35454d; background: #111a1f; box-shadow: none; }
.analytics-kpi { border-color: #3a4a52; background: #121b20; box-shadow: none; }
.analytics-kpi.primary { border-color: #db434a; background: #7b1b21; }
.analytics-kpi > strong,
.analytics-kpi.billing > strong { color: #fff; }

@media (max-width: 600px) {
  #analytics-panel { margin-inline: -2px; }
  .analytics-console {
    border: 1px solid #26353d;
    border-radius: 15px;
    background: #090f13;
    box-shadow: none;
  }
  .analytics-filter-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .console-sidebar { display: none; }
  .console-sidebar.is-open {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 15px;
    border-right: 0;
    border-bottom: 1px solid #35454d;
  }
  .console-main { padding: 14px; }
  .console-topbar { gap: 11px; }
  .console-topbar-leading { width: 100%; justify-content: space-between; }
  .console-top-controls { grid-template-columns: 1fr; width: 100%; }
  .console-top-controls label { color: #d2dce0; font-size: 11px; }
  .console-top-controls select { min-height: 44px; color: #fff; background: #111b21; font-size: 14px; }
  .console-heading { padding: 18px 2px 14px; }
  .console-heading > div > p { font-size: 10px; }
  .console-heading h2 { margin-top: 6px; font-size: 25px; line-height: 1.08; letter-spacing: -.02em; }
  .console-heading > div > span,
  .analytics-status { color: #d0d9dd; font-size: 12px; line-height: 1.45; }
  .analytics-kpis { grid-template-columns: 1fr; gap: 10px; }
  .analytics-kpi {
    min-height: 132px;
    padding: 15px;
    border-radius: 12px;
  }
  .analytics-kpi-head > span:first-child { color: #e4eaed; font-size: 12px; }
  .analytics-kpi-icon { width: 34px; height: 34px; flex-basis: 34px; }
  .analytics-kpi > strong,
  .analytics-kpi.billing > strong { margin-top: 10px; font-size: 25px; }
  .analytics-kpi > p { margin-top: 8px; color: #d2dade; font-size: 12px; line-height: 1.4; }
  .analytics-kpi .kpi-inline { font-size: 12px; }
  .analytics-kpi-sparkline { height: 28px; bottom: 10px; }
  .console-panel-heading { min-height: 58px; padding: 12px 14px; }
  .console-panel-heading h3 { color: #fff; font-size: 17px; line-height: 1.25; }
  .analytics-client-split,
  .analytics-orders-ticket,
  .analytics-highlights { padding: 16px; }
  .client-split-grid { grid-template-columns: 1fr; gap: 18px; }
  .client-split-visual { display: grid; justify-items: center; gap: 10px; }
  .client-split-legend { width: 100%; justify-content: center; color: #e0e7ea; font-size: 11px; }
  .client-donut { width: 158px; height: 158px; }
  .client-donut-core strong { font-size: 26px; }
  .client-split-summary { gap: 14px; }
  .client-split-value-row > span { font-size: 12px; }
  .client-split-value-row > strong { font-size: 22px; }
  .client-split-value-row > small { font-size: 11px; }
  .client-split-footer { min-height: 62px; border-color: #4a5d66; background: #0d171c; }
  .client-split-footer strong { font-size: 17px; }
  .client-split-footer span,
  .client-split-footer > small { color: #d5dfe2; font-size: 11px; }
  .repurchase-breakdown { align-items: stretch; }
  .repurchase-composition { width: 100%; }
  .repurchase-legend p { min-height: 38px; }
  .repurchase-legend span { color: #e0e7e9; font-size: 11px; }
  .repurchase-legend strong { color: #fff; font-size: 12px; }
  .analytics-ranking-item { grid-template-columns: 31px minmax(0, 1fr) 112px; gap: 9px; }
  .analytics-ranking-name strong { color: #fff; font-size: 11px; }
  .analytics-ranking-name span { color: #c8d3d7; font-size: 10px; }
  .analytics-ranking-value strong { color: #fff; font-size: 11px; }
  .trend-svg text,
  .executive-trend-svg text,
  .orders-ticket-svg text { fill: #d4dde0; font-size: 10px; }
}

@media (max-width: 390px) {
  .console-main { padding: 12px; }
  .console-heading h2 { font-size: 23px; }
  .analytics-kpi > strong,
  .analytics-kpi.billing > strong { font-size: 23px; }
  .analytics-ranking-item { grid-template-columns: 28px minmax(0,1fr) 96px; padding-inline: 9px; }
}

.progress-ring.ring-pct-0 { background: conic-gradient(from 0deg, var(--tone) 0 0%, #e3ebee 0% 100%); }
.fill-pct-0 { width: 0%; }
.segment-pct-0 { flex-basis: 0%; width: 0%; }
.client-donut.client-pct-0 { background: conic-gradient(from 0deg, #f02d35 0 0%, #8d989b 0% 100%); }
.progress-ring.ring-pct-1 { background: conic-gradient(from 0deg, var(--tone) 0 1%, #e3ebee 1% 100%); }
.fill-pct-1 { width: 1%; }
.segment-pct-1 { flex-basis: 1%; width: 1%; }
.client-donut.client-pct-1 { background: conic-gradient(from 0deg, #f02d35 0 1%, #8d989b 1% 100%); }
.progress-ring.ring-pct-2 { background: conic-gradient(from 0deg, var(--tone) 0 2%, #e3ebee 2% 100%); }
.fill-pct-2 { width: 2%; }
.segment-pct-2 { flex-basis: 2%; width: 2%; }
.client-donut.client-pct-2 { background: conic-gradient(from 0deg, #f02d35 0 2%, #8d989b 2% 100%); }
.progress-ring.ring-pct-3 { background: conic-gradient(from 0deg, var(--tone) 0 3%, #e3ebee 3% 100%); }
.fill-pct-3 { width: 3%; }
.segment-pct-3 { flex-basis: 3%; width: 3%; }
.client-donut.client-pct-3 { background: conic-gradient(from 0deg, #f02d35 0 3%, #8d989b 3% 100%); }
.progress-ring.ring-pct-4 { background: conic-gradient(from 0deg, var(--tone) 0 4%, #e3ebee 4% 100%); }
.fill-pct-4 { width: 4%; }
.segment-pct-4 { flex-basis: 4%; width: 4%; }
.client-donut.client-pct-4 { background: conic-gradient(from 0deg, #f02d35 0 4%, #8d989b 4% 100%); }
.progress-ring.ring-pct-5 { background: conic-gradient(from 0deg, var(--tone) 0 5%, #e3ebee 5% 100%); }
.fill-pct-5 { width: 5%; }
.segment-pct-5 { flex-basis: 5%; width: 5%; }
.client-donut.client-pct-5 { background: conic-gradient(from 0deg, #f02d35 0 5%, #8d989b 5% 100%); }
.progress-ring.ring-pct-6 { background: conic-gradient(from 0deg, var(--tone) 0 6%, #e3ebee 6% 100%); }
.fill-pct-6 { width: 6%; }
.segment-pct-6 { flex-basis: 6%; width: 6%; }
.client-donut.client-pct-6 { background: conic-gradient(from 0deg, #f02d35 0 6%, #8d989b 6% 100%); }
.progress-ring.ring-pct-7 { background: conic-gradient(from 0deg, var(--tone) 0 7%, #e3ebee 7% 100%); }
.fill-pct-7 { width: 7%; }
.segment-pct-7 { flex-basis: 7%; width: 7%; }
.client-donut.client-pct-7 { background: conic-gradient(from 0deg, #f02d35 0 7%, #8d989b 7% 100%); }
.progress-ring.ring-pct-8 { background: conic-gradient(from 0deg, var(--tone) 0 8%, #e3ebee 8% 100%); }
.fill-pct-8 { width: 8%; }
.segment-pct-8 { flex-basis: 8%; width: 8%; }
.client-donut.client-pct-8 { background: conic-gradient(from 0deg, #f02d35 0 8%, #8d989b 8% 100%); }
.progress-ring.ring-pct-9 { background: conic-gradient(from 0deg, var(--tone) 0 9%, #e3ebee 9% 100%); }
.fill-pct-9 { width: 9%; }
.segment-pct-9 { flex-basis: 9%; width: 9%; }
.client-donut.client-pct-9 { background: conic-gradient(from 0deg, #f02d35 0 9%, #8d989b 9% 100%); }
.progress-ring.ring-pct-10 { background: conic-gradient(from 0deg, var(--tone) 0 10%, #e3ebee 10% 100%); }
.fill-pct-10 { width: 10%; }
.segment-pct-10 { flex-basis: 10%; width: 10%; }
.client-donut.client-pct-10 { background: conic-gradient(from 0deg, #f02d35 0 10%, #8d989b 10% 100%); }
.progress-ring.ring-pct-11 { background: conic-gradient(from 0deg, var(--tone) 0 11%, #e3ebee 11% 100%); }
.fill-pct-11 { width: 11%; }
.segment-pct-11 { flex-basis: 11%; width: 11%; }
.client-donut.client-pct-11 { background: conic-gradient(from 0deg, #f02d35 0 11%, #8d989b 11% 100%); }
.progress-ring.ring-pct-12 { background: conic-gradient(from 0deg, var(--tone) 0 12%, #e3ebee 12% 100%); }
.fill-pct-12 { width: 12%; }
.segment-pct-12 { flex-basis: 12%; width: 12%; }
.client-donut.client-pct-12 { background: conic-gradient(from 0deg, #f02d35 0 12%, #8d989b 12% 100%); }
.progress-ring.ring-pct-13 { background: conic-gradient(from 0deg, var(--tone) 0 13%, #e3ebee 13% 100%); }
.fill-pct-13 { width: 13%; }
.segment-pct-13 { flex-basis: 13%; width: 13%; }
.client-donut.client-pct-13 { background: conic-gradient(from 0deg, #f02d35 0 13%, #8d989b 13% 100%); }
.progress-ring.ring-pct-14 { background: conic-gradient(from 0deg, var(--tone) 0 14%, #e3ebee 14% 100%); }
.fill-pct-14 { width: 14%; }
.segment-pct-14 { flex-basis: 14%; width: 14%; }
.client-donut.client-pct-14 { background: conic-gradient(from 0deg, #f02d35 0 14%, #8d989b 14% 100%); }
.progress-ring.ring-pct-15 { background: conic-gradient(from 0deg, var(--tone) 0 15%, #e3ebee 15% 100%); }
.fill-pct-15 { width: 15%; }
.segment-pct-15 { flex-basis: 15%; width: 15%; }
.client-donut.client-pct-15 { background: conic-gradient(from 0deg, #f02d35 0 15%, #8d989b 15% 100%); }
.progress-ring.ring-pct-16 { background: conic-gradient(from 0deg, var(--tone) 0 16%, #e3ebee 16% 100%); }
.fill-pct-16 { width: 16%; }
.segment-pct-16 { flex-basis: 16%; width: 16%; }
.client-donut.client-pct-16 { background: conic-gradient(from 0deg, #f02d35 0 16%, #8d989b 16% 100%); }
.progress-ring.ring-pct-17 { background: conic-gradient(from 0deg, var(--tone) 0 17%, #e3ebee 17% 100%); }
.fill-pct-17 { width: 17%; }
.segment-pct-17 { flex-basis: 17%; width: 17%; }
.client-donut.client-pct-17 { background: conic-gradient(from 0deg, #f02d35 0 17%, #8d989b 17% 100%); }
.progress-ring.ring-pct-18 { background: conic-gradient(from 0deg, var(--tone) 0 18%, #e3ebee 18% 100%); }
.fill-pct-18 { width: 18%; }
.segment-pct-18 { flex-basis: 18%; width: 18%; }
.client-donut.client-pct-18 { background: conic-gradient(from 0deg, #f02d35 0 18%, #8d989b 18% 100%); }
.progress-ring.ring-pct-19 { background: conic-gradient(from 0deg, var(--tone) 0 19%, #e3ebee 19% 100%); }
.fill-pct-19 { width: 19%; }
.segment-pct-19 { flex-basis: 19%; width: 19%; }
.client-donut.client-pct-19 { background: conic-gradient(from 0deg, #f02d35 0 19%, #8d989b 19% 100%); }
.progress-ring.ring-pct-20 { background: conic-gradient(from 0deg, var(--tone) 0 20%, #e3ebee 20% 100%); }
.fill-pct-20 { width: 20%; }
.segment-pct-20 { flex-basis: 20%; width: 20%; }
.client-donut.client-pct-20 { background: conic-gradient(from 0deg, #f02d35 0 20%, #8d989b 20% 100%); }
.progress-ring.ring-pct-21 { background: conic-gradient(from 0deg, var(--tone) 0 21%, #e3ebee 21% 100%); }
.fill-pct-21 { width: 21%; }
.segment-pct-21 { flex-basis: 21%; width: 21%; }
.client-donut.client-pct-21 { background: conic-gradient(from 0deg, #f02d35 0 21%, #8d989b 21% 100%); }
.progress-ring.ring-pct-22 { background: conic-gradient(from 0deg, var(--tone) 0 22%, #e3ebee 22% 100%); }
.fill-pct-22 { width: 22%; }
.segment-pct-22 { flex-basis: 22%; width: 22%; }
.client-donut.client-pct-22 { background: conic-gradient(from 0deg, #f02d35 0 22%, #8d989b 22% 100%); }
.progress-ring.ring-pct-23 { background: conic-gradient(from 0deg, var(--tone) 0 23%, #e3ebee 23% 100%); }
.fill-pct-23 { width: 23%; }
.segment-pct-23 { flex-basis: 23%; width: 23%; }
.client-donut.client-pct-23 { background: conic-gradient(from 0deg, #f02d35 0 23%, #8d989b 23% 100%); }
.progress-ring.ring-pct-24 { background: conic-gradient(from 0deg, var(--tone) 0 24%, #e3ebee 24% 100%); }
.fill-pct-24 { width: 24%; }
.segment-pct-24 { flex-basis: 24%; width: 24%; }
.client-donut.client-pct-24 { background: conic-gradient(from 0deg, #f02d35 0 24%, #8d989b 24% 100%); }
.progress-ring.ring-pct-25 { background: conic-gradient(from 0deg, var(--tone) 0 25%, #e3ebee 25% 100%); }
.fill-pct-25 { width: 25%; }
.segment-pct-25 { flex-basis: 25%; width: 25%; }
.client-donut.client-pct-25 { background: conic-gradient(from 0deg, #f02d35 0 25%, #8d989b 25% 100%); }
.progress-ring.ring-pct-26 { background: conic-gradient(from 0deg, var(--tone) 0 26%, #e3ebee 26% 100%); }
.fill-pct-26 { width: 26%; }
.segment-pct-26 { flex-basis: 26%; width: 26%; }
.client-donut.client-pct-26 { background: conic-gradient(from 0deg, #f02d35 0 26%, #8d989b 26% 100%); }
.progress-ring.ring-pct-27 { background: conic-gradient(from 0deg, var(--tone) 0 27%, #e3ebee 27% 100%); }
.fill-pct-27 { width: 27%; }
.segment-pct-27 { flex-basis: 27%; width: 27%; }
.client-donut.client-pct-27 { background: conic-gradient(from 0deg, #f02d35 0 27%, #8d989b 27% 100%); }
.progress-ring.ring-pct-28 { background: conic-gradient(from 0deg, var(--tone) 0 28%, #e3ebee 28% 100%); }
.fill-pct-28 { width: 28%; }
.segment-pct-28 { flex-basis: 28%; width: 28%; }
.client-donut.client-pct-28 { background: conic-gradient(from 0deg, #f02d35 0 28%, #8d989b 28% 100%); }
.progress-ring.ring-pct-29 { background: conic-gradient(from 0deg, var(--tone) 0 29%, #e3ebee 29% 100%); }
.fill-pct-29 { width: 29%; }
.segment-pct-29 { flex-basis: 29%; width: 29%; }
.client-donut.client-pct-29 { background: conic-gradient(from 0deg, #f02d35 0 29%, #8d989b 29% 100%); }
.progress-ring.ring-pct-30 { background: conic-gradient(from 0deg, var(--tone) 0 30%, #e3ebee 30% 100%); }
.fill-pct-30 { width: 30%; }
.segment-pct-30 { flex-basis: 30%; width: 30%; }
.client-donut.client-pct-30 { background: conic-gradient(from 0deg, #f02d35 0 30%, #8d989b 30% 100%); }
.progress-ring.ring-pct-31 { background: conic-gradient(from 0deg, var(--tone) 0 31%, #e3ebee 31% 100%); }
.fill-pct-31 { width: 31%; }
.segment-pct-31 { flex-basis: 31%; width: 31%; }
.client-donut.client-pct-31 { background: conic-gradient(from 0deg, #f02d35 0 31%, #8d989b 31% 100%); }
.progress-ring.ring-pct-32 { background: conic-gradient(from 0deg, var(--tone) 0 32%, #e3ebee 32% 100%); }
.fill-pct-32 { width: 32%; }
.segment-pct-32 { flex-basis: 32%; width: 32%; }
.client-donut.client-pct-32 { background: conic-gradient(from 0deg, #f02d35 0 32%, #8d989b 32% 100%); }
.progress-ring.ring-pct-33 { background: conic-gradient(from 0deg, var(--tone) 0 33%, #e3ebee 33% 100%); }
.fill-pct-33 { width: 33%; }
.segment-pct-33 { flex-basis: 33%; width: 33%; }
.client-donut.client-pct-33 { background: conic-gradient(from 0deg, #f02d35 0 33%, #8d989b 33% 100%); }
.progress-ring.ring-pct-34 { background: conic-gradient(from 0deg, var(--tone) 0 34%, #e3ebee 34% 100%); }
.fill-pct-34 { width: 34%; }
.segment-pct-34 { flex-basis: 34%; width: 34%; }
.client-donut.client-pct-34 { background: conic-gradient(from 0deg, #f02d35 0 34%, #8d989b 34% 100%); }
.progress-ring.ring-pct-35 { background: conic-gradient(from 0deg, var(--tone) 0 35%, #e3ebee 35% 100%); }
.fill-pct-35 { width: 35%; }
.segment-pct-35 { flex-basis: 35%; width: 35%; }
.client-donut.client-pct-35 { background: conic-gradient(from 0deg, #f02d35 0 35%, #8d989b 35% 100%); }
.progress-ring.ring-pct-36 { background: conic-gradient(from 0deg, var(--tone) 0 36%, #e3ebee 36% 100%); }
.fill-pct-36 { width: 36%; }
.segment-pct-36 { flex-basis: 36%; width: 36%; }
.client-donut.client-pct-36 { background: conic-gradient(from 0deg, #f02d35 0 36%, #8d989b 36% 100%); }
.progress-ring.ring-pct-37 { background: conic-gradient(from 0deg, var(--tone) 0 37%, #e3ebee 37% 100%); }
.fill-pct-37 { width: 37%; }
.segment-pct-37 { flex-basis: 37%; width: 37%; }
.client-donut.client-pct-37 { background: conic-gradient(from 0deg, #f02d35 0 37%, #8d989b 37% 100%); }
.progress-ring.ring-pct-38 { background: conic-gradient(from 0deg, var(--tone) 0 38%, #e3ebee 38% 100%); }
.fill-pct-38 { width: 38%; }
.segment-pct-38 { flex-basis: 38%; width: 38%; }
.client-donut.client-pct-38 { background: conic-gradient(from 0deg, #f02d35 0 38%, #8d989b 38% 100%); }
.progress-ring.ring-pct-39 { background: conic-gradient(from 0deg, var(--tone) 0 39%, #e3ebee 39% 100%); }
.fill-pct-39 { width: 39%; }
.segment-pct-39 { flex-basis: 39%; width: 39%; }
.client-donut.client-pct-39 { background: conic-gradient(from 0deg, #f02d35 0 39%, #8d989b 39% 100%); }
.progress-ring.ring-pct-40 { background: conic-gradient(from 0deg, var(--tone) 0 40%, #e3ebee 40% 100%); }
.fill-pct-40 { width: 40%; }
.segment-pct-40 { flex-basis: 40%; width: 40%; }
.client-donut.client-pct-40 { background: conic-gradient(from 0deg, #f02d35 0 40%, #8d989b 40% 100%); }
.progress-ring.ring-pct-41 { background: conic-gradient(from 0deg, var(--tone) 0 41%, #e3ebee 41% 100%); }
.fill-pct-41 { width: 41%; }
.segment-pct-41 { flex-basis: 41%; width: 41%; }
.client-donut.client-pct-41 { background: conic-gradient(from 0deg, #f02d35 0 41%, #8d989b 41% 100%); }
.progress-ring.ring-pct-42 { background: conic-gradient(from 0deg, var(--tone) 0 42%, #e3ebee 42% 100%); }
.fill-pct-42 { width: 42%; }
.segment-pct-42 { flex-basis: 42%; width: 42%; }
.client-donut.client-pct-42 { background: conic-gradient(from 0deg, #f02d35 0 42%, #8d989b 42% 100%); }
.progress-ring.ring-pct-43 { background: conic-gradient(from 0deg, var(--tone) 0 43%, #e3ebee 43% 100%); }
.fill-pct-43 { width: 43%; }
.segment-pct-43 { flex-basis: 43%; width: 43%; }
.client-donut.client-pct-43 { background: conic-gradient(from 0deg, #f02d35 0 43%, #8d989b 43% 100%); }
.progress-ring.ring-pct-44 { background: conic-gradient(from 0deg, var(--tone) 0 44%, #e3ebee 44% 100%); }
.fill-pct-44 { width: 44%; }
.segment-pct-44 { flex-basis: 44%; width: 44%; }
.client-donut.client-pct-44 { background: conic-gradient(from 0deg, #f02d35 0 44%, #8d989b 44% 100%); }
.progress-ring.ring-pct-45 { background: conic-gradient(from 0deg, var(--tone) 0 45%, #e3ebee 45% 100%); }
.fill-pct-45 { width: 45%; }
.segment-pct-45 { flex-basis: 45%; width: 45%; }
.client-donut.client-pct-45 { background: conic-gradient(from 0deg, #f02d35 0 45%, #8d989b 45% 100%); }
.progress-ring.ring-pct-46 { background: conic-gradient(from 0deg, var(--tone) 0 46%, #e3ebee 46% 100%); }
.fill-pct-46 { width: 46%; }
.segment-pct-46 { flex-basis: 46%; width: 46%; }
.client-donut.client-pct-46 { background: conic-gradient(from 0deg, #f02d35 0 46%, #8d989b 46% 100%); }
.progress-ring.ring-pct-47 { background: conic-gradient(from 0deg, var(--tone) 0 47%, #e3ebee 47% 100%); }
.fill-pct-47 { width: 47%; }
.segment-pct-47 { flex-basis: 47%; width: 47%; }
.client-donut.client-pct-47 { background: conic-gradient(from 0deg, #f02d35 0 47%, #8d989b 47% 100%); }
.progress-ring.ring-pct-48 { background: conic-gradient(from 0deg, var(--tone) 0 48%, #e3ebee 48% 100%); }
.fill-pct-48 { width: 48%; }
.segment-pct-48 { flex-basis: 48%; width: 48%; }
.client-donut.client-pct-48 { background: conic-gradient(from 0deg, #f02d35 0 48%, #8d989b 48% 100%); }
.progress-ring.ring-pct-49 { background: conic-gradient(from 0deg, var(--tone) 0 49%, #e3ebee 49% 100%); }
.fill-pct-49 { width: 49%; }
.segment-pct-49 { flex-basis: 49%; width: 49%; }
.client-donut.client-pct-49 { background: conic-gradient(from 0deg, #f02d35 0 49%, #8d989b 49% 100%); }
.progress-ring.ring-pct-50 { background: conic-gradient(from 0deg, var(--tone) 0 50%, #e3ebee 50% 100%); }
.fill-pct-50 { width: 50%; }
.segment-pct-50 { flex-basis: 50%; width: 50%; }
.client-donut.client-pct-50 { background: conic-gradient(from 0deg, #f02d35 0 50%, #8d989b 50% 100%); }
.progress-ring.ring-pct-51 { background: conic-gradient(from 0deg, var(--tone) 0 51%, #e3ebee 51% 100%); }
.fill-pct-51 { width: 51%; }
.segment-pct-51 { flex-basis: 51%; width: 51%; }
.client-donut.client-pct-51 { background: conic-gradient(from 0deg, #f02d35 0 51%, #8d989b 51% 100%); }
.progress-ring.ring-pct-52 { background: conic-gradient(from 0deg, var(--tone) 0 52%, #e3ebee 52% 100%); }
.fill-pct-52 { width: 52%; }
.segment-pct-52 { flex-basis: 52%; width: 52%; }
.client-donut.client-pct-52 { background: conic-gradient(from 0deg, #f02d35 0 52%, #8d989b 52% 100%); }
.progress-ring.ring-pct-53 { background: conic-gradient(from 0deg, var(--tone) 0 53%, #e3ebee 53% 100%); }
.fill-pct-53 { width: 53%; }
.segment-pct-53 { flex-basis: 53%; width: 53%; }
.client-donut.client-pct-53 { background: conic-gradient(from 0deg, #f02d35 0 53%, #8d989b 53% 100%); }
.progress-ring.ring-pct-54 { background: conic-gradient(from 0deg, var(--tone) 0 54%, #e3ebee 54% 100%); }
.fill-pct-54 { width: 54%; }
.segment-pct-54 { flex-basis: 54%; width: 54%; }
.client-donut.client-pct-54 { background: conic-gradient(from 0deg, #f02d35 0 54%, #8d989b 54% 100%); }
.progress-ring.ring-pct-55 { background: conic-gradient(from 0deg, var(--tone) 0 55%, #e3ebee 55% 100%); }
.fill-pct-55 { width: 55%; }
.segment-pct-55 { flex-basis: 55%; width: 55%; }
.client-donut.client-pct-55 { background: conic-gradient(from 0deg, #f02d35 0 55%, #8d989b 55% 100%); }
.progress-ring.ring-pct-56 { background: conic-gradient(from 0deg, var(--tone) 0 56%, #e3ebee 56% 100%); }
.fill-pct-56 { width: 56%; }
.segment-pct-56 { flex-basis: 56%; width: 56%; }
.client-donut.client-pct-56 { background: conic-gradient(from 0deg, #f02d35 0 56%, #8d989b 56% 100%); }
.progress-ring.ring-pct-57 { background: conic-gradient(from 0deg, var(--tone) 0 57%, #e3ebee 57% 100%); }
.fill-pct-57 { width: 57%; }
.segment-pct-57 { flex-basis: 57%; width: 57%; }
.client-donut.client-pct-57 { background: conic-gradient(from 0deg, #f02d35 0 57%, #8d989b 57% 100%); }
.progress-ring.ring-pct-58 { background: conic-gradient(from 0deg, var(--tone) 0 58%, #e3ebee 58% 100%); }
.fill-pct-58 { width: 58%; }
.segment-pct-58 { flex-basis: 58%; width: 58%; }
.client-donut.client-pct-58 { background: conic-gradient(from 0deg, #f02d35 0 58%, #8d989b 58% 100%); }
.progress-ring.ring-pct-59 { background: conic-gradient(from 0deg, var(--tone) 0 59%, #e3ebee 59% 100%); }
.fill-pct-59 { width: 59%; }
.segment-pct-59 { flex-basis: 59%; width: 59%; }
.client-donut.client-pct-59 { background: conic-gradient(from 0deg, #f02d35 0 59%, #8d989b 59% 100%); }
.progress-ring.ring-pct-60 { background: conic-gradient(from 0deg, var(--tone) 0 60%, #e3ebee 60% 100%); }
.fill-pct-60 { width: 60%; }
.segment-pct-60 { flex-basis: 60%; width: 60%; }
.client-donut.client-pct-60 { background: conic-gradient(from 0deg, #f02d35 0 60%, #8d989b 60% 100%); }
.progress-ring.ring-pct-61 { background: conic-gradient(from 0deg, var(--tone) 0 61%, #e3ebee 61% 100%); }
.fill-pct-61 { width: 61%; }
.segment-pct-61 { flex-basis: 61%; width: 61%; }
.client-donut.client-pct-61 { background: conic-gradient(from 0deg, #f02d35 0 61%, #8d989b 61% 100%); }
.progress-ring.ring-pct-62 { background: conic-gradient(from 0deg, var(--tone) 0 62%, #e3ebee 62% 100%); }
.fill-pct-62 { width: 62%; }
.segment-pct-62 { flex-basis: 62%; width: 62%; }
.client-donut.client-pct-62 { background: conic-gradient(from 0deg, #f02d35 0 62%, #8d989b 62% 100%); }
.progress-ring.ring-pct-63 { background: conic-gradient(from 0deg, var(--tone) 0 63%, #e3ebee 63% 100%); }
.fill-pct-63 { width: 63%; }
.segment-pct-63 { flex-basis: 63%; width: 63%; }
.client-donut.client-pct-63 { background: conic-gradient(from 0deg, #f02d35 0 63%, #8d989b 63% 100%); }
.progress-ring.ring-pct-64 { background: conic-gradient(from 0deg, var(--tone) 0 64%, #e3ebee 64% 100%); }
.fill-pct-64 { width: 64%; }
.segment-pct-64 { flex-basis: 64%; width: 64%; }
.client-donut.client-pct-64 { background: conic-gradient(from 0deg, #f02d35 0 64%, #8d989b 64% 100%); }
.progress-ring.ring-pct-65 { background: conic-gradient(from 0deg, var(--tone) 0 65%, #e3ebee 65% 100%); }
.fill-pct-65 { width: 65%; }
.segment-pct-65 { flex-basis: 65%; width: 65%; }
.client-donut.client-pct-65 { background: conic-gradient(from 0deg, #f02d35 0 65%, #8d989b 65% 100%); }
.progress-ring.ring-pct-66 { background: conic-gradient(from 0deg, var(--tone) 0 66%, #e3ebee 66% 100%); }
.fill-pct-66 { width: 66%; }
.segment-pct-66 { flex-basis: 66%; width: 66%; }
.client-donut.client-pct-66 { background: conic-gradient(from 0deg, #f02d35 0 66%, #8d989b 66% 100%); }
.progress-ring.ring-pct-67 { background: conic-gradient(from 0deg, var(--tone) 0 67%, #e3ebee 67% 100%); }
.fill-pct-67 { width: 67%; }
.segment-pct-67 { flex-basis: 67%; width: 67%; }
.client-donut.client-pct-67 { background: conic-gradient(from 0deg, #f02d35 0 67%, #8d989b 67% 100%); }
.progress-ring.ring-pct-68 { background: conic-gradient(from 0deg, var(--tone) 0 68%, #e3ebee 68% 100%); }
.fill-pct-68 { width: 68%; }
.segment-pct-68 { flex-basis: 68%; width: 68%; }
.client-donut.client-pct-68 { background: conic-gradient(from 0deg, #f02d35 0 68%, #8d989b 68% 100%); }
.progress-ring.ring-pct-69 { background: conic-gradient(from 0deg, var(--tone) 0 69%, #e3ebee 69% 100%); }
.fill-pct-69 { width: 69%; }
.segment-pct-69 { flex-basis: 69%; width: 69%; }
.client-donut.client-pct-69 { background: conic-gradient(from 0deg, #f02d35 0 69%, #8d989b 69% 100%); }
.progress-ring.ring-pct-70 { background: conic-gradient(from 0deg, var(--tone) 0 70%, #e3ebee 70% 100%); }
.fill-pct-70 { width: 70%; }
.segment-pct-70 { flex-basis: 70%; width: 70%; }
.client-donut.client-pct-70 { background: conic-gradient(from 0deg, #f02d35 0 70%, #8d989b 70% 100%); }
.progress-ring.ring-pct-71 { background: conic-gradient(from 0deg, var(--tone) 0 71%, #e3ebee 71% 100%); }
.fill-pct-71 { width: 71%; }
.segment-pct-71 { flex-basis: 71%; width: 71%; }
.client-donut.client-pct-71 { background: conic-gradient(from 0deg, #f02d35 0 71%, #8d989b 71% 100%); }
.progress-ring.ring-pct-72 { background: conic-gradient(from 0deg, var(--tone) 0 72%, #e3ebee 72% 100%); }
.fill-pct-72 { width: 72%; }
.segment-pct-72 { flex-basis: 72%; width: 72%; }
.client-donut.client-pct-72 { background: conic-gradient(from 0deg, #f02d35 0 72%, #8d989b 72% 100%); }
.progress-ring.ring-pct-73 { background: conic-gradient(from 0deg, var(--tone) 0 73%, #e3ebee 73% 100%); }
.fill-pct-73 { width: 73%; }
.segment-pct-73 { flex-basis: 73%; width: 73%; }
.client-donut.client-pct-73 { background: conic-gradient(from 0deg, #f02d35 0 73%, #8d989b 73% 100%); }
.progress-ring.ring-pct-74 { background: conic-gradient(from 0deg, var(--tone) 0 74%, #e3ebee 74% 100%); }
.fill-pct-74 { width: 74%; }
.segment-pct-74 { flex-basis: 74%; width: 74%; }
.client-donut.client-pct-74 { background: conic-gradient(from 0deg, #f02d35 0 74%, #8d989b 74% 100%); }
.progress-ring.ring-pct-75 { background: conic-gradient(from 0deg, var(--tone) 0 75%, #e3ebee 75% 100%); }
.fill-pct-75 { width: 75%; }
.segment-pct-75 { flex-basis: 75%; width: 75%; }
.client-donut.client-pct-75 { background: conic-gradient(from 0deg, #f02d35 0 75%, #8d989b 75% 100%); }
.progress-ring.ring-pct-76 { background: conic-gradient(from 0deg, var(--tone) 0 76%, #e3ebee 76% 100%); }
.fill-pct-76 { width: 76%; }
.segment-pct-76 { flex-basis: 76%; width: 76%; }
.client-donut.client-pct-76 { background: conic-gradient(from 0deg, #f02d35 0 76%, #8d989b 76% 100%); }
.progress-ring.ring-pct-77 { background: conic-gradient(from 0deg, var(--tone) 0 77%, #e3ebee 77% 100%); }
.fill-pct-77 { width: 77%; }
.segment-pct-77 { flex-basis: 77%; width: 77%; }
.client-donut.client-pct-77 { background: conic-gradient(from 0deg, #f02d35 0 77%, #8d989b 77% 100%); }
.progress-ring.ring-pct-78 { background: conic-gradient(from 0deg, var(--tone) 0 78%, #e3ebee 78% 100%); }
.fill-pct-78 { width: 78%; }
.segment-pct-78 { flex-basis: 78%; width: 78%; }
.client-donut.client-pct-78 { background: conic-gradient(from 0deg, #f02d35 0 78%, #8d989b 78% 100%); }
.progress-ring.ring-pct-79 { background: conic-gradient(from 0deg, var(--tone) 0 79%, #e3ebee 79% 100%); }
.fill-pct-79 { width: 79%; }
.segment-pct-79 { flex-basis: 79%; width: 79%; }
.client-donut.client-pct-79 { background: conic-gradient(from 0deg, #f02d35 0 79%, #8d989b 79% 100%); }
.progress-ring.ring-pct-80 { background: conic-gradient(from 0deg, var(--tone) 0 80%, #e3ebee 80% 100%); }
.fill-pct-80 { width: 80%; }
.segment-pct-80 { flex-basis: 80%; width: 80%; }
.client-donut.client-pct-80 { background: conic-gradient(from 0deg, #f02d35 0 80%, #8d989b 80% 100%); }
.progress-ring.ring-pct-81 { background: conic-gradient(from 0deg, var(--tone) 0 81%, #e3ebee 81% 100%); }
.fill-pct-81 { width: 81%; }
.segment-pct-81 { flex-basis: 81%; width: 81%; }
.client-donut.client-pct-81 { background: conic-gradient(from 0deg, #f02d35 0 81%, #8d989b 81% 100%); }
.progress-ring.ring-pct-82 { background: conic-gradient(from 0deg, var(--tone) 0 82%, #e3ebee 82% 100%); }
.fill-pct-82 { width: 82%; }
.segment-pct-82 { flex-basis: 82%; width: 82%; }
.client-donut.client-pct-82 { background: conic-gradient(from 0deg, #f02d35 0 82%, #8d989b 82% 100%); }
.progress-ring.ring-pct-83 { background: conic-gradient(from 0deg, var(--tone) 0 83%, #e3ebee 83% 100%); }
.fill-pct-83 { width: 83%; }
.segment-pct-83 { flex-basis: 83%; width: 83%; }
.client-donut.client-pct-83 { background: conic-gradient(from 0deg, #f02d35 0 83%, #8d989b 83% 100%); }
.progress-ring.ring-pct-84 { background: conic-gradient(from 0deg, var(--tone) 0 84%, #e3ebee 84% 100%); }
.fill-pct-84 { width: 84%; }
.segment-pct-84 { flex-basis: 84%; width: 84%; }
.client-donut.client-pct-84 { background: conic-gradient(from 0deg, #f02d35 0 84%, #8d989b 84% 100%); }
.progress-ring.ring-pct-85 { background: conic-gradient(from 0deg, var(--tone) 0 85%, #e3ebee 85% 100%); }
.fill-pct-85 { width: 85%; }
.segment-pct-85 { flex-basis: 85%; width: 85%; }
.client-donut.client-pct-85 { background: conic-gradient(from 0deg, #f02d35 0 85%, #8d989b 85% 100%); }
.progress-ring.ring-pct-86 { background: conic-gradient(from 0deg, var(--tone) 0 86%, #e3ebee 86% 100%); }
.fill-pct-86 { width: 86%; }
.segment-pct-86 { flex-basis: 86%; width: 86%; }
.client-donut.client-pct-86 { background: conic-gradient(from 0deg, #f02d35 0 86%, #8d989b 86% 100%); }
.progress-ring.ring-pct-87 { background: conic-gradient(from 0deg, var(--tone) 0 87%, #e3ebee 87% 100%); }
.fill-pct-87 { width: 87%; }
.segment-pct-87 { flex-basis: 87%; width: 87%; }
.client-donut.client-pct-87 { background: conic-gradient(from 0deg, #f02d35 0 87%, #8d989b 87% 100%); }
.progress-ring.ring-pct-88 { background: conic-gradient(from 0deg, var(--tone) 0 88%, #e3ebee 88% 100%); }
.fill-pct-88 { width: 88%; }
.segment-pct-88 { flex-basis: 88%; width: 88%; }
.client-donut.client-pct-88 { background: conic-gradient(from 0deg, #f02d35 0 88%, #8d989b 88% 100%); }
.progress-ring.ring-pct-89 { background: conic-gradient(from 0deg, var(--tone) 0 89%, #e3ebee 89% 100%); }
.fill-pct-89 { width: 89%; }
.segment-pct-89 { flex-basis: 89%; width: 89%; }
.client-donut.client-pct-89 { background: conic-gradient(from 0deg, #f02d35 0 89%, #8d989b 89% 100%); }
.progress-ring.ring-pct-90 { background: conic-gradient(from 0deg, var(--tone) 0 90%, #e3ebee 90% 100%); }
.fill-pct-90 { width: 90%; }
.segment-pct-90 { flex-basis: 90%; width: 90%; }
.client-donut.client-pct-90 { background: conic-gradient(from 0deg, #f02d35 0 90%, #8d989b 90% 100%); }
.progress-ring.ring-pct-91 { background: conic-gradient(from 0deg, var(--tone) 0 91%, #e3ebee 91% 100%); }
.fill-pct-91 { width: 91%; }
.segment-pct-91 { flex-basis: 91%; width: 91%; }
.client-donut.client-pct-91 { background: conic-gradient(from 0deg, #f02d35 0 91%, #8d989b 91% 100%); }
.progress-ring.ring-pct-92 { background: conic-gradient(from 0deg, var(--tone) 0 92%, #e3ebee 92% 100%); }
.fill-pct-92 { width: 92%; }
.segment-pct-92 { flex-basis: 92%; width: 92%; }
.client-donut.client-pct-92 { background: conic-gradient(from 0deg, #f02d35 0 92%, #8d989b 92% 100%); }
.progress-ring.ring-pct-93 { background: conic-gradient(from 0deg, var(--tone) 0 93%, #e3ebee 93% 100%); }
.fill-pct-93 { width: 93%; }
.segment-pct-93 { flex-basis: 93%; width: 93%; }
.client-donut.client-pct-93 { background: conic-gradient(from 0deg, #f02d35 0 93%, #8d989b 93% 100%); }
.progress-ring.ring-pct-94 { background: conic-gradient(from 0deg, var(--tone) 0 94%, #e3ebee 94% 100%); }
.fill-pct-94 { width: 94%; }
.segment-pct-94 { flex-basis: 94%; width: 94%; }
.client-donut.client-pct-94 { background: conic-gradient(from 0deg, #f02d35 0 94%, #8d989b 94% 100%); }
.progress-ring.ring-pct-95 { background: conic-gradient(from 0deg, var(--tone) 0 95%, #e3ebee 95% 100%); }
.fill-pct-95 { width: 95%; }
.segment-pct-95 { flex-basis: 95%; width: 95%; }
.client-donut.client-pct-95 { background: conic-gradient(from 0deg, #f02d35 0 95%, #8d989b 95% 100%); }
.progress-ring.ring-pct-96 { background: conic-gradient(from 0deg, var(--tone) 0 96%, #e3ebee 96% 100%); }
.fill-pct-96 { width: 96%; }
.segment-pct-96 { flex-basis: 96%; width: 96%; }
.client-donut.client-pct-96 { background: conic-gradient(from 0deg, #f02d35 0 96%, #8d989b 96% 100%); }
.progress-ring.ring-pct-97 { background: conic-gradient(from 0deg, var(--tone) 0 97%, #e3ebee 97% 100%); }
.fill-pct-97 { width: 97%; }
.segment-pct-97 { flex-basis: 97%; width: 97%; }
.client-donut.client-pct-97 { background: conic-gradient(from 0deg, #f02d35 0 97%, #8d989b 97% 100%); }
.progress-ring.ring-pct-98 { background: conic-gradient(from 0deg, var(--tone) 0 98%, #e3ebee 98% 100%); }
.fill-pct-98 { width: 98%; }
.segment-pct-98 { flex-basis: 98%; width: 98%; }
.client-donut.client-pct-98 { background: conic-gradient(from 0deg, #f02d35 0 98%, #8d989b 98% 100%); }
.progress-ring.ring-pct-99 { background: conic-gradient(from 0deg, var(--tone) 0 99%, #e3ebee 99% 100%); }
.fill-pct-99 { width: 99%; }
.segment-pct-99 { flex-basis: 99%; width: 99%; }
.client-donut.client-pct-99 { background: conic-gradient(from 0deg, #f02d35 0 99%, #8d989b 99% 100%); }
.progress-ring.ring-pct-100 { background: conic-gradient(from 0deg, var(--tone) 0 100%, #e3ebee 100% 100%); }
.fill-pct-100 { width: 100%; }
.segment-pct-100 { flex-basis: 100%; width: 100%; }
.client-donut.client-pct-100 { background: conic-gradient(from 0deg, #f02d35 0 100%, #8d989b 100% 100%); }

/* =========================================================
   UX V4 — KPI MOBILE SEM SOBREPOSIÇÃO
   Reserva uma área exclusiva para textos e outra para o gráfico.
   ========================================================= */
@media (max-width: 600px) {
  .analytics-kpi {
    display: flex;
    min-height: 176px;
    flex-direction: column;
    padding: 16px;
    overflow: hidden;
  }

  .analytics-kpi-head {
    flex: 0 0 auto;
    min-height: 36px;
  }

  .analytics-kpi-head > span:first-child {
    font-size: 13px;
    line-height: 1.25;
  }

  .analytics-kpi > strong,
  .analytics-kpi.billing > strong {
    flex: 0 0 auto;
    margin-top: 10px;
    font-size: 25px;
    line-height: 1.08;
  }

  .analytics-kpi > p {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    min-height: 34px;
    margin: 8px 0 12px;
    color: #dce4e7;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.42;
    overflow-wrap: anywhere;
  }

  .analytics-kpi.primary > p {
    color: #ffffff;
  }

  .analytics-kpi .kpi-inline {
    display: block;
    margin-top: 0;
    color: #a5f47e;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.42;
    text-decoration: none;
  }

  .analytics-kpi-sparkline {
    position: static;
    inset: auto;
    z-index: 1;
    display: block;
    flex: 0 0 42px;
    width: 100%;
    height: 42px;
    margin-top: auto;
    overflow: visible;
  }

  .analytics-kpi-sparkline path {
    stroke: #ff5961;
    stroke-width: 2.4;
    vector-effect: non-scaling-stroke;
  }

  .analytics-kpi-sparkline circle {
    fill: #10191e;
    stroke: #ffffff;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
  }

  .analytics-kpi.primary .analytics-kpi-sparkline path {
    stroke: #ffffff;
  }

  .analytics-kpi.primary .analytics-kpi-sparkline circle {
    fill: #7b1b21;
    stroke: #ffffff;
  }

  .analytics-kpi-progress {
    position: static;
    inset: auto;
    flex: 0 0 9px;
    width: 100%;
    height: 9px;
    margin-top: auto;
  }
}

@media (max-width: 380px) {
  .analytics-kpi {
    min-height: 184px;
  }

  .analytics-kpi > strong,
  .analytics-kpi.billing > strong {
    font-size: 23px;
  }
}


/* V6 — saudação personalizada e Resumo sem atalhos */
.mobile-welcome {
  display: none;
}

.overview-alerts-panel {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .mobile-welcome {
    display: block;
    margin: 2px 0 12px;
    padding: 2px 1px;
  }

  .mobile-welcome h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(18px, 5.6vw, 23px);
    line-height: 1.18;
    letter-spacing: -.025em;
  }

  .mobile-welcome p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
  }

  .session-actions {
    margin-left: auto;
  }

  .overview-alerts-panel {
    grid-column: auto;
  }
}


/* V7 — identidade roxa consistente no cartão de Faturamento */
.goal-card.billing {
  --tone: var(--purple);
  --tone-soft: var(--purple-soft);
  border-top-color: var(--purple);
}

.goal-card.billing .goal-card-icon,
.goal-card.billing .goal-card-state,
.goal-card.billing .progress-ring-content span {
  color: var(--purple);
}

.goal-card.billing .goal-card-state::before,
.goal-card.billing .progress-ring-value {
  background-color: var(--purple);
  stroke: var(--purple);
}


/* V8 — ranking completo com cinco posições visíveis e rolagem interna */
.analytics-ranking-list {
  min-height: 0;
}

.ranking-chart {
  --ranking-row-height: 43px;
  --ranking-visible-rows: 5;
  min-width: 0;
}

.ranking-chart-head {
  margin-bottom: 5px;
  padding-right: 8px;
}

.ranking-chart-viewport {
  position: relative;
  min-width: 0;
  border-block: 1px solid rgba(89, 109, 116, .35);
}

.ranking-chart-scroll {
  max-height: calc(var(--ranking-row-height) * var(--ranking-visible-rows));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-snap-type: y proximity;
  scrollbar-width: thin;
  scrollbar-color: #66777d #162126;
}

.ranking-chart-scroll::-webkit-scrollbar {
  width: 8px;
}

.ranking-chart-scroll::-webkit-scrollbar-track {
  border-radius: 999px;
  background: #162126;
}

.ranking-chart-scroll::-webkit-scrollbar-thumb {
  border: 2px solid #162126;
  border-radius: 999px;
  background: #66777d;
}

.ranking-chart-scroll::-webkit-scrollbar-thumb:hover {
  background: #839399;
}

.ranking-chart-scroll:focus-visible {
  outline: 2px solid #56a8ff;
  outline-offset: 3px;
  border-radius: 7px;
}

.ranking-chart-row {
  min-height: var(--ranking-row-height);
  padding-block: 4px;
  scroll-snap-align: start;
  border-bottom: 1px solid rgba(65, 81, 87, .42);
}

.ranking-chart-row:last-child {
  border-bottom: 0;
}

.ranking-chart-row:hover {
  background: rgba(255, 255, 255, .035);
}

.ranking-chart-position {
  border-color: #65757a;
  color: #eef4f2;
}

.ranking-chart-row.is-top-1 .ranking-chart-position {
  border-color: #f0c229;
  color: #ffe883;
  background: #3b3212;
}

.ranking-chart-row.is-top-2 .ranking-chart-position {
  border-color: #b9c4ca;
  color: #eef3f5;
  background: #303a3f;
}

.ranking-chart-row.is-top-3 .ranking-chart-position {
  border-color: #c58652;
  color: #ffc998;
  background: #3a281c;
}

.ranking-chart-viewport.has-more::after {
  content: "";
  position: absolute;
  z-index: 4;
  right: 8px;
  bottom: 0;
  left: 0;
  height: 18px;
  background: linear-gradient(to bottom, rgba(15, 26, 31, 0), #0f1a1f);
  pointer-events: none;
}

.ranking-chart-axis {
  margin-top: 7px;
  padding-right: 8px;
}

.ranking-chart-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 7px;
}

.ranking-chart-note {
  margin: 0;
}

.ranking-chart-scroll-hint {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin: 0;
  color: #aab8bc;
  font-size: 9px;
  line-height: 1.3;
  text-align: right;
}

.ranking-chart-scroll-hint strong {
  color: #e6edef;
  font-weight: 800;
}

.ranking-chart-scroll-hint span {
  color: #ff6740;
  font-size: 13px;
  font-weight: 900;
  animation: ranking-scroll-cue 1.4s ease-in-out infinite;
}

@keyframes ranking-scroll-cue {
  0%, 100% { transform: translateY(-1px); opacity: .65; }
  50% { transform: translateY(2px); opacity: 1; }
}

@media (max-width: 760px) {
  .ranking-chart {
    --ranking-row-height: 48px;
    min-width: 0;
  }

  .analytics-ranking-list {
    overflow-x: hidden;
    padding-inline: 10px;
  }

  .ranking-chart-head,
  .ranking-chart-row,
  .ranking-chart-axis {
    grid-template-columns: 28px minmax(72px, .8fr) minmax(116px, 1.45fr) 48px;
    gap: 6px;
  }

  .ranking-chart-head {
    font-size: 8px;
  }

  .ranking-chart-name {
    font-size: 11px;
  }

  .ranking-chart-bar-well {
    height: 25px;
  }

  .ranking-chart-value {
    left: 7px;
    font-size: 10px;
  }

  .ranking-chart-badge {
    min-width: 42px;
    padding-inline: 4px;
    font-size: 9px;
  }

  .ranking-chart-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .ranking-chart-scroll-hint {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ranking-chart-scroll-hint span {
    animation: none;
  }
}


/* V9 — gráfico mensal com tipografia legível, contraste e rolagem real */
.analytics-trend {
  min-height: 0;
  padding: 12px 14px 14px;
  overflow: hidden;
}

.executive-trend-toolbar {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 7px;
}

.executive-trend-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
  color: #e7eeee;
  font-size: 12px;
  font-weight: 800;
}

.executive-trend-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.executive-trend-legend i {
  display: inline-block;
  width: 22px;
  flex: 0 0 22px;
}

.executive-trend-scroll-tip {
  margin: 0;
  color: #aebbbc;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.executive-trend-scroll-tip span {
  color: #ff6740;
  font-size: 14px;
  font-weight: 900;
}

.executive-trend-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #63747a #111b20;
  border-radius: 8px;
}

.executive-trend-scroll::-webkit-scrollbar {
  height: 9px;
}

.executive-trend-scroll::-webkit-scrollbar-track {
  border-radius: 999px;
  background: #111b20;
}

.executive-trend-scroll::-webkit-scrollbar-thumb {
  border: 2px solid #111b20;
  border-radius: 999px;
  background: #63747a;
}

.executive-trend-scroll:focus-visible {
  outline: 2px solid #54a7ff;
  outline-offset: 3px;
}

.executive-trend-svg {
  display: block;
  width: 920px;
  min-width: 920px;
  height: 330px;
  overflow: visible;
  text-rendering: geometricPrecision;
  shape-rendering: geometricPrecision;
}

.executive-trend-svg .grid-line {
  stroke: #38484e;
  stroke-width: 1;
  stroke-dasharray: 4 5;
}

.executive-trend-svg .axis-line {
  stroke: #718086;
  stroke-width: 1.25;
}

.executive-trend-svg .current-line {
  fill: none;
  stroke: #f52a35;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.executive-trend-svg .previous-line {
  fill: none;
  stroke: #a1abaa;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.executive-trend-svg .target-line {
  fill: none;
  stroke: #f3f6f5;
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
}

.executive-trend-svg .current-dot {
  fill: #f52a35;
  stroke: #ffd7d9;
  stroke-width: 1.7;
}

.executive-trend-svg .current-dot-latest {
  stroke: #fff;
  stroke-width: 2.5;
}

.executive-trend-svg .previous-dot {
  fill: #a1abaa;
  stroke: #e0e6e4;
  stroke-width: 1.2;
}

.executive-trend-svg text {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.executive-trend-svg .axis-value-label {
  fill: #e3ebea;
  font-size: 14px;
  font-weight: 800;
  paint-order: stroke;
  stroke: #101a1f;
  stroke-width: 3px;
  stroke-linejoin: round;
}

.executive-trend-svg .axis-label {
  fill: #edf3f2;
  font-size: 14px;
  font-weight: 850;
  text-transform: uppercase;
  paint-order: stroke;
  stroke: #101a1f;
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

.executive-trend-svg .trend-label-bg {
  fill: #ffffff;
  stroke: #cbd6d7;
  stroke-width: 1;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .36));
}

.executive-trend-svg .trend-label {
  fill: #102027;
  font-size: 13px;
  font-weight: 900;
}

.executive-trend-svg .partial-area {
  fill: #ffffff;
  opacity: .045;
}

.executive-trend-svg .partial-line {
  stroke: #ff8b91;
  stroke-width: 1.25;
  stroke-dasharray: 4 5;
  opacity: .78;
}

.executive-trend-svg .partial-badge-bg {
  fill: #2b3539;
  stroke: #66767c;
  stroke-width: 1;
}

.executive-trend-svg .partial-badge-text {
  fill: #eef4f3;
  font-size: 11px;
  font-weight: 850;
}

@media (min-width: 1120px) {
  .executive-trend-scroll-tip {
    display: none;
  }
}

@media (max-width: 760px) {
  .analytics-trend {
    padding: 11px 10px 12px;
    overflow: hidden;
  }

  .executive-trend-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .executive-trend-legend {
    gap: 13px;
    font-size: 12px;
  }

  .executive-trend-scroll-tip {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: normal;
  }

  .executive-trend-svg {
    width: 920px;
    min-width: 920px;
    height: 330px;
  }

  .executive-trend-scroll {
    padding-bottom: 2px;
  }
}

@media (max-width: 420px) {
  .executive-trend-svg {
    width: 860px;
    min-width: 860px;
    height: 308px;
  }

  .executive-trend-svg .axis-value-label,
  .executive-trend-svg .axis-label {
    font-size: 15px;
  }

  .executive-trend-svg .trend-label {
    font-size: 14px;
  }
}


/* V10 — gráfico nítido: textos HTML e SVG somente para linhas/pontos */
.analytics-trend {
  min-height: 0;
  padding: 14px 16px 16px;
  overflow: hidden;
}

.executive-trend-toolbar {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}

.executive-trend-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  color: #edf3f2;
  font-size: 13px;
  font-weight: 850;
}

.executive-trend-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.executive-trend-legend i {
  display: inline-block;
  width: 24px;
  height: 3px;
  flex: 0 0 24px;
  border-radius: 999px;
}

.executive-trend-latest {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 2px 8px;
  padding: 8px 11px;
  border: 1px solid #47575c;
  border-radius: 10px;
  background: #172329;
  box-shadow: 0 5px 14px rgba(0,0,0,.18);
}

.executive-trend-latest span {
  grid-column: 1 / -1;
  color: #9fb0b4;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.executive-trend-latest strong {
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.executive-trend-latest em {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: #ffd9d9;
  background: #532429;
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
}

.executive-trend-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #687a80 #111b20;
  border-radius: 9px;
}

.executive-trend-scroll::-webkit-scrollbar {
  height: 10px;
}

.executive-trend-scroll::-webkit-scrollbar-track {
  border-radius: 999px;
  background: #111b20;
}

.executive-trend-scroll::-webkit-scrollbar-thumb {
  border: 2px solid #111b20;
  border-radius: 999px;
  background: #687a80;
}

.executive-trend-scroll:focus-visible {
  outline: 2px solid #55aaff;
  outline-offset: 3px;
}

.executive-chart-shell {
  width: 900px;
  min-width: 900px;
  display: grid;
  grid-template-columns: 82px 800px;
  gap: 10px;
  align-items: start;
}

.executive-y-axis {
  height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: 1px 3px;
  color: #f1f5f4;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.executive-y-axis span {
  display: block;
  min-height: 16px;
  text-shadow: 0 1px 1px rgba(0,0,0,.6);
}

.executive-chart-main {
  width: 800px;
  min-width: 800px;
}

.executive-plot-stage {
  position: relative;
  width: 800px;
  height: 230px;
  overflow: hidden;
  border-radius: 6px;
}

.executive-trend-svg {
  display: block;
  width: 800px !important;
  min-width: 800px !important;
  height: 230px !important;
  overflow: hidden;
  shape-rendering: geometricPrecision;
}

.executive-trend-svg text {
  display: none !important;
}

.executive-trend-svg .grid-line {
  stroke: #3b4c52;
  stroke-width: 1;
  stroke-dasharray: 4 5;
}

.executive-trend-svg .axis-line {
  stroke: #829096;
  stroke-width: 1.35;
}

.executive-trend-svg .current-line {
  fill: none;
  stroke: #ff303c;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.5;
}

.executive-trend-svg .previous-line {
  fill: none;
  stroke: #aab2b1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.7;
}

.executive-trend-svg .target-line {
  fill: none;
  stroke: #f0f4f3;
  stroke-width: 1.4;
  stroke-dasharray: 5 5;
}

.executive-trend-svg .current-dot {
  fill: #ff303c;
  stroke: #ffe1e3;
  stroke-width: 1.5;
}

.executive-trend-svg .current-dot-latest {
  stroke: #fff;
  stroke-width: 2.5;
}

.executive-trend-svg .previous-dot {
  fill: #aab2b1;
  stroke: #edf2f1;
  stroke-width: 1;
}

.executive-trend-svg .partial-area {
  fill: #ffffff;
  opacity: .055;
}

.executive-trend-svg .partial-line {
  stroke: #ff8d94;
  stroke-width: 1.2;
  stroke-dasharray: 4 5;
  opacity: .85;
}

.executive-x-axis {
  width: 800px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  padding-top: 9px;
  color: #f1f5f4;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-transform: lowercase;
}

.executive-x-axis span {
  min-width: 0;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0,0,0,.6);
}

.executive-trend-scroll-tip {
  display: none;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  color: #bac6c8;
  font-size: 10px;
  font-weight: 750;
}

.executive-trend-scroll-tip span {
  color: #ff6740;
  font-size: 15px;
  font-weight: 900;
}

@media (max-width: 1120px) {
  .executive-trend-scroll-tip {
    display: flex;
  }
}

@media (max-width: 760px) {
  .analytics-trend {
    padding: 12px 10px 14px;
  }

  .executive-trend-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .executive-trend-legend {
    gap: 14px;
    font-size: 12px;
  }

  .executive-trend-latest {
    width: 100%;
    grid-template-columns: 1fr auto;
  }

  .executive-chart-shell {
    width: 884px;
    min-width: 884px;
    grid-template-columns: 74px 800px;
  }

  .executive-y-axis {
    font-size: 12px;
  }

  .executive-x-axis {
    font-size: 12px;
  }
}

@media (max-width: 420px) {
  .executive-trend-legend {
    font-size: 11px;
  }

  .executive-trend-latest strong {
    font-size: 12px;
  }

  .executive-y-axis,
  .executive-x-axis {
    font-size: 13px;
  }
}


/* V11 — gráfico no estilo do exemplo, com área parcial em vermelho e visual nítido */
.analytics-trend {
  padding: 18px 18px 16px;
  border: 1px solid #263239;
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(30, 90, 140, .12), transparent 35%),
    linear-gradient(180deg, #071118 0%, #08131a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 10px 28px rgba(0,0,0,.18);
}

.executive-trend-toolbar {
  min-height: 40px;
  gap: 16px;
  margin-bottom: 10px;
}

.executive-trend-legend {
  gap: 20px;
  color: #e9efef;
  font-size: 13px;
  font-weight: 800;
}

.executive-trend-legend i {
  width: 26px;
  height: 4px;
}

.executive-trend-legend .legend-current { background: #ff313d; }
.executive-trend-legend .legend-previous { background: #a4acac; }
.executive-trend-legend .legend-target {
  height: 0;
  border-top: 2px dotted #eef2f1;
  background: transparent;
}

.executive-trend-status {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #e8eeee;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.executive-trend-status i {
  width: 21px;
  height: 21px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #77868c;
  border-radius: 999px;
  color: #ced8d9;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.executive-chart-shell {
  width: 920px;
  min-width: 920px;
  grid-template-columns: 94px 800px;
  gap: 8px;
}

.executive-y-axis {
  height: 240px;
  padding-block: 5px 6px;
  color: #f6f7f7;
  font-size: 13px;
  font-weight: 900;
  text-align: right;
}

.executive-y-axis span,
.executive-x-axis span {
  text-shadow: none;
  filter: none;
}

.executive-chart-main,
.executive-plot-stage,
.executive-x-axis {
  width: 800px;
}

.executive-plot-stage {
  height: 240px;
}

.executive-trend-svg {
  width: 800px !important;
  min-width: 800px !important;
  height: 240px !important;
}

.executive-trend-svg .grid-line {
  stroke: #304249;
  stroke-width: 1;
  stroke-dasharray: 4 5;
}

.executive-trend-svg .axis-line {
  stroke: #5f7178;
  stroke-width: 1.4;
}

.executive-trend-svg .current-line {
  stroke: #ff313d;
  stroke-width: 4;
}

.executive-trend-svg .previous-line {
  stroke: #8d9598;
  stroke-width: 3.1;
}

.executive-trend-svg .target-line {
  stroke: #e8ecec;
  stroke-width: 1.6;
  stroke-dasharray: 3 4;
  opacity: .95;
}

.executive-trend-svg .current-dot {
  fill: #ff313d;
  stroke: #ffc8cc;
  stroke-width: 1.6;
}

.executive-trend-svg .current-dot-latest {
  fill: #ffffff;
  stroke: #ff313d;
  stroke-width: 4;
}

.executive-trend-svg .previous-dot {
  fill: #9ca4a6;
  stroke: #ccd3d4;
  stroke-width: 1;
}

.executive-trend-svg .partial-area-base {
  fill: rgba(176, 20, 29, .10);
}

.executive-trend-svg .partial-area-hatch {
  fill: url(#trend-partial-hatch);
  opacity: .55;
}

.executive-trend-svg .partial-hatch-line {
  stroke: rgba(255, 49, 61, .28);
  stroke-width: 3;
}

.executive-trend-svg .partial-line {
  stroke: rgba(228, 235, 236, .6);
  stroke-width: 1.1;
  stroke-dasharray: 2 5;
}

.executive-trend-svg .trend-badge-bg {
  fill: #d9272d;
  stroke: #ff797f;
  stroke-width: 1.4;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.26));
}

.executive-trend-svg .trend-badge-text {
  display: inline !important;
  fill: #ffffff;
  stroke: none;
  filter: none;
  font-family: Arial, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-rendering: geometricPrecision;
}

.executive-x-axis {
  padding-top: 10px;
  color: #f4f6f6;
  font-size: 13px;
  font-weight: 850;
  text-transform: lowercase;
}

.executive-x-axis span.is-current {
  color: #ffffff;
  font-weight: 950;
}

.executive-trend-scroll-tip {
  margin-top: 10px;
  color: #b8c5c7;
  font-size: 10px;
}

@media (max-width: 760px) {
  .analytics-trend {
    padding: 14px 12px 14px;
    border-radius: 16px;
  }

  .executive-trend-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .executive-trend-legend {
    gap: 14px;
    font-size: 12px;
  }

  .executive-chart-shell {
    width: 910px;
    min-width: 910px;
    grid-template-columns: 102px 800px;
  }

  .executive-y-axis,
  .executive-x-axis {
    font-size: 13px;
  }
}


/* V12 — comparativos diários (cobertura, recompra e faturamento) */
.analytics-daily-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.analytics-daily-panel {
  min-width: 0;
  overflow: hidden;
}

.analytics-daily-card {
  min-height: 0;
  padding: 0 14px 14px;
}

.daily-trend-shell {
  display: grid;
  gap: 10px;
}

.daily-trend-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.daily-trend-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  color: #dfe7e7;
  font-size: 11px;
  font-weight: 800;
}

.daily-trend-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.daily-trend-legend i {
  display: inline-block;
  width: 20px;
  height: 4px;
  border-radius: 999px;
}

.daily-trend-legend .legend-current {
  background: #ff313d;
}

.daily-trend-legend .legend-previous {
  background: #9ea8aa;
}

.daily-trend-status {
  color: #c2cfd1;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.daily-trend-status strong {
  color: #ffffff;
}

.daily-trend-summary {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(69, 87, 94, .85);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(11, 23, 29, .82), rgba(9, 19, 25, .95));
}

.daily-trend-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.daily-trend-pills span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.daily-trend-pills .current {
  color: #fff4f5;
  background: #d5282f;
}

.daily-trend-pills .previous {
  color: #f0f4f5;
  background: #48565b;
}

.daily-trend-summary p {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.daily-trend-summary.up p { color: #77ef7f; }
.daily-trend-summary.down p { color: #ff9d9d; }
.daily-trend-summary.neutral p { color: #d5dfe1; }

.daily-trend-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #5f7075 #101920;
  border-radius: 10px;
}

.daily-trend-scroll::-webkit-scrollbar {
  height: 9px;
}

.daily-trend-scroll::-webkit-scrollbar-track {
  border-radius: 999px;
  background: #101920;
}

.daily-trend-scroll::-webkit-scrollbar-thumb {
  border: 2px solid #101920;
  border-radius: 999px;
  background: #5f7075;
}

.daily-trend-scroll:focus-visible {
  outline: 2px solid #58a8ff;
  outline-offset: 3px;
}

.daily-chart-shell {
  width: 650px;
  min-width: 650px;
  display: grid;
  grid-template-columns: 72px 560px;
  gap: 8px;
}

.daily-y-axis {
  height: 178px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: 3px 4px;
  color: #f3f7f7;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.daily-chart-main {
  width: 560px;
  min-width: 560px;
}

.daily-plot-stage {
  width: 560px;
  height: 178px;
  overflow: hidden;
  border-radius: 7px;
}

.daily-trend-svg {
  display: block;
  width: 560px !important;
  min-width: 560px !important;
  height: 178px !important;
  overflow: hidden;
  shape-rendering: geometricPrecision;
}

.daily-trend-svg .grid-line {
  stroke: #2f4148;
  stroke-width: 1;
  stroke-dasharray: 4 5;
}

.daily-trend-svg .axis-line {
  stroke: #55676d;
  stroke-width: 1.3;
}

.daily-trend-svg .today-line {
  stroke: rgba(241, 245, 245, .36);
  stroke-width: 1.1;
  stroke-dasharray: 3 5;
}

.daily-trend-svg .current-line {
  fill: none;
  stroke: #ff313d;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.3;
}

.daily-trend-svg .previous-line {
  fill: none;
  stroke: #9ea8aa;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.7;
}

.daily-trend-svg .current-dot {
  fill: #ff313d;
  stroke: #ffd6d9;
  stroke-width: 1.3;
}

.daily-trend-svg .current-dot-latest {
  fill: #ffffff;
  stroke: #ff313d;
  stroke-width: 3.4;
}

.daily-trend-svg .previous-dot {
  fill: #9ea8aa;
  stroke: #dde3e4;
  stroke-width: 1;
}

.daily-trend-svg .previous-dot-focus {
  fill: #f5f8f8;
  stroke: #8d9698;
  stroke-width: 2.2;
}

.daily-trend-svg .daily-badge-bg {
  fill: #d9272d;
  stroke: #ff767b;
  stroke-width: 1.2;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.22));
}

.daily-trend-svg .daily-badge-text {
  fill: #ffffff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 900;
}

.daily-x-axis {
  width: 560px;
  display: grid;
  grid-template-columns: repeat(31, 1fr);
  padding-top: 8px;
  color: #eef3f4;
  font-size: 10px;
  font-weight: 850;
  text-align: center;
}

.daily-x-axis span {
  min-height: 12px;
}

.daily-x-axis span.is-current {
  color: #ffffff;
  font-size: 11px;
  font-weight: 950;
}

@media (max-width: 1250px) {
  .analytics-daily-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-daily-panel:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .analytics-daily-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 12px;
  }

  .analytics-daily-card {
    padding: 0 10px 12px;
  }

  .daily-trend-topline {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .daily-trend-legend {
    gap: 10px;
    font-size: 10px;
  }

  .daily-trend-status {
    font-size: 10px;
  }

  .daily-chart-shell {
    width: 638px;
    min-width: 638px;
    grid-template-columns: 70px 560px;
  }

  .daily-y-axis {
    font-size: 11px;
  }

  .daily-x-axis {
    font-size: 10px;
  }
}


/* V13 — correções do comparativo diário */
.daily-plot-stage {
  position: relative;
}

.daily-trend-svg text {
  display: none !important;
}

.daily-badge-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.daily-overlay-badge {
  min-width: 82px;
  height: 30px;
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 8px;
  box-shadow: 0 8px 14px rgba(0, 0, 0, .22);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: .01em;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.daily-overlay-badge.current {
  color: #ffffff;
  border: 1px solid #ff7379;
  background: linear-gradient(180deg, #e63237 0%, #ca1f27 100%);
}

.daily-overlay-badge.previous {
  color: #f4f7f8;
  border: 1px solid #78878c;
  background: linear-gradient(180deg, #5c696f 0%, #4c575c 100%);
}

.daily-trend-svg .today-line {
  stroke: rgba(255, 255, 255, .32);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.daily-trend-svg .previous-line {
  stroke: #9aa5a8;
  stroke-width: 2.8;
}

.daily-trend-svg .current-line {
  stroke: #ff313d;
  stroke-width: 3.4;
}

.daily-trend-svg .current-dot-latest {
  fill: #ffffff;
  stroke: #ff313d;
  stroke-width: 3.2;
}

.daily-trend-summary {
  gap: 7px;
}

.daily-trend-summary p {
  font-size: 11px;
}

@media (max-width: 760px) {
  .daily-overlay-badge {
    font-size: 10px;
  }
}


/* V14 — melhoria de nitidez e contraste da navegação lateral */
.app-nav {
  background: linear-gradient(180deg, #061a27 0%, #072437 56%, #062132 100%);
}

.sidebar-brand-copy strong,
.sidebar-brand-copy small,
.nav-button,
.nav-button span,
.sidebar-footer span,
.sidebar-footer strong,
#sidebar-toggle {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.sidebar-brand-copy strong {
  color: #f4f8f9;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -.01em;
}

.sidebar-brand-copy small {
  color: rgba(236, 243, 245, .72);
  font-size: 10px;
  font-weight: 700;
}

.nav-button {
  min-height: 52px;
  gap: 14px;
  padding: 0 15px;
  color: rgba(238, 245, 247, .9);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: -.01em;
  line-height: 1.15;
  text-shadow: none;
}

.nav-button span {
  color: inherit;
  font-weight: 850;
}

.nav-button svg {
  color: rgba(238, 245, 247, .9);
  opacity: 1;
}

.nav-button:hover {
  color: #ffffff;
  background: rgba(255,255,255,.10);
}

.nav-button:hover svg {
  color: #ffffff;
}

.nav-button.is-active {
  color: #ffffff;
  background: linear-gradient(90deg, rgba(255,91,26,.22), rgba(255,255,255,.10) 72%);
  border: 1px solid rgba(255,91,26,.48);
  box-shadow:
    inset 3px 0 0 var(--orange),
    0 6px 18px rgba(0,0,0,.12);
}

.nav-button.is-active svg,
.nav-button.is-active span {
  color: #ffffff;
}

.nav-button.is-active::after {
  right: 14px;
  width: 6px;
  height: 6px;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(255,91,26,.18);
}

.sidebar-footer span {
  color: rgba(236, 243, 245, .62);
  font-size: 10px;
  font-weight: 800;
}

.sidebar-footer strong {
  color: #f2f7f8;
  font-size: 12px;
  font-weight: 850;
}

#sidebar-toggle {
  color: rgba(240, 246, 248, .84);
  background: rgba(255,255,255,.06);
  font-size: 11px;
  font-weight: 850;
}

#sidebar-toggle:hover {
  color: #fff;
  background: rgba(255,255,255,.11);
}

@media (max-width: 760px) {
  .nav-button {
    min-height: 50px;
    font-size: 12px;
  }
}


/* V15 — correção definitiva dos textos nas badges dos quadros diários */
.daily-badge-overlay {
  z-index: 5;
}

.daily-overlay-badge {
  z-index: 6;
  isolation: isolate;
  overflow: visible;
  min-width: 92px;
  padding: 0 12px;
  text-align: center;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.daily-overlay-badge__text {
  position: relative;
  z-index: 2;
  display: block;
  color: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: .01em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .22);
}

.daily-overlay-badge.current {
  color: #ffffff !important;
  border-color: #ff8186;
  background: linear-gradient(180deg, #ea363b 0%, #cb1f27 100%);
}

.daily-overlay-badge.previous {
  color: #f7fbfc !important;
  border-color: #859399;
  background: linear-gradient(180deg, #647176 0%, #4f5b60 100%);
}

.daily-overlay-badge.previous .daily-overlay-badge__text,
.daily-overlay-badge.current .daily-overlay-badge__text {
  color: inherit !important;
}

@media (max-width: 760px) {
  .daily-overlay-badge {
    min-width: 86px;
    padding: 0 10px;
  }

  .daily-overlay-badge__text {
    font-size: 10px;
  }
}