.current-listing-v2,
.overall-analytics-v2,
.traffic-overview {
    --provider-ink: #0b1d45;
    --provider-muted: #617398;
    --provider-border: #dce4f0;
    max-width: 1200px;
}

.current-listing-v2,
.overall-analytics-v2 .analytics-panel {
    border: 1px solid #e1e7ef;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(18, 45, 83, .08);
}

.current-listing-v2 {
    padding: 16px 16px 14px;
}

.current-listing-v2 .listing-heading,
.overall-analytics-v2 .analytics-heading,
.current-listing-v2 .listing-grid,
.overall-analytics-v2 .analytics-grid { gap: 14px; }

.current-listing-v2 .listing-heading__icon,
.overall-analytics-v2 .analytics-heading__icon {
    width: 44px;
    height: 44px;
    color: #1760c9;
    background: #eef4ff;
}

.current-listing-v2 .listing-heading__icon svg,
.overall-analytics-v2 .analytics-heading__icon svg { width: 24px; height: 24px; }
.current-listing-v2 .listing-heading__copy { min-width: 0; }

.current-listing-v2 .listing-total {
    gap: 9px;
    padding: 9px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f7faff, #f1f5fb);
}

.current-listing-v2 .listing-total__chart {
    width: 28px;
    height: 28px;
    background: conic-gradient(#1663d6 0 75%, #dce9ff 75% 100%);
}

.current-listing-v2 .listing-total__chart::after {
    content: "";
    position: absolute;
    top: 0;
    left: 13px;
    width: 2px;
    height: 14px;
    background: #fff;
}

.current-listing-v2 .listing-total__label { color: #53658c; font-size: 11px; line-height: 1.1; }
.current-listing-v2 .listing-total__value { color: #064bbb; font-size: 19px; line-height: 1.15; }
.current-listing-v2 .listing-divider { height: 1px; margin: 14px 0 16px; background: var(--provider-border); }
.current-listing-v2 .listing-grid,
.overall-analytics-v2 .analytics-grid,
.traffic-overview__grid,
.traffic-metrics { display: grid; }
.current-listing-v2 .listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.current-listing-v2 .listing-column { border: 1px solid var(--provider-border); border-radius: 8px; }

.current-listing-v2 .listing-row {
    min-height: 49px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--provider-border);
    color: var(--provider-ink);
}

.current-listing-v2 .listing-row:last-child { border-bottom: 0; }
.current-listing-v2 .listing-row__icon { width: 32px; height: 32px; margin-right: 14px; border-radius: 9px; }
.current-listing-v2 .listing-row__icon svg { width: 19px; height: 19px; }
.current-listing-v2 .listing-row__label { font-size: 12px; line-height: 1.25; }
.current-listing-v2 .listing-row__count { padding-left: 10px; color: #034dc1; font-size: 15px; }
.tone-blue { color: #3477dd; background: #e6efff; }
.tone-green { color: #39af64; background: #e6f8ea; }
.tone-purple { color: #7751d7; background: #f0e9ff; }
.tone-amber { color: #e69500; background: #fff3d8; }
.tone-teal { color: #0fa7ae; background: #ddf7f5; }
.tone-red { color: #e85166; background: #ffe7eb; }
.tone-slate { color: #567294; background: #eaf0f6; }
.tone-orange { color: #ed6b27; background: #fff0e6; }

.current-listing-v2 .listing-note {
    gap: 11px;
    margin-top: 13px;
    padding: 9px 11px;
    border: 1px solid #d7e3f7;
    border-radius: 8px;
    background: #f7faff;
    color: #52678f;
    font-size: 11px;
}

.current-listing-v2 .listing-note__icon {
    width: 20px;
    height: 20px;
    background: #1761ce;
    color: #fff;
    font-size: 12px;
}

@media (max-width: 991px) {
    .current-listing-v2 .listing-total { padding: 8px 12px; }
    .current-listing-v2 .listing-row__icon { margin-right: 12px; }
    .overall-analytics-v2 .metric-grid--three { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .current-listing-v2 { padding-right: 12px; padding-left: 12px; }
    .current-listing-v2 .listing-heading { gap: 12px; }
    .current-listing-v2 .listing-total { width: 100%; }
    .current-listing-v2 .listing-divider { margin: 16px 0; }
    .current-listing-v2 .listing-grid { grid-template-columns: 1fr; gap: 12px; }
    .overall-analytics-v2 .analytics-grid { grid-template-columns: 1fr; }
    .overall-analytics-v2 .analytics-panel { padding: 12px; }
}

.overall-analytics-v2 > h2 { margin-bottom: 5px; }
.overall-analytics-v2 .analytics-intro { margin: 0 0 13px; color: var(--provider-muted); font-size: 12px; }
.overall-analytics-v2 .analytics-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }

.overall-analytics-v2 .analytics-panel {
    min-width: 0;
    padding: 16px;
}

.overall-analytics-v2 .analytics-heading { margin-bottom: 14px; }
.overall-analytics-v2 .analytics-section { margin-bottom: 12px; }
.overall-analytics-v2 .analytics-section,
.traffic-group { overflow: hidden; border: 1px solid var(--provider-border); border-left: 3px solid var(--section-color); border-radius: 8px; }
.overall-analytics-v2 .analytics-section:last-child { margin-bottom: 0; }
.overall-analytics-v2 .analytics-section--red,
.traffic-overview .analytics-section--red { --section-color: #ef3d4d; --section-soft: #fff3f5; --section-soft-border: #fbd7dd; }
.overall-analytics-v2 .analytics-section--purple,
.traffic-overview .analytics-section--purple { --section-color: #7045d5; --section-soft: #f5f1ff; --section-soft-border: #e4dafb; }
.overall-analytics-v2 .analytics-section--blue,
.traffic-overview .analytics-section--blue { --section-color: #2875dc; --section-soft: #eef5ff; --section-soft-border: #d4e5fb; }
.overall-analytics-v2 .analytics-section--green,
.traffic-overview .analytics-section--green { --section-color: #36a95c; --section-soft: #effaf2; --section-soft-border: #d4efdc; }
.overall-analytics-v2 .analytics-section--orange,
.traffic-overview .analytics-section--orange { --section-color: #f2752b; --section-soft: #fff5ee; --section-soft-border: #f8dfcf; }

.overall-analytics-v2 .analytics-section__title {
    gap: 9px;
    padding: 9px 10px 5px;
    color: var(--section-color);
    font-size: 12px;
}

.overall-analytics-v2 .analytics-section__icon,
.overall-analytics-v2 .metric__icon,
.traffic-group__badge,
.traffic-metric__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    color: var(--section-color);
    background: var(--section-soft);
}

.overall-analytics-v2 .analytics-section__icon { width: 29px; height: 29px; }
.overall-analytics-v2 .analytics-section__icon svg { width: 17px; height: 17px; }
.overall-analytics-v2 .metric-grid { display: grid; gap: 8px; padding: 0 10px 10px; }
.overall-analytics-v2 .metric-grid,
.traffic-metrics--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.overall-analytics-v2 .metric-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.overall-analytics-v2 .metric {
    min-height: 62px;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 8px;
}

.overall-analytics-v2 .metric,
.traffic-metric { border: 1px solid var(--section-soft-border); background: var(--section-soft); }

.overall-analytics-v2 .metric__icon { width: 36px; height: 36px; }
.overall-analytics-v2 .metric__icon svg { width: 20px; height: 20px; }
.overall-analytics-v2 .metric__value { color: var(--section-color); font-size: 18px; line-height: 1.05; }
.overall-analytics-v2 .metric__label { margin-top: 3px; color: #435579; font-size: 10px; line-height: 1.25; }
.overall-analytics-v2 .analytics-app .metric-grid { grid-template-columns: 1fr; }

@media (max-width: 420px) {
    .overall-analytics-v2 .metric-grid { grid-template-columns: 1fr; }
}

/* HAR.com Traffic Overview */
.traffic-overview {
    --traffic-ink: #101b36;
    --traffic-muted: #52617d;
    width: 100%;
    padding: 26px;
    border: 1px solid #dfe5eb;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(25, 43, 74, .05);
}

.traffic-overview__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 23px;
}

.traffic-overview__title { color: var(--traffic-ink); font-size: 24px; line-height: 1.2; }
.traffic-overview__intro { color: var(--traffic-muted); font-size: 14px; }
.traffic-overview__date {
    gap: 11px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid #d8e0eb;
    border-radius: 5px;
    color: #3e506e;
    font-size: 12px;
}
.traffic-overview__date > svg:first-child { width: 18px; height: 18px; }
.traffic-overview__date .traffic-overview__chevron { width: 13px; height: 13px; margin-left: 13px; }
.traffic-overview__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6.4fr); gap: 14px; }

.traffic-group {
    min-width: 0;
}
.traffic-group__header { display: flex; align-items: center; gap: 13px; padding: 15px 18px 10px; }
.traffic-group__badge {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
}
.traffic-group__badge svg,
.traffic-metric--stacked .traffic-metric__icon svg { width: 25px; height: 25px; }
.traffic-group__header h2 { margin: 0 0 2px; color: var(--section-color); font-size: 16px; font-weight: 700; line-height: 1.2; }
.traffic-group__header p { margin: 0; color: var(--traffic-muted); font-size: 11px; line-height: 1.3; }
.traffic-metrics { gap: 10px; padding: 0 18px 18px; }
.traffic-metrics--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.traffic-metric {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-width: 0;
    min-height: 139px;
    padding: 12px;
    border-radius: 7px;
}
.traffic-metric__icon {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
}
.traffic-metric__icon svg { width: 29px; height: 29px; }
.traffic-metric strong { display: block; margin-bottom: 7px; color: var(--section-color); font-size: 25px; line-height: 1; }
.traffic-metric span:not(.traffic-metric__icon) { display: block; color: #3d4b66; font-size: 11px; line-height: 1.45; }
.traffic-metric--stacked { flex-direction: column; gap: 7px; min-height: 139px; padding: 11px 6px; text-align: center; }
.traffic-metric--stacked .traffic-metric__icon { flex-basis: 48px; width: 48px; height: 48px; }
.traffic-metric--stacked strong { margin: 0; font-size: 22px; }
.traffic-metric--stacked span:not(.traffic-metric__icon) { line-height: 1.35; }

.traffic-callout {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 153px;
    margin-top: 27px;
    padding: 18px 34px;
    overflow: hidden;
    border: 1px solid #22a4bd;
    border-radius: 9px;
    background: #f3fbfc;
}
.traffic-callout__icon { flex: 0 0 62px; color: #00859d; }
.traffic-callout__icon svg { width: 58px; height: 58px; }
.traffic-callout__copy h2 { margin: 0 0 12px; color: #006780; font-size: 16px; font-weight: 700; }
.traffic-callout__copy p { margin: 0; color: #425875; font-size: 11px; line-height: 1.65; }
.traffic-callout__art { position: relative; flex: 0 0 305px; height: 118px; }
.traffic-callout__screen { position: absolute; right: 62px; bottom: 0; width: 165px; height: 113px; border: 5px solid #dff1f4; border-top-color: #159db4; border-radius: 8px; background: #fff; box-shadow: 0 3px 8px rgba(11, 113, 134, .12); }
.traffic-callout__screen::before { content: ""; position: absolute; top: 16px; bottom: 10px; left: 72px; width: 1px; background: #e5eef0; }
.traffic-callout__screen i { position: absolute; left: 13px; bottom: 17px; width: 9px; height: 25px; background: #8bd1db; box-shadow: 15px -12px 0 #5ab8c8, 30px -3px 0 #b3e0e6, 45px -27px 0 #229fb4; }
.traffic-callout__screen b { position: absolute; top: 28px; right: 13px; width: 54px; height: 54px; border-radius: 50%; background: conic-gradient(#169bb2 0 28%, #61bdca 28% 67%, #d5eff2 67%); }
.traffic-callout__screen em { position: absolute; top: 9px; left: 10px; width: 47px; height: 4px; background: #88d2dc; }
.traffic-callout__phone { position: absolute; right: 0; bottom: -3px; width: 46px; height: 91px; border: 3px solid #48b3c5; border-radius: 7px; background: #fff; }
.traffic-callout__phone::before { content: ""; position: absolute; top: 5px; right: 5px; left: 5px; height: 8px; border-radius: 2px; background: #49b5c5; }
.traffic-callout__phone i { position: absolute; right: 9px; bottom: 16px; width: 25px; height: 35px; border-left: 2px solid #76c8d4; border-bottom: 2px solid #76c8d4; transform: skewY(-35deg); }

@media (max-width: 991px) {
    .traffic-overview { padding: 20px; }
    .traffic-overview__grid { grid-template-columns: 1fr; }
    .traffic-callout__art { flex-basis: 230px; transform: scale(.85); transform-origin: right center; }
}

@media (max-width: 767px) {
    .traffic-overview { padding: 16px; }
    .traffic-overview__header { flex-direction: column; }
    .traffic-overview__date { width: 100%; justify-content: space-between; }
    .traffic-metrics--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .traffic-callout { padding: 20px; }
    .traffic-callout__art { display: none; }
}

@media (max-width: 479px) {
    .traffic-overview__title { font-size: 21px; }
    .traffic-metrics--two, .traffic-metrics--four { grid-template-columns: 1fr; }
    .traffic-metric { min-height: 118px; }
    .traffic-callout { align-items: flex-start; gap: 16px; }
    .traffic-callout__icon { flex-basis: 42px; }
    .traffic-callout__icon svg { width: 42px; height: 42px; }
}