:root {
  --canvas: #f5f5f7;
  --surface: rgba(255, 255, 255, .88);
  --surface-solid: #fff;
  --ink: #1d1d1f;
  --muted: #626269;
  --hairline: rgba(0, 0, 0, .08);
  --blue: #0071e3;
  --blue-soft: #e8f2ff;
  --green: #16884a;
  --amber: #a35b00;
  --red: #c9342f;
  --shadow: 0 14px 36px rgba(0, 0, 0, .07);
  --radius: 22px;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { cursor: pointer; }
svg { fill: currentColor; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 248px; padding: 30px 18px 22px; display: flex; flex-direction: column; border-right: 1px solid var(--hairline); background: rgba(249, 249, 251, .82); backdrop-filter: blur(24px) saturate(160%); z-index: 4; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 34px; }
.brand-mark, .login-mark { display: grid; place-items: center; color: white; background: linear-gradient(145deg, #1d1d1f, #54545a); box-shadow: inset 0 1px rgba(255,255,255,.35); font-weight: 700; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; }
.brand strong, .brand span { display: block; }
.brand strong { font-size: 17px; letter-spacing: -.02em; }
.brand span { color: var(--muted); font-size: 12px; margin-top: 2px; }
nav { min-height: 0; display: grid; gap: 5px; overflow-y: auto; scrollbar-width: thin; }
.nav-item { appearance: none; border: 0; background: transparent; color: #515154; height: 44px; display: flex; align-items: center; gap: 13px; padding: 0 13px; border-radius: 12px; text-align: left; transition: background .16s ease, color .16s ease; }
.nav-item svg { width: 19px; height: 19px; }
.nav-item:hover { background: rgba(0,0,0,.04); color: var(--ink); }
.nav-item.is-active { background: var(--surface-solid); color: var(--blue); box-shadow: 0 5px 16px rgba(0,0,0,.06); font-weight: 600; }
@media (max-width: 760px) {
  #navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  #navigation .nav-item { min-width: 0; width: 100%; }
}
.detail-expand, .secondary-records { margin-block: 18px; border-top: 1px solid var(--hairline); }
.detail-expand > summary, .secondary-records > summary { min-height: 44px; padding-block: 14px; color: var(--ink); font-weight: 600; cursor: pointer; }
.secondary-records > summary { font-size: 17px; }
.detail-expand > .detail-section { margin-top: 12px; }
.sidebar-foot { margin-top: auto; padding: 14px 11px 0; border-top: 1px solid var(--hairline); color: var(--muted); font-size: 12px; display: flex; gap: 8px; align-items: center; }
.workspace-picker { padding: 0 10px 18px; }
.workspace-picker label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 12px; }
.workspace-picker select { width: 100%; min-width: 0; padding: 10px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface-solid); color: var(--ink); }
.workspace-picker p { font-size: 12px; line-height: 1.5; margin: 5px 0; }
.text-button { border: 0; background: none; color: var(--blue); padding: 5px 0; font-size: 12px; }
.workspace-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 16px; margin-bottom: 16px; }
.workspace-filters label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.workspace-filters input:not([type=checkbox]), .workspace-filters select, .workspace-table-heading select { min-height: 40px; max-width: 200px; padding: 8px 10px; border: 1px solid var(--hairline); border-radius: 9px; background: var(--surface-solid); color: var(--ink); }
.workspace-filters .workspace-check { display: flex; align-items: center; min-height: 40px; gap: 7px; }
.workspace-summary { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 12px; margin: 20px 0; }
.workspace-metric { display: grid; gap: 12px; text-align: left; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface-solid); color: var(--ink); padding: 20px; font-variant-numeric: tabular-nums; }
.workspace-metric span { font-size: 13px; color: var(--muted); }
.workspace-metric strong { font-size: 28px; color: var(--blue); }
.workspace-metric:hover { border-color: var(--blue); }
.workspace-table-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.workspace-table-heading h3 { margin: 0; font-size: 16px; }
.workspace-table-heading > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.workspace-table-heading label { display: flex; align-items: center; gap: 8px; font-size: 12px; }
#workspace-body table { min-width: 700px; width: 100%; font-variant-numeric: tabular-nums; }
#workspace-body td { max-width: 360px; overflow-wrap: anywhere; }
#workspace-body td small { display: block; color: var(--muted); font-size: 12px; margin-top: 5px; }
.workspace-empty { padding: 28px; color: var(--muted); line-height: 1.7; margin: 0; }
#workspace-key { width: 100%; }
.workspace-picker :focus-visible, #view-app-workspace :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
#view-app-workspace button:disabled { opacity: .5; cursor: default; }
@media(max-width:760px) { .workspace-picker { max-width: 100%; padding: 0 0 14px; } .workspace-table-heading { align-items: start; } .workspace-filters > label { flex: 1 1 140px; } .workspace-filters input:not([type=checkbox]),.workspace-filters select { max-width: 100%; width: 100%; } }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #8e8e93; }
main { grid-column: 2; min-width: 0; padding: 28px 42px 54px; max-width: 1660px; width: 100%; margin: 0 auto; }
.topbar { min-height: 68px; display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 32px; }
.eyebrow { margin: 0 0 7px; color: #8e8e93; font-size: 10px; line-height: 1; font-weight: 700; letter-spacing: .14em; }
h1, h2, h3, p { margin-top: 0; }
.topbar h1 { margin-bottom: 0; font-size: 32px; line-height: 1.08; letter-spacing: -.04em; }
.top-actions { display: flex; align-items: center; gap: 9px; }
.role-pill { padding: 7px 11px; border-radius: 999px; background: var(--surface-solid); border: 1px solid var(--hairline); color: var(--muted); font-size: 12px; }
.consumer-account-status { display: inline-block; padding: 2px 7px; border-radius: 6px; background: var(--surface); border: 1px solid var(--hairline); color: var(--muted); font-size: 11px; font-weight: 500; vertical-align: middle; }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--hairline); background: var(--surface-solid); color: #4d4d52; border-radius: 50%; display: grid; place-items: center; }
.icon-button:hover { color: var(--blue); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.icon-button svg { width: 17px; }
.view { display: none; animation: reveal .26s ease both; }
.view.is-visible { display: block; }
@keyframes reveal { from { opacity: 0; transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.section-heading h2 { margin-bottom: 4px; font-size: 21px; letter-spacing: -.025em; }
.section-heading p, .panel-title p { margin: 0; color: var(--muted); font-size: 13px; }
.heading-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.primary-button, .secondary-button { border-radius: 11px; padding: 10px 16px; border: 0; font-weight: 600; font-size: 13px; }
.primary-button { background: var(--blue); color: white; }
.primary-button:hover { background: #0077ed; }
.secondary-button { background: var(--surface-solid); color: var(--blue); border: 1px solid var(--hairline); }
.detail-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.detail-action-status { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.metric-card { position: relative; min-height: 150px; padding: 21px 20px 17px; background: var(--surface-solid); border: 1px solid var(--hairline); border-radius: 19px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.035); }
.metric-card::before { content: ""; position: absolute; inset: 20px 20px auto auto; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.metric-card[data-status="unavailable"]::before { background: #c7c7cc; }
.metric-card[data-status="observing"]::before { background: #ff9f0a; }
.metric-label { color: var(--muted); font-size: 12px; font-weight: 600; }
.metric-value { margin: 14px 0 9px; font-size: 30px; line-height: 1; letter-spacing: -.045em; font-weight: 680; }
.metric-unit { margin-left: 4px; color: var(--muted); font-size: 12px; font-weight: 500; }
.metric-note { color: #8e8e93; font-size: 11px; line-height: 1.45; }
.chart-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(320px, .7fr); gap: 14px; margin-top: 14px; }
.panel { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.035); }
.chart-panel { min-height: 340px; padding: 22px 22px 16px; }
.panel-title { display: flex; justify-content: space-between; align-items: flex-start; }
.panel-title h3 { margin-bottom: 4px; font-size: 16px; }
.legend { display: flex; gap: 14px; color: var(--muted); font-size: 11px; }
.legend i { width: 7px; height: 7px; display: inline-block; border-radius: 2px; margin-right: 5px; }
.legend-blue { background: var(--blue); }.legend-gray { background: #c7c7cc; }
.legend-red { background: #ff3b30; }.legend-green { background: #34c759; }
.chart { width: 100%; height: 250px; margin-top: 18px; overflow: visible; }
.donut-layout { min-height: 250px; display: grid; grid-template-columns: 170px 1fr; align-items: center; gap: 14px; }
.donut { width: 165px; height: 165px; }
.region-legend { display: grid; gap: 10px; color: var(--muted); font-size: 12px; }
.region-row { display: grid; grid-template-columns: 9px 1fr auto; gap: 8px; align-items: center; }
.region-color { width: 8px; height: 8px; border-radius: 50%; }
.region-color.color-0 { background: #0071e3; }.region-color.color-1 { background: #34c759; }.region-color.color-2 { background: #ff9f0a; }.region-color.color-3 { background: #af52de; }.region-color.color-4 { background: #5ac8fa; }.region-color.color-5 { background: #ff3b30; }.region-color.color-6 { background: #8e8e93; }
.filter-bar { display: flex; gap: 10px; margin-bottom: 14px; padding: 11px; border-radius: 16px; background: rgba(255,255,255,.64); border: 1px solid var(--hairline); }
.list-filters { flex-wrap: wrap; align-items: stretch; }
.list-filters .search-field { flex: 1 1 230px; min-width: 210px; }
.list-filters .compact-search { flex-basis: 190px; }
.advanced-filter-panel { flex: 1 1 100%; border-top: 1px solid var(--hairline); padding-top: 9px; }
.advanced-filter-panel summary { width: fit-content; min-height: 36px; display: flex; align-items: center; color: var(--blue); font-size: 13px; font-weight: 600; cursor: pointer; }
.advanced-filter-panel summary::marker { color: var(--muted); }
.advanced-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 9px; padding-top: 8px; }
.filter-input { min-height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid var(--hairline); border-radius: 10px; background: white; color: var(--muted); font-size: 11px; }
.filter-input input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 16px; }
.filter-input em { font-style: normal; white-space: nowrap; }
.filter-availability { margin: 8px 1px 0; color: var(--muted); font-size: 11px; }
.search-field { min-width: 280px; flex: 1; display: flex; align-items: center; gap: 8px; background: white; border: 1px solid var(--hairline); border-radius: 10px; padding: 0 11px; }
.search-field svg { width: 16px; color: #8e8e93; }
.search-field input { width: 100%; border: 0; outline: 0; padding: 10px 0; background: transparent; }
select { min-width: 150px; border: 1px solid var(--hairline); border-radius: 10px; background: white; color: var(--ink); padding: 0 32px 0 12px; }
.date-field { min-height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid var(--hairline); border-radius: 10px; background: white; color: var(--muted); font-size: 11px; }
.date-field input { min-width: 124px; border: 0; outline: 0; background: transparent; color: var(--ink); }
.clear-filter { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); }
.clear-filter svg { width: 14px; }

@media (max-width: 760px) {
  .advanced-filter-panel summary { min-height: 44px; }
  .advanced-filter-grid { grid-template-columns: minmax(0, 1fr); }
  .advanced-filter-grid .date-field, .advanced-filter-grid .filter-input, .advanced-filter-grid .search-field { min-height: 44px; justify-content: space-between; }
}
.table-panel { overflow: hidden; }
.table-meta { display: flex; justify-content: space-between; padding: 15px 18px 12px; color: var(--muted); font-size: 11px; border-bottom: 1px solid var(--hairline); }
.table-meta-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.page-size-control { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.page-size-control select { min-width: 66px; min-height: 30px; padding: 0 24px 0 9px; border-radius: 8px; font-size: 11px; }
.table-scroll { overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 920px; }
.user-table { min-width: 1480px; }
.local-activity-table { min-width: 520px; }
.local-activity-table caption { text-align: left; padding: 12px 0; color: var(--muted); }
.local-activity-table progress { width: 110px; max-width: 100%; height: 8px; accent-color: var(--blue, #007aff); vertical-align: middle; }
th, td { text-align: left; padding: 14px 17px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
th { color: #86868b; font-size: 11px; font-weight: 600; background: rgba(250,250,252,.84); white-space: nowrap; }
td { font-size: 12px; line-height: 1.45; }
tbody tr:hover { background: rgba(0,113,227,.025); }
tbody tr[data-detail] { cursor: pointer; }
tbody tr[data-detail]:hover { background: rgba(0,113,227,.055); }
.cell-title { display: block; color: var(--ink); font-weight: 600; }
.cell-sub { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.tag { display: inline-flex; padding: 4px 7px; border-radius: 7px; color: #4c4c50; background: #ededf0; font-size: 10px; font-weight: 650; }
.tag.good { color: var(--green); background: #e9f7ef; }.tag.warn { color: var(--amber); background: #fff4df; }.tag.bad { color: var(--red); background: #fff0ef; }
.consumer-quota-cell { min-width: 88px; }
.consumer-user-cell .cell-title { white-space: nowrap; }
.consumer-membership-tag { font-size: 12px; }
.consumer-quota-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.consumer-quota-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 30px; padding: 4px 10px; border-radius: 7px; background: #ffdb54; color: #332600; font-size: 15px; font-weight: 750; }
.consumer-quota-cell .cell-secondary { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; }
.empty-row td { padding: 56px 20px; text-align: center; color: var(--muted); }
.pagination { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 13px 17px; }
.pagination button { border: 1px solid var(--hairline); background: white; border-radius: 8px; padding: 6px 10px; }
.pagination-status { min-width: 130px; color: var(--muted); font-size: 11px; text-align: center; }
.source-banner { margin-bottom: 13px; padding: 11px 14px; border-radius: 12px; background: #f0f0f2; color: var(--muted); font-size: 12px; }
.source-banner.ready { background: #e9f7ef; color: var(--green); }
#view-app-media-discovery .source-banner { color: #64646a; }
#media-policy-save { margin-top: 16px; }
#media-policy-status { display: inline-block; margin: 12px 0 0 12px; font-size: 13px; }
.source-banner .tag { margin-right: 9px; }
.cost-heading { margin: 26px 0 10px; }
.cost-heading h3, .cost-import h3 { margin: 0 0 4px; font-size: 16px; }
.cost-heading p, .cost-import p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.cost-total-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.cost-empty-total { max-width: 280px; }
.cost-import { display: grid; grid-template-columns: minmax(250px, 1fr) auto; gap: 18px 26px; align-items: center; margin-bottom: 14px; padding: 18px; }
.cost-import-actions { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.file-picker { position: relative; display: inline-flex; align-items: center; min-width: 180px; max-width: 260px; padding: 9px 12px; overflow: hidden; border: 1px solid var(--hairline); border-radius: 11px; background: white; color: var(--ink); font-size: 12px; cursor: pointer; }
.file-picker span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cost-import-status { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--hairline); }
.cost-import-history { margin-top: 14px; }
.support-lookup > input { flex: 1; min-width: 190px; border: 1px solid var(--hairline); border-radius: 10px; background: white; padding: 10px 12px; outline: none; }
.support-result { min-height: 210px; padding: 22px; color: var(--muted); }
.issue-create { align-items: stretch; flex-wrap: wrap; }
.issue-create input { min-width: 220px; flex: 1; border: 1px solid var(--hairline); border-radius: 10px; background: white; color: var(--ink); padding: 10px 12px; outline: none; }
.issue-create input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,113,227,.1); }
.account-create { align-items: stretch; flex-wrap: wrap; }
.account-create input { min-width: 220px; flex: 1; border: 1px solid var(--hairline); border-radius: 10px; background: white; color: var(--ink); padding: 10px 12px; outline: none; }
.account-create input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,113,227,.1); }
.account-actions { display: flex; align-items: center; gap: 8px; }
.account-actions select { min-height: 36px; min-width: 112px; }
.account-actions label { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); white-space: nowrap; }
.issue-editor { display: grid; gap: 10px; }
.issue-editor select { min-height: 42px; }
.issue-editor textarea { min-height: 96px; resize: vertical; border: 1px solid var(--hairline); border-radius: 12px; background: white; color: var(--ink); padding: 12px; font: inherit; outline: none; }
.issue-editor textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,113,227,.1); }
.detail-grid { display: grid; grid-template-columns: minmax(150px, .35fr) 1fr; margin: 0; }
.detail-grid dt, .detail-grid dd { margin: 0; padding: 11px 4px; border-bottom: 1px solid var(--hairline); overflow-wrap: anywhere; }
.detail-grid dt { color: var(--muted); font-size: 11px; }
.detail-grid dd { color: var(--ink); font-size: 12px; font-weight: 550; }
.quality-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.compact-metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.compact-metric { min-height: 126px; padding: 18px; }
.compact-metric > span, .compact-metric > small { display: block; color: var(--muted); font-size: 11px; }
.compact-metric > strong { display: block; margin: 14px 0 9px; font-size: 25px; letter-spacing: -.04em; }
.rate-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.rate-card { min-height: 138px; padding: 16px; }
.rate-card > span, .rate-card > small { display: block; color: var(--muted); font-size: 10px; line-height: 1.45; }
.rate-card > strong { display: block; margin: 12px 0 7px; font-size: 21px; letter-spacing: -.035em; }
.preset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.preset-card { min-height: 210px; padding: 21px; display: flex; flex-direction: column; }
.preset-card[data-status="unavailable"] { background: rgba(245,245,247,.75); }
.preset-card h3 { margin: 0 0 7px; font-size: 16px; }
.preset-count { display: block; margin: 17px 0 8px; font-size: 30px; line-height: 1; letter-spacing: -.04em; }
.preset-count small { margin-left: 5px; color: var(--muted); font-size: 11px; font-weight: 550; }
.preset-meta, .preset-note { color: var(--muted); font-size: 11px; line-height: 1.55; }
.preset-note { margin: 9px 0 16px; }
.preset-card .secondary-button { align-self: flex-start; margin-top: auto; }
.cancellation-chart-panel { min-height: 330px; margin-bottom: 14px; }
.quality-card { padding: 21px; min-height: 150px; }
.quality-card strong { display: block; margin-top: 18px; font-size: 27px; letter-spacing: -.04em; }
.quality-card span { color: var(--muted); font-size: 12px; }
.quality-delivery-panel { margin-top: 14px; }
.quality-definition { margin: 0; padding: 13px 18px 16px; border-top: 1px solid var(--hairline); color: var(--muted); font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.checklist { margin-top: 14px; padding: 22px; }.checklist h3 { font-size: 16px; }.checklist ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }.checklist li { padding: 13px 0; border-top: 1px solid var(--hairline); font-size: 13px; }.checklist li span { display: inline-block; width: 32px; color: var(--blue); font-family: ui-monospace, "SFMono-Regular", monospace; }
.detection-panel { display: grid; grid-template-columns: minmax(180px,.7fr) minmax(260px,1.3fr) auto; align-items: center; gap: 18px; margin-bottom: 14px; padding: 20px; }
.detection-panel h3 { margin-top: 3px; font-size: 17px; }.detection-panel > p { color: var(--muted); font-size: 12px; line-height: 1.55; }.detection-result { grid-column: 1 / -1; display: grid; gap: 5px; padding-top: 14px; border-top: 1px solid var(--hairline); font-size: 12px; }.detection-result > span, .detection-result > small { color: var(--muted); }.detection-rules { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }.detection-rules span { padding: 5px 8px; border-radius: 8px; background: #f5f5f7; color: var(--muted); font-family: ui-monospace, "SFMono-Regular", monospace; font-size: 10px; }
.alert { margin: -16px 0 18px; padding: 12px 14px; border-radius: 11px; background: #fff0ef; color: var(--red); font-size: 12px; }
.login-layer { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 10%, #fff 0, #f4f5f8 48%, #eceef2 100%); z-index: 10; }
.login-card { width: min(430px, 100%); padding: 38px; border: 1px solid rgba(255,255,255,.8); border-radius: 28px; background: rgba(255,255,255,.78); backdrop-filter: blur(28px); box-shadow: var(--shadow); }
.login-mark { width: 52px; height: 52px; border-radius: 16px; margin-bottom: 28px; font-size: 22px; }
.login-card h1 { margin-bottom: 10px; font-size: 32px; letter-spacing: -.045em; }.login-card > p:not(.eyebrow) { color: var(--muted); font-size: 13px; line-height: 1.55; }
.login-card label { display: grid; gap: 7px; margin-top: 16px; color: var(--muted); font-size: 12px; font-weight: 600; }.login-card label:first-of-type { margin-top: 28px; }.login-card input { border: 1px solid #d5d5da; border-radius: 12px; padding: 13px; outline: none; background: rgba(255,255,255,.9); }.login-card input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,113,227,.12); }.login-button { width: 100%; margin-top: 13px; padding: 13px; }.login-error { display: block; min-height: 18px; margin-top: 10px; color: var(--red); font-size: 11px; }
.detail-dialog { width: min(860px, calc(100vw - 32px)); max-height: min(860px, calc(100vh - 32px)); padding: 0; border: 1px solid rgba(255,255,255,.84); border-radius: 24px; color: var(--ink); background: rgba(250,250,252,.96); box-shadow: 0 30px 90px rgba(0,0,0,.23); overflow: hidden; }
.detail-dialog::backdrop { background: rgba(20,20,24,.24); backdrop-filter: blur(8px); }
.detail-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 23px 24px 18px; border-bottom: 1px solid var(--hairline); background: rgba(250,250,252,.91); backdrop-filter: blur(22px); }
.detail-header h2 { margin-bottom: 4px; font-size: 22px; letter-spacing: -.03em; }
.detail-header > div > p:last-child { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.detail-header .icon-button { flex: 0 0 auto; font-size: 23px; line-height: 1; }
.detail-tabs { display: flex; gap: 3px; padding: 8px 20px 0; overflow-x: auto; border-bottom: 1px solid var(--hairline); background: rgba(250,250,252,.96); scrollbar-width: none; }
.detail-tabs::-webkit-scrollbar { display: none; }
.detail-tab { position: relative; flex: 0 0 auto; min-height: 42px; padding: 0 10px 9px; border: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 620; white-space: nowrap; }
.detail-tab::after { content: ""; position: absolute; right: 10px; bottom: 0; left: 10px; height: 2px; border-radius: 2px; background: transparent; }
.detail-tab:hover { color: var(--ink); }
.detail-tab[aria-selected="true"] { color: var(--blue); }
.detail-tab[aria-selected="true"]::after { background: var(--blue); }
.detail-content { padding: 20px 24px 28px; overflow: auto; max-height: calc(100vh - 150px); }
.detail-tab-panel > .detail-section:first-child { margin-top: 0; }
.detail-section { margin-top: 20px; padding: 18px; border: 1px solid var(--hairline); border-radius: 17px; background: white; }
.detail-section:first-child { margin-top: 0; }
.detail-section h3 { margin-bottom: 13px; font-size: 15px; }
.detail-section > p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.detail-list { display: grid; gap: 0; }
.detail-row { display: grid; grid-template-columns: minmax(145px,.38fr) 1fr; gap: 14px; padding: 10px 0; border-top: 1px solid var(--hairline); font-size: 12px; }
.detail-row:first-child { border-top: 0; }
.detail-key { color: var(--muted); }
.detail-value { font-weight: 550; overflow-wrap: anywhere; }
.detail-timeline { display: grid; gap: 0; }
.timeline-item { position: relative; display: grid; grid-template-columns: 116px 1fr; gap: 16px; padding: 12px 0 12px 19px; border-left: 2px solid #d9d9df; font-size: 12px; }
.timeline-item::before { content: ""; position: absolute; width: 8px; height: 8px; left: -5px; top: 17px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px white; }
.timeline-time { color: var(--muted); font-size: 11px; }
.timeline-title { display: block; font-weight: 650; }
.timeline-note { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.detail-empty { margin: 0; padding: 18px 0; color: var(--muted); text-align: center; font-size: 12px; }
.related-list { display: grid; gap: 8px; }
.record-link { width: 100%; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 12px; border: 0; border-radius: 11px; background: #f5f5f7; color: var(--ink); text-align: left; }
.record-link:hover { background: var(--blue-soft); color: var(--blue); }
.record-link > span { min-width: 0; }
.record-link strong, .record-link small { display: block; overflow-wrap: anywhere; }
.record-link strong { font-size: 12px; }
.record-link small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.record-link svg { width: 16px; flex: 0 0 auto; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgba(0,113,227,.3); outline-offset: 2px; }
@media (max-width: 1120px) { .metric-grid { grid-template-columns: repeat(2, 1fr); }.chart-grid { grid-template-columns: 1fr; }.compact-chart { min-height: 290px; }.compact-metric-grid, .rate-grid { grid-template-columns: repeat(3, 1fr); }.quality-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .app-shell { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); }.sidebar { position: static; width: auto; min-width: 0; height: auto; padding: 16px; border-right: 0; border-bottom: 1px solid var(--hairline); }.brand { min-width: 0; padding-bottom: 14px; } nav { width: 100%; min-width: 0; display: flex; overflow-x: auto; overflow-y: hidden; }.nav-item { flex: 0 0 auto; }.sidebar-foot { display: none; } main { min-width: 0; grid-column: 1; padding: 22px 16px 40px; }.topbar h1 { font-size: 27px; }.role-pill { display: none; }.metric-grid, .compact-metric-grid, .rate-grid, .preset-grid { grid-template-columns: 1fr; }.chart-grid { grid-template-columns: minmax(0, 1fr); }.donut-layout { grid-template-columns: 150px 1fr; }.filter-bar { flex-wrap: wrap; }.search-field, .list-filters .search-field { min-width: 100%; }.filter-bar select, .advanced-filter-grid .date-field, .advanced-filter-grid .filter-input, .list-filters .primary-button, .list-filters .secondary-button { min-height: 44px; }.filter-bar select { flex: 1; }.date-field { flex: 1 1 100%; justify-content: space-between; }.date-field input { min-width: 0; font-size: 16px; }.list-filters .primary-button, .list-filters .secondary-button { flex: 1; }.table-meta { align-items: flex-start; gap: 10px; }.table-meta-actions { align-items: flex-end; flex-direction: column; gap: 7px; }.section-heading { align-items: flex-start; }.quality-grid { grid-template-columns: 1fr; }.detection-panel { grid-template-columns: 1fr; align-items: stretch; }.detection-result { grid-column: 1; }.cost-import { grid-template-columns: 1fr; }.cost-import-actions { justify-content: stretch; }.cost-import-actions > * { flex: 1 1 100%; justify-content: center; max-width: none; }.detail-dialog { width: calc(100vw - 18px); max-height: calc(100vh - 18px); }.detail-header, .detail-content { padding-left: 17px; padding-right: 17px; }.detail-tabs { padding-inline: 9px; }.detail-row, .timeline-item { grid-template-columns: 1fr; gap: 4px; } }

.dashboard-filter {display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin-bottom:18px}
.dashboard-filter label {display:flex;flex-direction:column;gap:7px;color:#747880;font-size:12px}
.dashboard-filter input,.dashboard-filter select {min-height:44px;padding:10px 12px;border:1px solid #e6e8eb;border-radius:12px;background:white;color:#24262a;font:inherit;min-width:125px}
.dashboard-section-title {margin:24px 0 14px;font-size:18px}
.metric-definition {font-size:12px;color:#7e8189;margin-top:12px;line-height:1.6}
.metric-definition summary {cursor:pointer;color:#0673ef}
.metric-definition p {margin:8px 0 0}
.dashboard-trend,.dashboard-daily {margin:24px 0}
.dashboard-daily table {min-width:1250px}
.dashboard-daily .panel-title {padding:24px}
.metric-card[data-status="unavailable"] .metric-value {color:#999}
@media(max-width:700px) {.dashboard-filter label {flex:1 1 40%}.dashboard-filter button {flex:1 1 25%}.metric-grid {grid-template-columns:repeat(2,minmax(0,1fr))}.metric-value {font-size:26px}.dashboard-daily .panel-title {padding:16px}}

/* Configurable free allowance experiment. */
.quota-form {padding:24px;margin-bottom:20px}.quota-variants {display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:20px 0}.quota-variants fieldset {border:1px solid var(--line,#dce4ec);border-radius:14px;padding:20px}.quota-variants legend{font-weight:700;padding:0 8px}.quota-variants label{display:grid;gap:8px;margin-bottom:16px}.quota-variants input,.quota-variants select{width:100%}#quota-save-status{margin-left:16px}#quota-revenue{padding:16px 24px}#quota-versions td:last-child{min-width:240px}#quota-versions td:last-child button{margin:3px}@media(max-width:760px){.quota-variants{grid-template-columns:1fr}.quota-form{padding:16px}}

.quota-traffic { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-bottom: 12px; min-width: 240px; }
.quota-traffic label { display: grid; gap: 4px; font-size: 12px; }
.quota-traffic input { width: 90px; }
.quota-traffic small { flex-basis: 100%; color: var(--muted); }
.quota-current { padding: 24px; margin-bottom: 18px; border-color: #c8dfff; }
.quota-current h3 { margin: 0 0 8px; font-size: 19px; }
.quota-current-ratio { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 10px; }
.quota-current-ratio strong { padding: 10px 18px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); font-size: 26px; }
.quota-current-status { margin: 0 0 18px; font-size: 13px; }
.quota-current .quota-traffic { margin-bottom: 0; }
.quota-live-rules { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.quota-live-rules h4 { margin: 0 0 16px; font-size: 17px; }
.quota-live-rules label { display: grid; gap: 8px; margin-top: 16px; font-size: 14px; }
.quota-live-rules input, .quota-live-rules select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface, #fff); color: inherit; font: inherit; }
.quota-live-rules .muted { max-width: 75ch; line-height: 1.7; }
.quota-rules-status { margin: 12px 0 0; font-size: 14px; }
.quota-traffic input { padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 10px; min-height: 44px; font: inherit; }
.quota-new-version { margin-bottom: 20px; }
.quota-new-version > summary { padding: 18px 22px; border: 1px solid var(--hairline); border-radius: 14px; background: #fff; cursor: pointer; font-weight: 650; }
.quota-new-version > summary span { display: block; margin: 7px 0 0 16px; color: var(--muted); font-size: 12px; font-weight: 400; }
.quota-new-version .quota-form { margin: 10px 0 0; }
.quota-form .filter-panel { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; }
.quota-form .filter-panel label { display: grid; gap: 8px; font-size: 13px; }
.quota-form input,.quota-form select { padding: 10px 12px; min-height: 44px; border: 1px solid var(--hairline); border-radius: 10px; font: inherit; background: #fff; }
.update-notes-editor { display: grid; gap: 10px; margin-block: 20px; max-width: 800px; }
.update-notes-editor textarea { width: 100%; min-height: 96px; resize: vertical; padding: 12px; border: 1px solid var(--hairline); border-radius: 10px; font: inherit; color: var(--ink); background: #fff; }
.update-notes-editor textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.update-notes-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.update-notes-actions span,.update-notes-editor p { color: var(--muted); font-size: 13px; }
@media(max-width:760px) { .quota-current { padding: 18px; } .quota-new-version > summary { padding: 16px; } .quota-current .quota-traffic { min-width: 0; } .quota-form .filter-panel label { width: 100%; } }

/* Orders keep payment and submission times distinct; scroll within the table on small screens. */
.purchase-orders-table { min-width: 2000px; }
.purchase-orders-table td { vertical-align: top; }
.purchase-orders-table .cell-title, .purchase-orders-table .cell-sub { overflow-wrap: anywhere; }

.purchase-date-range { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.purchase-date-range > span, .purchase-date-range .date-field { color: var(--ink); font-size: 12px; }
.purchase-date-range select { min-height: 40px; }

/* Plain-language usage statistics: essentials first, details on demand. */
.behavior-help { color: #565960; font-size: 14px; line-height: 1.7; margin: 12px 0 20px; max-width: 75ch; }
.behavior-filters { align-items: end; }
.behavior-filters .date-field { display: grid; gap: 8px; }
.behavior-filters .advanced-filter-panel { flex-basis: auto; }
.behavior-details { margin: 24px 0; }
.behavior-details > summary { cursor: pointer; font-weight: 600; padding: 14px 0; color: #25282e; }
.behavior-details > summary:focus-visible { outline: 2px solid #006be8; outline-offset: 3px; border-radius: 4px; }
#behavior-note { max-width: 75ch; line-height: 1.8; color: #565960; }
#view-behavior .table-panel { margin-bottom: 20px; }
@media (max-width: 640px) { .behavior-filters .date-field { width: 100%; } .behavior-filters .date-field input, .behavior-filters .date-field select { width: 100%; min-width: 0; } }

#view-behavior th, #view-behavior .table-meta, #view-behavior .cell-sub, #view-behavior .source-banner { color: #565960; }
#view-behavior input::placeholder { color: #656971; opacity: 1; }
#view-behavior .primary-button { background: #0066d6; }
#view-behavior .primary-button:hover { background: #0056b8; }

.feedback-cell {white-space:pre-wrap;overflow-wrap:anywhere;min-width:140px;max-width:560px;vertical-align:top;}

.dashboard-drill-card { text-align: left; color: var(--ink); font: inherit; }
.dashboard-drill-card > span { display: block; }
.dashboard-drill-card .metric-value { color: var(--blue); }
.dashboard-drill-card .metric-note { color: #565960; font-size: 13px; }
.dashboard-drill-card:disabled { cursor: default; }
#dashboard-activity-panel .source-banner, #dashboard-activity-panel .detail-empty { margin: 16px 20px; }

/* Payment evidence, with existing text states retained alongside row color. */
tr.order-payment-success { background: var(--blue-soft); }
tr.order-payment-success:hover { background: #dcecff; }
tr.order-payment-success .cell-sub { color: #475b75; }
tr.order-payment-other { background: #f1f2f4; }
tr.order-payment-other:hover { background: #e7e9ed; }
tr.order-payment-other .cell-sub { color: #565960; }
tr.order-payment-success:focus-visible, tr.order-payment-other:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.order-payment-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 12px 16px; margin: 0; font-size: 12px; color: #565960; }
.order-payment-legend > span { padding: 6px 9px; border-radius: 6px; }
.order-legend-success { background: var(--blue-soft); color: #284e7b; }
.order-legend-other { background: #f1f2f4; }

/* One visible navigation list and compact, readable operational data. */
#navigation { display:flex; flex-direction:column; gap:3px; overflow-x:hidden; overflow-y:auto; scrollbar-gutter:stable; padding-right:4px; }
#navigation .nav-item { width:100%; flex:0 0 auto; min-height:40px; height:40px; font-size:14px; }
.sidebar .brand { padding-bottom:20px; }
.nav-item:focus-visible, button:focus-visible, summary:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.nav-item[aria-current="page"] { font-weight:650; }
.help-details { margin:10px 0 18px; font-size:12px; color:#565960; }
.help-details > summary { cursor:pointer; width:fit-content; min-height:32px; padding-block:8px; color:var(--blue); }
.help-details > p { margin:0; padding:12px 14px; text-align:left; line-height:1.6; background:#ededf0; border-radius:10px; }
th { color:#565960; font-weight:600; }
.cell-sub, .table-meta, .section-heading p, .detail-key, .timeline-time, .timeline-note { color:#626269; }
.cell-title { font-variant-numeric:tabular-nums; }
#consumer-table td:nth-child(2), #consumer-table td:nth-child(3) { min-width:190px; }
#consumer-table td:nth-child(4) { min-width:190px; }
#consumer-table .detail-actions { gap:6px; }
#consumer-table .secondary-button { white-space:nowrap; padding:9px 12px; }
#dashboard-activity-table tr[data-detail]:focus-visible { outline:2px solid var(--blue); outline-offset:-2px; }
#detail-content { scroll-behavior:auto; }
@media(max-width:760px) {
  #navigation { max-height:250px; display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; }
  #navigation .nav-item { width:100%; min-height:44px; height:44px; }
  .sidebar { padding-bottom:12px; }
  .sidebar .brand { padding-bottom:10px; }
  .topbar { margin-bottom:20px; }
  .filter-bar { gap:8px; }
  .filter-bar .primary-button, .filter-bar .secondary-button { min-height:44px; }
}

.metric-note, .legend, .source-banner, .panel-title p { color:#626269; }
.help-details > summary { color:#0061c3; }
.primary-button:hover { background:#0061c3; }

/* Plain-language operations: short answers first, calculations on demand. */
.page-guide { margin:0 0 20px; max-width:90ch; color:#34343a; font-size:14px; line-height:1.7; }
.page-guide p { margin:6px 0; }
.plain-section-title { margin:28px 0 12px; font-size:18px; }
#view-growth .growth-device-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
#view-growth .compact-metric { min-width:0; }
#view-growth .growth-value { font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
#view-growth .compact-metric[data-status="observing"] .growth-value,
#view-growth .compact-metric[data-status="unavailable"] .growth-value { font-size:22px; line-height:1.4; }
.usage-duration-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0 0 22px; padding:18px 0; border-block:1px solid #dedee3; gap:24px; }
.duration-item { min-width:0; }
.duration-item dt { color:#34343a; font-size:14px; }
.duration-item dd { margin:8px 0; font-size:28px; font-weight:650; color:#1d1d1f; }
.duration-item small { display:block; font-size:13px; color:#565960; line-height:1.6; }
.metric-help { margin-top:12px; font-size:12px; color:#565960; line-height:1.6; }
.metric-help summary,.plain-help summary { cursor:pointer; color:#0065cc; width:fit-content; min-height:36px; padding-block:8px; }
.metric-help p { margin:4px 0 0; }
.plain-help { margin:8px 0 20px; padding-inline:0; font-size:13px; color:#34343a; line-height:1.7; }
.plain-help p { max-width:85ch; margin:6px 0; }
.growth-first-day-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.table-explainer { margin:12px 20px 8px; max-width:85ch; font-size:13px; color:#34343a; line-height:1.7; }
.table-panel > .plain-help { margin-inline:20px; }
.text-button { appearance:none; background:none; border:0; color:#0065cc; cursor:pointer; padding:6px 0; margin-left:8px; min-height:36px; font:inherit; text-decoration:underline; text-underline-offset:3px; }
#growth-ads .table-panel { box-shadow:none; }
@media(max-width:1150px) { #view-growth .growth-device-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) {
  #view-growth .growth-device-grid,.usage-duration-summary,.growth-first-day-metrics { grid-template-columns:1fr; }
  .page-guide { font-size:14px; }
  .text-button { display:block; margin-left:0; }
}

#view-growth .compact-metric > span,#view-growth .compact-metric > small { color:#565960; }
#growth-ads { padding-top:12px; }

.report-speed-note { color:#565960; font-size:12px; line-height:1.65; margin:0 0 18px; }

/* Multi-app settings extend the existing operations workspace. */
.managed-form { padding:24px; margin-bottom:24px; }
.managed-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-bottom:20px; }
.managed-catalog label { display:grid; gap:8px; color:#505057; }
.managed-catalog input,.managed-catalog select { max-width:100%; width:100%; min-width:0; min-height:44px; box-sizing:border-box; border:1px solid #d3d6dd; border-radius:12px; padding:10px 12px; background:#fff; color:#25252b; font:inherit; }
.managed-catalog input[type="checkbox"] { width:20px; height:20px; min-height:20px; padding:0; accent-color:#0071e3; }
.managed-catalog input[type="number"] { font-variant-numeric:tabular-nums; }
.managed-catalog input[readonly] { background:#f3f4f6; color:#505057; }
.managed-catalog td { overflow-wrap:anywhere; }
.managed-catalog small { display:block; color:#5b5b63; margin-top:6px; }
.managed-result { min-height:24px; color:#16613e; }
.managed-catalog details > * + * { margin-top:16px; }
.managed-catalog details summary { cursor:pointer; }
.managed-catalog form > details { margin-bottom:20px; }
.managed-catalog > h3 { margin:28px 0 16px; }
.managed-catalog .source-banner,.managed-catalog .section-heading p,.managed-catalog .table-meta { color:#5b5b63; line-height:1.6; }
.managed-catalog .section-heading > button { flex-shrink:0; white-space:nowrap; }
.managed-catalog #managed-identity { overflow-wrap:anywhere; }
.managed-catalog #managed-key-value { font-family:monospace; }
.managed-catalog input:focus-visible,.managed-catalog select:focus-visible { outline:3px solid #0071e3; outline-offset:2px; }
@media(max-width:700px) { .managed-fields { grid-template-columns:1fr; } .managed-form { padding:16px; } }

/* Website visits extend the existing user-detail tables. */
.website-visit-filters { display:flex; flex-wrap:wrap; align-items:end; gap:12px; margin:16px 0; }
.website-visit-filters label { display:grid; gap:6px; flex:1 1 170px; font-size:14px; }
.website-visit-filters input { min-width:0; width:100%; box-sizing:border-box; }
.website-visits-scroll { overflow-x:auto; }
.website-visits-table td { overflow-wrap:anywhere; min-width:140px; }

.dashboard-user-layout {display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr);gap:24px;padding:0 20px 20px;align-items:start;}
.dashboard-user-layout .chart {width:100%;min-width:0;}
.dashboard-user-layout .table-scroll {max-height:300px;}
.dashboard-user-stats .daily-signups {color:#0071e3;}
.dashboard-user-stats .daily-active {color:#248344;}
@media (max-width:900px) {.dashboard-user-layout {grid-template-columns:minmax(0,1fr);}.dashboard-user-stats .panel-title {flex-wrap:wrap;}}

.dashboard-user-stats {margin:24px 0;}
.dashboard-user-stats .panel-title {padding:20px;gap:16px;flex-wrap:wrap;}
.dashboard-user-stats .legend {flex-wrap:wrap;}
.dashboard-user-layout table {min-width:0;width:100%;}
.dashboard-user-layout th,.dashboard-user-layout td {padding:12px 8px;}

.session-loading {min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center;}
.session-loading h1 {margin:0;font-size:20px;}
.session-loading p {margin:0;max-width:38em;color:var(--muted);}

.registration-retention {margin:24px 0;}
.registration-retention .panel-title {padding:20px;gap:16px;}
.registration-retention>.metric-definition {margin:16px 20px;}
.registration-retention>.source-banner {margin:0 20px 16px;}

/* Account-level registration and deduplicated activity, using the existing dashboard palette. */
.user-periods { padding:24px; margin:24px 0; }
.user-periods .panel-title { padding:0; gap:20px; flex-wrap:wrap; }
.user-periods .panel-title label { display:grid; gap:6px; color:#515763; }
.user-periods h4 { margin:24px 0 12px; font-size:16px; }
.user-period-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; font-variant-numeric:tabular-nums; }
.user-period-summary > div { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:16px; border-bottom:1px solid #e9ebef; }
.user-period-summary span { color:#515763; font-size:14px; }
.user-period-summary small { color:#626773; line-height:1.5; }
.user-period-summary strong,.user-period-summary .user-period-count { font-size:30px; font-weight:650; }
.user-period-count { padding:4px 0; color:#0064c8; border:0; background:transparent; cursor:pointer; font:inherit; font-variant-numeric:tabular-nums; text-align:left; }
.user-period-count:hover { text-decoration:underline; text-underline-offset:4px; }
.user-period-count:focus-visible,.user-period-bar:focus-visible { outline:2px solid #0071e3; outline-offset:3px; }
.user-period-charts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-bottom:24px; }
.user-period-charts > section { min-width:0; }
.user-period-bars { display:flex; align-items:stretch; gap:8px; overflow-x:auto; padding:8px 4px; scrollbar-color:#8b96a6 #f3f4f6; }
.user-period-bar { flex:1 0 44px; min-width:44px; display:flex; flex-direction:column; align-items:center; gap:8px; border:0; background:transparent; color:#875000; cursor:pointer; font:inherit; font-variant-numeric:tabular-nums; padding:4px; }
.user-period-bar small { font-size:11px; white-space:nowrap; }
.user-period-bar-track { height:120px; width:100%; display:flex; align-items:flex-end; justify-content:center; border-bottom:1px solid #d5dbe3; }
.user-period-bar-track > span { display:block; width:22px; background:#e9a536; border-radius:5px 5px 0 0; }
.user-period-bar:hover { background:#f3f6fa; }
#user-period-activity-chart .user-period-bar { color:#17633c; }
#user-period-activity-chart .user-period-bar-track > span { background:#269568; }
@media(max-width:900px) { .user-period-charts { grid-template-columns:minmax(0,1fr); } }
@media(max-width:600px) { .user-periods { padding:16px; } .user-period-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } .user-period-summary > div { padding:12px 8px; } .user-period-summary strong,.user-period-summary .user-period-count { font-size:26px; } }