/* Live tab replica — screen-specific rules only; components come from product.css. */
.af-screen[data-screen="live"] { display: flex; flex-direction: column; gap: 8px; }
.af-screen[data-screen="live"].lv-instant *, .af-screen[data-screen="live"].lv-instant { transition: none !important; animation: none !important; }

/* header */
.af-screen[data-screen="live"] .lv-back { display: block; font-size: 12.5px; margin-bottom: 6px; }
.af-screen[data-screen="live"] .lv-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.af-screen[data-screen="live"] .lv-title-left { display: flex; align-items: center; gap: 12px; }
.af-screen[data-screen="live"] .lv-title { font-size: 24px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
.af-screen[data-screen="live"] .lv-edit { font-size: 12.5px; }
.af-screen[data-screen="live"] .lv-title-right { display: flex; align-items: center; gap: 8px; }
.af-screen[data-screen="live"] .lv-more { font-size: 16px; padding: 0 4px; }
.af-screen[data-screen="live"] .lv-tabs { align-self: flex-start; }

/* banner + status */
.af-screen[data-screen="live"] .lv-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.af-screen[data-screen="live"] .lv-banner b { color: var(--pd-ink); font-weight: 600; }
.af-screen[data-screen="live"] .lv-banner-sub { margin-top: 2px; }
.af-screen[data-screen="live"] .lv-status { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }

/* stat tiles */
.af-screen[data-screen="live"] .lv-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.af-screen[data-screen="live"] .lv-tile { padding: 10px 14px; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; }
.af-screen[data-screen="live"] .lv-tile .pd-label { min-height: 30px; } /* 2-line label slot so every value starts at the same y */
.af-screen[data-screen="live"] .lv-val { font-size: 24px; min-height: 28px; }
.af-screen[data-screen="live"] .lv-sub { font-size: 11.5px; }

/* savings + donut row */
.af-screen[data-screen="live"] .lv-two { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; }
.af-screen[data-screen="live"] .lv-line-path { fill: none; stroke: var(--pd-green); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.af-screen[data-screen="live"] .lv-dot { fill: var(--pd-green); }
.af-screen[data-screen="live"] .lv-money { display: flex; flex-direction: column; }
.af-screen[data-screen="live"] .lv-money-body { display: flex; align-items: center; gap: 22px; flex: 1; }
.af-screen[data-screen="live"] .lv-donut { flex: none; }
.af-screen[data-screen="live"] .lv-donut-val { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.1; }
.af-screen[data-screen="live"] .lv-seg-green { stroke: var(--pd-green); }
.af-screen[data-screen="live"] .lv-seg-blue { stroke: var(--pd-blue); }
.af-screen[data-screen="live"] .lv-seg-blue-2 { stroke: var(--pd-blue-2); }
.af-screen[data-screen="live"] .lv-dot-green { color: var(--pd-green); }
.af-screen[data-screen="live"] .lv-dot-blue { color: var(--pd-blue); }
.af-screen[data-screen="live"] .lv-dot-blue-2 { color: var(--pd-blue-2); }
.af-screen[data-screen="live"] .lv-legend { flex: 1; }

/* usage */
.af-screen[data-screen="live"] .lv-usage { padding-bottom: 0; }
.af-screen[data-screen="live"] .lv-usage .pd-card-head { align-items: center; margin-bottom: 6px; }
.af-screen[data-screen="live"] .lv-usage-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 -18px; border-top: 1px solid var(--pd-line); }
.af-screen[data-screen="live"] .lv-utile { position: relative; display: flex; flex-direction: column; padding: 8px 18px 0; border-right: 1px solid var(--pd-line); border-bottom: 1px solid var(--pd-line); }
.af-screen[data-screen="live"] .lv-utile:nth-child(3n) { border-right: 0; }
.af-screen[data-screen="live"] .lv-utile:nth-child(n+4) { border-bottom: 0; }
.af-screen[data-screen="live"] .lv-ulabel { font-size: 12px; }
.af-screen[data-screen="live"] .lv-uval { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; margin-top: 2px; }
.af-screen[data-screen="live"] .lv-ufoot { font-size: 11px; margin-top: 2px; }
.af-screen[data-screen="live"] .lv-spark { width: 100%; margin-top: auto; }