.showcase-analytics-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: .25rem 0 1rem; }
.showcase-analytics-header h2 { margin: .15rem 0; }
.showcase-analytics-header p { margin: 0; color: var(--text-secondary); }
.showcase-analytics-header .settings-tabs { flex: 0 0 auto; margin: 0; }
.showcase-analytics-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.showcase-analytics-metric { position: relative; min-width: 0; display: grid; align-content: start; gap: .2rem; padding: 1rem; border: 1px solid var(--border-color); border-radius: .9rem; background: var(--surface); }
.showcase-analytics-metric > span:first-child { color: var(--text-secondary); font-size: .8rem; font-weight: 700; }
.showcase-analytics-metric strong { overflow-wrap: anywhere; color: var(--text); font-size: clamp(1.35rem, 2vw, 1.85rem); line-height: 1.1; }
.showcase-analytics-metric small { min-height: 2.3em; color: var(--text-secondary); font-size: .76rem; }
.showcase-analytics-metric > span:last-child { justify-self: start; padding: .18rem .4rem; border-radius: 999px; background: var(--background); color: var(--text-secondary); font-size: .7rem; font-weight: 750; }
.showcase-analytics-metric > span.is-up { background: #dcfce7; color: #166534; }
.showcase-analytics-metric > span.is-down { background: #fee2e2; color: #991b1b; }
.showcase-analytics-metric > span.is-new { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); }
.showcase-analytics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.showcase-analytics-card { min-width: 0; margin: 0; overflow: hidden; }
.showcase-analytics-card.is-wide { grid-column: 1 / -1; }
.showcase-analytics-card .settings-card-header h2 { margin: .15rem 0 0; font-size: 1.05rem; }
.showcase-analytics-card .card-body { min-width: 0; }
.showcase-analytics-bars { display: grid; gap: .8rem; }
.showcase-analytics-bar-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .7rem; }
.showcase-analytics-bar-row > div { min-width: 0; display: flex; justify-content: space-between; gap: .75rem; }
.showcase-analytics-bar-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 650; }
.showcase-analytics-bar-row b { color: var(--text); font-variant-numeric: tabular-nums; }
.showcase-analytics-bar-row i { position: relative; grid-column: 1 / -1; height: .45rem; overflow: hidden; border-radius: 999px; background: var(--background); }
.showcase-analytics-bar-row i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--analytics-width); border-radius: inherit; background: var(--primary); }
.showcase-analytics-bar-row small { grid-column: 1 / -1; color: var(--text-secondary); font-size: .74rem; }
.showcase-analytics-empty { margin: 0; padding: 1rem; color: var(--text-secondary); text-align: center; }
.showcase-analytics-timeline { min-height: 220px; display: flex; align-items: stretch; gap: clamp(2px, .45vw, 8px); padding-top: 1.5rem; overflow-x: auto; }
.showcase-analytics-day { min-width: 8px; flex: 1 0 8px; display: grid; grid-template-rows: minmax(160px, 1fr) 1.3rem; gap: .4rem; text-align: center; }
.showcase-analytics-day b { position: relative; display: flex; align-items: end; justify-content: center; color: var(--text-secondary); font-size: .65rem; font-weight: 650; }
.showcase-analytics-day b::after { content: ''; width: min(100%, 22px); height: var(--analytics-height); min-height: 2px; border-radius: .3rem .3rem 0 0; background: color-mix(in srgb, var(--primary) 80%, #fff); }
.showcase-analytics-day b span { position: absolute; bottom: calc(var(--analytics-height) + .2rem); opacity: 0; pointer-events: none; }
.showcase-analytics-day:hover b span { opacity: 1; }
.showcase-analytics-day small { color: var(--text-secondary); font-size: .64rem; white-space: nowrap; }
.showcase-analytics-hours { height: 170px; display: grid; grid-template-columns: repeat(24, minmax(8px, 1fr)); align-items: stretch; gap: .3rem; overflow-x: auto; }
.showcase-analytics-hours > div { min-width: 8px; display: grid; grid-template-rows: 1fr 1.25rem; align-items: end; gap: .35rem; }
.showcase-analytics-hours i { width: 100%; height: var(--analytics-height); min-height: 2px; border-radius: .25rem .25rem 0 0; background: color-mix(in srgb, var(--primary) 68%, var(--surface)); }
.showcase-analytics-hours small { color: var(--text-secondary); font-size: .62rem; text-align: center; white-space: nowrap; }
.showcase-analytics-privacy { margin: 1rem 0 0; padding: .85rem 1rem; border: 1px solid var(--border-color); border-radius: .75rem; background: var(--background); color: var(--text-secondary); font-size: .78rem; line-height: 1.45; }
#showcase-analytics-root[aria-busy="true"] { opacity: .72; pointer-events: none; }

@media (max-width: 1180px) {
    .showcase-analytics-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .showcase-analytics-header { align-items: stretch; flex-direction: column; }
    .showcase-analytics-header .settings-tabs { width: 100%; overflow-x: auto; }
    .showcase-analytics-header .settings-tab-btn { flex: 1 0 auto; }
    .showcase-analytics-grid { grid-template-columns: 1fr; }
    .showcase-analytics-card.is-wide { grid-column: auto; }
    .showcase-analytics-timeline { min-height: 190px; }
    .showcase-analytics-day { grid-template-rows: minmax(130px, 1fr) 1.3rem; }
}

@media (max-width: 520px) {
    .showcase-analytics-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .showcase-analytics-metric { padding: .8rem; }
    .showcase-analytics-bar-row span { white-space: normal; }
}