/* /Components/Modules/AccessoryModuleHost.razor.rz.scp.css */
/* AS-2 (D96) — the accessory module host. The vehicle, tile, tour and compare rules below are the trade-show demo's
   (Pages/AccessorySalesV4.razor.css), scoped to this host. P1.2: the page's accent is the rooftop's (--dealer-primary is --mod-accent); the featured
   vehicle brand's colour reaches only the vehicle picture (VehicleHeroWithHotspots sets its own --dealer-primary). */
.amh[b-g75ndsfmog] {
    --dealer-primary: var(--mod-accent);
    --dealer-accent: #F4A300;
    --ink: var(--mod-text);
    --ink-muted: var(--mod-text-muted);
    --panel: var(--mod-surface);
    --panel-soft: var(--mod-surface-2);
    --line: var(--mod-hairline);
    --line-strong: var(--mod-border-strong);
    --shadow: var(--mod-shadow-2);
    max-width: 90rem; margin: 0 auto; padding: 1rem; color: var(--ink); font-family: 'Inter', var(--mod-font);
}
.amh-head[b-g75ndsfmog] { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.amh-head h1[b-g75ndsfmog] { font-size: 1.35rem; margin: 0; flex: 1; }
.amh-logo[b-g75ndsfmog] { display: block; height: 2rem; max-width: 8rem; object-fit: contain; margin: 0 0 .5rem; }
.amh-head select[b-g75ndsfmog], .amh-head button[b-g75ndsfmog], .amh-link[b-g75ndsfmog] { padding: .35rem .7rem; border: 1px solid var(--line-strong); border-radius: .4rem; background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; }
.amh-head .mod-theme-toggle[b-g75ndsfmog] { border-radius: 999px; }
.amh-body[b-g75ndsfmog] { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr) minmax(0, 20rem); gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .amh-body[b-g75ndsfmog] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .amh-quote[b-g75ndsfmog] { grid-column: 1 / -1; } }
@media (max-width: 760px) { .amh-body[b-g75ndsfmog] { grid-template-columns: 1fr; } }
.amh-card[b-g75ndsfmog] { background: var(--panel); border: 1px solid var(--line); border-radius: .75rem; padding: .75rem; box-shadow: var(--shadow); }
.amh-video[b-g75ndsfmog] { aspect-ratio: 3 / 4; background: var(--mod-media-bg); border-radius: .5rem; overflow: hidden; }
.amh-video video[b-g75ndsfmog] { width: 100%; height: 100%; object-fit: cover; }
.amh-transcript[b-g75ndsfmog] { max-height: 14rem; overflow-y: auto; margin: .5rem 0; font-size: .9rem; }
.amh-msg[b-g75ndsfmog] { margin: .25rem 0; }
.amh-msg.user[b-g75ndsfmog] { text-align: right; color: var(--ink-muted); }
.amh-input[b-g75ndsfmog] { display: flex; gap: .35rem; }
.amh-input input[b-g75ndsfmog] { flex: 1; min-width: 0; padding: .45rem .6rem; background: var(--mod-input-bg); color: var(--ink); border: 1px solid var(--line-strong); border-radius: .4rem; font: inherit; }
.amh-primary[b-g75ndsfmog] { padding: .5rem 1rem; border: 0; border-radius: .4rem; background: var(--dealer-primary); color: var(--mod-on-accent); font-weight: 600; cursor: pointer; }
.amh-primary:disabled[b-g75ndsfmog] { opacity: .5; cursor: default; }
.amh-secondary[b-g75ndsfmog] { padding: .45rem .9rem; border: 1px solid var(--dealer-primary); border-radius: .4rem; background: var(--panel); color: var(--dealer-primary); cursor: pointer; }
.amh-mic.on[b-g75ndsfmog] { background: var(--dealer-accent); }
.amh-tour[b-g75ndsfmog] { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .75rem 0; }
.amh-bundles[b-g75ndsfmog] { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0; }
.amh-bundle[b-g75ndsfmog] { padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--panel-soft); font-size: .85rem; }
.amh-bundle.on[b-g75ndsfmog] { border-color: var(--dealer-primary); background: var(--panel); font-weight: 600; }
.amh-tiles[b-g75ndsfmog] { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .75rem; }
.amh-quote h2[b-g75ndsfmog] { font-size: 1.05rem; margin: 0 0 .5rem; }
.amh-line[b-g75ndsfmog] { display: flex; justify-content: space-between; gap: .5rem; padding: .25rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.amh-line button[b-g75ndsfmog] { border: 0; background: none; color: var(--ink-muted); cursor: pointer; }
.amh-total[b-g75ndsfmog] { font-size: 1.25rem; font-weight: 700; margin: .5rem 0 .25rem; }
.amh-note[b-g75ndsfmog] { font-size: .8rem; color: var(--ink-muted); }
.amh-form[b-g75ndsfmog] { display: grid; gap: .35rem; margin-top: .5rem; }
.amh-form input[b-g75ndsfmog] { padding: .4rem .55rem; background: var(--mod-input-bg); color: var(--ink); border: 1px solid var(--line-strong); border-radius: .35rem; min-width: 0; font: inherit; }
.amh-error[b-g75ndsfmog] { color: var(--mod-danger-text); }

.asv4-stage-counter[b-g75ndsfmog],
.asv4-financing-summary[b-g75ndsfmog],
.asv4-schedule-confirm[b-g75ndsfmog],
.amh[b-g75ndsfmog]  .acc-tile-price,
.amh[b-g75ndsfmog]  .acc-tile-msrp,
.amh[b-g75ndsfmog]  .quote-cart-line,
.amh[b-g75ndsfmog]  .quote-cart-row {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.amh[b-g75ndsfmog]  .vehicle-hero {
    position: relative;
    background: var(--panel-soft);
    border-radius: 10px;
    overflow: hidden;
}

.amh[b-g75ndsfmog]  .vehicle-hero-frame {
    position: relative;
    aspect-ratio: 3 / 2;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.amh[b-g75ndsfmog]  .vehicle-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s ease-out;
}

.amh[b-g75ndsfmog]  .vehicle-hero-img.fade-in {
    opacity: 0;
}

.amh[b-g75ndsfmog]  .vehicle-hero-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    color: var(--ink-muted);
    z-index: 0;
}

.amh[b-g75ndsfmog]  .vehicle-hero-img {
    position: relative;
    z-index: 1;
}

.amh[b-g75ndsfmog]  .vehicle-hero-emoji {
    font-size: 4rem;
    margin-bottom: 12px;
}

.amh[b-g75ndsfmog]  .vehicle-hero-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink);
}

.amh[b-g75ndsfmog]  .vehicle-hero-angle {
    font-size: 0.85rem;
    text-transform: capitalize;
    color: var(--ink-muted);
    margin-top: 4px;
}

.amh[b-g75ndsfmog]  .hotspot-ring {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 4px solid var(--dealer-primary);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--dealer-primary) 60%, transparent);
    animation: asv4-pulse-b-g75ndsfmog 1.8s ease-out infinite;
    pointer-events: none;
}

@keyframes asv4-pulse-b-g75ndsfmog {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dealer-primary) 55%, transparent); }
    70%  { box-shadow: 0 0 0 18px color-mix(in srgb, var(--dealer-primary) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dealer-primary) 0%, transparent); }
}

.amh[b-g75ndsfmog]  .vehicle-angle-strip {
    display: flex;
    gap: 6px;
    padding: 8px;
    flex-wrap: wrap;
}

.amh[b-g75ndsfmog]  .vehicle-angle-pill {
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel-soft);
    cursor: pointer;
    text-transform: capitalize;
    font-size: 0.85rem;
}

.amh[b-g75ndsfmog]  .vehicle-angle-pill.active {
    background: var(--dealer-primary);
    color: var(--mod-on-accent);
    border-color: var(--dealer-primary);
}

.amh[b-g75ndsfmog]  .vehicle-hero-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    transition: opacity 0.2s ease-out;
}

.amh[b-g75ndsfmog]  .vehicle-finish-strip {
    display: flex;
    gap: 8px;
    padding: 10px 8px;
    flex-wrap: wrap;
    align-items: center;
}

.amh[b-g75ndsfmog]  .vehicle-finish-swatch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 7px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel-soft);
    cursor: pointer;
    font-size: 0.85rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.amh[b-g75ndsfmog]  .vehicle-finish-swatch:hover {
    border-color: var(--dealer-primary);
}

.amh[b-g75ndsfmog]  .vehicle-finish-swatch.active {
    border-color: var(--dealer-primary);
    box-shadow: 0 0 0 2px var(--dealer-primary) inset;
    font-weight: 600;
}

.amh[b-g75ndsfmog]  .vehicle-finish-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--swatch, #888);
    border: 1px solid var(--mod-border-strong);
    box-shadow: inset 0 1px 2px color-mix(in srgb, var(--mod-image-bg) 40%, transparent);
    flex: 0 0 auto;
}

.amh[b-g75ndsfmog]  .vehicle-finish-label {
    text-transform: capitalize;
}

.amh[b-g75ndsfmog]  .vehicle-finish-ph {
    color: var(--dealer-accent, #F4A300);
    font-weight: 700;
    line-height: 1;
}

.amh[b-g75ndsfmog]  .tour-progress-bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.amh[b-g75ndsfmog]  .tour-progress-segment {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    color: var(--ink-muted);
    border-radius: 8px;
    padding: 8px 4px;
    font-size: 0.7rem;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.amh[b-g75ndsfmog]  .tour-progress-segment.completed {
    background: color-mix(in srgb, var(--dealer-primary) 12%, var(--panel));
    border-color: var(--dealer-primary);
    color: var(--dealer-primary);
}

.amh[b-g75ndsfmog]  .tour-progress-segment.current {
    background: var(--dealer-primary);
    color: var(--mod-on-accent);
    border-color: var(--dealer-primary);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--dealer-primary) 25%, transparent);
}

.amh[b-g75ndsfmog]  .tour-progress-index {
    font-weight: 700;
    font-size: 0.9rem;
}

.amh[b-g75ndsfmog]  .tour-progress-label {
    line-height: 1.1;
}

.amh[b-g75ndsfmog]  .acc-tile {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    position: relative;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.amh[b-g75ndsfmog]  .acc-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--mod-shadow-2);
}

.amh[b-g75ndsfmog]  .acc-tile.in-cart {
    border-color: var(--dealer-primary);
    background: color-mix(in srgb, var(--dealer-primary) 8%, var(--panel));
}

.amh[b-g75ndsfmog]  .acc-tile.highlighted {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dealer-primary) 35%, transparent);
}

.amh[b-g75ndsfmog]  .acc-hero-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    background: var(--dealer-accent);
    color: var(--ink);
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.amh[b-g75ndsfmog]  .acc-tile.hero .acc-tile-stock {
    top: 32px;
}

.amh[b-g75ndsfmog]  .acc-tile.locked {
    opacity: 0.45;
    cursor: not-allowed;
}

.amh[b-g75ndsfmog]  .acc-tile-image {
    background: var(--mod-image-bg);
    border-radius: 6px;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.amh[b-g75ndsfmog]  .acc-tile-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    inset: 0;
    z-index: 1;
}

.amh[b-g75ndsfmog]  .acc-tile-image-placeholder {
    font-size: 2.2rem;
    opacity: 0.6;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
}

.amh[b-g75ndsfmog]  .acc-tile-name {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
}

.amh[b-g75ndsfmog]  .acc-tile-price-row {
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.amh[b-g75ndsfmog]  .acc-tile-price {
    color: var(--dealer-primary);
    font-weight: 700;
    font-size: 1rem;
}

.amh[b-g75ndsfmog]  .acc-tile-msrp {
    text-decoration: line-through;
    color: var(--ink-muted);
    font-size: 0.8rem;
}

.amh[b-g75ndsfmog]  .acc-tile-points {
    margin: 8px 0 0;
    padding-left: 14px;
    font-size: 0.78rem;
    color: var(--ink-muted);
    list-style: none;
}

.amh[b-g75ndsfmog]  .acc-tile-points li {
    display: block;
    line-height: 1.5;
    margin-bottom: 8px;
    position: relative;
    padding-left: 12px;
}

.amh[b-g75ndsfmog]  .acc-tile-points li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--dealer-primary);
    font-weight: 700;
    line-height: 1.5;
}

.amh[b-g75ndsfmog]  .acc-tile-points li:last-child {
    margin-bottom: 0;
}

.amh[b-g75ndsfmog]  .acc-tile-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--dealer-primary);
    color: var(--mod-on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    /* Phase A.4 — the check renders only when the item is added, so this
       animation fires once on add as a confirmation pop. */
    animation: asv4-check-pop-b-g75ndsfmog 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes asv4-check-pop-b-g75ndsfmog {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.amh[b-g75ndsfmog]  .acc-tile-stock {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

.amh[b-g75ndsfmog]  .acc-tile-stock.low {
    background: var(--mod-warning-bg);
    color: var(--mod-warning-text);
    border: 1px solid var(--mod-warning-border);
}

.amh[b-g75ndsfmog]  .acc-tile-stock.out {
    background: var(--panel-soft);
    color: var(--ink-muted);
    border: 1px solid var(--line-strong);
}

.amh[b-g75ndsfmog]  .acc-tile-why {
    margin-top: 8px;
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--ink-muted);
    border-left: 2px solid color-mix(in srgb, var(--dealer-primary) 40%, var(--line));
    padding-left: 8px;
}

.amh[b-g75ndsfmog]  .acc-tile-why-label {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--dealer-primary);
    margin-bottom: 2px;
}

.amh[b-g75ndsfmog]  .acc-tile-media {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.amh[b-g75ndsfmog]  .acc-tile-media-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--dealer-primary);
    background: transparent;
    color: var(--dealer-primary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.amh[b-g75ndsfmog]  .acc-tile-media-btn:hover,
.amh[b-g75ndsfmog]  .acc-tile-media-btn.on {
    background: var(--dealer-primary);
    color: var(--mod-on-accent);
}

.amh[b-g75ndsfmog]  .acc-tile-player {
    margin-top: 8px;
}

.amh[b-g75ndsfmog]  .acc-tile-player video {
    width: 100%;
    border-radius: 8px;
    background: var(--mod-media-bg);
    display: block;
}

.amh[b-g75ndsfmog]  .acc-tile-player audio {
    width: 100%;
    display: block;
}

.amh[b-g75ndsfmog]  .acc-tile-compare {
    margin-top: 8px;
    align-self: flex-start;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 11px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ink-muted);
    cursor: pointer;
}

.amh[b-g75ndsfmog]  .acc-tile-compare:hover {
    border-color: var(--dealer-primary);
    color: var(--dealer-primary);
}

.amh[b-g75ndsfmog]  .acc-tile-compare.on {
    background: color-mix(in srgb, var(--dealer-primary) 12%, var(--panel));
    border-color: var(--dealer-primary);
    color: var(--dealer-primary);
}

.amh[b-g75ndsfmog]  .asv4-compare-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--mod-scrim);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.amh[b-g75ndsfmog]  .asv4-compare-panel {
    background: var(--panel);
    border-radius: 16px;
    max-width: 1000px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: var(--mod-shadow-2);
    padding: 18px;
}

.amh[b-g75ndsfmog]  .asv4-compare-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.amh[b-g75ndsfmog]  .asv4-compare-title { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; }

.amh[b-g75ndsfmog]  .asv4-compare-close {
    background: transparent;
    border: none;
    font-size: 1.05rem;
    cursor: pointer;
    color: var(--ink-muted);
}

.amh[b-g75ndsfmog]  .asv4-compare-grid { display: grid; gap: 14px; }

.amh[b-g75ndsfmog]  .asv4-compare-col {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--panel-soft);
}

.amh[b-g75ndsfmog]  .asv4-compare-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    background: transparent;
    border: none;
    color: var(--ink-muted);
    cursor: pointer;
    font-size: 0.85rem;
    z-index: 2;
}

.amh[b-g75ndsfmog]  .asv4-compare-img {
    aspect-ratio: 4 / 3;
    background: var(--mod-image-bg);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.amh[b-g75ndsfmog]  .asv4-compare-img img { width: 100%; height: 100%; object-fit: contain; }

.amh[b-g75ndsfmog]  .asv4-compare-name { font-weight: 600; font-size: 0.92rem; line-height: 1.25; }

.amh[b-g75ndsfmog]  .asv4-compare-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}

.amh[b-g75ndsfmog]  .asv4-compare-price { color: var(--dealer-primary); font-weight: 700; font-size: 1rem; }

.amh[b-g75ndsfmog]  .asv4-compare-msrp { text-decoration: line-through; color: var(--ink-muted); font-size: 0.8rem; }

.amh[b-g75ndsfmog]  .asv4-compare-tag {
    background: var(--mod-warning-bg);
    color: var(--mod-warning-text);
    border: 1px solid var(--mod-warning-border);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
}

.amh[b-g75ndsfmog]  .asv4-compare-stock { font-size: 0.72rem; font-weight: 700; color: var(--mod-warning-text); }

.amh[b-g75ndsfmog]  .asv4-compare-points {
    margin: 4px 0 0;
    padding-left: 16px;
    font-size: 0.78rem;
    color: var(--ink-muted);
    line-height: 1.5;
}

.amh[b-g75ndsfmog]  .asv4-compare-points li { margin-bottom: 4px; }

.amh[b-g75ndsfmog]  .asv4-compare-why {
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--ink-muted);
    border-left: 2px solid color-mix(in srgb, var(--dealer-primary) 40%, var(--line));
    padding-left: 8px;
}

.amh[b-g75ndsfmog]  .asv4-compare-why-label {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--dealer-primary);
    margin-bottom: 2px;
}

.amh[b-g75ndsfmog]  .asv4-compare-actions { margin-top: auto; padding-top: 4px; }

.amh[b-g75ndsfmog]  .asv4-compare-add {
    width: 100%;
    background: var(--dealer-primary);
    color: var(--mod-on-accent);
    border: none;
    border-radius: 8px;
    padding: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.amh[b-g75ndsfmog]  .asv4-compare-add.added {
    background: var(--panel);
    color: var(--dealer-primary);
    border: 1px solid var(--dealer-primary);
}
/* /Components/Modules/DealBuilder.razor.rz.scp.css */
/* Module UI PR 14 (P2.A2) — the stepped deal builder, on the module tokens (light and dark follow the host). Scoped to this component. */
.dlb[b-nu6kcrtx1p] { display: flex; flex-direction: column; gap: var(--mod-space-3); }

/* The steps wrap rather than scroll, so Review is always in view. */
.dlb-steps[b-nu6kcrtx1p] { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--mod-space-1); }
.dlb-step button[b-nu6kcrtx1p] {
    display: flex; align-items: center; gap: var(--mod-space-1);
    min-height: 36px; padding: 0 var(--mod-space-2);
    background: none; border: 0; border-bottom: 3px solid transparent;
    color: var(--mod-text-muted); font: inherit; font-size: var(--mod-text-xs); font-weight: 600; white-space: nowrap; cursor: pointer;
}
.dlb-step button:disabled[b-nu6kcrtx1p] { cursor: default; opacity: 0.6; }
.dlb-step-n[b-nu6kcrtx1p] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    border: 1px solid var(--mod-border-strong); font-size: var(--mod-text-xs);
}
.dlb-step.is-done .dlb-step-n[b-nu6kcrtx1p] { background: var(--mod-success-bg); color: var(--mod-success-text); border-color: var(--mod-success-border); }
.dlb-step.is-current button[b-nu6kcrtx1p] { color: var(--mod-text); border-bottom-color: var(--vcs-accent, var(--mod-accent)); }
.dlb-step.is-current .dlb-step-n[b-nu6kcrtx1p] { background: var(--vcs-accent, var(--mod-accent)); color: var(--mod-on-accent); border-color: transparent; }
.dlb-progress[b-nu6kcrtx1p] { margin: 0; color: var(--mod-text-muted); font-size: var(--mod-text-xs); }

.dlb-body[b-nu6kcrtx1p] { display: flex; flex-direction: column; gap: var(--mod-space-2); }
.dlb-field[b-nu6kcrtx1p] { display: flex; flex-direction: column; gap: 2px; font-size: var(--mod-text-xs); color: var(--mod-text-muted); }
.dlb-field input[b-nu6kcrtx1p], .dlb-field select[b-nu6kcrtx1p] {
    min-height: 40px; padding: 0 var(--mod-space-3);
    background: var(--mod-input-bg); color: var(--mod-text);
    border: 1px solid var(--mod-border-strong); border-radius: var(--mod-radius-md);
    font: inherit; font-size: var(--mod-text-sm);
}
.dlb-hint[b-nu6kcrtx1p] { margin: 0; color: var(--mod-text-muted); font-size: var(--mod-text-xs); }
.dlb-note[b-nu6kcrtx1p] { margin: 0; color: var(--mod-danger-text); font-size: var(--mod-text-sm); }
.dlb-link[b-nu6kcrtx1p] {
    align-self: flex-start; background: none; border: 0; padding: 0;
    color: var(--mod-link); font: inherit; font-size: var(--mod-text-sm); text-decoration: underline; cursor: pointer;
}

.dlb-products[b-nu6kcrtx1p] { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--mod-space-1); }
.dlb-products legend[b-nu6kcrtx1p] { padding: 0; margin-bottom: var(--mod-space-1); color: var(--mod-text-muted); font-size: var(--mod-text-xs); }
.dlb-check[b-nu6kcrtx1p] { display: flex; align-items: center; gap: var(--mod-space-2); min-height: 32px; font-size: var(--mod-text-sm); color: var(--mod-text); }
.dlb-check input[b-nu6kcrtx1p] { width: 18px; height: 18px; }

.dlb-summary[b-nu6kcrtx1p] { display: grid; grid-template-columns: auto 1fr; gap: var(--mod-space-1) var(--mod-space-3); margin: 0; font-size: var(--mod-text-sm); }
.dlb-summary dt[b-nu6kcrtx1p] { color: var(--mod-text-muted); }
.dlb-summary dd[b-nu6kcrtx1p] { margin: 0; color: var(--mod-text); }

.dlb-card[b-nu6kcrtx1p] {
    padding: var(--mod-space-3); border-radius: var(--mod-radius-lg);
    background: var(--mod-surface-2); border: 1px solid var(--mod-border-strong);
    display: flex; flex-direction: column; gap: 2px;
}
.dlb-card.is-stale .dlb-card-amount[b-nu6kcrtx1p] { color: var(--mod-text-muted); text-decoration: line-through; }
.dlb-card-amount[b-nu6kcrtx1p] { margin: 0; font-size: var(--mod-text-xl); font-weight: 700; color: var(--mod-text); }
.dlb-card-line[b-nu6kcrtx1p] { margin: 0; font-size: var(--mod-text-xs); color: var(--mod-text); }
.dlb-card-note[b-nu6kcrtx1p] { margin: var(--mod-space-1) 0 0; font-size: var(--mod-text-xs); color: var(--mod-text-muted); }
.dlb-card-stale[b-nu6kcrtx1p] { margin: var(--mod-space-2) 0 var(--mod-space-1); font-size: var(--mod-text-sm); color: var(--mod-warning-text); }

.dlb-send[b-nu6kcrtx1p] { display: flex; flex-direction: column; gap: var(--mod-space-2); }
.dlb-nav[b-nu6kcrtx1p] { display: flex; justify-content: space-between; gap: var(--mod-space-2); }
.dlb-nav .dlb-btn-primary:only-child[b-nu6kcrtx1p] { margin-left: auto; }
.dlb-btn[b-nu6kcrtx1p] {
    min-height: 40px; padding: 0 var(--mod-space-4);
    background: var(--mod-surface); color: var(--mod-text);
    border: 1px solid var(--mod-border-strong); border-radius: var(--mod-radius-md);
    font: inherit; font-size: var(--mod-text-sm); font-weight: 600; cursor: pointer;
}
.dlb-btn:hover[b-nu6kcrtx1p] { background: var(--mod-hover); }
.dlb-btn:disabled[b-nu6kcrtx1p] { opacity: 0.6; cursor: progress; }
.dlb-btn-primary[b-nu6kcrtx1p] { background: var(--vcs-accent, var(--mod-accent)); color: var(--mod-on-accent); border-color: transparent; }
.dlb-btn-primary:hover[b-nu6kcrtx1p] { background: var(--vcs-accent, var(--mod-accent)); filter: brightness(1.08); }
/* /Components/Modules/DeliveryWalkthrough.razor.rz.scp.css */
/* Module UI PR 15 (P2.A4) — the delivery walkthrough checklist, on the module tokens. Scoped to this component. */
.dck[b-co6kebqkv4] { display: flex; flex-direction: column; gap: var(--mod-space-2); margin-top: var(--mod-space-3); }
.dck-title[b-co6kebqkv4] { margin: 0; font-size: var(--mod-text-md); color: var(--mod-text); }
.dck-hint[b-co6kebqkv4] { margin: 0; color: var(--mod-text-muted); font-size: var(--mod-text-xs); }
.dck-meter[b-co6kebqkv4] { height: 8px; border-radius: var(--mod-radius-pill); background: var(--mod-surface-2); overflow: hidden; border: 1px solid var(--mod-hairline); }
.dck-meter-fill[b-co6kebqkv4] { height: 100%; background: var(--vcs-accent, var(--mod-accent)); transition: width var(--mod-motion-base) var(--mod-ease); }
@media (prefers-reduced-motion: reduce) { .dck-meter-fill[b-co6kebqkv4] { transition: none; } }
.dck-section[b-co6kebqkv4] { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--mod-space-1); }
.dck-section legend[b-co6kebqkv4] { padding: 0; margin-bottom: var(--mod-space-1); font-weight: 600; font-size: var(--mod-text-sm); color: var(--mod-text); }
.dck-item[b-co6kebqkv4] { display: flex; align-items: flex-start; gap: var(--mod-space-2); min-height: 36px; font-size: var(--mod-text-sm); color: var(--mod-text); }
.dck-item input[b-co6kebqkv4] { width: 20px; height: 20px; margin-top: 1px; flex: none; }
.dck-nav[b-co6kebqkv4] { display: flex; justify-content: space-between; gap: var(--mod-space-2); }
.dck-btn[b-co6kebqkv4] {
    min-height: 40px; padding: 0 var(--mod-space-3);
    background: var(--mod-surface); color: var(--mod-text);
    border: 1px solid var(--mod-border-strong); border-radius: var(--mod-radius-md);
    font: inherit; font-size: var(--mod-text-sm); font-weight: 600; cursor: pointer;
}
.dck-btn:disabled[b-co6kebqkv4] { opacity: 0.5; cursor: default; }
/* /Components/Modules/InventoryPanel.razor.rz.scp.css */
/* Module UI PR 13 (P2.A1) — the inventory cards, on the module tokens (light and dark follow the host). Scoped to this component. */
.inv[b-aow46xa49k] { display: flex; flex-direction: column; gap: var(--mod-space-3); }

.inv-note[b-aow46xa49k] { color: var(--mod-text-muted); font-size: var(--mod-text-sm); }
.inv-error[b-aow46xa49k] { color: var(--mod-danger-text); font-size: var(--mod-text-sm); margin: 0; }
.inv-count[b-aow46xa49k] { margin: 0; color: var(--mod-text-muted); font-size: var(--mod-text-xs); }

.inv-search[b-aow46xa49k] { display: flex; gap: var(--mod-space-2); }
.inv-input[b-aow46xa49k] {
    flex: 1; min-width: 0; min-height: 40px;
    padding: var(--mod-space-2) var(--mod-space-3);
    background: var(--mod-input-bg); color: var(--mod-text);
    border: 1px solid var(--mod-border-strong); border-radius: var(--mod-radius-md);
    font: inherit; font-size: var(--mod-text-sm);
}

.inv-btn[b-aow46xa49k] {
    min-height: 40px; padding: 0 var(--mod-space-4);
    background: var(--mod-surface-2); color: var(--mod-text);
    border: 1px solid var(--mod-border-strong); border-radius: var(--mod-radius-md);
    font: inherit; font-size: var(--mod-text-sm); font-weight: 600; cursor: pointer;
}
.inv-btn:hover[b-aow46xa49k] { background: var(--mod-hover); }
.inv-btn:disabled[b-aow46xa49k] { opacity: 0.6; cursor: progress; }
.inv-btn-primary[b-aow46xa49k] { background: var(--vcs-accent, var(--mod-accent)); color: var(--mod-on-accent); border-color: transparent; }
.inv-btn-primary:hover[b-aow46xa49k] { background: var(--vcs-accent, var(--mod-accent)); filter: brightness(1.08); }

.inv-link[b-aow46xa49k] {
    background: none; border: 0; padding: 0 var(--mod-space-1);
    color: var(--mod-link); font: inherit; font-size: var(--mod-text-sm);
    text-decoration: underline; cursor: pointer;
}

.inv-filters[b-aow46xa49k] { display: flex; flex-direction: column; gap: var(--mod-space-2); }
.inv-chips[b-aow46xa49k] { display: flex; flex-wrap: wrap; gap: var(--mod-space-1); }
.inv-chip[b-aow46xa49k] {
    min-height: 36px; padding: 0 var(--mod-space-3);
    background: var(--mod-surface); color: var(--mod-text);
    border: 1px solid var(--mod-border-strong); border-radius: var(--mod-radius-pill);
    font: inherit; font-size: var(--mod-text-xs); cursor: pointer;
}
.inv-chip[aria-pressed="true"][b-aow46xa49k] { background: var(--mod-accent-soft); color: var(--mod-accent-soft-text); border-color: var(--mod-accent-soft-border); font-weight: 600; }
.inv-selects[b-aow46xa49k] { display: flex; flex-wrap: wrap; gap: var(--mod-space-2); }
.inv-select[b-aow46xa49k] { display: flex; flex-direction: column; gap: 2px; font-size: var(--mod-text-xs); color: var(--mod-text-muted); }
.inv-select select[b-aow46xa49k] {
    min-height: 36px; padding: 0 var(--mod-space-2);
    background: var(--mod-input-bg); color: var(--mod-text);
    border: 1px solid var(--mod-border-strong); border-radius: var(--mod-radius-md); font: inherit; font-size: var(--mod-text-sm);
}

/* One card per row in the panel column (a phone, or the desktop's side column); two on a wide panel, such as the kiosk sheet. */
.inv-grid[b-aow46xa49k] { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--mod-space-3); }
@container (min-width: 560px) { .inv-grid[b-aow46xa49k] { grid-template-columns: 1fr 1fr; } }
.inv[b-aow46xa49k] { container-type: inline-size; }

.inv-card[b-aow46xa49k] {
    display: flex; flex-direction: column;
    background: var(--mod-surface); border: 1px solid var(--mod-hairline);
    border-radius: var(--mod-radius-lg); overflow: hidden; box-shadow: var(--mod-shadow-1);
}
.inv-card-main[b-aow46xa49k] {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: var(--mod-space-3); background: none; border: 0; text-align: left;
    color: var(--mod-text); font: inherit; cursor: pointer;
}
.inv-card-main:hover[b-aow46xa49k] { background: var(--mod-hover); }
.inv-title[b-aow46xa49k] { font-weight: 600; font-size: var(--mod-text-sm); }
.inv-price[b-aow46xa49k] { font-weight: 700; font-size: var(--mod-text-md); margin: 0; }
.inv-facts[b-aow46xa49k] { color: var(--mod-text-muted); font-size: var(--mod-text-xs); margin: 0; }
.inv-badge[b-aow46xa49k] {
    display: inline-block; padding: 1px var(--mod-space-2); border-radius: var(--mod-radius-pill);
    font-size: var(--mod-text-xs); font-weight: 700; letter-spacing: 0.02em;
}
.inv-new[b-aow46xa49k] { background: var(--mod-success-bg); color: var(--mod-success-text); border: 1px solid var(--mod-success-border); }
.inv-used[b-aow46xa49k] { background: var(--mod-surface-2); color: var(--mod-text); border: 1px solid var(--mod-hairline); }

.inv-photo[b-aow46xa49k] { position: relative; aspect-ratio: 4 / 3; background: var(--mod-image-bg); }
.inv-photo img[b-aow46xa49k] { width: 100%; height: 100%; object-fit: cover; display: block; }
.inv-photo-large[b-aow46xa49k] { border-radius: var(--mod-radius-md); overflow: hidden; }
.inv-photo-step[b-aow46xa49k] {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border-radius: 50%; border: 0;
    background: var(--mod-overlay); color: var(--mod-overlay-text); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.inv-prev[b-aow46xa49k] { left: var(--mod-space-2); }
.inv-next[b-aow46xa49k] { right: var(--mod-space-2); }
.inv-photo-count[b-aow46xa49k] {
    position: absolute; right: var(--mod-space-2); bottom: var(--mod-space-2);
    padding: 0 var(--mod-space-2); border-radius: var(--mod-radius-pill);
    background: var(--mod-overlay); color: var(--mod-overlay-text); font-size: var(--mod-text-xs);
}

.inv-detail[b-aow46xa49k], .inv-form[b-aow46xa49k] { display: flex; flex-direction: column; gap: var(--mod-space-2); }
.inv-back[b-aow46xa49k] { align-self: flex-start; }
.inv-detail-title[b-aow46xa49k] { margin: 0; font-size: var(--mod-text-md); display: flex; gap: var(--mod-space-2); align-items: center; flex-wrap: wrap; }
.inv-description[b-aow46xa49k] { white-space: pre-line; font-size: var(--mod-text-sm); margin: 0; }
.inv-actions[b-aow46xa49k] { display: flex; flex-wrap: wrap; gap: var(--mod-space-2); justify-content: flex-end; }
.inv-field[b-aow46xa49k] { display: flex; flex-direction: column; gap: 2px; font-size: var(--mod-text-xs); color: var(--mod-text-muted); margin-bottom: var(--mod-space-2); }

/* Loading skeleton: shapes only, still with reduced motion. */
.inv-skeleton .inv-line[b-aow46xa49k] { height: 12px; margin: var(--mod-space-2) var(--mod-space-3) 0; border-radius: var(--mod-radius-sm); background: var(--mod-surface-2); }
.inv-skeleton .inv-short[b-aow46xa49k] { width: 50%; margin-bottom: var(--mod-space-3); }
.inv-skeleton .inv-photo[b-aow46xa49k] { animation: inv-pulse-b-aow46xa49k 1.4s ease-in-out infinite; }
@keyframes inv-pulse-b-aow46xa49k { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .inv-skeleton .inv-photo[b-aow46xa49k] { animation: none; } }
/* /Components/Modules/StaffPinPad.razor.rz.scp.css */
/* Module UI PR 15 (UI-D18) — the staff PIN pad over the customer view, on the module tokens (its root is a .mod-host). */
.spp[b-bip32j5iib] {
    position: fixed; inset: 0; z-index: 12100;
    display: flex; align-items: center; justify-content: center; padding: var(--mod-space-4);
    background: var(--mod-scrim);
}
.spp-card[b-bip32j5iib] {
    width: min(100%, 320px); display: flex; flex-direction: column; gap: var(--mod-space-3);
    padding: var(--mod-space-5); border-radius: var(--mod-radius-lg);
    background: var(--mod-surface); color: var(--mod-text); box-shadow: var(--mod-shadow-2);
}
.spp-title[b-bip32j5iib] { margin: 0; font-size: var(--mod-text-lg); }
.spp-field[b-bip32j5iib] { display: flex; flex-direction: column; gap: 2px; font-size: var(--mod-text-xs); color: var(--mod-text-muted); }
.spp-field input[b-bip32j5iib] {
    min-height: 44px; padding: 0 var(--mod-space-3); letter-spacing: 0.3em; text-align: center;
    background: var(--mod-input-bg); color: var(--mod-text);
    border: 1px solid var(--mod-border-strong); border-radius: var(--mod-radius-md); font: inherit; font-size: var(--mod-text-lg);
}
.spp-keys[b-bip32j5iib] { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mod-space-2); }
.spp-keys button:nth-last-child(2)[b-bip32j5iib] { grid-column: 1; }
.spp-keys button:last-child[b-bip32j5iib] { grid-column: 2; }
.spp-keys button[b-bip32j5iib] {
    min-height: 48px; border-radius: var(--mod-radius-md); cursor: pointer;
    background: var(--mod-surface-2); color: var(--mod-text); border: 1px solid var(--mod-hairline);
    font: inherit; font-size: var(--mod-text-lg); font-weight: 600;
}
.spp-error[b-bip32j5iib] { margin: 0; color: var(--mod-danger-text); font-size: var(--mod-text-sm); }
.spp-actions[b-bip32j5iib] { display: flex; justify-content: space-between; gap: var(--mod-space-2); }
.spp-btn[b-bip32j5iib] {
    min-height: 44px; padding: 0 var(--mod-space-4); flex: 1;
    background: var(--mod-surface); color: var(--mod-text);
    border: 1px solid var(--mod-border-strong); border-radius: var(--mod-radius-md);
    font: inherit; font-size: var(--mod-text-sm); font-weight: 600; cursor: pointer;
}
.spp-btn-primary[b-bip32j5iib] { background: var(--mod-accent); color: var(--mod-on-accent); border-color: transparent; }
/* /Components/Modules/TradePanel.razor.rz.scp.css */
/* Module UI PR 15 (P2.A3) — the stepped trade-in, on the module tokens (light and dark follow the host). Scoped to this component. */
.trd[b-80zhfem155] { display: flex; flex-direction: column; gap: var(--mod-space-3); }

.trd-steps[b-80zhfem155] { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--mod-space-1); }
.trd-step button[b-80zhfem155] {
    display: flex; align-items: center; gap: var(--mod-space-1);
    min-height: 36px; padding: 0 var(--mod-space-2);
    background: none; border: 0; border-bottom: 3px solid transparent;
    color: var(--mod-text-muted); font: inherit; font-size: var(--mod-text-xs); font-weight: 600; white-space: nowrap; cursor: pointer;
}
.trd-step button:disabled[b-80zhfem155] { cursor: default; opacity: 0.6; }
.trd-step-n[b-80zhfem155] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--mod-border-strong); font-size: var(--mod-text-xs);
}
.trd-step.is-done .trd-step-n[b-80zhfem155] { background: var(--mod-success-bg); color: var(--mod-success-text); border-color: var(--mod-success-border); }
.trd-step.is-current button[b-80zhfem155] { color: var(--mod-text); border-bottom-color: var(--vcs-accent, var(--mod-accent)); }
.trd-step.is-current .trd-step-n[b-80zhfem155] { background: var(--vcs-accent, var(--mod-accent)); color: var(--mod-on-accent); border-color: transparent; }
.trd-progress[b-80zhfem155] { margin: 0; color: var(--mod-text-muted); font-size: var(--mod-text-xs); }

.trd-row[b-80zhfem155] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mod-space-2); }
.trd-field[b-80zhfem155] { display: flex; flex-direction: column; gap: 2px; font-size: var(--mod-text-xs); color: var(--mod-text-muted); }
.trd-field input[b-80zhfem155], .trd-field select[b-80zhfem155] {
    min-height: 40px; padding: 0 var(--mod-space-3);
    background: var(--mod-input-bg); color: var(--mod-text);
    border: 1px solid var(--mod-border-strong); border-radius: var(--mod-radius-md);
    font: inherit; font-size: var(--mod-text-sm);
}
.trd-hint[b-80zhfem155] { margin: 0; color: var(--mod-text-muted); font-size: var(--mod-text-xs); }
.trd-note[b-80zhfem155] { margin: 0; color: var(--mod-danger-text); font-size: var(--mod-text-sm); }
.trd-value[b-80zhfem155] { margin: 0; font-weight: 700; color: var(--mod-text); }
.trd-summary[b-80zhfem155] { display: grid; grid-template-columns: auto 1fr; gap: var(--mod-space-1) var(--mod-space-3); margin: 0; font-size: var(--mod-text-sm); }
.trd-summary dt[b-80zhfem155] { color: var(--mod-text-muted); }
.trd-summary dd[b-80zhfem155] { margin: 0; color: var(--mod-text); }
.trd-send[b-80zhfem155] { display: flex; flex-direction: column; gap: var(--mod-space-2); }

/* Six labelled photo slots, two per row. */
.trd-slots[b-80zhfem155] { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--mod-space-2); }
.trd-slot[b-80zhfem155] {
    display: flex; flex-direction: column; align-items: stretch; gap: var(--mod-space-1);
    padding: var(--mod-space-2); border-radius: var(--mod-radius-md);
    border: 1px dashed var(--mod-border-strong); background: var(--mod-surface);
}
.trd-slot.is-filled[b-80zhfem155] { border-style: solid; }
.trd-slot-label[b-80zhfem155] { font-size: var(--mod-text-xs); font-weight: 600; color: var(--mod-text); }
.trd-slot img[b-80zhfem155] { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--mod-radius-sm); background: var(--mod-image-bg); }
.trd-slot-pick[b-80zhfem155] {
    position: relative; display: flex; align-items: center; justify-content: center;
    min-height: 40px; border-radius: var(--mod-radius-md); cursor: pointer;
    background: var(--mod-accent-soft); color: var(--mod-accent-soft-text); border: 1px solid var(--mod-accent-soft-border);
    font-size: var(--mod-text-sm); font-weight: 600;
}
.trd-slot-pick:focus-within[b-80zhfem155] { outline: var(--mod-focus-width) solid var(--mod-focus); outline-offset: var(--mod-focus-offset); }
/* The real file input covers its label, so a tap anywhere opens the camera or the picker; it stays focusable and named. */
.trd-slot-pick[b-80zhfem155]  .trd-file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.trd-link[b-80zhfem155] {
    align-self: center; background: none; border: 0; padding: 0;
    color: var(--mod-link); font: inherit; font-size: var(--mod-text-xs); text-decoration: underline; cursor: pointer;
}

.trd-nav[b-80zhfem155] { display: flex; justify-content: space-between; gap: var(--mod-space-2); }
.trd-nav .trd-btn-primary:only-child[b-80zhfem155] { margin-left: auto; }
.trd-btn[b-80zhfem155] {
    min-height: 40px; padding: 0 var(--mod-space-4);
    background: var(--mod-surface); color: var(--mod-text);
    border: 1px solid var(--mod-border-strong); border-radius: var(--mod-radius-md);
    font: inherit; font-size: var(--mod-text-sm); font-weight: 600; cursor: pointer;
}
.trd-btn:hover[b-80zhfem155] { background: var(--mod-hover); }
.trd-btn:disabled[b-80zhfem155] { opacity: 0.6; cursor: progress; }
.trd-btn-primary[b-80zhfem155] { background: var(--vcs-accent, var(--mod-accent)); color: var(--mod-on-accent); border-color: transparent; }
.trd-btn-primary:hover[b-80zhfem155] { background: var(--vcs-accent, var(--mod-accent)); filter: brightness(1.08); }
/* /Pages/AccessoryInsights.razor.rz.scp.css */
/* Phase D — /accessory-insights brand analytics portal. Self-contained theme. */

.ins-root[b-ce6bthuj3s] {
    --ink: #16181d;
    --ink-muted: #6b7280;
    --line: #e6e8ee;
    --panel: #ffffff;
    --bg: #f4f6fa;
    --accent: #1f6feb;
    --good: #17864A;
    --warn: #d97706;
    --bad: #dc2626;
    --shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.006em;
    color: var(--ink);
    background: var(--bg);
    min-height: 100vh;
    padding: 22px clamp(16px, 4vw, 40px);
    box-sizing: border-box;
    font-variant-numeric: tabular-nums;
}

.ins-header[b-ce6bthuj3s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto 20px;
}

.ins-title[b-ce6bthuj3s] { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; }
.ins-title span[b-ce6bthuj3s] { color: var(--accent); }
.ins-sub[b-ce6bthuj3s] { color: var(--ink-muted); font-size: 0.85rem; margin-top: 2px; }

.ins-header-right[b-ce6bthuj3s] { display: flex; align-items: center; gap: 12px; }

.ins-mock-badge[b-ce6bthuj3s] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--warn);
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 999px;
    padding: 4px 10px;
}

.ins-brand-select[b-ce6bthuj3s] {
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--panel);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.ins-empty[b-ce6bthuj3s] { max-width: 1400px; margin: 60px auto; text-align: center; color: var(--ink-muted); }

/* KPI cards */
.ins-kpis[b-ce6bthuj3s] {
    max-width: 1400px;
    margin: 0 auto 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.ins-kpi[b-ce6bthuj3s] {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: var(--shadow);
}

.ins-kpi-value[b-ce6bthuj3s] { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; }
.ins-kpi-label[b-ce6bthuj3s] { color: var(--ink-muted); font-size: 0.8rem; margin-top: 2px; }
.ins-up[b-ce6bthuj3s] { color: var(--good); font-weight: 700; }
.ins-down[b-ce6bthuj3s] { color: var(--bad); font-weight: 700; }

/* Grid of cards */
.ins-grid[b-ce6bthuj3s] {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.ins-card[b-ce6bthuj3s] {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: var(--shadow);
}

.ins-span2[b-ce6bthuj3s] { grid-column: 1 / -1; }

.ins-card-title[b-ce6bthuj3s] {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ins-anon[b-ce6bthuj3s], .ins-card-title .ins-anon[b-ce6bthuj3s] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink-muted);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 2px 8px;
}

/* Tables */
.ins-table[b-ce6bthuj3s] { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.ins-table th[b-ce6bthuj3s] {
    text-align: left;
    color: var(--ink-muted);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--line);
}
.ins-table td[b-ce6bthuj3s] { padding: 8px; border-bottom: 1px solid var(--line); }
.ins-table tr:last-child td[b-ce6bthuj3s] { border-bottom: none; }

.ins-bar-wrap[b-ce6bthuj3s] { position: relative; display: flex; align-items: center; gap: 8px; }
.ins-bar-wrap .ins-bar[b-ce6bthuj3s] {
    height: 8px;
    background: var(--accent);
    border-radius: 4px;
    min-width: 2px;
}
.ins-bar-wrap span[b-ce6bthuj3s] { font-weight: 600; }

/* Funnel / horizontal bar rows */
.ins-funnel-row[b-ce6bthuj3s] { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ins-funnel-label[b-ce6bthuj3s] { width: 38%; font-size: 0.82rem; }
.ins-funnel-bar-wrap[b-ce6bthuj3s] { flex: 1; background: var(--bg); border-radius: 6px; overflow: hidden; height: 18px; }
.ins-funnel-bar[b-ce6bthuj3s] { height: 100%; background: var(--accent); border-radius: 6px; }
.ins-funnel-bar.alt[b-ce6bthuj3s] { background: var(--good); }
.ins-funnel-bar.warn[b-ce6bthuj3s] { background: var(--warn); }
.ins-funnel-count[b-ce6bthuj3s] { width: 64px; text-align: right; font-size: 0.82rem; font-weight: 600; }

.ins-reco[b-ce6bthuj3s] {
    margin-top: 12px;
    font-size: 0.82rem;
    line-height: 1.45;
    background: #eef5ff;
    border: 1px solid #cfe0ff;
    border-radius: 10px;
    padding: 10px 12px;
}

/* Sparkline (demos by week) */
.ins-spark[b-ce6bthuj3s] { display: flex; align-items: flex-end; gap: 6px; height: 130px; padding-top: 8px; }
.ins-spark-col[b-ce6bthuj3s] { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.ins-spark-bar[b-ce6bthuj3s] { width: 70%; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 3px; }
.ins-spark-x[b-ce6bthuj3s] { font-size: 0.62rem; color: var(--ink-muted); margin-top: 4px; }

/* Status pills */
.ins-status[b-ce6bthuj3s] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: capitalize;
    padding: 2px 9px;
    border-radius: 999px;
}
.ins-status-active[b-ce6bthuj3s] { background: #e7f5ee; color: var(--good); }
.ins-status-training[b-ce6bthuj3s] { background: #fff7ed; color: var(--warn); }
.ins-status-inactive[b-ce6bthuj3s] { background: #fef2f2; color: var(--bad); }

/* Conversation samples */
.ins-sample[b-ce6bthuj3s] {
    font-size: 0.82rem;
    line-height: 1.45;
    border-left: 3px solid var(--line);
    padding: 6px 10px;
    margin-bottom: 8px;
}
.ins-sample-added[b-ce6bthuj3s] { border-left-color: var(--good); }
.ins-sample-declined[b-ce6bthuj3s] { border-left-color: var(--bad); }
.ins-sample-tag[b-ce6bthuj3s] {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 6px;
    color: var(--ink-muted);
}

/* ROI calculator */
.ins-roi-body[b-ce6bthuj3s] { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; }
.ins-roi-inputs[b-ce6bthuj3s] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ins-roi-inputs label[b-ce6bthuj3s] { display: flex; flex-direction: column; gap: 4px; font-size: 0.74rem; color: var(--ink-muted); font-weight: 600; }
.ins-roi-inputs input[b-ce6bthuj3s] {
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
}

.ins-roi-output[b-ce6bthuj3s] {
    background: var(--bg);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ins-roi-line[b-ce6bthuj3s] { display: flex; justify-content: space-between; font-size: 0.85rem; }
.ins-roi-line span[b-ce6bthuj3s] { color: var(--ink-muted); }
.ins-roi-net[b-ce6bthuj3s] { border-top: 1px solid var(--line); padding-top: 8px; font-size: 0.95rem; }
.ins-roi-net strong[b-ce6bthuj3s] { color: var(--good); }
.ins-roi-big[b-ce6bthuj3s] { margin-top: auto; text-align: center; padding-top: 10px; }
.ins-roi-multiple[b-ce6bthuj3s] { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.04em; color: var(--accent); line-height: 1; }
.ins-roi-multiple-label[b-ce6bthuj3s] { font-size: 0.75rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.5px; }

@media (max-width: 900px) {
    .ins-kpis[b-ce6bthuj3s] { grid-template-columns: repeat(2, 1fr); }
    .ins-grid[b-ce6bthuj3s] { grid-template-columns: 1fr; }
    .ins-roi-body[b-ce6bthuj3s] { grid-template-columns: 1fr; }
}
/* /Pages/AccessorySalesV4.razor.rz.scp.css */
/* /accessory-sales v4 — scoped styles. Phase 1 layout + Phase 7 polish.
   Mobile collapses to a single column under 900px. */

.asv4-root[b-q8d1syjniy] {
    --dealer-primary: #17864A;
    --dealer-accent: #F4A300;
    --ink: #1a1f2e;
    --ink-muted: #5b6473;
    --panel: #ffffff;
    --panel-soft: #f6f7fb;
    --line: #e3e6ee;
    --shadow: 0 4px 18px rgba(15, 23, 42, 0.08);
    /* Phase A.4 — UI type stack. Inter loaded in index.html; system-ui fallback
       keeps the demo readable offline. */
    --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-size: 15px;
    line-height: 1.5;
    /* Subtle negative tracking — the difference between "app" and "product page". */
    letter-spacing: -0.006em;
    background: linear-gradient(180deg, #f6f7fb 0%, #ffffff 60%);
    color: var(--ink);
    min-height: 100vh;
    padding: 16px;
    box-sizing: border-box;
}

/* Phase A.4 — type & numerals pass. Headings get tighter tracking + a firmer
   weight for clear hierarchy; numeric fields use tabular figures so prices and
   payments align in a column. Scoped to the module via .asv4-root / ::deep. */
.asv4-root h2[b-q8d1syjniy],
.asv4-vehicle-meta h2[b-q8d1syjniy],
.asv4-stage-name[b-q8d1syjniy],
.asv4-col-center[b-q8d1syjniy]  .tour-optin-prompt {
    letter-spacing: -0.02em;
    font-weight: 700;
}

.asv4-avatar-name[b-q8d1syjniy],
.asv4-persona-name[b-q8d1syjniy],
.asv4-persona-picker-title[b-q8d1syjniy] {
    letter-spacing: -0.01em;
}

.asv4-stage-counter[b-q8d1syjniy],
.asv4-financing-summary[b-q8d1syjniy],
.asv4-schedule-confirm[b-q8d1syjniy],
.asv4-col-right[b-q8d1syjniy]  .acc-tile-price,
.asv4-col-right[b-q8d1syjniy]  .acc-tile-msrp,
.asv4-col-right[b-q8d1syjniy]  .quote-cart-line,
.asv4-col-right[b-q8d1syjniy]  .quote-cart-row {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.asv4-diag[b-q8d1syjniy] {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    color: #78350f;
    padding: 10px 14px;
    border-radius: 8px;
    margin: 0 auto 12px;
    max-width: 1500px;
    font-size: 0.85rem;
    font-family: ui-monospace, Consolas, monospace;
}

/* ───────── Co-brand header (Phase C) ───────── */
.asv4-cobrand-bar[b-q8d1syjniy] {
    max-width: 1500px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.asv4-cobrand-dealer[b-q8d1syjniy] { font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; }
/* #18125 Bug 1, QA round 2 — the "×" glyph kept reading as a close button, so
   the separator is now the word "featuring": unmistakable and self-labelling. */
.asv4-cobrand-x[b-q8d1syjniy] {
    color: var(--ink-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.8;
    cursor: default;
    user-select: none;
}

.asv4-cobrand-brand[b-q8d1syjniy] {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 7px;
    color: #fff;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}

.asv4-cobrand-brand img[b-q8d1syjniy] { height: 22px; display: block; }

.asv4-cobrand-tag[b-q8d1syjniy] {
    margin-left: auto;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--dealer-primary);
    background: color-mix(in srgb, var(--dealer-primary) 12%, white);
    border: 1px solid color-mix(in srgb, var(--dealer-primary) 30%, var(--line));
    border-radius: 999px;
    padding: 3px 10px;
}

.asv4-layout[b-q8d1syjniy] {
    display: grid;
    grid-template-columns: 40% 30% 30%;
    gap: 16px;
    max-width: 1500px;
    margin: 0 auto;
}

@media (max-width: 1100px) {
    .asv4-layout[b-q8d1syjniy] { grid-template-columns: 1fr 1fr; }
    .asv4-col-right[b-q8d1syjniy] { grid-column: 1 / span 2; }
}

@media (max-width: 900px) {
    .asv4-layout[b-q8d1syjniy] { grid-template-columns: 1fr; }
    .asv4-col-right[b-q8d1syjniy] { grid-column: auto; }
}

.asv4-col[b-q8d1syjniy] {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ───────── Left: vehicle hero ───────── */

.asv4-col-left[b-q8d1syjniy]  .vehicle-hero {
    position: relative;
    background: #fafbff;
    border-radius: 10px;
    overflow: hidden;
}

.asv4-col-left[b-q8d1syjniy]  .vehicle-hero-frame {
    position: relative;
    aspect-ratio: 3 / 2;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.asv4-col-left[b-q8d1syjniy]  .vehicle-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s ease-out;
}

.asv4-col-left[b-q8d1syjniy]  .vehicle-hero-img.fade-in {
    opacity: 0;
}

.asv4-col-left[b-q8d1syjniy]  .vehicle-hero-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    color: var(--ink-muted);
    z-index: 0;
}

.asv4-col-left[b-q8d1syjniy]  .vehicle-hero-img {
    position: relative;
    z-index: 1;
}

.asv4-col-left[b-q8d1syjniy]  .vehicle-hero-emoji {
    font-size: 4rem;
    margin-bottom: 12px;
}

.asv4-col-left[b-q8d1syjniy]  .vehicle-hero-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink);
}

.asv4-col-left[b-q8d1syjniy]  .vehicle-hero-angle {
    font-size: 0.85rem;
    text-transform: capitalize;
    color: var(--ink-muted);
    margin-top: 4px;
}

.asv4-col-left[b-q8d1syjniy]  .hotspot-ring {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 4px solid var(--dealer-primary);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 0 rgba(23, 134, 74, 0.6);
    animation: asv4-pulse-b-q8d1syjniy 1.8s ease-out infinite;
    pointer-events: none;
}

@keyframes asv4-pulse-b-q8d1syjniy {
    0%   { box-shadow: 0 0 0 0 rgba(23, 134, 74, 0.55); }
    70%  { box-shadow: 0 0 0 18px rgba(23, 134, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(23, 134, 74, 0); }
}

.asv4-col-left[b-q8d1syjniy]  .vehicle-angle-strip {
    display: flex;
    gap: 6px;
    padding: 8px;
    flex-wrap: wrap;
}

.asv4-col-left[b-q8d1syjniy]  .vehicle-angle-pill {
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel-soft);
    cursor: pointer;
    text-transform: capitalize;
    font-size: 0.85rem;
}

.asv4-col-left[b-q8d1syjniy]  .vehicle-angle-pill.active {
    background: var(--dealer-primary);
    color: white;
    border-color: var(--dealer-primary);
}

/* ───────── Configurator: overlay layers + finish-swap (Phase A) ───────── */

/* Accessory overlay layers composited over the base image. z-index set inline
   from the layer's ZIndex (base img is z-index:1). */
.asv4-col-left[b-q8d1syjniy]  .vehicle-hero-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    transition: opacity 0.2s ease-out;
}

.asv4-col-left[b-q8d1syjniy]  .vehicle-finish-strip {
    display: flex;
    gap: 8px;
    padding: 10px 8px;
    flex-wrap: wrap;
    align-items: center;
}

.asv4-col-left[b-q8d1syjniy]  .vehicle-finish-swatch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 7px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel-soft);
    cursor: pointer;
    font-size: 0.85rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.asv4-col-left[b-q8d1syjniy]  .vehicle-finish-swatch:hover {
    border-color: var(--dealer-primary);
}

.asv4-col-left[b-q8d1syjniy]  .vehicle-finish-swatch.active {
    border-color: var(--dealer-primary);
    box-shadow: 0 0 0 2px var(--dealer-primary) inset;
    font-weight: 600;
}

.asv4-col-left[b-q8d1syjniy]  .vehicle-finish-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--swatch, #888);
    border: 1px solid rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4);
    flex: 0 0 auto;
}

.asv4-col-left[b-q8d1syjniy]  .vehicle-finish-label {
    text-transform: capitalize;
}

/* Tiny marker that this finish is still showing a placeholder image. */
.asv4-col-left[b-q8d1syjniy]  .vehicle-finish-ph {
    color: var(--dealer-accent, #F4A300);
    font-weight: 700;
    line-height: 1;
}

.asv4-vehicle-meta h2[b-q8d1syjniy] {
    font-size: 1.25rem;
    margin: 0;
}

.asv4-vehicle-noun[b-q8d1syjniy] {
    color: var(--ink-muted);
    font-size: 0.9rem;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.asv4-change-vehicle[b-q8d1syjniy] {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    color: var(--ink);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.asv4-change-vehicle:hover[b-q8d1syjniy] {
    border-color: var(--dealer-primary);
    color: var(--dealer-primary);
}

/* ───────── Center: avatar + tour controls ───────── */

.asv4-avatar-frame[b-q8d1syjniy] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.asv4-avatar-video[b-q8d1syjniy] {
    aspect-ratio: 4 / 3;
    background: linear-gradient(140deg, #1f2937 0%, #111827 100%);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease, filter 0.4s ease;
    /* Phase A.4 — subtle brand-tinted frame matching the dealer's colors so the
       avatar reads as part of the dealer's brand, not a generic widget. */
    border: 2px solid var(--dealer-primary);
    box-shadow: 0 6px 20px -8px var(--dealer-primary), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* A thin accent bar at the top of the avatar frame in the dealer accent color. */
.asv4-avatar-video[b-q8d1syjniy]::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--dealer-primary), var(--dealer-accent));
    z-index: 3;
    pointer-events: none;
}

/* #17636 Bug 10 — subtle dim while the avatar is idle so the SDK's
   continuous head-nod animation reads as quiet/background. Bound from C#
   via the "idle" class when connected but neither speaking nor listening.
   QA round 2 (Derek 19466189): the original treatment used saturate(0.85)
   which read as a "grayish filter." Color filter removed; just a light
   opacity drop so the dim is felt as 'attentive but resting,' not 'washed
   out.' Transitions to/from idle stay on the parent .asv4-avatar-video. */
.asv4-avatar-video.idle[b-q8d1syjniy] {
    opacity: 0.88;
}

.asv4-avatar-video video[b-q8d1syjniy] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.asv4-avatar-placeholder[b-q8d1syjniy] {
    color: white;
    text-align: center;
}

.asv4-avatar-emoji[b-q8d1syjniy] {
    font-size: 3.5rem;
}

.asv4-avatar-name[b-q8d1syjniy] {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 6px;
}

.asv4-avatar-bio[b-q8d1syjniy] {
    font-size: 0.8rem;
    opacity: 0.75;
    margin-top: 2px;
}

.btn-start-avatar[b-q8d1syjniy] {
    margin-top: 14px;
    padding: 10px 18px;
    background: var(--dealer-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.95rem;
}

.btn-start-avatar:disabled[b-q8d1syjniy] {
    opacity: 0.6;
    cursor: default;
}

.btn-mic[b-q8d1syjniy] {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel-soft);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink);
}

.btn-mic.mic-on[b-q8d1syjniy] {
    background: color-mix(in srgb, var(--dealer-primary) 12%, white);
    border-color: var(--dealer-primary);
    color: var(--dealer-primary);
}

.btn-mic.mic-off[b-q8d1syjniy] {
    background: #fee2e2;
    border-color: #ef4444;
    color: #991b1b;
}

.btn-mic:hover[b-q8d1syjniy] {
    filter: brightness(0.97);
}

/* ── Persona picker (gear chip + popover) ───────────────────────── */

.btn-persona[b-q8d1syjniy] {
    margin-left: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel-soft);
    color: var(--ink-muted);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.btn-persona:hover[b-q8d1syjniy] {
    border-color: var(--dealer-primary);
    color: var(--dealer-primary);
    background: color-mix(in srgb, var(--dealer-primary) 6%, white);
}

.asv4-persona-picker[b-q8d1syjniy] {
    margin-top: 10px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.asv4-persona-picker-title[b-q8d1syjniy] {
    font-weight: 700;
    font-size: 0.95rem;
}

.asv4-persona-picker-sub[b-q8d1syjniy] {
    color: var(--ink-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}

.asv4-persona-options[b-q8d1syjniy] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.asv4-persona-option[b-q8d1syjniy] {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    text-align: left;
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 4px 10px;
    align-items: center;
    font-size: 0.85rem;
}

.asv4-persona-option:hover[b-q8d1syjniy] {
    border-color: var(--dealer-primary);
    background: color-mix(in srgb, var(--dealer-primary) 6%, white);
}

.asv4-persona-option.active[b-q8d1syjniy] {
    border-color: var(--dealer-primary);
    background: color-mix(in srgb, var(--dealer-primary) 12%, white);
}

.asv4-persona-name[b-q8d1syjniy] {
    font-weight: 700;
    color: var(--ink);
    font-size: 0.92rem;
}

.asv4-persona-tag[b-q8d1syjniy] {
    background: var(--dealer-primary);
    color: white;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.asv4-persona-desc[b-q8d1syjniy] {
    grid-column: 1 / -1;
    color: var(--ink-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}

.asv4-persona-close[b-q8d1syjniy] {
    background: transparent;
    border: none;
    color: var(--ink-muted);
    cursor: pointer;
    font-size: 0.8rem;
    text-decoration: underline;
    align-self: flex-end;
}

.asv4-avatar-status[b-q8d1syjniy] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-muted);
    font-size: 0.85rem;
}

.asv4-avatar-status .dot[b-q8d1syjniy] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #cbd0db;
}

.asv4-avatar-status .dot.speaking[b-q8d1syjniy] { background: #ef4444; animation: asv4-pulse-b-q8d1syjniy 1.2s ease-out infinite; }
.asv4-avatar-status .dot.listening[b-q8d1syjniy] { background: #22c55e; }
.asv4-avatar-status .dot.idle[b-q8d1syjniy] { background: #94a3b8; }

.asv4-avatar-message[b-q8d1syjniy] {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    min-height: 80px;
    font-size: 0.95rem;
    line-height: 1.5;
    /* QA round 2 follow-up (Derek 19466047 — actual target) — the LLM emits
       multi-line responses with embedded newlines (and sometimes markdown).
       Without pre-wrap, HTML collapses the newlines into spaces, jamming all
       the bullets and headings onto a single line. pre-wrap preserves spaces
       and newlines without requiring <br/> insertion. The C# side strips
       markdown syntax so '###' and '**' don't appear literally. */
    white-space: pre-wrap;
}

/* Inline <strong> elements injected by FormatChatMarkup() — heading and
   bold markers from the LLM response. Block-level display so a converted
   '### Heading' lands on its own line above the following content. */
.asv4-avatar-message strong.asv4-chat-heading[b-q8d1syjniy] {
    display: block;
    margin: 8px 0 2px;
    color: var(--ink);
}

/* ───────── Rider profiling (Phase B) ───────── */

.asv4-col-center[b-q8d1syjniy]  .rider-profile-prompt {
    background: linear-gradient(135deg, color-mix(in srgb, var(--dealer-primary) 8%, #ffffff), #ffffff);
    border: 1px solid color-mix(in srgb, var(--dealer-primary) 25%, var(--line));
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.asv4-col-center[b-q8d1syjniy]  .rider-profile-title {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}

.asv4-col-center[b-q8d1syjniy]  .rider-profile-q-label {
    font-size: 0.82rem;
    color: var(--ink-muted);
    margin-bottom: 6px;
}

.asv4-col-center[b-q8d1syjniy]  .rider-profile-options {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.asv4-col-center[b-q8d1syjniy]  .rider-profile-option {
    flex: 1 1 auto;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel-soft);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.asv4-col-center[b-q8d1syjniy]  .rider-profile-option:hover {
    border-color: var(--dealer-primary);
}

.asv4-col-center[b-q8d1syjniy]  .rider-profile-option.active {
    background: var(--dealer-primary);
    color: #fff;
    border-color: var(--dealer-primary);
    font-weight: 600;
}

.asv4-col-center[b-q8d1syjniy]  .rider-profile-skip {
    align-self: flex-start;
    background: transparent;
    border: none;
    color: var(--ink-muted);
    font-size: 0.78rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

.asv4-rider-chip[b-q8d1syjniy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--dealer-primary) 10%, white);
    border: 1px solid color-mix(in srgb, var(--dealer-primary) 30%, var(--line));
    color: var(--dealer-primary);
    font-size: 0.78rem;
    font-weight: 600;
}

.asv4-col-center[b-q8d1syjniy]  .tour-optin-banner {
    background: linear-gradient(135deg, color-mix(in srgb, var(--dealer-primary) 8%, #ffffff), #ffffff);
    border: 1px solid color-mix(in srgb, var(--dealer-primary) 25%, var(--line));
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.asv4-col-center[b-q8d1syjniy]  .tour-optin-prompt {
    font-weight: 600;
    font-size: 1rem;
}

.asv4-col-center[b-q8d1syjniy]  .tour-optin-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.asv4-col-center[b-q8d1syjniy]  .btn-tour-primary {
    background: var(--dealer-primary);
    color: white;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    flex: 1;
}

.asv4-col-center[b-q8d1syjniy]  .btn-tour-secondary {
    background: var(--panel-soft);
    color: var(--ink);
    border: 1px solid var(--line);
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    flex: 1;
}

.asv4-col-center[b-q8d1syjniy]  .tour-progress-bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.asv4-col-center[b-q8d1syjniy]  .tour-progress-segment {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    color: var(--ink-muted);
    border-radius: 8px;
    padding: 8px 4px;
    font-size: 0.7rem;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.asv4-col-center[b-q8d1syjniy]  .tour-progress-segment.completed {
    background: color-mix(in srgb, var(--dealer-primary) 12%, white);
    border-color: var(--dealer-primary);
    color: var(--dealer-primary);
}

.asv4-col-center[b-q8d1syjniy]  .tour-progress-segment.current {
    background: var(--dealer-primary);
    color: white;
    border-color: var(--dealer-primary);
    box-shadow: 0 2px 10px rgba(23, 134, 74, 0.25);
}

.asv4-col-center[b-q8d1syjniy]  .tour-progress-index {
    font-weight: 700;
    font-size: 0.9rem;
}

.asv4-col-center[b-q8d1syjniy]  .tour-progress-label {
    line-height: 1.1;
}

.asv4-tour-actions[b-q8d1syjniy] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.asv4-tour-actions .btn-advance[b-q8d1syjniy],
.asv4-tour-actions .btn-exit[b-q8d1syjniy] {
    flex: 1;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

.asv4-tour-actions .btn-advance[b-q8d1syjniy] {
    background: var(--dealer-primary);
    color: white;
    border: none;
}

.asv4-tour-actions .btn-exit[b-q8d1syjniy] {
    background: var(--panel-soft);
    color: var(--ink);
    border: 1px solid var(--line);
}

/* Phase B.5 — "Just curious" educational-mode toggle. */
.asv4-curious-toggle[b-q8d1syjniy] {
    width: 100%;
    text-align: left;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px dashed color-mix(in srgb, var(--dealer-primary) 40%, var(--line));
    background: color-mix(in srgb, var(--dealer-primary) 5%, white);
    color: var(--ink);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.asv4-curious-toggle:hover[b-q8d1syjniy] {
    border-color: var(--dealer-primary);
}

.asv4-curious-toggle.on[b-q8d1syjniy] {
    background: color-mix(in srgb, var(--dealer-primary) 14%, white);
    border-style: solid;
    border-color: var(--dealer-primary);
    color: var(--dealer-primary);
    font-weight: 600;
}

.asv4-user-input[b-q8d1syjniy] {
    display: flex;
    gap: 6px;
}

.asv4-user-input input[b-q8d1syjniy] {
    flex: 1;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--line);
    font-size: 0.95rem;
}

.asv4-user-input .btn-send[b-q8d1syjniy] {
    padding: 10px 14px;
    background: var(--ink);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

.asv4-user-input .btn-send:disabled[b-q8d1syjniy] {
    opacity: 0.5;
    cursor: default;
}

/* ───────── Right: accessory grid + quote cart ───────── */

.asv4-stage-header[b-q8d1syjniy] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
}

.asv4-stage-name[b-q8d1syjniy] {
    font-size: 1.05rem;
    font-weight: 700;
}

.asv4-stage-counter[b-q8d1syjniy] {
    color: var(--ink-muted);
    font-size: 0.8rem;
}

.asv4-accessory-grid[b-q8d1syjniy] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    overflow-y: auto;
    max-height: 460px;
    padding-right: 4px;
    /* QA round 2 (Derek 19466258) — "scrollbar on the products section is
       solid black and doesn't look good." Firefox shim. */
    scrollbar-width: thin;
    scrollbar-color: var(--dealer-primary) transparent;
}

/* Chromium / WebKit scrollbar styling for the accessory grid. The default
   browser scrollbar rendered as a solid black bar on top of the panel,
   which clashed with the dealer palette. Slim, neutral track + branded
   thumb to match the rest of the page. */
.asv4-accessory-grid[b-q8d1syjniy]::-webkit-scrollbar {
    width: 8px;
}

.asv4-accessory-grid[b-q8d1syjniy]::-webkit-scrollbar-track {
    background: transparent;
}

.asv4-accessory-grid[b-q8d1syjniy]::-webkit-scrollbar-thumb {
    background: var(--dealer-primary);
    border-radius: 4px;
    opacity: 0.6;
}

.asv4-accessory-grid[b-q8d1syjniy]::-webkit-scrollbar-thumb:hover {
    background: var(--dealer-primary);
    opacity: 1;
}

.asv4-empty-stage[b-q8d1syjniy] {
    grid-column: 1 / -1;
    color: var(--ink-muted);
    background: var(--panel-soft);
    padding: 14px;
    border-radius: 8px;
    text-align: center;
    font-size: 0.9rem;
}

/* AccessoryTile component (scoped via ::deep) */
.asv4-col-right[b-q8d1syjniy]  .acc-tile {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    position: relative;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.asv4-col-right[b-q8d1syjniy]  .acc-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.asv4-col-right[b-q8d1syjniy]  .acc-tile.in-cart {
    border-color: var(--dealer-primary);
    background: color-mix(in srgb, var(--dealer-primary) 8%, white);
}

.asv4-col-right[b-q8d1syjniy]  .acc-tile.highlighted {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dealer-primary) 35%, transparent);
}

/* #18125 Bug 2 — the badge used to be a ::before at top:-8px, poking above the
   tile where .asv4-accessory-grid's overflow clipped it on the first row. The
   AccessoryTile markup already renders <span class="acc-hero-badge">HERO</span>;
   style that span INSIDE the tile bounds instead (top-left; the in-cart check
   owns top-right). */
.asv4-col-right[b-q8d1syjniy]  .acc-hero-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    background: var(--dealer-accent);
    color: var(--ink);
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* When a hero tile also shows a stock chip, drop the chip below the badge. */
.asv4-col-right[b-q8d1syjniy]  .acc-tile.hero .acc-tile-stock {
    top: 32px;
}

.asv4-col-right[b-q8d1syjniy]  .acc-tile.locked {
    opacity: 0.45;
    cursor: not-allowed;
}

.asv4-col-right[b-q8d1syjniy]  .acc-tile-image {
    background: #fff;
    border-radius: 6px;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.asv4-col-right[b-q8d1syjniy]  .acc-tile-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    inset: 0;
    z-index: 1;
}

.asv4-col-right[b-q8d1syjniy]  .acc-tile-image-placeholder {
    font-size: 2.2rem;
    opacity: 0.6;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
}

.asv4-col-right[b-q8d1syjniy]  .acc-tile-name {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
}

.asv4-col-right[b-q8d1syjniy]  .acc-tile-price-row {
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.asv4-col-right[b-q8d1syjniy]  .acc-tile-price {
    color: var(--dealer-primary);
    font-weight: 700;
    font-size: 1rem;
}

.asv4-col-right[b-q8d1syjniy]  .acc-tile-msrp {
    text-decoration: line-through;
    color: var(--ink-muted);
    font-size: 0.8rem;
}

.asv4-col-right[b-q8d1syjniy]  .acc-tile-points {
    margin: 8px 0 0;
    padding-left: 14px;
    font-size: 0.78rem;
    color: var(--ink-muted);
    list-style: none;
}

/* QA round 2 (Derek 19466047) — "bullets are fine but there are no line
   breaks; all combined together, very hard to read." Selling-point text
   wraps to multiple visual lines per item, so the bullet items were
   running into each other. Bump line-height + vertical spacing so the
   2 bullets read as clearly separate ideas. */
.asv4-col-right[b-q8d1syjniy]  .acc-tile-points li {
    display: block;
    line-height: 1.5;
    margin-bottom: 8px;
    position: relative;
    padding-left: 12px;
}

.asv4-col-right[b-q8d1syjniy]  .acc-tile-points li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--dealer-primary);
    font-weight: 700;
    line-height: 1.5;
}

.asv4-col-right[b-q8d1syjniy]  .acc-tile-points li:last-child {
    margin-bottom: 0;
}

.asv4-col-right[b-q8d1syjniy]  .acc-tile-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--dealer-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    /* Phase A.4 — the check renders only when the item is added, so this
       animation fires once on add as a confirmation pop. */
    animation: asv4-check-pop-b-q8d1syjniy 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes asv4-check-pop-b-q8d1syjniy {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Phase B — honest low-stock badge (top-left, opposite the in-cart check). */
.asv4-col-right[b-q8d1syjniy]  .acc-tile-stock {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

.asv4-col-right[b-q8d1syjniy]  .acc-tile-stock.low {
    background: #fff3d6;
    color: #92600a;
    border: 1px solid #f0c552;
}

.asv4-col-right[b-q8d1syjniy]  .acc-tile-stock.out {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #d1d5db;
}

/* Phase B — "Why this brand" — the brand's position in the category. */
.asv4-col-right[b-q8d1syjniy]  .acc-tile-why {
    margin-top: 8px;
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--ink-muted);
    border-left: 2px solid color-mix(in srgb, var(--dealer-primary) 40%, var(--line));
    padding-left: 8px;
}

.asv4-col-right[b-q8d1syjniy]  .acc-tile-why-label {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--dealer-primary);
    margin-bottom: 2px;
}

/* ───────── Tile product media: "Watch this" / "Listen" (Phase A.3) ───────── */

.asv4-col-right[b-q8d1syjniy]  .acc-tile-media {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.asv4-col-right[b-q8d1syjniy]  .acc-tile-media-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--dealer-primary);
    background: transparent;
    color: var(--dealer-primary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.asv4-col-right[b-q8d1syjniy]  .acc-tile-media-btn:hover,
.asv4-col-right[b-q8d1syjniy]  .acc-tile-media-btn.on {
    background: var(--dealer-primary);
    color: #fff;
}

.asv4-col-right[b-q8d1syjniy]  .acc-tile-player {
    margin-top: 8px;
}

.asv4-col-right[b-q8d1syjniy]  .acc-tile-player video {
    width: 100%;
    border-radius: 8px;
    background: #000;
    display: block;
}

.asv4-col-right[b-q8d1syjniy]  .acc-tile-player audio {
    width: 100%;
    display: block;
}

.asv4-col-right[b-q8d1syjniy]  .quote-cart {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    background: var(--panel-soft);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.asv4-col-right[b-q8d1syjniy]  .quote-cart-header {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
}

.asv4-col-right[b-q8d1syjniy]  .quote-cart-count {
    color: var(--ink-muted);
    font-weight: 400;
    font-size: 0.85rem;
}

.asv4-col-right[b-q8d1syjniy]  .quote-cart-empty {
    color: var(--ink-muted);
    font-size: 0.85rem;
}

.asv4-col-right[b-q8d1syjniy]  .quote-cart-lines {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.asv4-col-right[b-q8d1syjniy]  .quote-cart-line {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    font-size: 0.85rem;
    align-items: center;
}

.asv4-col-right[b-q8d1syjniy]  .quote-cart-line-remove {
    background: transparent;
    border: none;
    color: var(--ink-muted);
    cursor: pointer;
    font-size: 1rem;
}

.asv4-col-right[b-q8d1syjniy]  .quote-cart-totals {
    border-top: 1px solid var(--line);
    padding-top: 8px;
}

.asv4-col-right[b-q8d1syjniy]  .quote-cart-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}

.asv4-col-right[b-q8d1syjniy]  .quote-cart-row.muted { color: var(--ink-muted); }
.asv4-col-right[b-q8d1syjniy]  .quote-cart-row.savings { color: var(--dealer-primary); font-weight: 600; }
.asv4-col-right[b-q8d1syjniy]  .quote-cart-row.total { font-weight: 700; font-size: 1rem; }
.asv4-col-right[b-q8d1syjniy]  .quote-cart-row.monthly {
    color: var(--ink-muted);
    margin-top: 4px;
}

.asv4-col-right[b-q8d1syjniy]  .quote-cart-rollin {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 0.85rem;
    border-top: 1px solid var(--line);
    padding-top: 8px;
    margin-top: 4px;
}

.asv4-col-right[b-q8d1syjniy]  .quote-cart-rollin.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ───────── Compatibility intelligence notice (Phase B) ───────── */

.asv4-compat-notice[b-q8d1syjniy] {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--panel-soft);
    animation: asv4-compat-in-b-q8d1syjniy 0.28s ease-out;
}

@keyframes asv4-compat-in-b-q8d1syjniy {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* requires = amber warning (the "leans out the engine" moment). */
.asv4-compat-notice.asv4-compat-requires[b-q8d1syjniy] {
    background: #fffaf0;
    border-color: #f3c969;
}
/* incompatible = red conflict. */
.asv4-compat-notice.asv4-compat-incompatible[b-q8d1syjniy] {
    background: #fef2f2;
    border-color: #f3a3a3;
}
/* recommends = soft brand-tinted suggestion. */
.asv4-compat-notice.asv4-compat-recommends[b-q8d1syjniy] {
    background: color-mix(in srgb, var(--dealer-primary) 6%, white);
    border-color: color-mix(in srgb, var(--dealer-primary) 30%, var(--line));
}
/* bundle = positive combo offer; brand-tinted with a firmer border. */
.asv4-compat-notice.asv4-compat-bundle[b-q8d1syjniy] {
    background: color-mix(in srgb, var(--dealer-primary) 9%, white);
    border-color: color-mix(in srgb, var(--dealer-primary) 45%, var(--line));
}

.asv4-compat-icon[b-q8d1syjniy] {
    font-size: 1.2rem;
    line-height: 1.3;
    flex: 0 0 auto;
}

.asv4-compat-body[b-q8d1syjniy] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.asv4-compat-message[b-q8d1syjniy] {
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--ink);
}

.asv4-compat-actions[b-q8d1syjniy] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.asv4-compat-accept[b-q8d1syjniy] {
    background: var(--dealer-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.asv4-compat-accept:hover[b-q8d1syjniy] {
    filter: brightness(0.95);
}

.asv4-compat-dismiss[b-q8d1syjniy] {
    background: transparent;
    color: var(--ink-muted);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 0.8rem;
    cursor: pointer;
}

.asv4-close-actions[b-q8d1syjniy] {
    border-top: 1px solid var(--line);
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.asv4-close-actions .btn-schedule[b-q8d1syjniy] {
    padding: 12px;
    background: var(--dealer-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

.asv4-financing-summary[b-q8d1syjniy] {
    background: var(--panel-soft);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.9rem;
}

.asv4-financing-option[b-q8d1syjniy] {
    color: var(--ink-muted);
    font-size: 0.8rem;
    margin-top: 2px;
}

.asv4-schedule-confirm[b-q8d1syjniy] {
    color: var(--dealer-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

/* ───────── Vertical picker (full-page overlay) ───────── */

.asv4-root[b-q8d1syjniy]  .vertical-picker {
    max-width: 720px;
    margin: 48px auto;
    background: white;
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 32px;
    text-align: center;
}

.asv4-root[b-q8d1syjniy]  .vertical-picker-title {
    font-size: 1.6rem;
    margin: 0 0 24px;
}

.asv4-root[b-q8d1syjniy]  .vertical-picker-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 700px) {
    .asv4-root[b-q8d1syjniy]  .vertical-picker-tiles { grid-template-columns: repeat(2, 1fr); }
}

.asv4-root[b-q8d1syjniy]  .vertical-picker-tile {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px 12px;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.asv4-root[b-q8d1syjniy]  .vertical-picker-tile:hover {
    transform: translateY(-2px);
    border-color: var(--dealer-primary);
}

.asv4-root[b-q8d1syjniy]  .vertical-picker-icon { font-size: 2.2rem; }

.asv4-root[b-q8d1syjniy]  .vertical-picker-name { font-weight: 600; }

.asv4-root[b-q8d1syjniy]  .vertical-picker-noun {
    color: var(--ink-muted);
    font-size: 0.8rem;
}

.asv4-root[b-q8d1syjniy]  .vertical-picker-skip {
    margin-top: 24px;
    background: transparent;
    border: none;
    color: var(--ink-muted);
    cursor: pointer;
    text-decoration: underline;
    font-size: 0.85rem;
}

/* ───────── Vehicle picker (full-page) ───────── */

.asv4-root[b-q8d1syjniy]  .vehicle-picker {
    max-width: 760px;
    margin: 48px auto;
    background: white;
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 32px;
    text-align: center;
}

.asv4-root[b-q8d1syjniy]  .vehicle-picker-title {
    font-size: 1.5rem;
    margin: 0 0 6px;
}

.asv4-root[b-q8d1syjniy]  .vehicle-picker-subtitle {
    color: var(--ink-muted);
    font-size: 0.9rem;
    margin-bottom: 24px;
}

.asv4-root[b-q8d1syjniy]  .vehicle-picker-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

@media (max-width: 600px) {
    .asv4-root[b-q8d1syjniy]  .vehicle-picker-tiles { grid-template-columns: 1fr; }
}

.asv4-root[b-q8d1syjniy]  .vehicle-picker-tile {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 18px 12px;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.asv4-root[b-q8d1syjniy]  .vehicle-picker-tile:hover {
    transform: translateY(-2px);
    border-color: var(--dealer-primary);
}

.asv4-root[b-q8d1syjniy]  .vehicle-picker-emoji { font-size: 1.8rem; }
.asv4-root[b-q8d1syjniy]  .vehicle-picker-year  { color: var(--dealer-primary); font-weight: 700; font-size: 0.9rem; }
.asv4-root[b-q8d1syjniy]  .vehicle-picker-make  { font-weight: 600; font-size: 0.95rem; }
.asv4-root[b-q8d1syjniy]  .vehicle-picker-model { color: var(--ink-muted); font-size: 0.85rem; }

.asv4-root[b-q8d1syjniy]  .vehicle-picker-search-row {
    margin: 8px 0 4px;
}

.asv4-root[b-q8d1syjniy]  .vehicle-picker-search {
    width: 100%;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: 0.95rem;
    background: var(--panel-soft);
}

.asv4-root[b-q8d1syjniy]  .vehicle-picker-search:focus {
    outline: none;
    border-color: var(--dealer-primary);
    background: white;
}

.asv4-root[b-q8d1syjniy]  .vehicle-picker-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 12px 0;
    max-height: 240px;
    overflow-y: auto;
}

.asv4-root[b-q8d1syjniy]  .vehicle-picker-result {
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
}

.asv4-root[b-q8d1syjniy]  .vehicle-picker-result:hover {
    border-color: var(--dealer-primary);
    background: color-mix(in srgb, var(--dealer-primary) 5%, white);
}

.asv4-root[b-q8d1syjniy]  .vehicle-picker-result-year {
    color: var(--dealer-primary);
    font-weight: 700;
    font-size: 0.85rem;
}

.asv4-root[b-q8d1syjniy]  .vehicle-picker-result-name {
    font-weight: 600;
}

.asv4-root[b-q8d1syjniy]  .vehicle-picker-no-results {
    color: var(--ink-muted);
    font-size: 0.85rem;
    padding: 10px;
}

.asv4-root[b-q8d1syjniy]  .vehicle-picker-footer {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.asv4-root[b-q8d1syjniy]  .vehicle-picker-skip,
.asv4-root[b-q8d1syjniy]  .vehicle-picker-back {
    background: transparent;
    border: none;
    color: var(--ink-muted);
    cursor: pointer;
    text-decoration: underline;
    font-size: 0.85rem;
}

.asv4-root[b-q8d1syjniy]  .vehicle-picker-back:hover,
.asv4-root[b-q8d1syjniy]  .vehicle-picker-skip:hover {
    color: var(--ink);
}

/* ───────── Comparison mode (Phase B.4) ───────── */

.asv4-col-right[b-q8d1syjniy]  .acc-tile-compare {
    margin-top: 8px;
    align-self: flex-start;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 11px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ink-muted);
    cursor: pointer;
}

.asv4-col-right[b-q8d1syjniy]  .acc-tile-compare:hover {
    border-color: var(--dealer-primary);
    color: var(--dealer-primary);
}

.asv4-col-right[b-q8d1syjniy]  .acc-tile-compare.on {
    background: color-mix(in srgb, var(--dealer-primary) 12%, white);
    border-color: var(--dealer-primary);
    color: var(--dealer-primary);
}

.asv4-compare-bar[b-q8d1syjniy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--dealer-primary) 8%, white);
    border: 1px solid color-mix(in srgb, var(--dealer-primary) 25%, var(--line));
}

.asv4-compare-bar-count[b-q8d1syjniy] { font-size: 0.82rem; color: var(--ink-muted); flex: 1; }

.asv4-compare-bar-go[b-q8d1syjniy] {
    background: var(--dealer-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.asv4-compare-bar-go:disabled[b-q8d1syjniy] { opacity: 0.45; cursor: default; }

.asv4-compare-bar-clear[b-q8d1syjniy] {
    background: transparent;
    border: none;
    color: var(--ink-muted);
    text-decoration: underline;
    font-size: 0.78rem;
    cursor: pointer;
}

/* Overlay + side-by-side panel (rendered as a child component → ::deep). */
.asv4-root[b-q8d1syjniy]  .asv4-compare-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.asv4-root[b-q8d1syjniy]  .asv4-compare-panel {
    background: var(--panel);
    border-radius: 16px;
    max-width: 1000px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    padding: 18px;
}

.asv4-root[b-q8d1syjniy]  .asv4-compare-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.asv4-root[b-q8d1syjniy]  .asv4-compare-title { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; }

.asv4-root[b-q8d1syjniy]  .asv4-compare-close {
    background: transparent;
    border: none;
    font-size: 1.05rem;
    cursor: pointer;
    color: var(--ink-muted);
}

.asv4-root[b-q8d1syjniy]  .asv4-compare-grid { display: grid; gap: 14px; }

.asv4-root[b-q8d1syjniy]  .asv4-compare-col {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--panel-soft);
}

.asv4-root[b-q8d1syjniy]  .asv4-compare-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    background: transparent;
    border: none;
    color: var(--ink-muted);
    cursor: pointer;
    font-size: 0.85rem;
    z-index: 2;
}

.asv4-root[b-q8d1syjniy]  .asv4-compare-img {
    aspect-ratio: 4 / 3;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.asv4-root[b-q8d1syjniy]  .asv4-compare-img img { width: 100%; height: 100%; object-fit: contain; }

.asv4-root[b-q8d1syjniy]  .asv4-compare-name { font-weight: 600; font-size: 0.92rem; line-height: 1.25; }

.asv4-root[b-q8d1syjniy]  .asv4-compare-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}

.asv4-root[b-q8d1syjniy]  .asv4-compare-price { color: var(--dealer-primary); font-weight: 700; font-size: 1rem; }
.asv4-root[b-q8d1syjniy]  .asv4-compare-msrp { text-decoration: line-through; color: var(--ink-muted); font-size: 0.8rem; }

.asv4-root[b-q8d1syjniy]  .asv4-compare-tag {
    background: #fff3d6;
    color: #92600a;
    border: 1px solid #f0c552;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
}

.asv4-root[b-q8d1syjniy]  .asv4-compare-stock { font-size: 0.72rem; font-weight: 700; color: #92600a; }

.asv4-root[b-q8d1syjniy]  .asv4-compare-points {
    margin: 4px 0 0;
    padding-left: 16px;
    font-size: 0.78rem;
    color: var(--ink-muted);
    line-height: 1.5;
}

.asv4-root[b-q8d1syjniy]  .asv4-compare-points li { margin-bottom: 4px; }

.asv4-root[b-q8d1syjniy]  .asv4-compare-why {
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--ink-muted);
    border-left: 2px solid color-mix(in srgb, var(--dealer-primary) 40%, var(--line));
    padding-left: 8px;
}

.asv4-root[b-q8d1syjniy]  .asv4-compare-why-label {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--dealer-primary);
    margin-bottom: 2px;
}

.asv4-root[b-q8d1syjniy]  .asv4-compare-actions { margin-top: auto; padding-top: 4px; }

.asv4-root[b-q8d1syjniy]  .asv4-compare-add {
    width: 100%;
    background: var(--dealer-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.asv4-root[b-q8d1syjniy]  .asv4-compare-add.added {
    background: var(--panel);
    color: var(--dealer-primary);
    border: 1px solid var(--dealer-primary);
}

/* Stack the comparison columns on narrow screens. */
@media (max-width: 720px) {
    .asv4-root[b-q8d1syjniy]  .asv4-compare-grid { grid-template-columns: 1fr !important; }
}
/* /Pages/Admin/ServiceBookingSetupEditor.razor.rz.scp.css */
/* Strict review UI-4 — the page's widths in one place. */
.sb-card[b-6nwmfq2f5s] {
    max-width: 44rem;
}

.sb-number[b-6nwmfq2f5s] {
    width: 8rem;
}

.sb-day[b-6nwmfq2f5s] {
    width: 6rem;
}
/* /Pages/App/AICoaching.razor.rz.scp.css */
.coach-grid[b-rijc2xakwo] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; align-items: start; }
.coach-pass[b-rijc2xakwo] { color: var(--tp-pass); }
.coach-fail[b-rijc2xakwo] { color: var(--tp-fail); }
.coach-point[b-rijc2xakwo] { display: flex; gap: 12px; padding: 8px 0; align-items: flex-start; }
.coach-mark[b-rijc2xakwo] { flex: 0 0 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.coach-mark.good[b-rijc2xakwo] { background: var(--tp-pass-bg); color: var(--tp-pass); }
.coach-mark.bad[b-rijc2xakwo] { background: var(--tp-fail-bg); color: var(--tp-fail); }
.coach-imp[b-rijc2xakwo] { background: var(--tp-warn-bg); border: 1px solid #FDE68A; border-radius: var(--tp-radius-card); padding: 14px 16px; margin-bottom: 12px; }
.coach-imp .tp-label[b-rijc2xakwo] { color: var(--tp-warn); margin-bottom: 4px; }
.coach-foot[b-rijc2xakwo] { margin-top: 16px; }

@media (max-width: 960px) {
    .coach-grid[b-rijc2xakwo] { grid-template-columns: 1fr; }
}
/* /Pages/App/AvatarRoleplay.razor.rz.scp.css */
.stage-missing[b-8krfgkgsaa] { max-width: 520px; margin: 80px auto; display: grid; gap: 16px; justify-items: start; padding: 0 16px; }

.stage-head[b-8krfgkgsaa] { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 40px; border-bottom: 1px solid var(--tp-stage-border); flex-wrap: wrap; }
.stage-title-row[b-8krfgkgsaa] { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.stage-title[b-8krfgkgsaa] { font-size: 20px !important; font-weight: 700; margin: 0; color: var(--tp-stage-ink); }
.stage-sub[b-8krfgkgsaa] { color: var(--tp-stage-muted); font-size: 14px; }
.stage-head-right[b-8krfgkgsaa] { display: flex; align-items: center; gap: 16px; }
.stage-rec[b-8krfgkgsaa] { display: inline-flex; align-items: center; gap: 8px; color: var(--tp-stage-muted); font-size: 14px; }
.stage-rec-dot[b-8krfgkgsaa] { width: 8px; height: 8px; border-radius: 50%; background: var(--tp-stage-end); }
.stage-head-right[b-8krfgkgsaa]  .stage-timer { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tp-stage-ink); }
.stage-head-right[b-8krfgkgsaa]  .stage-limit { color: var(--tp-stage-muted); font-size: 13px; margin-left: -10px; }

/* Light theme: the recording indicator becomes a tinted pill. */
.tp-stage-light .stage-rec[b-8krfgkgsaa] { background: var(--tp-fail-bg); color: var(--tp-fail); font-weight: 600; padding: 4px 12px; border-radius: var(--tp-radius-pill); }

.stage-body[b-8krfgkgsaa] { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 380px; min-height: 0; }
.stage-main[b-8krfgkgsaa] { display: flex; flex-direction: column; align-items: center; padding: 28px 24px 32px; gap: 14px; }
.stage-notice[b-8krfgkgsaa] { width: 100%; max-width: 720px; }

.stage-video[b-8krfgkgsaa] { position: relative; width: 100%; max-width: 720px; aspect-ratio: 16 / 9; background: var(--tp-stage-panel); border: 1px solid var(--tp-stage-border); border-radius: 16px; overflow: hidden; }
.stage-video video[b-8krfgkgsaa] { width: 100%; height: 100%; object-fit: cover; }
.stage-video video.hidden[b-8krfgkgsaa] { display: none; }
.stage-video-ph[b-8krfgkgsaa] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--tp-stage-muted); font-size: 15px; padding: 16px; text-align: center; }
.stage-video-off[b-8krfgkgsaa] { border: 1px dashed var(--tp-stage-border); border-radius: 12px; padding: 18px 22px; }
.stage-video-off strong[b-8krfgkgsaa] { color: var(--tp-stage-ink); }
.stage-paused[b-8krfgkgsaa] { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; background: color-mix(in srgb, var(--tp-stage) 88%, transparent); color: var(--tp-stage-ink); }

.stage-state[b-8krfgkgsaa] { min-height: 34px; }
.stage-pill[b-8krfgkgsaa] { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: var(--tp-radius-pill); background: var(--tp-stage-panel); border: 1px solid var(--tp-stage-border); font-size: 13px; font-weight: 600; letter-spacing: .05em; color: var(--tp-stage-ink); }
.stage-dot[b-8krfgkgsaa] { width: 8px; height: 8px; border-radius: 50%; background: var(--tp-stage-muted); }
.stage-dot.on[b-8krfgkgsaa] { background: var(--tp-stage-mic); }

.stage-utterance[b-8krfgkgsaa] { font-size: 26px; line-height: 1.35; text-align: center; max-width: 760px; margin: 0; min-height: 72px; color: var(--tp-stage-ink); }
.stage-heard[b-8krfgkgsaa] { color: var(--tp-stage-you); margin: 0; font-size: 16px; }

.stage-controls[b-8krfgkgsaa] { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.stage-round[b-8krfgkgsaa] { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--tp-stage-border); background: transparent; color: var(--tp-stage-ink); cursor: pointer; font-size: 14px; }
.stage-round:disabled[b-8krfgkgsaa], .stage-mic:disabled[b-8krfgkgsaa], .stage-end:disabled[b-8krfgkgsaa] { opacity: .45; cursor: not-allowed; }
.stage-mic[b-8krfgkgsaa] { display: inline-flex; align-items: center; gap: 12px; height: 76px; padding: 0 30px; border-radius: var(--tp-radius-pill); border: 2px solid var(--tp-stage-border); background: var(--tp-stage-panel); color: var(--tp-stage-ink); font-size: 18px; font-weight: 600; cursor: pointer; }
.stage-mic.active[b-8krfgkgsaa] { border-color: var(--tp-stage-mic); background: var(--tp-stage-mic-bg); color: var(--tp-stage-ink); }
.stage-bars[b-8krfgkgsaa] { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; }
.stage-bars i[b-8krfgkgsaa] { width: 4px; height: 8px; background: var(--tp-stage-mic); border-radius: 2px; }
.stage-bars.live i[b-8krfgkgsaa] { animation: stage-bar-b-8krfgkgsaa 0.9s ease-in-out infinite; }
.stage-bars.live i:nth-child(2)[b-8krfgkgsaa] { animation-delay: .15s; } .stage-bars.live i:nth-child(3)[b-8krfgkgsaa] { animation-delay: .3s; }
.stage-bars.live i:nth-child(4)[b-8krfgkgsaa] { animation-delay: .45s; } .stage-bars.live i:nth-child(5)[b-8krfgkgsaa] { animation-delay: .6s; }
@keyframes stage-bar-b-8krfgkgsaa { 0%, 100% { height: 6px; } 50% { height: 22px; } }
@media (prefers-reduced-motion: reduce) { .stage-bars.live i[b-8krfgkgsaa] { animation: none; height: 14px; } }
.stage-end[b-8krfgkgsaa] { height: 56px; padding: 0 26px; border-radius: var(--tp-radius-pill); border: 1.5px solid var(--tp-stage-end); background: transparent; color: var(--tp-stage-end); font-size: 16px; font-weight: 600; cursor: pointer; }
.stage-helper[b-8krfgkgsaa] { color: var(--tp-stage-muted); font-size: 14px; margin: 0; }

.stage-type[b-8krfgkgsaa] { width: 100%; max-width: 560px; color: var(--tp-stage-muted); font-size: 14px; }
.stage-type summary[b-8krfgkgsaa] { cursor: pointer; text-align: center; }
.stage-type-form[b-8krfgkgsaa] { display: flex; gap: 8px; margin-top: 10px; }
.stage-input[b-8krfgkgsaa] { flex: 1; height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--tp-stage-border); background: var(--tp-stage-panel); color: var(--tp-stage-ink); font-size: 15px; }

.stage-btn[b-8krfgkgsaa] { height: 44px; padding: 0 20px; border-radius: 8px; border: 1px solid var(--tp-stage-border); background: transparent; color: var(--tp-stage-ink); font-weight: 600; cursor: pointer; }
.stage-btn-primary[b-8krfgkgsaa] { background: var(--tp-brand); border-color: var(--tp-brand); color: #fff; }
.stage-btn-danger[b-8krfgkgsaa] { background: var(--tp-stage-end); border-color: var(--tp-stage-end); color: #fff; }
.stage-btn:disabled[b-8krfgkgsaa] { opacity: .5; cursor: not-allowed; }

.stage-rail[b-8krfgkgsaa] { border-left: 1px solid var(--tp-stage-border); display: flex; flex-direction: column; min-height: 0; }
.stage-rail-head[b-8krfgkgsaa] { display: flex; justify-content: space-between; align-items: center; padding: 18px 28px; border-bottom: 1px solid var(--tp-stage-border); }
.stage-label[b-8krfgkgsaa] { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tp-stage-muted); }
.stage-show[b-8krfgkgsaa] { display: inline-flex; gap: 8px; align-items: center; color: var(--tp-stage-muted); font-size: 14px; }
.stage-lines[b-8krfgkgsaa] { flex: 1; overflow-y: auto; padding: 18px 28px; display: grid; gap: 16px; align-content: start; font-size: 15px; line-height: 1.45; max-height: calc(100vh - 420px); min-height: 160px; }
.stage-who[b-8krfgkgsaa] { font-size: 12px; font-weight: 700; letter-spacing: .06em; margin-bottom: 2px; }
.stage-who.customer[b-8krfgkgsaa] { color: var(--tp-stage-customer); }
.stage-who.you[b-8krfgkgsaa] { color: var(--tp-stage-you); }
.stage-line-time[b-8krfgkgsaa] { color: var(--tp-stage-muted); font-weight: 500; margin-left: 8px; letter-spacing: 0; }
.stage-muted[b-8krfgkgsaa] { color: var(--tp-stage-muted); font-size: 14px; margin: 0; }
.stage-rail-foot[b-8krfgkgsaa] { border-top: 1px solid var(--tp-stage-border); padding: 18px 28px 24px; display: grid; gap: 10px; }
.stage-seg[b-8krfgkgsaa] { display: flex; gap: 6px; }
.stage-seg span[b-8krfgkgsaa] { flex: 1; height: 5px; border-radius: 3px; background: var(--tp-stage-border); }
.stage-seg span.on[b-8krfgkgsaa] { background: var(--tp-stage-mic); }
.stage-ref[b-8krfgkgsaa] { border: 1px solid var(--tp-stage-border); border-radius: 10px; padding: 14px 16px; color: var(--tp-stage-muted); font-size: 14px; opacity: .8; }

.stage-dialog[b-8krfgkgsaa] { background: var(--tp-stage-panel); color: var(--tp-stage-ink); border: 1px solid var(--tp-stage-border); border-radius: 14px; padding: 26px; max-width: 420px; width: calc(100% - 32px); }
.stage-dialog[b-8krfgkgsaa]::backdrop { background: rgba(0, 0, 0, .55); }
.stage-dialog h2[b-8krfgkgsaa] { margin: 0 0 8px; font-size: 20px !important; }
.stage-modal-actions[b-8krfgkgsaa] { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

@media (max-width: 960px) {
    .stage-body[b-8krfgkgsaa] { grid-template-columns: 1fr; }
    .stage-rail[b-8krfgkgsaa] { border-left: 0; border-top: 1px solid var(--tp-stage-border); }
    .stage-head[b-8krfgkgsaa] { padding: 14px 16px; }
    .stage-lines[b-8krfgkgsaa] { max-height: 320px; }
    .stage-utterance[b-8krfgkgsaa] { font-size: 21px; }
    .stage-mic[b-8krfgkgsaa] { height: 64px; padding: 0 20px; font-size: 16px; }
}
/* /Pages/App/DiscoveryCoach.razor.rz.scp.css */
.dc-thread[b-1b3x2zwn73] { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.dc-cust[b-1b3x2zwn73] { max-width: 85%; }
.dc-bubble[b-1b3x2zwn73] { padding: 12px 18px; font-size: 15.5px; }
.dc-you[b-1b3x2zwn73] { align-self: flex-end; max-width: 80%; background: var(--tp-brand); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 15.5px; }
.dc-coach[b-1b3x2zwn73] { background: var(--tp-brand-tint); border: 1px dashed var(--tp-brand); border-radius: var(--tp-radius-card); padding: 14px 18px; font-size: 15px; color: #3730A3; max-width: 92%; }
.dc-input[b-1b3x2zwn73] { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; position: relative; }
/* Borderless field inside the card; the keyboard focus indicator moves to the wrapper so it stays visible. */
.dc-input .tp-input[b-1b3x2zwn73], .dc-input .tp-input:focus[b-1b3x2zwn73], .dc-input .tp-input:focus-visible[b-1b3x2zwn73] { border: 0; outline: 0; }
.dc-input:focus-within[b-1b3x2zwn73] { box-shadow: var(--tp-focus-ring); }
/* /Pages/App/PracticeRoleplay.razor.rz.scp.css */
.pr-featured[b-al80ri9syu] {
    background: var(--tp-hidden-bg);
    border-color: var(--tp-hidden-border);
}
/* /Pages/App/ProductExpert.razor.rz.scp.css */
.pe-thread[b-xkmffjjm01] { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.pe-q[b-xkmffjjm01] { align-self: flex-end; max-width: 80%; background: var(--tp-brand); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 15.5px; }
.pe-a[b-xkmffjjm01] { max-width: 100%; }
.pe-input[b-xkmffjjm01] { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; position: relative; }
/* Borderless field inside the card; the keyboard focus indicator moves to the wrapper so it stays visible. */
.pe-input .tp-input[b-xkmffjjm01], .pe-input .tp-input:focus[b-xkmffjjm01], .pe-input .tp-input:focus-visible[b-xkmffjjm01] { border: 0; outline: 0; }
.pe-input:focus-within[b-xkmffjjm01] { box-shadow: var(--tp-focus-ring); }
.pe-suggest[b-xkmffjjm01] { height: auto; min-height: 40px; padding: 8px 14px; border-radius: var(--tp-radius-card); text-align: left; width: 100%; color: var(--tp-ink); }
.pe-suggest:hover:not(:disabled)[b-xkmffjjm01] { background: var(--tp-ground); }
.pe-suggest:disabled[b-xkmffjjm01] { opacity: .5; cursor: not-allowed; }
/* /Pages/App/RoleplayLobby.razor.rz.scp.css */
.lobby-hero[b-1hd9x6izxv] { text-align: center; margin: 8px 0 24px; }
.lobby-title[b-1hd9x6izxv] { font-size: var(--tp-fs-display) !important; font-weight: var(--tp-fw-display); margin: 6px 0; }
.lobby-grid[b-1hd9x6izxv] { display: grid; grid-template-columns: minmax(260px, 5fr) 7fr; gap: 20px; align-items: start; margin-top: 16px; }
.lobby-person[b-1hd9x6izxv] { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.lobby-still[b-1hd9x6izxv] { width: 76px; height: 76px; border-radius: 12px; background: var(--tp-neutral-bg); color: var(--tp-ink-muted); display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 700; }
.lobby-name[b-1hd9x6izxv] { font-size: 24px; font-weight: 700; }
.lobby-facts[b-1hd9x6izxv] { margin: 0; display: grid; grid-template-columns: 1fr; gap: 2px; }
.lobby-facts dt[b-1hd9x6izxv] { font-size: var(--tp-fs-label); font-weight: var(--tp-fw-label); letter-spacing: .08em; text-transform: uppercase; color: var(--tp-ink-muted); margin-top: 10px; }
.lobby-facts dd[b-1hd9x6izxv] { margin: 0; }
.lobby-situation[b-1hd9x6izxv] { font-size: 17px; line-height: 1.5; margin: 0 0 14px; }
.lobby-rules[b-1hd9x6izxv] { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.lobby-mic[b-1hd9x6izxv] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lobby-meter[b-1hd9x6izxv] { display: flex; align-items: flex-end; gap: 3px; height: 30px; min-width: 50px; }
.lobby-meter span[b-1hd9x6izxv] { width: 5px; border-radius: 2px; background: var(--tp-border); }
.lobby-meter span.on[b-1hd9x6izxv] { background: var(--tp-pass); }
.lobby-mic-status[b-1hd9x6izxv] { font-weight: 600; color: var(--tp-ink-muted); flex: 1 1 200px; }
.lobby-mic-status.ok[b-1hd9x6izxv] { color: var(--tp-pass); }
.lobby-mic-status.bad[b-1hd9x6izxv] { color: var(--tp-fail); }
.lobby-fallback[b-1hd9x6izxv] { margin: 12px 0; }
.lobby-consent[b-1hd9x6izxv] { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; }
.lobby-actions[b-1hd9x6izxv] { display: flex; justify-content: center; gap: 12px; margin-top: 28px; }
.lobby-hint[b-1hd9x6izxv] { text-align: center; margin-top: 10px; }

@media (max-width: 900px) {
    .lobby-grid[b-1hd9x6izxv] { grid-template-columns: 1fr; }
    .lobby-rules[b-1hd9x6izxv] { grid-template-columns: 1fr; }
}
/* /Pages/App/RoleplayResults.razor.rz.scp.css */
.res-chip[b-rk6kslaf9r] { float: right; font-size: 13px; color: var(--tp-ink-muted); border: 1px solid var(--tp-border); border-radius: 8px; padding: 4px 10px; background: var(--tp-surface); }
.res-hero-row[b-rk6kslaf9r] { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.res-hero-body[b-rk6kslaf9r] { flex: 1 1 320px; display: grid; gap: 8px; }
.res-cta[b-rk6kslaf9r] { margin-top: 6px; gap: 10px; }
.res-grid[b-rk6kslaf9r] { grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; margin-top: 20px; }
.res-group td[b-rk6kslaf9r] { background: #FAFAFB; }
.res-sub[b-rk6kslaf9r] { padding-left: 28px !important; color: var(--tp-ink-nav); }
.res-evidence[b-rk6kslaf9r] { font-size: 13.5px; color: var(--tp-ink-muted); max-width: 320px; }
.res-evidence a[b-rk6kslaf9r] { margin-left: 6px; font-weight: 600; }
.res-cf li[b-rk6kslaf9r] { padding: 8px 0; border-bottom: 1px solid var(--tp-border); }
.res-delta[b-rk6kslaf9r] { display: flex; justify-content: space-between; padding: 6px 0; }
.res-up[b-rk6kslaf9r] { color: var(--tp-pass); font-weight: 600; }
.res-down[b-rk6kslaf9r] { color: var(--tp-fail); font-weight: 600; }
.res-rec[b-rk6kslaf9r] { margin: 6px 0; color: var(--tp-ink-muted); }

@media (max-width: 960px) {
    .res-grid[b-rk6kslaf9r] { grid-template-columns: 1fr; }
    .res-chip[b-rk6kslaf9r] { float: none; display: inline-block; margin-top: 6px; }
}
/* /Pages/App/TrainingDetail.razor.rz.scp.css */
.td-step[b-ur3cnh3kei] {
    width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--tp-border-input); color: var(--tp-ink-muted); font-weight: 700; font-size: 14px;
}
.td-step.done[b-ur3cnh3kei] { background: var(--tp-pass); border-color: var(--tp-pass); color: #fff; }
.td-step.now[b-ur3cnh3kei] { border-color: var(--tp-brand); color: var(--tp-brand); }
/* /Pages/DemoLanding.razor.rz.scp.css */
/* Phase E — per-brand demo landing (pitch launcher). Self-contained theme. */

.dl-root[b-3stw4rob5q] {
    --ink: #16181d;
    --ink-muted: #5b6473;
    --line: #e6e8ee;
    --panel: #ffffff;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
    color: var(--ink);
    background: #f4f6fa;
    min-height: 100vh;
}

/* Hero */
.dl-hero[b-3stw4rob5q] {
    background:
        radial-gradient(1200px 400px at 80% -10%, color-mix(in srgb, var(--brand-accent) 22%, transparent), transparent),
        linear-gradient(160deg, var(--brand) 0%, #05070a 100%);
    color: #fff;
    padding: 56px clamp(20px, 6vw, 80px) 64px;
}

.dl-hero-inner[b-3stw4rob5q] { max-width: 1000px; margin: 0 auto; }

.dl-kicker[b-3stw4rob5q] {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--brand-accent);
    margin-bottom: 18px;
}

.dl-brandline[b-3stw4rob5q] { margin-bottom: 22px; }
.dl-logo[b-3stw4rob5q] { height: 40px; display: block; }
.dl-logo-text[b-3stw4rob5q] { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.02em; }

.dl-headline[b-3stw4rob5q] {
    font-size: clamp(1.9rem, 4vw, 3.1rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 0 0 16px;
    max-width: 16ch;
}

.dl-tagline[b-3stw4rob5q] {
    font-size: 1.05rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    max-width: 60ch;
    margin: 0 0 28px;
}

.dl-cta-row[b-3stw4rob5q] { display: flex; gap: 12px; flex-wrap: wrap; }

.dl-cta[b-3stw4rob5q] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: 11px;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.12s ease, filter 0.12s ease;
}
.dl-cta:hover[b-3stw4rob5q] { transform: translateY(-1px); }

.dl-cta-primary[b-3stw4rob5q] { background: var(--brand-accent); color: #06120a; }
.dl-cta-primary:hover[b-3stw4rob5q] { filter: brightness(1.06); }
.dl-cta-secondary[b-3stw4rob5q] { background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); }

/* Sections */
.dl-section[b-3stw4rob5q] { max-width: 1000px; margin: 0 auto; padding: 40px clamp(20px, 6vw, 80px) 0; }
.dl-h2[b-3stw4rob5q] { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 18px; }

/* Before / after */
.dl-beforeafter[b-3stw4rob5q] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dl-ba[b-3stw4rob5q] { border-radius: 16px; padding: 20px 22px; border: 1px solid var(--line); background: var(--panel); }
.dl-ba-tag[b-3stw4rob5q] {
    font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px;
    margin-bottom: 12px; display: inline-block; padding: 3px 10px; border-radius: 999px;
}
.dl-before[b-3stw4rob5q] { background: #fbfbfc; }
.dl-before .dl-ba-tag[b-3stw4rob5q] { background: #fef2f2; color: #b91c1c; }
.dl-after[b-3stw4rob5q] { border-color: color-mix(in srgb, var(--brand) 25%, var(--line)); }
.dl-after .dl-ba-tag[b-3stw4rob5q] { background: color-mix(in srgb, var(--brand-accent) 22%, white); color: #14532d; }
.dl-ba ul[b-3stw4rob5q] { margin: 0; padding-left: 18px; }
.dl-ba li[b-3stw4rob5q] { margin-bottom: 9px; line-height: 1.45; font-size: 0.92rem; }
.dl-before li[b-3stw4rob5q] { color: var(--ink-muted); }

/* Pitch flow */
.dl-flow[b-3stw4rob5q] { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dl-flow li[b-3stw4rob5q] {
    display: flex; align-items: center; gap: 14px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
    padding: 13px 16px; font-size: 0.95rem; font-weight: 500;
}
.dl-flow li span[b-3stw4rob5q] {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 0.82rem;
}

/* Economics */
.dl-econ[b-3stw4rob5q] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dl-econ-card[b-3stw4rob5q] { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; }
.dl-econ-title[b-3stw4rob5q] { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink-muted); }
.dl-econ-big[b-3stw4rob5q] { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.03em; margin: 6px 0 8px; }
.dl-econ-big span[b-3stw4rob5q] { font-size: 0.9rem; font-weight: 600; color: var(--ink-muted); margin-left: 4px; letter-spacing: 0; }
.dl-econ-card p[b-3stw4rob5q] { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--ink-muted); }

/* Footer */
.dl-footer[b-3stw4rob5q] {
    max-width: 1000px; margin: 0 auto; padding: 40px clamp(20px, 6vw, 80px) 56px;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.dl-footnote[b-3stw4rob5q] { font-size: 0.78rem; color: var(--ink-muted); }

@media (max-width: 820px) {
    .dl-beforeafter[b-3stw4rob5q] { grid-template-columns: 1fr; }
    .dl-econ[b-3stw4rob5q] { grid-template-columns: 1fr; }
}
/* /Pages/MobileCustomerPortal.razor.rz.scp.css */
/* Mobile Customer Portal Styles */

.mobile-portal[b-kcg5ktx1yv] {
    min-height: 100vh;
    background: #f8fafc;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    max-width: 480px;
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Header */
.portal-header[b-kcg5ktx1yv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #1e3a5f 0%, #0f2744 100%);
    color: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.dealer-brand[b-kcg5ktx1yv] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dealer-logo[b-kcg5ktx1yv] {
    font-size: 2rem;
}

.dealer-name[b-kcg5ktx1yv] {
    font-weight: 700;
    font-size: 1.1rem;
}

.portal-title[b-kcg5ktx1yv] {
    font-size: 0.8rem;
    opacity: 0.8;
}

.user-avatar[b-kcg5ktx1yv] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
}

/* Login Screen */
.login-screen[b-kcg5ktx1yv] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(135deg, #1e3a5f 0%, #0f2744 100%);
    min-height: calc(100vh - 80px);
}

.login-card[b-kcg5ktx1yv] {
    background: white;
    border-radius: 20px;
    padding: 40px 30px;
    width: 100%;
    max-width: 380px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.login-icon[b-kcg5ktx1yv] {
    font-size: 4rem;
    margin-bottom: 20px;
}

.login-card h2[b-kcg5ktx1yv] {
    margin: 0 0 10px 0;
    color: #1e293b;
    font-size: 1.5rem;
}

.login-card p[b-kcg5ktx1yv] {
    color: #64748b;
    font-size: 0.95rem;
    margin-bottom: 30px;
}

.input-group[b-kcg5ktx1yv] {
    text-align: left;
    margin-bottom: 20px;
}

.input-group label[b-kcg5ktx1yv] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.phone-input[b-kcg5ktx1yv] {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1.1rem;
    text-align: center;
    letter-spacing: 1px;
    transition: all 0.2s;
}

.phone-input:focus[b-kcg5ktx1yv] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.btn-primary[b-kcg5ktx1yv] {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-primary:hover:not(:disabled)[b-kcg5ktx1yv] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

.btn-primary:disabled[b-kcg5ktx1yv] {
    opacity: 0.7;
    cursor: not-allowed;
}

.spinner[b-kcg5ktx1yv] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-kcg5ktx1yv 0.8s linear infinite;
}

@keyframes spin-b-kcg5ktx1yv {
    to { transform: rotate(360deg); }
}

.alt-lookup[b-kcg5ktx1yv] {
    margin-top: 24px;
    color: #64748b;
    font-size: 0.9rem;
}

.link-btn[b-kcg5ktx1yv] {
    background: none;
    border: none;
    color: #3b82f6;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.error-toast[b-kcg5ktx1yv] {
    margin-top: 20px;
    padding: 12px 16px;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    color: #dc2626;
    font-size: 0.9rem;
}

/* Portal Content */
.portal-content[b-kcg5ktx1yv] {
    flex: 1;
    padding-bottom: 80px;
    overflow-y: auto;
}

/* Welcome Banner */
.welcome-banner[b-kcg5ktx1yv] {
    padding: 20px;
    background: linear-gradient(135deg, #1e3a5f 0%, #0f2744 100%);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.welcome-text[b-kcg5ktx1yv] {
    display: flex;
    flex-direction: column;
}

.greeting[b-kcg5ktx1yv] {
    font-size: 0.9rem;
    opacity: 0.8;
}

.customer-name[b-kcg5ktx1yv] {
    font-size: 1.4rem;
    font-weight: 700;
}

.active-service-badge[b-kcg5ktx1yv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid #10b981;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
}

.pulse[b-kcg5ktx1yv] {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: pulse-b-kcg5ktx1yv 2s infinite;
}

@keyframes pulse-b-kcg5ktx1yv {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* Quick Actions */
.quick-actions[b-kcg5ktx1yv] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 20px;
}

.action-card[b-kcg5ktx1yv] {
    background: white;
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.action-card:hover[b-kcg5ktx1yv] {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.action-icon[b-kcg5ktx1yv] {
    font-size: 2rem;
    display: block;
    margin-bottom: 8px;
}

.action-label[b-kcg5ktx1yv] {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.9rem;
}

.badge-dot[b-kcg5ktx1yv] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 10px;
    height: 10px;
    background: #ef4444;
    border-radius: 50%;
}

/* Section Styling */
.section[b-kcg5ktx1yv] {
    padding: 20px;
}

.section-title[b-kcg5ktx1yv] {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 16px 0;
}

/* Appointment Card */
.appointment-card[b-kcg5ktx1yv] {
    background: white;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin-bottom: 12px;
}

.apt-date[b-kcg5ktx1yv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 14px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 10px;
    color: white;
}

.apt-month[b-kcg5ktx1yv] {
    font-size: 0.7rem;
    text-transform: uppercase;
}

.apt-day[b-kcg5ktx1yv] {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
}

.apt-details[b-kcg5ktx1yv] {
    flex: 1;
}

.apt-service[b-kcg5ktx1yv] {
    font-weight: 600;
    color: #1e293b;
}

.apt-time[b-kcg5ktx1yv] {
    color: #64748b;
    font-size: 0.85rem;
}

.apt-vehicle[b-kcg5ktx1yv] {
    color: #94a3b8;
    font-size: 0.8rem;
}

.apt-actions[b-kcg5ktx1yv] {
    display: flex;
    gap: 8px;
}

.btn-icon[b-kcg5ktx1yv] {
    width: 36px;
    height: 36px;
    border: none;
    background: #f1f5f9;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
}

.btn-icon:hover[b-kcg5ktx1yv] {
    background: #e2e8f0;
}

/* Vehicle Card */
.vehicle-card[b-kcg5ktx1yv] {
    background: white;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.vehicle-card:hover[b-kcg5ktx1yv] {
    background: #f8fafc;
}

.vehicle-icon[b-kcg5ktx1yv] {
    font-size: 2rem;
}

.vehicle-info[b-kcg5ktx1yv] {
    flex: 1;
}

.vehicle-name[b-kcg5ktx1yv] {
    font-weight: 600;
    color: #1e293b;
}

.vehicle-vin[b-kcg5ktx1yv] {
    font-size: 0.8rem;
    color: #94a3b8;
    font-family: monospace;
}

.vehicle-status[b-kcg5ktx1yv] {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.vehicle-status.active[b-kcg5ktx1yv] {
    background: #dcfce7;
    color: #16a34a;
}

.vehicle-status.good[b-kcg5ktx1yv] {
    background: #e0f2fe;
    color: #0284c7;
}

/* Approval Card */
.approvals-section[b-kcg5ktx1yv] {
    background: #fef3c7;
    margin: 0 20px;
    border-radius: 16px;
    padding: 16px;
}

.approval-card[b-kcg5ktx1yv] {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.approval-header[b-kcg5ktx1yv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.approval-service[b-kcg5ktx1yv] {
    font-weight: 700;
    color: #1e293b;
}

.approval-price[b-kcg5ktx1yv] {
    font-weight: 700;
    color: #059669;
    font-size: 1.1rem;
}

.approval-desc[b-kcg5ktx1yv] {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.approval-urgency[b-kcg5ktx1yv] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.approval-urgency.high[b-kcg5ktx1yv] {
    background: #fee2e2;
    color: #dc2626;
}

.approval-urgency.medium[b-kcg5ktx1yv] {
    background: #fef3c7;
    color: #d97706;
}

.approval-urgency.low[b-kcg5ktx1yv] {
    background: #e0f2fe;
    color: #0284c7;
}

.approval-actions[b-kcg5ktx1yv] {
    display: flex;
    gap: 10px;
}

.btn-decline[b-kcg5ktx1yv], .btn-approve[b-kcg5ktx1yv] {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-decline[b-kcg5ktx1yv] {
    background: #f1f5f9;
    color: #64748b;
}

.btn-approve[b-kcg5ktx1yv] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

/* Balance Card */
.balance-card[b-kcg5ktx1yv] {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f2744 100%);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    color: white;
}

.balance-amount[b-kcg5ktx1yv] {
    font-size: 2.5rem;
    font-weight: 700;
}

.balance-label[b-kcg5ktx1yv] {
    opacity: 0.8;
    margin-bottom: 16px;
}

.btn-pay[b-kcg5ktx1yv] {
    padding: 12px 32px;
    background: white;
    color: #1e3a5f;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-pay:hover[b-kcg5ktx1yv] {
    transform: scale(1.05);
}

/* View Header */
.view-header[b-kcg5ktx1yv] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: white;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 72px;
    z-index: 50;
}

.btn-back[b-kcg5ktx1yv] {
    width: 40px;
    height: 40px;
    border: none;
    background: #f1f5f9;
    border-radius: 10px;
    font-size: 1.2rem;
    cursor: pointer;
}

.view-header h2[b-kcg5ktx1yv] {
    margin: 0;
    font-size: 1.2rem;
    color: #1e293b;
}

/* Schedule Form */
.schedule-content[b-kcg5ktx1yv] {
    padding: 20px;
}

.form-section[b-kcg5ktx1yv] {
    margin-bottom: 24px;
}

.form-section label[b-kcg5ktx1yv] {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 10px;
}

.vehicle-selector[b-kcg5ktx1yv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vehicle-option[b-kcg5ktx1yv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.vehicle-option.selected[b-kcg5ktx1yv] {
    border-color: #3b82f6;
    background: #eff6ff;
}

.vehicle-icon-sm[b-kcg5ktx1yv] {
    font-size: 1.5rem;
}

.service-grid[b-kcg5ktx1yv] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.service-option[b-kcg5ktx1yv] {
    padding: 16px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.service-option.selected[b-kcg5ktx1yv] {
    border-color: #3b82f6;
    background: #eff6ff;
}

.service-icon[b-kcg5ktx1yv] {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 6px;
}

.service-name[b-kcg5ktx1yv] {
    font-weight: 600;
    color: #1e293b;
    display: block;
    font-size: 0.85rem;
}

.service-price[b-kcg5ktx1yv] {
    color: #64748b;
    font-size: 0.75rem;
}

.date-input[b-kcg5ktx1yv] {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
}

.time-slots[b-kcg5ktx1yv] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.time-slot[b-kcg5ktx1yv] {
    padding: 12px 8px;
    border: 2px solid #e5e7eb;
    background: white;
    border-radius: 10px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.time-slot.selected[b-kcg5ktx1yv] {
    border-color: #3b82f6;
    background: #3b82f6;
    color: white;
}

.form-section textarea[b-kcg5ktx1yv] {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
    resize: none;
}

.btn-schedule[b-kcg5ktx1yv] {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-schedule:disabled[b-kcg5ktx1yv] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Status View */
.status-content[b-kcg5ktx1yv] {
    padding: 20px;
}

.status-vehicle[b-kcg5ktx1yv] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: white;
    border-radius: 12px;
    margin-bottom: 20px;
}

.status-vehicle-icon[b-kcg5ktx1yv] {
    font-size: 2.5rem;
}

.status-vehicle-name[b-kcg5ktx1yv] {
    font-weight: 700;
    font-size: 1.1rem;
    color: #1e293b;
}

.status-ro[b-kcg5ktx1yv] {
    color: #64748b;
    font-size: 0.85rem;
}

/* Timeline */
.status-timeline[b-kcg5ktx1yv] {
    position: relative;
    padding-left: 30px;
    margin-bottom: 24px;
}

.timeline-step[b-kcg5ktx1yv] {
    position: relative;
    padding-bottom: 24px;
    padding-left: 20px;
}

.timeline-step:last-child[b-kcg5ktx1yv] {
    padding-bottom: 0;
}

.timeline-step[b-kcg5ktx1yv]::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 24px;
    bottom: 0;
    width: 2px;
    background: #e5e7eb;
}

.timeline-step:last-child[b-kcg5ktx1yv]::before {
    display: none;
}

.timeline-dot[b-kcg5ktx1yv] {
    position: absolute;
    left: -38px;
    top: 0;
    width: 18px;
    height: 18px;
    border: 2px solid #e5e7eb;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: white;
}

.timeline-step.complete .timeline-dot[b-kcg5ktx1yv] {
    background: #10b981;
    border-color: #10b981;
}

.timeline-step.current .timeline-dot[b-kcg5ktx1yv] {
    border-color: #3b82f6;
    animation: pulse-b-kcg5ktx1yv 2s infinite;
}

.timeline-title[b-kcg5ktx1yv] {
    font-weight: 600;
    color: #1e293b;
}

.timeline-time[b-kcg5ktx1yv] {
    font-size: 0.85rem;
    color: #64748b;
}

/* Completion Card */
.completion-card[b-kcg5ktx1yv] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    color: white;
    margin-bottom: 24px;
}

.completion-label[b-kcg5ktx1yv] {
    opacity: 0.8;
    font-size: 0.9rem;
}

.completion-time[b-kcg5ktx1yv] {
    font-size: 2rem;
    font-weight: 700;
}

.completion-date[b-kcg5ktx1yv] {
    opacity: 0.8;
}

/* Service Item */
.service-item[b-kcg5ktx1yv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #e5e7eb;
}

.service-item:last-child[b-kcg5ktx1yv] {
    border-bottom: none;
}

.service-item-status[b-kcg5ktx1yv] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.service-item-status.complete[b-kcg5ktx1yv] {
    background: #10b981;
}

.service-item-status.in-progress[b-kcg5ktx1yv] {
    background: #3b82f6;
    animation: pulse-b-kcg5ktx1yv 2s infinite;
}

.service-item-status.pending[b-kcg5ktx1yv] {
    background: #e5e7eb;
}

.service-item-info[b-kcg5ktx1yv] {
    flex: 1;
}

.service-item-name[b-kcg5ktx1yv] {
    font-weight: 600;
    color: #1e293b;
}

.service-item-status-text[b-kcg5ktx1yv] {
    font-size: 0.8rem;
    color: #64748b;
}

.service-item-price[b-kcg5ktx1yv] {
    font-weight: 600;
    color: #059669;
}

/* Total Card */
.total-card[b-kcg5ktx1yv] {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
}

.total-row[b-kcg5ktx1yv] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 0.95rem;
    color: #64748b;
}

.total-final[b-kcg5ktx1yv] {
    border-top: 2px solid #e5e7eb;
    margin-top: 8px;
    padding-top: 12px;
    font-weight: 700;
    color: #1e293b;
    font-size: 1.1rem;
}

/* Advisor Card */
.advisor-card[b-kcg5ktx1yv] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.advisor-avatar[b-kcg5ktx1yv] {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1.3rem;
}

.advisor-info[b-kcg5ktx1yv] {
    flex: 1;
}

.advisor-name[b-kcg5ktx1yv] {
    font-weight: 600;
    color: #1e293b;
}

.advisor-title[b-kcg5ktx1yv] {
    font-size: 0.85rem;
    color: #64748b;
}

.btn-call[b-kcg5ktx1yv], .btn-message[b-kcg5ktx1yv] {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 10px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-call[b-kcg5ktx1yv] {
    background: #dcfce7;
}

.btn-message[b-kcg5ktx1yv] {
    background: #e0f2fe;
}

/* History View */
.history-content[b-kcg5ktx1yv] {
    padding: 20px;
}

.history-card[b-kcg5ktx1yv] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: white;
    border-radius: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.history-card:hover[b-kcg5ktx1yv] {
    background: #f8fafc;
}

.history-date[b-kcg5ktx1yv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
}

.history-month[b-kcg5ktx1yv] {
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
}

.history-day[b-kcg5ktx1yv] {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
}

.history-year[b-kcg5ktx1yv] {
    font-size: 0.7rem;
    color: #94a3b8;
}

.history-details[b-kcg5ktx1yv] {
    flex: 1;
}

.history-service[b-kcg5ktx1yv] {
    font-weight: 600;
    color: #1e293b;
}

.history-vehicle[b-kcg5ktx1yv] {
    font-size: 0.85rem;
    color: #64748b;
}

.history-mileage[b-kcg5ktx1yv] {
    font-size: 0.8rem;
    color: #94a3b8;
}

.history-amount[b-kcg5ktx1yv] {
    font-weight: 700;
    color: #059669;
}

/* Chat View */
.chat-container[b-kcg5ktx1yv] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
}

.chat-messages[b-kcg5ktx1yv] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-message[b-kcg5ktx1yv] {
    display: flex;
    gap: 10px;
    max-width: 85%;
}

.chat-message.user[b-kcg5ktx1yv] {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-avatar[b-kcg5ktx1yv] {
    width: 32px;
    height: 32px;
    background: #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.chat-bubble[b-kcg5ktx1yv] {
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 0.95rem;
    line-height: 1.4;
}

.chat-message.assistant .chat-bubble[b-kcg5ktx1yv] {
    background: white;
    color: #1e293b;
    border-bottom-left-radius: 4px;
}

.chat-message.user .chat-bubble[b-kcg5ktx1yv] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border-bottom-right-radius: 4px;
}

.chat-bubble.typing[b-kcg5ktx1yv] {
    display: flex;
    gap: 4px;
    padding: 16px 20px;
}

.chat-bubble.typing .dot[b-kcg5ktx1yv] {
    width: 8px;
    height: 8px;
    background: #94a3b8;
    border-radius: 50%;
    animation: typing-b-kcg5ktx1yv 1.4s infinite;
}

.chat-bubble.typing .dot:nth-child(2)[b-kcg5ktx1yv] { animation-delay: 0.2s; }
.chat-bubble.typing .dot:nth-child(3)[b-kcg5ktx1yv] { animation-delay: 0.4s; }

@keyframes typing-b-kcg5ktx1yv {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-6px); }
}

.chat-prompts[b-kcg5ktx1yv] {
    padding: 0 20px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.prompt-btn[b-kcg5ktx1yv] {
    padding: 10px 16px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.prompt-btn:hover[b-kcg5ktx1yv] {
    background: #f1f5f9;
}

.chat-input-area[b-kcg5ktx1yv] {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    background: white;
    border-top: 1px solid #e5e7eb;
}

.chat-input[b-kcg5ktx1yv] {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 24px;
    font-size: 1rem;
}

.chat-input:focus[b-kcg5ktx1yv] {
    outline: none;
    border-color: #3b82f6;
}

.btn-send[b-kcg5ktx1yv] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-send:disabled[b-kcg5ktx1yv] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Payment View */
.payment-content[b-kcg5ktx1yv] {
    padding: 20px;
}

.payment-summary[b-kcg5ktx1yv] {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f2744 100%);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    color: white;
    margin-bottom: 24px;
}

.payment-total[b-kcg5ktx1yv] {
    font-size: 3rem;
    font-weight: 700;
}

.payment-label[b-kcg5ktx1yv] {
    opacity: 0.8;
}

.invoices-list[b-kcg5ktx1yv] {
    margin-bottom: 24px;
}

.invoice-item[b-kcg5ktx1yv] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: white;
    border-radius: 12px;
    margin-bottom: 10px;
}

.invoice-checkbox[b-kcg5ktx1yv] {
    width: 22px;
    height: 22px;
    accent-color: #3b82f6;
}

.invoice-details[b-kcg5ktx1yv] {
    flex: 1;
}

.invoice-desc[b-kcg5ktx1yv] {
    font-weight: 600;
    color: #1e293b;
}

.invoice-date[b-kcg5ktx1yv] {
    font-size: 0.85rem;
    color: #64748b;
}

.invoice-amount[b-kcg5ktx1yv] {
    font-weight: 700;
    color: #1e293b;
}

.payment-methods h4[b-kcg5ktx1yv] {
    margin: 0 0 12px 0;
    color: #374151;
}

.method-option[b-kcg5ktx1yv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.method-option.selected[b-kcg5ktx1yv] {
    border-color: #3b82f6;
    background: #eff6ff;
}

.method-icon[b-kcg5ktx1yv] {
    font-size: 1.5rem;
}

.btn-pay-now[b-kcg5ktx1yv] {
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 20px;
    transition: all 0.2s;
}

/* Empty State */
.empty-state[b-kcg5ktx1yv] {
    text-align: center;
    padding: 60px 20px;
}

.empty-icon[b-kcg5ktx1yv] {
    font-size: 4rem;
    display: block;
    margin-bottom: 16px;
    opacity: 0.3;
}

.empty-state p[b-kcg5ktx1yv] {
    color: #64748b;
    margin-bottom: 20px;
}

/* Bottom Navigation */
.bottom-nav[b-kcg5ktx1yv] {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    display: flex;
    background: white;
    border-top: 1px solid #e5e7eb;
    padding: 8px 0;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 100;
}

.nav-item[b-kcg5ktx1yv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
}

.nav-icon[b-kcg5ktx1yv] {
    font-size: 1.3rem;
}

.nav-label[b-kcg5ktx1yv] {
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 500;
}

.nav-item.active .nav-label[b-kcg5ktx1yv] {
    color: #3b82f6;
    font-weight: 600;
}

.nav-badge[b-kcg5ktx1yv] {
    position: absolute;
    top: 4px;
    right: 50%;
    transform: translateX(12px);
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
}

/* Desktop Preview */
@media (min-width: 481px) {
    .mobile-portal[b-kcg5ktx1yv] {
        border-left: 1px solid #e5e7eb;
        border-right: 1px solid #e5e7eb;
        box-shadow: 0 0 40px rgba(0,0,0,0.1);
    }
}
/* /Pages/ServiceCheckIns.razor.rz.scp.css */
/* The main layout has no page background of its own (dark body); the list sits on a light panel so it reads. */
.checkins-panel[b-huehy76fh0] {
    background: #ffffff;
    color: #1f2933;
    border-radius: 12px;
    padding: 24px;
    margin-top: 16px;
    max-width: 1100px;
}