.monthly-panel,
    .live-center-panel {
      max-width: 1400px;
      margin: 0 auto;
      padding: 28px 40px 88px;
    }
    .secondary-search-panel {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    #monthly-report-view .secondary-search-panel .field label { font-size: 13px; }
    #monthly-report-view .secondary-search-panel .field input,
    #monthly-report-view .secondary-search-panel .field select { font-size: 15px; }
    #monthly-report-view .report-viewer-head > span { font-size: 14px; }
    .live-player,
    .live-list {
      overflow: hidden;
      border: 1px solid rgba(17,17,19,.08);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 9px 10px -8px rgba(17,17,19,.42), 0 2px 3px -2px rgba(17,17,19,.22);
    }
    .report-viewer {
      overflow: hidden;
      border-top: 3px solid var(--orange);
      background: #fff;
      box-shadow: 0 9px 10px -8px rgba(17,17,19,.32), 0 2px 3px -2px rgba(17,17,19,.16);
    }
    .report-viewer-head,
    .live-player-head,
    .live-list-head {
      min-height: 58px;
      padding: 0 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      border-bottom: 1px solid rgba(17,17,19,.08);
      background: #fff;
    }
    .report-viewer-head h2,
    .live-list-head h2 {
      margin: 0;
      font-size: 17px;
      line-height: 1.3;
      font-weight: 900;
      letter-spacing: 0;
    }
    .report-viewer-title {
      min-width: 0;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px 12px;
    }
    .d-ranking-direction-note {
      padding: 5px 9px;
      border: 1px solid rgba(255,107,22,.3);
      border-radius: 4px;
      color: var(--orange);
      background: rgba(255,107,22,.08);
      font-size: 12px;
      line-height: 1;
      font-weight: 900;
      white-space: nowrap;
    }
    .report-viewer-head span,
    .live-player-head span {
      color: #6f737b;
      font-size: 13px;
      font-weight: 800;
    }
    .report-state {
      min-height: 320px;
      padding: 40px 24px;
      display: grid;
      place-items: center;
      align-content: center;
      gap: 8px;
      text-align: center;
      background:
        linear-gradient(rgba(17,17,19,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17,17,19,.035) 1px, transparent 1px),
        #fafbfc;
      background-size: 48px 48px;
    }
    .report-state[hidden],
    .monthly-report-content[hidden] {
      display: none;
    }
    .report-state strong,
    .live-empty strong {
      color: #262a30;
      font-size: 20px;
      font-weight: 900;
    }
    .report-state span,
    .live-empty span {
      color: #7a8089;
      font-size: 14px;
      font-weight: 700;
    }
    .report-loading-mark {
      width: 32px;
      height: 32px;
      margin-bottom: 8px;
      border: 3px solid rgba(255,107,22,.18);
      border-top-color: var(--orange);
      border-radius: 50%;
      animation: reportLoading .8s linear infinite;
    }
    @keyframes reportLoading { to { transform: rotate(360deg); } }
    .monthly-report-content {
      border-top: 1px solid rgba(17,17,19,.08);
    }
    .monthly-report-section {
      padding: 30px 28px 34px;
      border-bottom: 1px solid rgba(17,17,19,.08);
    }
    .monthly-report-section:last-child { border-bottom: 0; }
    .monthly-report-section.is-soft { background: #f7f8fa; }
    .monthly-section-head {
      margin-bottom: 24px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 18px;
    }
    .monthly-section-head h3 {
      margin: 0;
      color: #17191d;
      font-size: 19px;
      line-height: 1.35;
      font-weight: 900;
      letter-spacing: 0;
    }
    .monthly-section-head p {
      margin: 0;
      color: #81868e;
      font-size: 12px;
      line-height: 1.5;
      font-weight: 700;
      text-align: right;
    }
    .monthly-chart-legend {
      display: flex;
      align-items: center;
      gap: 18px;
      color: #666c75;
      font-size: 12px;
      font-weight: 800;
    }
    .monthly-chart-legend span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }
    .monthly-chart-legend i {
      width: 18px;
      height: 3px;
      border-radius: 999px;
      background: var(--orange);
    }
    .monthly-chart-legend span + span i { background: #20242a; }
    .monthly-chart-wrap {
      position: relative;
      width: 100%;
      height: 330px;
    }
    .monthly-chart-wrap canvas {
      display: block;
      width: 100%;
      height: 100%;
    }
    .monthly-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      border-top: 1px solid rgba(17,17,19,.1);
      border-left: 1px solid rgba(17,17,19,.1);
    }
    .monthly-metric {
      min-height: 154px;
      padding: 22px 20px;
      border-right: 1px solid rgba(17,17,19,.1);
      border-bottom: 1px solid rgba(17,17,19,.1);
      background: #fff;
    }
    .monthly-metric:nth-child(n + 4) { background: #fafbfc; }
    .monthly-metric small {
      display: block;
      margin-bottom: 16px;
      color: #777d86;
      font-size: 12px;
      line-height: 1.4;
      font-weight: 800;
    }
    .monthly-metric strong {
      display: block;
      color: var(--orange);
      font-size: 26px;
      line-height: 1.15;
      font-weight: 900;
      letter-spacing: 0;
    }
    .monthly-metric span {
      display: block;
      margin-top: 10px;
      color: #91969d;
      font-size: 12px;
      line-height: 1.55;
      font-weight: 700;
    }
    .monthly-overview {
      margin: 0 0 22px;
      color: #565c65;
      font-size: 14px;
      line-height: 1.9;
      font-weight: 700;
    }
    .monthly-analysis-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 26px;
    }
    .monthly-analysis-block {
      padding-top: 18px;
      border-top: 2px solid #1f2329;
    }
    .monthly-analysis-block.is-orange { border-top-color: var(--orange); }
    .monthly-analysis-block h4 {
      margin: 0 0 14px;
      font-size: 15px;
      line-height: 1.4;
      font-weight: 900;
    }
    .monthly-analysis-block ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 10px;
    }
    .monthly-analysis-block li {
      position: relative;
      padding-left: 14px;
      color: #686e77;
      font-size: 13px;
      line-height: 1.7;
      font-weight: 700;
    }
    .monthly-analysis-block li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .72em;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--orange);
    }
    .monthly-secondary-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1px;
      background: rgba(17,17,19,.1);
      border: 1px solid rgba(17,17,19,.1);
    }
    .monthly-secondary-item {
      min-height: 142px;
      padding: 20px;
      background: #fff;
    }
    .monthly-secondary-item h4 {
      margin: 0 0 12px;
      color: #22262c;
      font-size: 15px;
      font-weight: 900;
    }
    .monthly-secondary-item strong {
      color: var(--orange);
      font-size: 22px;
      line-height: 1.2;
      font-weight: 900;
    }
    .monthly-secondary-item p {
      margin: 10px 0 0;
      color: #777d86;
      font-size: 12px;
      line-height: 1.65;
      font-weight: 700;
    }
    .monthly-suggestions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px 28px;
    }
    .monthly-suggestion {
      padding: 16px 0 16px 18px;
      border-left: 3px solid var(--orange);
    }
    .monthly-suggestion h4 {
      margin: 0 0 9px;
      color: #22262c;
      font-size: 14px;
      line-height: 1.5;
      font-weight: 900;
    }
    .monthly-suggestion p {
      margin: 0;
      color: #6e747d;
      font-size: 12px;
      line-height: 1.75;
      font-weight: 700;
    }
    .monthly-no-suggestion {
      margin: 0;
      color: #7a8089;
      font-size: 13px;
      line-height: 1.7;
      font-weight: 700;
    }
    .d-report-dashboard {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 350px;
      align-items: start;
      background: #fff;
    }
    .d-report-analysis {
      min-width: 0;
      border-right: 1px solid rgba(17,17,19,.1);
    }
    .d-report-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-bottom: 1px solid rgba(17,17,19,.1);
    }
    .d-report-summary-item {
      height: 112px;
      padding: 10px 18px;
      display: grid;
      grid-template-rows: 18px 31px 34px;
      align-content: center;
      gap: 5px;
      border-right: 1px solid rgba(17,17,19,.1);
    }
    .d-report-summary-item:last-child { border-right: 0; }
    .d-report-summary-item span {
      color: #737981;
      font-size: 13px;
      font-weight: 800;
    }
    .d-report-summary-item strong {
      color: #242830;
      font-size: 25px;
      line-height: 1;
      font-weight: 900;
      font-variant-numeric: tabular-nums;
    }
    .d-report-summary-item.is-primary strong { color: var(--orange); }
    .d-report-summary-item small {
      color: #999ea5;
      font-size: 12px;
      line-height: 1.4;
      font-weight: 700;
    }
    .d-report-summary-item small .d-summary-scale {
      display: block;
      margin-top: 1px;
      color: inherit;
      font-size: inherit;
      font-weight: inherit;
      white-space: nowrap;
    }
    .d-report-reading-guide {
      min-height: 56px;
      padding: 12px 20px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px 22px;
      border-bottom: 1px solid rgba(17,17,19,.1);
      color: #676d75;
      background: #fff8f3;
      font-size: 14px;
      line-height: 1.5;
      font-weight: 800;
    }
    .d-report-reading-guide strong {
      color: var(--orange);
      font-size: 15px;
    }
    .d-report-diagnostic {
      border-bottom: 1px solid rgba(17,17,19,.1);
    }
    .d-report-section-head {
      min-height: 82px;
      padding: 20px 26px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      border-bottom: 1px solid rgba(17,17,19,.1);
    }
    .d-report-section-head h3,
    .d-report-mini-head h3,
    .d-report-performance h3,
    .d-report-ranking-head h3 {
      margin: 0;
      color: #1b1e23;
      font-size: 17px;
      line-height: 1.3;
      font-weight: 900;
      letter-spacing: 0;
    }
    .d-report-section-head p,
    .d-report-mini-head p {
      margin: 6px 0 0;
      color: #7a8089;
      font-size: 13px;
      line-height: 1.5;
      font-weight: 700;
    }
    .d-report-section-head > b {
      color: var(--orange);
      font-size: 13px;
      white-space: nowrap;
    }
    .d-report-peak-band {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      border-bottom: 1px solid rgba(17,17,19,.1);
    }
    .d-report-peak {
      min-width: 0;
      padding: 20px 26px 18px;
    }
    .d-report-peak + .d-report-peak { border-left: 1px solid rgba(17,17,19,.1); }
    .d-report-peak-head {
      margin-bottom: 16px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 18px;
    }
    .d-report-peak-head > div {
      display: grid;
      gap: 5px;
    }
    .d-report-peak-head > div span {
      color: #7a8089;
      font-size: 12px;
      font-weight: 900;
    }
    .d-report-peak-head > div strong {
      color: #24282e;
      font-size: 16px;
      font-weight: 900;
    }
    .d-report-peak-head > b {
      color: #252930;
      font-size: 24px;
      line-height: 1;
      font-weight: 900;
      font-variant-numeric: tabular-nums;
    }
    .d-report-peak-head > b small {
      margin-right: 5px;
      color: #8b9199;
      font-size: 12px;
    }
    .d-road-track {
      height: 12px;
      display: flex;
      overflow: hidden;
      border: 1px solid rgba(17,17,19,.08);
      border-radius: 3px;
      background: #edf0f2;
    }
    .d-road-track span {
      min-width: 0;
      height: 100%;
      transition: width .22s ease;
    }
    .d-road-track .is-red,
    .d-road-values .is-red { background: #d64b37; }
    .d-road-track .is-yellow,
    .d-road-values .is-yellow { background: #e5a824; }
    .d-road-track .is-green,
    .d-road-values .is-green { background: #4c956c; }
    .d-road-values {
      margin-top: 10px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      color: #777d85;
      font-size: 12px;
      font-weight: 800;
    }
    .d-road-caption {
      margin: 0 0 10px;
      color: #777d85;
      font-size: 12px;
      line-height: 1.5;
      font-weight: 700;
    }
    .d-road-values span {
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }
    .d-road-values i {
      width: 7px;
      height: 7px;
      flex: 0 0 auto;
      border-radius: 50%;
    }
    .d-road-values b {
      color: #30343a;
      font-variant-numeric: tabular-nums;
    }
    .d-report-diagnostic-body {
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) minmax(240px, .8fr);
      border-bottom: 1px solid rgba(17,17,19,.1);
    }
    .d-report-peak-chart-panel {
      min-width: 0;
      padding: 22px 26px 18px;
    }
    .d-report-mini-head {
      margin-bottom: 16px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
    }
    .d-report-legend {
      display: flex;
      align-items: center;
      gap: 14px;
      color: #737981;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }
    .d-report-legend span {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .d-report-legend i {
      width: 15px;
      height: 3px;
    }
    .d-report-legend .is-morning { background: #3975a7; }
    .d-report-legend .is-evening { background: var(--orange); }
    .d-report-peak-chart-wrap {
      position: relative;
      height: 250px;
      border-top: 1px solid rgba(17,17,19,.1);
      border-bottom: 1px solid rgba(17,17,19,.1);
    }
    #d-peak-chart {
      width: 100%;
      height: 100%;
      display: block;
      cursor: crosshair;
    }
    .d-report-tooltip {
      position: absolute;
      z-index: 4;
      min-width: 154px;
      padding: 10px 12px;
      border-radius: 5px;
      background: rgba(24,27,32,.94);
      color: #fff;
      box-shadow: 0 9px 10px -8px rgba(17,17,19,.42);
      pointer-events: none;
      transform: translate(-50%, calc(-100% - 12px));
    }
    .d-report-tooltip[hidden] { display: none; }
    .d-report-tooltip strong {
      display: block;
      margin-bottom: 5px;
      font-size: 14px;
    }
    .d-report-tooltip span {
      display: block;
      color: rgba(255,255,255,.74);
      font-size: 12px;
      line-height: 1.55;
      font-weight: 700;
    }
    .d-report-performance {
      padding: 22px 20px 18px;
      border-left: 1px solid rgba(17,17,19,.1);
      background: #fafbfc;
    }
    .d-report-performance > p {
      margin: 6px 0 14px;
      color: #7a8089;
      font-size: 12px;
      line-height: 1.5;
      font-weight: 700;
    }
    .d-report-performance-list { border-top: 1px solid rgba(17,17,19,.1); }
    .d-report-performance-list > div {
      min-height: 64px;
      padding: 9px 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      border-bottom: 1px solid rgba(17,17,19,.1);
    }
    .d-report-performance-list span {
      min-width: 0;
      display: grid;
      gap: 3px;
    }
    .d-report-performance-list span b {
      color: #70767e;
      font-size: 12px;
      font-weight: 800;
    }
    .d-report-performance-list span small {
      color: #969ba2;
      font-size: 11px;
      line-height: 1.45;
      font-weight: 700;
    }
    .d-report-performance-list strong {
      color: #292d33;
      font-size: 14px;
      text-align: right;
      font-weight: 900;
      font-variant-numeric: tabular-nums;
    }
    .d-report-performance-list strong.is-emphasis { color: var(--orange); }
    .d-report-method {
      min-height: 42px;
      padding: 10px 26px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      color: #838991;
      font-size: 12px;
      line-height: 1.5;
      font-weight: 700;
    }
    .d-report-method b { color: #535961; }
    .d-report-trend { padding: 24px 26px 20px; }
    .d-report-trend .d-report-section-head {
      min-height: 0;
      padding: 0 0 18px;
      border-bottom: 0;
    }
    .d-report-single-legend {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #70767f;
      font-size: 13px;
      font-weight: 800;
      white-space: nowrap;
    }
    .d-report-single-legend::before {
      content: "";
      width: 18px;
      height: 3px;
      background: var(--orange);
    }
    .d-report-trend .monthly-chart-wrap {
      border-top: 1px solid rgba(17,17,19,.1);
      border-bottom: 1px solid rgba(17,17,19,.1);
    }
    .d-report-trend-foot {
      padding-top: 13px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      color: #7b818a;
      font-size: 13px;
      font-weight: 700;
    }
    .d-report-trend-foot b { color: var(--orange); }
    .d-report-ranking {
      min-width: 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: #fff;
    }
    .d-report-ranking-head {
      min-height: 78px;
      padding: 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border-bottom: 1px solid rgba(17,17,19,.1);
    }
    .d-report-ranking-head h3 { font-size: 15px; }
    .d-report-ranking-head span {
      display: block;
      margin-top: 5px;
      color: #737981;
      font-size: 12px;
      font-weight: 800;
    }
    .d-ranking-sort-toggle {
      min-height: 32px;
      padding: 0 10px;
      border: 1px solid rgba(255,107,22,.45);
      border-radius: 4px;
      color: var(--orange);
      background: #fff;
      font-size: 12px;
      line-height: 1;
      font-weight: 900;
      white-space: nowrap;
      cursor: pointer;
      transition: color .2s ease, background .2s ease, border-color .2s ease;
    }
    .d-ranking-sort-toggle:hover {
      border-color: var(--orange);
      color: #fff;
      background: var(--orange);
    }
    .d-ranking-sort-toggle:focus-visible {
      outline: 2px solid rgba(255,107,22,.34);
      outline-offset: 2px;
    }
    .d-ranking-sort-toggle:disabled,
    .d-report-ranking-toggle:disabled {
      color: #a7abb0;
      border-color: #e2e4e7;
      background: #fafafa;
      cursor: not-allowed;
    }
    .d-report-ranking-columns,
    .d-report-rank-row {
      display: grid;
      grid-template-columns: 52px minmax(82px, 1fr) 58px 54px 54px;
      align-items: center;
      gap: 5px;
    }
    .d-report-ranking-columns {
      min-height: 34px;
      padding: 0 12px;
      border-bottom: 1px solid rgba(17,17,19,.1);
      background: #f7f8fa;
      color: #90959c;
      font-size: 11px;
      font-weight: 900;
    }
    .d-report-rank-list {
      flex: 0 0 auto;
      min-height: 0;
      overflow: hidden;
    }
    .d-report-ranking-empty {
      min-height: 190px;
      padding: 36px 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #747a82;
      background: #fffaf7;
      text-align: center;
      font-size: 14px;
      line-height: 1.75;
      font-weight: 700;
    }
    .d-report-ranking.is-expanded .d-report-rank-list {
      flex: 1 1 auto;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
    }
    .d-report-ranking.is-expanded .d-report-rank-list::-webkit-scrollbar { width: 9px; }
    .d-report-ranking.is-expanded .d-report-rank-list::-webkit-scrollbar-track { background: #f1f3f5; }
    .d-report-ranking.is-expanded .d-report-rank-list::-webkit-scrollbar-thumb {
      border: 2px solid #f1f3f5;
      border-radius: 8px;
      background: #b8bdc4;
    }
    .d-report-rank-row {
      width: 100%;
      min-height: 44px;
      padding: 0 12px;
      border: 0;
      border-bottom: 1px solid #edf0f2;
      background: #fff;
      color: #4d535c;
      cursor: pointer;
      text-align: left;
      font-size: 12px;
      font-weight: 800;
    }
    .d-report-rank-row:hover { background: #fff6f0; }
    .d-report-rank-row.is-selected {
      background: #fff1e8;
      box-shadow: inset 3px 0 0 var(--orange);
    }
    .d-report-rank-row .rank-no { color: #8a9098; font-weight: 900; }
    .d-report-rank-row.is-top .rank-no { color: #df4312; }
    .d-report-rank-row .rank-city {
      overflow: hidden;
      color: #2c3037;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .d-report-rank-row .rank-value {
      color: #262a31;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
    .d-report-rank-row .rank-grade,
    .d-report-rank-row .rank-move {
      text-align: center;
      font-size: 11px;
      font-weight: 900;
    }
    .d-grade-top { color: #df4312; }
    .d-grade-high { color: var(--orange); }
    .d-grade-upper { color: #c78616; }
    .d-grade-mid { color: #26805d; }
    .d-grade-low { color: #3975a7; }
    .d-grade-bottom { color: #737a84; }
    .d-rank-up { color: #df4312; }
    .d-rank-down { color: #26805d; }
    .d-rank-same { color: #9a9fa6; }
    .d-report-ranking-toggle {
      min-height: 52px;
      border: 0;
      border-top: 1px solid rgba(17,17,19,.1);
      background: #fff;
      color: var(--orange);
      cursor: pointer;
      font-size: 13px;
      font-weight: 900;
    }
    .d-report-ranking-toggle:hover { background: #fff3eb; }

    #monthly-report-view .secondary-search-panel .field label { font-size: 14px; }
    #monthly-report-view .report-viewer-head > span { font-size: 15px; }
    .d-report-summary-item span { font-size: 14px; }
    .d-report-summary-item small { font-size: 13px; }
    .d-report-summary-item small .d-summary-scale { font-size: 13px; }
    .d-report-reading-guide { font-size: 15px; }
    .d-report-reading-guide strong { font-size: 16px; }
    .d-report-section-head p,
    .d-report-mini-head p { font-size: 14px; }
    .d-report-section-head > b { font-size: 14px; }
    .d-report-peak-head > div span,
    .d-report-peak-head > b small,
    .d-road-values,
    .d-road-caption,
    .d-report-legend,
    .d-report-performance > p,
    .d-report-performance-list span b,
    .d-report-method { font-size: 13px; }
    .d-report-performance-list span small { font-size: 12px; }
    .d-report-tooltip strong { font-size: 15px; }
    .d-report-tooltip span { font-size: 13px; }
    .d-report-single-legend,
    .d-report-trend-foot { font-size: 14px; }
    .d-report-ranking-head span,
    .d-ranking-sort-toggle { font-size: 13px; }
    .d-report-ranking-columns,
    .d-report-rank-row .rank-grade,
    .d-report-rank-row .rank-move { font-size: 12px; }
    .d-report-rank-row { font-size: 13px; }
    .d-report-ranking-toggle { font-size: 14px; }
    .d-report-ranking {
      background: #fffaf7;
    }
    .d-report-ranking-head {
      background: #fff9f5;
    }
    .d-report-ranking-columns {
      color: #806d61;
      background: #fff2e8;
    }
    .d-report-rank-row { background: #fffaf7; }
    .d-report-rank-row:nth-child(even) { background: #fff7f1; }
    .d-report-rank-row:hover { background: #fff0e5; }
    .d-report-rank-row.is-selected { background: #ffeadd; }
    .d-report-ranking-toggle { background: #fff9f5; }

    @media (max-width: 1120px) {
      .d-report-dashboard { grid-template-columns: minmax(0, 1fr) 350px; }
      .d-report-summary-item { padding-left: 14px; padding-right: 14px; }
      .d-report-summary-item strong { font-size: 22px; }
      .d-report-diagnostic-body { grid-template-columns: 1fr; }
      .d-report-performance {
        border-top: 1px solid rgba(17,17,19,.1);
        border-left: 0;
      }
    }
    @media (max-width: 900px) {
      .secondary-search-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #monthly-report-view .secondary-search-panel .field:last-child { grid-column: 1 / -1; }
      .d-report-dashboard { grid-template-columns: 1fr; }
      .d-report-analysis { border-right: 0; }
      .d-report-ranking {
        height: auto !important;
        border-top: 1px solid rgba(17,17,19,.1);
      }
      .d-report-rank-list { min-height: 585px; }
      .d-report-ranking.is-expanded .d-report-rank-list {
        height: min(70vh, 720px);
        min-height: 420px;
      }
    }
    @media (max-width: 640px) {
      .d-report-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .d-report-summary-item { height: 120px; border-bottom: 1px solid rgba(17,17,19,.1); }
      .d-report-summary-item small .d-summary-scale {
        font-size: 12px;
        white-space: normal;
      }
      .d-report-summary-item:nth-child(2) { border-right: 0; }
      .d-report-summary-item:nth-child(n + 3) { border-bottom: 0; }
      .d-report-section-head {
        padding: 18px 14px;
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
      }
      .d-report-peak-band { grid-template-columns: 1fr; }
      .d-report-peak { padding: 18px 14px; }
      .d-report-peak + .d-report-peak {
        border-top: 1px solid rgba(17,17,19,.1);
        border-left: 0;
      }
      .d-report-peak-chart-panel,
      .d-report-performance,
      .d-report-trend { padding: 18px 14px; }
      .d-report-mini-head {
        align-items: flex-start;
        flex-direction: column;
      }
      .d-report-peak-chart-wrap { height: 230px; }
      .d-report-method,
      .d-report-trend-foot {
        padding-left: 14px;
        padding-right: 14px;
        align-items: flex-start;
        flex-direction: column;
      }
      .d-report-trend .d-report-section-head { padding: 0 0 16px; }
      .d-report-reading-guide { padding: 12px 14px; }
      .d-report-ranking-columns,
      .d-report-rank-row {
        grid-template-columns: 48px minmax(62px, 1fr) 54px 48px 48px;
        gap: 3px;
        padding-left: 8px;
        padding-right: 8px;
      }
    }

    /* Traffic D dashboard: restrained system-style visual layer */
    #monthly-report-view .report-viewer {
      overflow: visible;
      border-top: 0;
      background: transparent;
      box-shadow: none;
    }
    #monthly-report-view .report-viewer-head {
      margin-bottom: 16px;
      border: 1px solid rgba(29,29,31,.1);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 8px 24px rgba(0,0,0,.045);
    }
    #monthly-report-view .monthly-report-content {
      padding: 24px;
      display: grid;
      gap: 20px;
      border-top: 0;
      background: #f5f5f7;
    }
    #monthly-report-view .d-report-dashboard {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 390px;
      gap: 20px;
      align-items: start;
      background: transparent;
    }
    #monthly-report-view .d-report-analysis {
      min-width: 0;
      display: grid;
      gap: 20px;
      border-right: 0;
    }
    #monthly-report-view .d-report-lead {
      padding: 24px 4px 8px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: 28px;
    }
    #monthly-report-view .d-report-lead h2 {
      margin: 0;
      color: #1d1d1f;
      font-size: 40px;
      line-height: 1.13;
      font-weight: 750;
      letter-spacing: 0;
    }
    #monthly-report-view .d-report-lead p {
      max-width: 820px;
      margin: 14px 0 0;
      color: #626268;
      font-size: 17px;
      line-height: 1.7;
      font-weight: 520;
    }
    #monthly-report-view .d-report-lead-context {
      display: grid;
      gap: 10px;
      justify-items: end;
    }
    #monthly-report-view .d-report-lead-context span {
      min-height: 42px;
      padding: 0 14px;
      display: inline-flex;
      align-items: center;
      border: 1px solid rgba(29,29,31,.1);
      border-radius: 8px;
      color: #3a3a3c;
      background: rgba(255,255,255,.86);
      box-shadow: 0 2px 7px rgba(0,0,0,.035);
      font-size: 15px;
      font-weight: 650;
      white-space: nowrap;
    }
    #monthly-report-view .d-report-summary {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 14px;
      border: 0;
    }
    #monthly-report-view .d-report-summary-item {
      min-width: 0;
      height: auto;
      min-height: 196px;
      padding: 20px;
      display: grid;
      grid-template-rows: auto 46px minmax(76px, 1fr);
      align-content: stretch;
      gap: 18px;
      border: 1px solid rgba(29,29,31,.1);
      border-radius: 8px;
      background: rgba(255,255,255,.94);
      box-shadow: 0 18px 50px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
      transform: translateY(0) scale(1);
      transition: transform .42s cubic-bezier(.2,1.35,.42,1), box-shadow .3s ease, border-color .3s ease;
    }
    #monthly-report-view .d-report-summary-item:hover {
      z-index: 2;
      border-color: rgba(29,29,31,.18);
      box-shadow: 0 24px 60px rgba(0,0,0,.09), 0 5px 14px rgba(0,0,0,.05);
      transform: translateY(-4px) scale(1.01);
    }
    #monthly-report-view .d-report-summary-item:active { transform: translateY(-1px) scale(.985); }
    #monthly-report-view .d-report-summary-item span {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: #626268;
      font-size: 15px;
      line-height: 1.4;
      font-weight: 650;
    }
    #monthly-report-view .d-report-summary-item span i {
      width: 28px;
      height: 28px;
      flex: 0 0 28px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(29,29,31,.1);
      border-radius: 7px;
      color: #86868b;
      background: #fafafa;
      font-size: 15px;
      font-style: normal;
      font-weight: 700;
    }
    #monthly-report-view .d-report-summary-item strong {
      min-height: 46px;
      display: flex;
      align-items: center;
      color: #1d1d1f;
      font-size: 34px;
      line-height: 1;
      font-weight: 730;
      font-variant-numeric: tabular-nums;
    }
    #monthly-report-view .d-report-summary-item.is-primary strong { color: var(--orange); }
    #monthly-report-view .d-report-summary-item strong.is-time { font-size: 24px; }
    #monthly-report-view .d-report-summary-item small {
      color: #626268;
      font-size: 15px;
      line-height: 1.55;
      font-weight: 520;
    }
    #monthly-report-view .d-report-diagnostic {
      display: grid;
      gap: 20px;
      border: 0;
    }
    #monthly-report-view .d-report-section-head {
      min-height: 0;
      padding: 18px 4px 0;
      border: 0;
    }
    #monthly-report-view .d-report-section-head h3,
    #monthly-report-view .d-report-mini-head h3,
    #monthly-report-view .d-report-performance h3,
    #monthly-report-view .d-report-ranking-head h3 {
      color: #1d1d1f;
      font-size: 21px;
      font-weight: 700;
    }
    #monthly-report-view .d-report-section-head p,
    #monthly-report-view .d-report-mini-head p,
    #monthly-report-view .d-report-performance > p {
      color: #626268;
      font-size: 15px;
      line-height: 1.6;
      font-weight: 520;
    }
    #monthly-report-view .d-report-section-head > b {
      color: var(--orange);
      font-size: 15px;
    }
    #monthly-report-view .d-report-peak-band,
    #monthly-report-view .d-report-peak-chart-panel,
    #monthly-report-view .d-report-performance,
    #monthly-report-view .d-report-trend,
    #monthly-report-view .d-report-ranking {
      overflow: hidden;
      border: 1px solid rgba(29,29,31,.1);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 18px 50px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
    }
    #monthly-report-view .d-report-peak-band {
      border-bottom: 1px solid rgba(29,29,31,.1);
    }
    #monthly-report-view .d-report-peak {
      padding: 24px;
    }
    #monthly-report-view .d-report-peak + .d-report-peak { border-left-color: rgba(29,29,31,.1); }
    #monthly-report-view .d-report-peak-head > div span,
    #monthly-report-view .d-report-peak-head > b small,
    #monthly-report-view .d-road-caption,
    #monthly-report-view .d-road-values {
      color: #626268;
      font-size: 15px;
      line-height: 1.5;
      font-weight: 550;
    }
    #monthly-report-view .d-report-peak-head > div strong { font-size: 17px; }
    #monthly-report-view .d-report-peak-head > b { font-size: 27px; }
    #monthly-report-view .d-road-track {
      height: 15px;
      border-radius: 5px;
    }
    #monthly-report-view .d-report-diagnostic-body {
      display: grid;
      grid-template-columns: minmax(0, 1.42fr) minmax(300px, .88fr);
      gap: 20px;
      border: 0;
    }
    #monthly-report-view .d-report-peak-chart-panel {
      padding: 24px;
      display: flex;
      flex-direction: column;
    }
    #monthly-report-view .d-report-mini-head { margin-bottom: 18px; }
    #monthly-report-view .d-report-legend {
      color: #626268;
      font-size: 15px;
      font-weight: 650;
    }
    #monthly-report-view .d-report-peak-chart-wrap {
      height: auto;
      min-height: 560px;
      flex: 1 1 auto;
      border: 0;
    }
    #monthly-report-view .d-report-performance {
      padding: 24px;
      border-left: 1px solid rgba(29,29,31,.1);
      background: #fff;
    }
    #monthly-report-view .d-report-performance > p { margin: 7px 0 16px; }
    #monthly-report-view .d-report-performance-list { border-top-color: rgba(29,29,31,.1); }
    #monthly-report-view .d-report-performance-list > div {
      min-height: 88px;
      padding: 14px 0;
      gap: 18px;
      border-bottom-color: rgba(29,29,31,.1);
    }
    #monthly-report-view .d-report-performance-list span { gap: 6px; }
    #monthly-report-view .d-report-performance-list span b {
      color: #1d1d1f;
      font-size: 16px;
      line-height: 1.4;
      font-weight: 650;
    }
    #monthly-report-view .d-report-performance-list span small {
      color: #626268;
      font-size: 15px;
      line-height: 1.55;
      font-weight: 520;
    }
    #monthly-report-view .d-report-performance-list strong {
      color: #1d1d1f;
      font-size: 18px;
      line-height: 1.25;
      font-weight: 730;
    }
    #monthly-report-view .d-report-performance-list strong.is-emphasis { color: var(--orange); }
    #monthly-report-view .d-report-method {
      min-height: 54px;
      padding: 12px 4px;
      color: #626268;
      font-size: 15px;
      line-height: 1.6;
      font-weight: 520;
    }
    #monthly-report-view .d-report-tooltip {
      min-width: 218px;
      padding: 13px 15px;
      border: 1px solid rgba(29,29,31,.12);
      border-radius: 8px;
      color: #1d1d1f;
      background: rgba(255,255,255,.95);
      box-shadow: 0 14px 34px rgba(0,0,0,.12);
      backdrop-filter: blur(16px);
    }
    #monthly-report-view .d-report-tooltip strong {
      color: #1d1d1f;
      font-size: 16px;
    }
    #monthly-report-view .d-report-tooltip span {
      color: #626268;
      font-size: 15px;
      line-height: 1.5;
    }
    #monthly-report-view .d-report-trend {
      padding: 0;
    }
    #monthly-report-view .d-report-trend .d-report-section-head {
      min-height: 104px;
      padding: 22px 24px 18px;
      border-bottom: 1px solid rgba(29,29,31,.1);
    }
    #monthly-report-view .d-report-single-legend {
      color: #626268;
      font-size: 15px;
      font-weight: 650;
    }
    #monthly-report-view .d-report-month-summary {
      min-height: 86px;
      padding: 0 24px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      border-bottom: 1px solid rgba(29,29,31,.1);
    }
    #monthly-report-view .d-report-month-summary > div {
      min-width: 0;
      padding: 18px 20px;
      display: grid;
      gap: 7px;
      border-left: 1px solid rgba(29,29,31,.1);
    }
    #monthly-report-view .d-report-month-summary > div:first-child {
      padding-left: 0;
      border-left: 0;
    }
    #monthly-report-view .d-report-month-summary span {
      color: #626268;
      font-size: 15px;
      line-height: 1.4;
    }
    #monthly-report-view .d-report-month-summary strong {
      color: #1d1d1f;
      font-size: 23px;
      line-height: 1;
      font-weight: 730;
      font-variant-numeric: tabular-nums;
    }
    #monthly-report-view .d-report-month-summary strong.is-emphasis { color: var(--orange); }
    #monthly-report-view .d-report-trend .monthly-chart-wrap {
      height: 370px;
      border: 0;
      background: rgba(255,255,255,.54);
    }
    #monthly-report-view .d-report-trend-foot {
      min-height: 58px;
      padding: 12px 24px;
      border-top: 1px solid rgba(29,29,31,.1);
      color: #626268;
      font-size: 15px;
      line-height: 1.5;
      font-weight: 550;
    }
    #monthly-report-view .d-report-ranking {
      min-width: 0;
      align-self: start;
      background: #fffbf8;
    }
    #monthly-report-view .d-report-ranking-head {
      min-height: 0;
      padding: 16px 20px;
      align-items: flex-start;
      gap: 14px;
      background: #fffcfa;
    }
    #monthly-report-view .d-report-ranking-head > div {
      min-width: 0;
      flex: 1 1 auto;
    }
    #monthly-report-view .d-report-ranking-head h3 {
      font-size: 20px;
    }
    #monthly-report-view .d-report-ranking-head span,
    #monthly-report-view .d-report-ranking-head small {
      display: block;
      color: #626268;
      font-size: 15px;
      line-height: 1.5;
      font-weight: 520;
    }
    #monthly-report-view .d-report-ranking-head small {
      margin-top: 7px;
      color: #86868b;
    }
    #monthly-report-view .d-ranking-sort-toggle {
      width: 90px;
      min-width: 90px;
      min-height: 40px;
      padding: 0 12px;
      flex: 0 0 90px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-color: rgba(29,29,31,.14);
      border-radius: 7px;
      color: #1d1d1f;
      background: #fff;
      box-shadow: 0 2px 7px rgba(0,0,0,.05);
      font-size: 15px;
      white-space: nowrap;
      transition: color .2s ease, border-color .2s ease, transform .4s cubic-bezier(.2,1.35,.42,1), box-shadow .3s ease;
    }
    #monthly-report-view .d-ranking-sort-toggle:hover {
      border-color: rgba(255,107,22,.42);
      color: var(--orange);
      background: #fff;
      box-shadow: 0 7px 18px rgba(0,0,0,.08);
      transform: translateY(-2px);
    }
    #monthly-report-view .d-ranking-sort-toggle:active { transform: scale(.94); }
    #monthly-report-view .d-report-ranking-columns,
    #monthly-report-view .d-report-rank-row {
      grid-template-columns: 52px minmax(82px, 1fr) 58px 54px 54px;
      gap: 5px;
    }
    #monthly-report-view .d-report-ranking-columns {
      min-height: 42px;
      padding: 0 12px;
      color: #86868b;
      background: #fff6f0;
      font-size: 15px;
    }
    #monthly-report-view .d-report-rank-row {
      min-height: 58px;
      background: #fffcfa;
      color: #3a3a3c;
      font-size: 15px;
      transition: background .2s ease, transform .25s cubic-bezier(.2,1.35,.42,1);
    }
    #monthly-report-view .d-report-rank-row:nth-child(even) { background: #fff9f5; }
    #monthly-report-view .d-report-rank-row:hover {
      background: #fff5ee;
      transform: translateX(2px);
    }
    #monthly-report-view .d-report-rank-row.is-selected { background: #fff0e6; }
    #monthly-report-view .d-report-rank-row .rank-grade,
    #monthly-report-view .d-report-rank-row .rank-move { font-size: 15px; }
    #monthly-report-view .d-report-ranking-toggle {
      min-height: 56px;
      background: #fffbf8;
      font-size: 15px;
    }
    #monthly-report-view .d-report-ranking-toggle:hover { background: #fff5ee; }
    #monthly-report-view .d-ranking-sort-toggle:disabled,
    #monthly-report-view .d-ranking-sort-toggle:disabled:hover,
    #monthly-report-view .d-report-ranking-toggle:disabled,
    #monthly-report-view .d-report-ranking-toggle:disabled:hover {
      color: #a7abb0;
      border-color: #e2e4e7;
      background: #fafafa;
      box-shadow: none;
      transform: none;
      cursor: not-allowed;
    }

    @keyframes dDashboardBreatheIn {
      0% { opacity: 0; transform: translateY(20px) scale(.972); filter: saturate(.82); }
      68% { opacity: 1; transform: translateY(-3px) scale(1.008); filter: saturate(1.03); }
      100% { opacity: 1; transform: translateY(0) scale(1); filter: saturate(1); }
    }
    @keyframes dDashboardFadeUp {
      0% { opacity: 0; transform: translateY(16px); }
      72% { opacity: 1; transform: translateY(-2px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    @keyframes dDashboardGrowTrack {
      0% { transform: scaleX(0); opacity: .45; }
      100% { transform: scaleX(1); opacity: 1; }
    }
    #monthly-report-view .monthly-report-content.is-entering .d-report-lead {
      animation: dDashboardFadeUp .72s cubic-bezier(.2,1.2,.42,1) both;
    }
    #monthly-report-view .monthly-report-content.is-entering .d-report-summary-item {
      animation: dDashboardBreatheIn .76s cubic-bezier(.2,1.35,.42,1) both;
    }
    #monthly-report-view .monthly-report-content.is-entering .d-report-summary-item:nth-child(1) { animation-delay: .05s; }
    #monthly-report-view .monthly-report-content.is-entering .d-report-summary-item:nth-child(2) { animation-delay: .11s; }
    #monthly-report-view .monthly-report-content.is-entering .d-report-summary-item:nth-child(3) { animation-delay: .17s; }
    #monthly-report-view .monthly-report-content.is-entering .d-report-summary-item:nth-child(4) { animation-delay: .23s; }
    #monthly-report-view .monthly-report-content.is-entering .d-report-summary-item:nth-child(5) { animation-delay: .29s; }
    #monthly-report-view .monthly-report-content.is-entering .d-report-diagnostic > .d-report-section-head {
      animation: dDashboardFadeUp .65s .31s cubic-bezier(.2,1.2,.42,1) both;
    }
    #monthly-report-view .monthly-report-content.is-entering .d-report-peak-band {
      animation: dDashboardBreatheIn .78s .35s cubic-bezier(.2,1.35,.42,1) both;
    }
    #monthly-report-view .monthly-report-content.is-entering .d-report-diagnostic-body {
      animation: dDashboardBreatheIn .8s .41s cubic-bezier(.2,1.35,.42,1) both;
    }
    #monthly-report-view .monthly-report-content.is-entering .d-report-method {
      animation: dDashboardFadeUp .62s .47s cubic-bezier(.2,1.2,.42,1) both;
    }
    #monthly-report-view .monthly-report-content.is-entering .d-report-trend {
      animation: dDashboardBreatheIn .82s .51s cubic-bezier(.2,1.35,.42,1) both;
    }
    #monthly-report-view .monthly-report-content.is-entering .d-report-ranking {
      animation: dDashboardBreatheIn .8s .36s cubic-bezier(.2,1.35,.42,1) both;
    }
    #monthly-report-view .monthly-report-content.is-entering .d-road-track span {
      transform-origin: left center;
      animation: dDashboardGrowTrack .9s .48s cubic-bezier(.22,.8,.22,1) both;
    }
    #monthly-report-view .monthly-report-content.is-entering .d-report-rank-row {
      animation: dDashboardFadeUp .46s cubic-bezier(.2,1.2,.42,1) both;
      animation-delay: calc(.4s + var(--rank-delay, 0ms));
    }

    @media (max-width: 1180px) {
      #monthly-report-view .d-report-dashboard { grid-template-columns: minmax(0, 1fr) 350px; }
      #monthly-report-view .d-report-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      #monthly-report-view .d-report-diagnostic-body { grid-template-columns: 1fr; }
    }
    @media (max-width: 900px) {
      #monthly-report-view .monthly-report-content { padding: 18px; }
      #monthly-report-view .d-report-dashboard { grid-template-columns: 1fr; }
      #monthly-report-view .d-report-lead {
        grid-template-columns: 1fr;
        align-items: start;
      }
      #monthly-report-view .d-report-lead-context {
        grid-template-columns: repeat(2, minmax(0, auto));
        justify-content: start;
      }
      #monthly-report-view .d-report-ranking,
      #monthly-report-view .d-report-ranking.is-expanded {
        height: auto !important;
        align-self: auto;
      }
      #monthly-report-view .d-report-rank-list { min-height: 0; }
      #monthly-report-view .d-report-ranking.is-expanded .d-report-rank-list {
        height: min(70vh, 720px);
        min-height: 420px;
      }
    }
    @media (max-width: 640px) {
      #monthly-report-view .monthly-report-content { padding: 14px; }
      #monthly-report-view .d-report-lead { padding: 18px 2px 4px; }
      #monthly-report-view .d-report-lead h2 { font-size: 31px; }
      #monthly-report-view .d-report-lead p { font-size: 16px; }
      #monthly-report-view .d-report-lead-context { grid-template-columns: 1fr; }
      #monthly-report-view .d-report-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #monthly-report-view .d-report-summary-item {
        min-height: 188px;
        padding: 18px;
        grid-template-rows: auto 42px minmax(80px, 1fr);
      }
      #monthly-report-view .d-report-summary-item strong {
        min-height: 42px;
        font-size: 24px;
      }
      #monthly-report-view .d-report-summary-item strong.is-time,
      #monthly-report-view #d-summary-rank { font-size: 21px; }
      #monthly-report-view .d-report-summary-item:last-child { grid-column: 1 / -1; }
      #monthly-report-view .d-report-section-head {
        padding: 14px 2px 0;
      }
      #monthly-report-view .d-report-peak { padding: 20px; }
      #monthly-report-view .d-report-peak-chart-panel,
      #monthly-report-view .d-report-performance { padding: 20px; }
      #monthly-report-view .d-report-peak-chart-wrap {
        height: auto;
        min-height: 480px;
      }
      #monthly-report-view .d-report-method {
        padding-left: 2px;
        padding-right: 2px;
      }
      #monthly-report-view .d-report-trend .d-report-section-head {
        padding: 20px;
      }
      #monthly-report-view .d-report-month-summary {
        grid-template-columns: 1fr;
      }
      #monthly-report-view .d-report-month-summary > div,
      #monthly-report-view .d-report-month-summary > div:first-child {
        padding: 16px 0;
        border-left: 0;
        border-top: 1px solid rgba(29,29,31,.1);
      }
      #monthly-report-view .d-report-month-summary > div:first-child { border-top: 0; }
      #monthly-report-view .d-report-trend .monthly-chart-wrap { height: 340px; }
      #monthly-report-view .d-report-trend-foot {
        padding: 14px 20px;
        align-items: flex-start;
        flex-direction: column;
      }
      #monthly-report-view .d-report-ranking-columns,
      #monthly-report-view .d-report-rank-row {
        grid-template-columns: 44px minmax(70px, 1fr) 56px 50px;
      }
      #monthly-report-view .d-report-ranking-columns span:last-child,
      #monthly-report-view .d-report-rank-row .rank-move { display: none; }
    }


       /* Traffic D index monthly workspace */
    #monthly-report-view .monthly-panel.dx-monthly-panel {
      padding: 26px 0 72px;
      background: #f5f6f7;
    }
    .dx-index-intro,
    .dx-period-bar,
    .dx-report-layout {
      width: min(1400px, calc(100% - 48px));
      margin-left: auto;
      margin-right: auto;
    }
    .dx-index-intro {
      overflow: hidden;
      border-top: 3px solid var(--orange);
      border-bottom: 1px solid rgba(17,17,19,.1);
      background: #fff;
      box-shadow: 0 14px 36px rgba(17,17,19,.06);
    }
    .dx-index-intro-main {
      padding: 34px 38px 28px;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 38px;
      align-items: start;
    }
    .dx-index-eyebrow {
      display: block;
      margin-bottom: 9px;
      color: var(--orange);
      font-size: 15px;
      font-weight: 900;
    }
    .dx-index-intro h1 {
      margin: 0;
      color: #111318;
      font-size: 34px;
      line-height: 1.22;
      letter-spacing: 0;
    }
    .dx-index-intro-main p {
      max-width: 800px;
      margin: 14px 0 0;
      color: #555d67;
      font-size: 17px;
      line-height: 1.85;
    }
    .dx-grade-scale {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      border-top: 1px solid rgba(17,17,19,.09);
    }
    .dx-grade-scale > div {
      min-height: 84px;
      padding: 15px 18px;
      border-right: 1px solid rgba(17,17,19,.08);
      background: #fff;
    }
    .dx-grade-scale > div:last-child { border-right: 0; }
    .dx-grade-scale strong,
    .dx-grade-scale span { display: block; }
    .dx-grade-scale strong { font-size: 16px; }
    .dx-grade-scale span {
      margin-top: 5px;
      color: #727982;
      font-size: 13px;
      line-height: 1.45;
    }
    .dx-grade-scale .is-low strong { color: #278263; }
    .dx-grade-scale .is-watch strong { color: #76802d; }
    .dx-grade-scale .is-mid strong { color: #a77700; }
    .dx-grade-scale .is-high strong { color: #d85b16; }
    .dx-grade-scale .is-severe strong { color: #cf3829; }
    .dx-grade-scale .is-critical strong { color: #9e1f1f; }

    .dx-period-bar {
      margin-top: 18px;
      padding: 18px 20px;
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 20px;
      border: 1px solid rgba(17,17,19,.1);
      background: #fff;
      box-shadow: 0 10px 28px rgba(17,17,19,.05);
    }
    .dx-period-controls {
      display: grid;
      grid-template-columns: 190px 190px;
      gap: 14px;
    }
    .dx-field label {
      display: block;
      margin-bottom: 7px;
      color: #25282d;
      font-size: 14px;
      font-weight: 800;
    }
    .dx-field select {
      width: 100%;
      height: 46px;
      padding: 0 40px 0 14px;
      border: 1px solid #d8dade;
      border-radius: 6px;
      background: #fff;
      color: #17191d;
      font-size: 16px;
    }
    .dx-period-status {
      max-width: 620px;
      text-align: right;
    }
    .dx-period-status strong,
    .dx-period-status span { display: block; }
    .dx-period-status strong {
      color: var(--orange);
      font-size: 15px;
    }
    .dx-period-status span {
      margin-top: 5px;
      color: #707780;
      font-size: 13px;
      line-height: 1.5;
    }

    .dx-report-layout {
      margin-top: 18px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 390px;
      gap: 18px;
      align-items: start;
    }
    .dx-report-main {
      min-width: 0;
      display: grid;
      gap: 18px;
    }
    .dx-kpi-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border: 1px solid rgba(17,17,19,.1);
      background: #fff;
      box-shadow: 0 10px 28px rgba(17,17,19,.05);
    }
    .dx-kpi {
      min-height: 128px;
      padding: 20px;
      border-right: 1px solid rgba(17,17,19,.09);
    }
    .dx-kpi:last-child { border-right: 0; }
    .dx-kpi span,
    .dx-kpi small { display: block; }
    .dx-kpi span {
      color: #656c75;
      font-size: 14px;
      font-weight: 800;
    }
    .dx-kpi strong {
      display: block;
      min-height: 42px;
      margin: 8px 0 4px;
      color: #17191d;
      font-size: 29px;
      line-height: 1.35;
    }
    .dx-kpi.is-primary strong { color: var(--orange); }
    .dx-kpi small {
      color: #7b8189;
      font-size: 13px;
      line-height: 1.5;
    }
    .dx-chart-section,
    .dx-auto-report,
    .dx-overview-card,
    .dx-city-analysis-card,
    .dx-ranking {
      border: 1px solid rgba(17,17,19,.1);
      background: #fff;
      box-shadow: 0 12px 34px rgba(17,17,19,.06);
    }
    .dx-overview-card,
    .dx-city-analysis-card { min-width: 0; }
    .dx-overview-card .dx-kpi-row {
      border: 0;
      border-bottom: 8px solid #f5f6f7;
      box-shadow: none;
    }
    .dx-overview-card > .dx-chart-section,
    .dx-city-analysis-card > .dx-chart-section,
    .dx-city-analysis-card > .dx-auto-report {
      border: 0;
      background: transparent;
      box-shadow: none;
    }
    .dx-city-analysis-card > .dx-chart-section + .dx-chart-section {
      border-top: 8px solid #f5f6f7;
    }
    .dx-city-analysis-card > .dx-auto-report {
      border-top: 3px solid var(--orange);
    }
    .dx-section-head {
      min-height: 86px;
      padding: 19px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      border-bottom: 1px solid rgba(17,17,19,.09);
    }
    .dx-section-head h2,
    .dx-section-head h3 {
      margin: 0;
      color: #17191d;
      font-size: 20px;
      line-height: 1.35;
    }
    .dx-section-head p {
      margin: 5px 0 0;
      color: #727983;
      font-size: 14px;
      line-height: 1.55;
    }
    .dx-chart-legend {
      display: flex;
      align-items: center;
      gap: 14px;
      color: #626871;
      font-size: 13px;
      white-space: nowrap;
    }
    .dx-chart-legend i {
      width: 18px;
      height: 3px;
      display: inline-block;
      margin-right: 5px;
      vertical-align: middle;
      background: var(--orange);
    }
    .dx-chart-legend .is-previous i { background: #7c858f; }
    .dx-chart-legend .is-cities i { background: #a7adb4; }
    .dx-chart-legend .is-average i { background: #25282d; }
    .dx-canvas-wrap {
      position: relative;
      height: 318px;
      padding: 18px 18px 10px;
    }
    .dx-canvas-wrap.is-compact { height: 270px; }
    .dx-canvas-wrap.is-bars { height: 330px; }
    .dx-canvas-wrap canvas {
      display: block;
      width: 100%;
      height: 100%;
    }
    .dx-canvas-wrap #dx-national-chart {
      cursor: crosshair;
      touch-action: pan-y;
    }
    .dx-chart-hover-line,
    .dx-chart-hover-dot,
    .dx-chart-tooltip {
      position: absolute;
      z-index: 3;
      pointer-events: none;
    }
    .dx-chart-hover-line {
      width: 1px;
      background: rgba(37, 40, 45, .28);
    }
    .dx-chart-hover-dot {
      width: 9px;
      height: 9px;
      border: 2px solid #fff;
      border-radius: 50%;
      background: var(--orange);
      box-shadow: 0 2px 8px rgba(20, 24, 30, .24);
      transform: translate(-50%, -50%);
    }
    .dx-chart-tooltip {
      min-width: 178px;
      max-width: 238px;
      padding: 11px 13px;
      border: 1px solid rgba(255, 107, 22, .22);
      border-top: 3px solid var(--orange);
      border-radius: 6px;
      background: rgba(255, 255, 255, .98);
      box-shadow: 0 10px 28px rgba(24, 29, 35, .16);
      color: #555c65;
      font-size: 13px;
      line-height: 1.55;
    }
    .dx-chart-tooltip strong,
    .dx-chart-tooltip span { display: block; }
    .dx-chart-tooltip strong {
      margin-bottom: 2px;
      color: #202328;
      font-size: 15px;
    }
    .dx-chart-tooltip b {
      color: var(--orange);
      font-size: 15px;
    }
    .dx-chart-tooltip[hidden],
    .dx-chart-hover-line[hidden],
    .dx-chart-hover-dot[hidden] { display: none; }
    .dx-chart-foot {
      min-height: 54px;
      padding: 12px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      border-top: 1px solid rgba(17,17,19,.08);
      color: #686f78;
      font-size: 13px;
      line-height: 1.5;
    }
    .dx-chart-foot strong { color: #26292e; }
    .dx-city-controls {
      display: grid;
      grid-template-columns: 170px 170px;
      gap: 10px;
      flex: 0 0 auto;
    }
    .dx-city-controls select {
      width: 100%;
      height: 42px;
      padding: 0 34px 0 12px;
      border: 1px solid #d8dade;
      border-radius: 5px;
      background: #fff;
      color: #202329;
      font-size: 14px;
    }
    .dx-auto-report {
      padding: 24px;
      display: grid;
      grid-template-columns: 160px minmax(0, 1fr);
      gap: 24px;
      align-items: stretch;
      border-top: 3px solid var(--orange);
    }
    .dx-auto-grade {
      min-height: 154px;
      display: grid;
      place-content: center;
      text-align: center;
      background: #fff5ee;
    }
    .dx-auto-grade span,
    .dx-auto-grade small { display: block; }
    .dx-auto-grade span { color: #7e552f; font-size: 14px; font-weight: 800; }
    .dx-auto-grade strong { color: var(--orange); font-size: 39px; line-height: 1.25; }
    .dx-auto-grade small { color: #6e747d; font-size: 13px; }
    .dx-auto-copy h3 { margin: 0; font-size: 23px; line-height: 1.4; }
    .dx-auto-copy p { margin: 10px 0 0; color: #59616b; font-size: 15px; line-height: 1.8; }
    .dx-auto-actions {
      margin-top: 13px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 9px;
    }
    .dx-auto-actions span {
      padding: 10px 11px;
      border-left: 3px solid #d8dce1;
      background: #f7f8f9;
      color: #4f5660;
      font-size: 13px;
      line-height: 1.55;
    }

    .dx-ranking {
      position: sticky;
      top: 88px;
      overflow: hidden;
      background: #fffaf7;
    }
    .dx-ranking-head {
      min-height: 94px;
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border-bottom: 1px solid rgba(17,17,19,.09);
    }
    .dx-ranking-head h2 { margin: 0; font-size: 20px; }
    .dx-ranking-head p { margin: 5px 0 0; color: #7b6c64; font-size: 13px; line-height: 1.45; }
    .dx-ranking-count {
      padding: 6px 8px;
      border: 1px solid rgba(255,107,22,.34);
      color: var(--orange);
      background: #fff;
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
    }
    .dx-ranking-columns,
    .dx-rank-row {
      display: grid;
      grid-template-columns: 48px minmax(90px, 1fr) 62px 58px;
      gap: 7px;
      align-items: center;
    }
    .dx-ranking-columns {
      min-height: 38px;
      padding: 0 16px;
      border-bottom: 1px solid rgba(17,17,19,.08);
      color: #8a7b73;
      font-size: 12px;
      font-weight: 800;
    }
    .dx-rank-list { overflow: hidden; }
    .dx-ranking.is-expanded .dx-rank-list {
      max-height: min(72vh, 900px);
      overflow-y: auto;
      scrollbar-color: rgba(255,107,22,.42) #fff4ec;
      scrollbar-width: thin;
    }
    .dx-rank-row {
      width: 100%;
      min-height: 50px;
      padding: 0 16px;
      border: 0;
      border-bottom: 1px solid rgba(17,17,19,.07);
      background: #fffaf7;
      color: #25282d;
      text-align: left;
      font-size: 13px;
    }
    button.dx-rank-row { cursor: pointer; }
    button.dx-rank-row:hover { background: #fff0e5; }
    button.dx-rank-row[aria-pressed="true"] { box-shadow: inset 4px 0 #1f2329; }
    .dx-rank-row.is-top { background: #fff5ee; }
    .dx-rank-row.is-benchmark {
      background: #fff1e7;
      box-shadow: inset 4px 0 var(--orange);
    }
    .dx-rank-no { color: #7c838c; font-weight: 900; }
    .dx-rank-row.is-top .dx-rank-no { color: var(--orange); }
    .dx-rank-city { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
    .dx-rank-value { font-variant-numeric: tabular-nums; font-weight: 900; }
    .dx-rank-grade { color: #d74b16; font-weight: 900; }
    .dx-ranking-fold {
      width: 100%;
      min-height: 54px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      border: 0;
      border-bottom: 1px solid rgba(17,17,19,.08);
      background: #fff;
      color: var(--orange);
      font-size: 14px;
      font-weight: 900;
      cursor: pointer;
    }
    .dx-ranking-fold::before,
    .dx-ranking-fold::after {
      content: "";
      width: 30px;
      border-top: 1px dashed rgba(255,107,22,.45);
    }
    .dx-ranking-foot {
      min-height: 56px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      color: #7a716b;
      background: #fff;
      font-size: 12px;
      line-height: 1.45;
    }
    .dx-empty {
      min-height: 220px;
      padding: 34px;
      display: grid;
      place-content: center;
      color: #747b84;
      text-align: center;
      font-size: 14px;
      line-height: 1.7;
    }

    @media (max-width: 1180px) {
      .dx-index-intro-main { grid-template-columns: 1fr; align-items: start; }
      .dx-report-layout { grid-template-columns: 1fr; }
      .dx-ranking { position: static; }
      .dx-ranking.is-expanded .dx-rank-list { max-height: 680px; }
    }
    @media (max-width: 900px) {
      .dx-index-intro,
      .dx-period-bar,
      .dx-report-layout { width: calc(100% - 36px); }
      .dx-index-intro-main { padding: 28px; }
      .dx-index-intro h1 { font-size: 30px; }
      .dx-grade-scale { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .dx-grade-scale > div:nth-child(3) { border-right: 0; }
      .dx-grade-scale > div:nth-child(-n + 3) { border-bottom: 1px solid rgba(17,17,19,.08); }
      .dx-period-bar { align-items: stretch; flex-direction: column; }
      .dx-period-status { max-width: none; text-align: left; }
      .dx-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .dx-kpi:nth-child(2) { border-right: 0; }
      .dx-kpi:nth-child(-n + 2) { border-bottom: 1px solid rgba(17,17,19,.09); }
    }
    @media (max-width: 640px) {
      #monthly-report-view .monthly-panel.dx-monthly-panel { padding-top: 14px; }
      .dx-index-intro,
      .dx-period-bar,
      .dx-report-layout { width: calc(100% - 28px); }
      .dx-index-intro-main { padding: 23px 20px; gap: 22px; }
      .dx-index-intro h1 { font-size: 27px; }
      .dx-index-intro-main p { font-size: 15px; }
      .dx-grade-scale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .dx-grade-scale > div:nth-child(odd) { border-right: 1px solid rgba(17,17,19,.08); }
      .dx-grade-scale > div:nth-child(even) { border-right: 0; }
      .dx-grade-scale > div:nth-child(-n + 4) { border-bottom: 1px solid rgba(17,17,19,.08); }
      .dx-period-bar { padding: 16px; }
      .dx-period-controls { width: 100%; grid-template-columns: 1fr 1fr; }
      .dx-kpi { min-height: 142px; padding: 17px; }
      .dx-kpi strong { font-size: 25px; }
      .dx-section-head { padding: 17px; align-items: flex-start; flex-direction: column; }
      .dx-section-head h2,
      .dx-section-head h3 { font-size: 19px; }
      .dx-chart-legend { white-space: normal; }
      .dx-canvas-wrap { height: 290px; padding: 12px 8px 8px; }
      .dx-canvas-wrap.is-compact { height: 250px; }
      .dx-canvas-wrap.is-bars { height: 310px; }
      .dx-chart-foot { align-items: flex-start; flex-direction: column; }
      .dx-city-controls { width: 100%; grid-template-columns: 1fr; }
      .dx-auto-report { padding: 18px; grid-template-columns: 1fr; }
      .dx-auto-grade { min-height: 118px; }
      .dx-auto-actions { grid-template-columns: 1fr; }
      .dx-ranking-columns,
      .dx-rank-row { grid-template-columns: 42px minmax(76px, 1fr) 58px 52px; gap: 4px; }
      .dx-ranking-columns,
      .dx-rank-row { padding-left: 10px; padding-right: 10px; }
    }