/* Stock Screener page (Views/Screener/Index.cshtml) — presentation only.
   Every rule keys off classes/ids the Razor view and its inline JS already render,
   and every color resolves through the site.css theme tokens so both the dark and
   light [data-bs-theme] palettes work without page-specific overrides. */

/* --- Page hero ------------------------------------------------------------ */
.screener-hero {
    align-items: center;
    display: flex;
    gap: .9rem;
    margin-bottom: 1.1rem;
}

.screener-hero-icon {
    align-items: center;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
    border-radius: .85rem;
    color: var(--accent);
    display: flex;
    flex: 0 0 auto;
    font-size: 1.3rem;
    height: 2.7rem;
    justify-content: center;
    width: 2.7rem;
}

.screener-hero-title {
    font-size: 1.35rem;
    font-weight: 650;
    letter-spacing: -.01em;
}

.screener-hero-sub {
    color: var(--muted);
    font-size: .85rem;
    max-width: 72ch;
}

/* --- Build card ----------------------------------------------------------- */
.screener-build-card {
    border-color: var(--border-color);
    border-radius: .9rem;
    box-shadow: var(--shadow-card);
    overflow: visible; /* the query autocomplete and dropdowns overhang the card */
}

.screener-build-card > .card-header {
    background: color-mix(in srgb, var(--surface-raised) 55%, transparent);
    border-radius: .9rem .9rem 0 0;
}

.screener-build-header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    justify-content: space-between;
    padding-bottom: .6rem;
    padding-top: .6rem;
}

.screener-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

/* --- Collapsible how-it-works + compact disclaimer ------------------------ */
.screener-help summary {
    color: var(--muted);
    cursor: pointer;
    font-size: .84rem;
    list-style: none;
    user-select: none;
    width: fit-content;
}

.screener-help summary::-webkit-details-marker { display: none; }

.screener-help summary::after {
    content: "▾";
    display: inline-block;
    margin-left: .35rem;
    transition: transform .15s ease;
}

.screener-help[open] summary::after { transform: rotate(180deg); }
.screener-help summary:hover { color: var(--text); }

.screener-help p {
    color: var(--muted);
    font-size: .84rem;
    margin-top: .5rem;
    max-width: 90ch;
}

.screener-disclaimer {
    background: color-mix(in srgb, var(--surface-raised) 50%, transparent);
    border-left: 3px solid var(--border-color);
    border-radius: 0 .5rem .5rem 0;
    color: var(--muted);
    font-size: .78rem;
    max-width: 90ch;
    padding: .45rem .75rem;
}

/* --- Universe scope panel (markup rendered by universe-scope.js) ---------- */
#screenerUniverseScope > details {
    border-color: var(--border-color) !important;
    border-radius: .75rem !important;
}

.screener-step-label {
    align-items: center;
    color: var(--muted);
    display: flex;
    font-size: .72rem;
    font-weight: 750;
    gap: .45rem;
    letter-spacing: .08em;
    margin-bottom: .45rem;
    text-transform: uppercase;
}

.screener-step-label > span {
    align-items: center;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
    border-radius: 50%;
    color: var(--accent);
    display: inline-flex;
    height: 1.45rem;
    justify-content: center;
    width: 1.45rem;
}

/* --- Visual builder + generated query ----------------------------------- */
.screener-rule-workspace {
    display: grid;
    gap: .8rem;
    grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
}

.screener-visual-builder,
.screener-query-panel {
    background: color-mix(in srgb, var(--surface-raised) 48%, transparent);
    border: 1px solid var(--border-color);
    border-radius: .75rem;
    min-width: 0;
    padding: .8rem;
}

.screener-panel-heading {
    align-items: flex-start;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    margin-bottom: .7rem;
}

.screener-rule-rows { display: grid; gap: .45rem; }

.screener-rule-group {
    background: color-mix(in srgb, var(--surface-raised) 62%, transparent);
    border: 1px solid var(--border-color);
    border-radius: .65rem;
    padding: .55rem;
}

.screener-rule-group + .screener-rule-group { margin-top: .45rem; }
.screener-rule-group.is-excluded { border-left: 3px solid var(--bs-warning); }
.screener-rule-group > summary { align-items: center; cursor: pointer; display: flex; gap: .55rem; list-style: none; }
.screener-rule-group > summary::-webkit-details-marker { display: none; }
.screener-rule-group > summary::before { content: "▾"; color: var(--muted); font-size: .75rem; }
.screener-rule-group:not([open]) > summary::before { transform: rotate(-90deg); }
.screener-rule-group-toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: .4rem; margin: .55rem 0; }
.screener-rule-group-toolbar .form-select { max-width: 11rem; }
.screener-rule-group-children { border-left: 2px solid color-mix(in srgb, var(--accent) 30%, var(--border-color)); display: grid; gap: .45rem; margin-left: .4rem; padding-left: .65rem; }

.screener-rule-row {
    align-items: center;
    display: grid;
    gap: .4rem;
    grid-template-columns: 5rem minmax(150px, 1fr) 4.25rem minmax(120px, .62fr) auto;
}

.screener-rule-join {
    color: var(--muted);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-align: right;
}

.screener-rule-empty {
    border: 1px dashed var(--border-color);
    border-radius: .55rem;
    color: var(--muted);
    font-size: .82rem;
    padding: 1rem;
    text-align: center;
}

.screener-rule-group {
    background: color-mix(in srgb, var(--surface-raised) 74%, transparent);
    border: 1px solid var(--border-color);
    border-left: 3px solid color-mix(in srgb, var(--accent) 68%, var(--border-color));
    border-radius: .65rem;
    padding: .65rem;
}

.screener-rule-group-root { background: transparent; border: 0; padding: 0; }
.screener-rule-group-header { align-items: center; display: flex; gap: .75rem; justify-content: space-between; margin-bottom: .55rem; }
.screener-rule-group-children { display: grid; gap: .5rem; }
.screener-rule-node { align-items: center; display: grid; gap: .45rem; grid-template-columns: 3.25rem minmax(0, 1fr) auto; }
.screener-rule-node-body { min-width: 0; }
.screener-rule-node-actions { align-self: start; }
.screener-not-node { align-items: flex-start; border-left: 2px solid var(--warning); display: grid; gap: .45rem; grid-template-columns: auto minmax(0, 1fr); padding-left: .5rem; }
.screener-not-node > .badge { margin-top: .35rem; }
.screener-rule-node .screener-rule-group { margin-block: .1rem; }

/* --- XMarket Studio dashboard canvas ----------------------------------- */
.studio-dashboard-header { align-items: flex-start; display: flex; gap: 1rem; justify-content: space-between; }
.studio-dashboard-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.studio-dashboard-actions .form-select { min-width: 170px; width: auto; }
.studio-dashboard-grid { display: grid; gap: .9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.studio-dashboard-card {
    background: color-mix(in srgb, var(--surface-raised) 68%, transparent);
    border: 1px solid var(--border-color);
    border-radius: .75rem;
    min-height: 250px;
    overflow: hidden;
    transition: border-color .15s ease, opacity .15s ease, transform .15s ease;
}
.studio-dashboard-card-w2 { grid-column: span 2; }
.studio-dashboard-card-dragging { opacity: .45; transform: scale(.99); }
.studio-dashboard-card-header { align-items: center; border-bottom: 1px solid var(--border-color); display: flex; gap: .75rem; justify-content: space-between; padding: .65rem .75rem; }
.studio-dashboard-card-header > div:first-child { align-items: center; display: flex; min-width: 0; }
.studio-dashboard-card-header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-drag-handle { color: var(--muted); cursor: grab; display: inline-flex; font-size: 1.1rem; margin-right: .25rem; }
.studio-dashboard-card-body { min-height: 195px; padding: .75rem; }
.studio-chart-wrap { height: 190px; position: relative; }
.studio-kpi { align-items: center; display: flex; flex-direction: column; justify-content: center; min-height: 180px; text-align: center; }
.studio-kpi strong { color: var(--accent); font-family: var(--font-numeric); font-size: clamp(2rem, 6vw, 3.6rem); line-height: 1; }
.studio-kpi span { color: var(--muted); margin-top: .65rem; text-transform: capitalize; }
.studio-dashboard-empty { align-items: center; color: var(--muted); display: flex; justify-content: center; min-height: 180px; text-align: center; }
.studio-dashboard-empty-canvas { border: 1px dashed var(--border-color); border-radius: .75rem; flex-direction: column; gap: .45rem; grid-column: 1 / -1; min-height: 230px; }
.studio-dashboard-empty-canvas i { font-size: 2rem; }

.screener-capability-note {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-left: 3px solid var(--accent);
    border-radius: 0 .45rem .45rem 0;
    color: var(--muted);
    line-height: 1.45;
    padding: .45rem .6rem;
}

/* --- Query editor --------------------------------------------------------- */
#advancedQuery .form-label { letter-spacing: .01em; text-transform: uppercase; font-size: .72rem; }

#queryBox {
    border-radius: .65rem;
    font-family: var(--font-numeric);
    font-size: .95rem;
    line-height: 1.6;
    min-height: 10.25rem;
    padding: .65rem .85rem;
}

#queryBox:focus {
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--focus-ring) 22%, transparent);
}

.screener-hints { line-height: 1.65; }

.screener-hints [data-query-example] {
    --bs-btn-border-radius: 999px;
    font-family: var(--font-numeric);
    font-size: .74rem;
}

/* --- Action bar ----------------------------------------------------------- */
.screener-actions {
    border-top: 1px solid var(--border-color);
    margin-top: 1rem;
    padding-top: .9rem;
}

.screener-actions #runBtn {
    border-radius: .6rem;
    font-weight: 600;
    padding: .4rem 1.3rem;
}

/* --- Saved screens (markup rendered by the page's inline JS) -------------- */
#savedScreensContainer .card { border-radius: .9rem; }

.saved-screen-grid {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    padding: .75rem;
}

.saved-screen-card {
    align-items: start;
    background: color-mix(in srgb, var(--surface-raised) 46%, transparent);
    border: 1px solid var(--border-color);
    border-radius: .7rem;
    display: grid;
    gap: .55rem;
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: .75rem;
    transition: border-color .12s ease, transform .12s ease;
}

.saved-screen-card:hover {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border-color));
    transform: translateY(-1px);
}

.saved-screen-main { min-width: 0; }

.saved-screen-query {
    color: var(--muted);
    display: block;
    font-size: .72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.saved-screen-meta {
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    font-size: .7rem;
    gap: .35rem .8rem;
    margin-top: .55rem;
}

/* --- Results credibility and scan-friendly grid -------------------------- */
.screener-data-strip {
    background: color-mix(in srgb, var(--surface-raised) 54%, transparent);
    border: 1px solid var(--border-color);
    border-radius: .75rem;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: .65rem;
}

.screener-data-strip > div {
    display: grid;
    gap: .05rem;
    padding: .65rem .8rem;
}

.screener-data-strip > div + div { border-left: 1px solid var(--border-color); }
.screener-data-strip strong { font-size: .8rem; }
.screener-data-strip small { color: var(--muted); font-size: .68rem; line-height: 1.25; }
.screener-data-label { color: var(--muted); font-size: .62rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }

.screener-results-table {
    font-size: .84rem;
    min-width: max-content;
}

.screener-results-table > :not(caption) > * > * { padding: .6rem .65rem; }
.screener-results-table thead th { background: var(--bs-body-bg); font-size: .7rem; letter-spacing: .025em; text-transform: uppercase; white-space: nowrap; }
.screener-results-table tbody td { white-space: nowrap; }
.screener-results-table .screener-pin { background: var(--bs-body-bg); position: sticky; }
.screener-results-table thead .screener-pin { z-index: 4; }
.screener-results-table tbody .screener-pin { z-index: 2; }
.screener-results-table .screener-pin-symbol { left: 0; max-width: 220px; min-width: 220px; width: 220px; }
.screener-results-table .screener-pin-price { left: 220px; min-width: 112px; width: 112px; }
.screener-results-table .screener-pin-change { border-right: 1px solid var(--border-color); box-shadow: 8px 0 14px -14px rgba(0,0,0,.75); left: 332px; min-width: 96px; width: 96px; }
.screener-results-table tbody tr:hover .screener-pin { background: var(--hover-bg); }
.screener-signal-cell { max-width: 290px; white-space: normal !important; }
.screener-signal-cell .badge { font-size: .66rem; font-weight: 650; margin: .08rem 0; }

/* --- Selected-result drawer --------------------------------------------- */
.screener-detail-drawer { --bs-offcanvas-width: min(460px, 92vw); }
.screener-detail-chart-shell { background: color-mix(in srgb, var(--surface-raised) 58%, transparent); border: 1px solid var(--border-color); border-radius: .7rem; padding: .7rem; }
.screener-detail-chart { height: 240px; min-height: 240px; width: 100%; }
.screener-detail-price { align-items: baseline; display: flex; gap: .75rem; }
.screener-detail-price strong { font-family: var(--font-numeric); font-size: 1.7rem; }
.screener-detail-signals .badge { margin: .1rem; }
.screener-detail-grid { display: grid; gap: .55rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.screener-detail-grid > div { background: color-mix(in srgb, var(--surface-raised) 58%, transparent); border: 1px solid var(--border-color); border-radius: .6rem; padding: .65rem; }
.screener-detail-grid dt { color: var(--muted); font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; }
.screener-detail-grid dd { font-family: var(--font-numeric); margin: .2rem 0 0; }

@media (max-width: 1100px) {
    .screener-rule-workspace { grid-template-columns: 1fr; }
    #queryBox { min-height: 7rem; }
    .screener-data-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .screener-data-strip > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--border-color); }
    .screener-data-strip > div:nth-child(4) { border-top: 1px solid var(--border-color); }
}

@media (max-width: 767.98px) {
    .screener-rule-node-actions { grid-column: 2; }
    .screener-rule-group { padding: .45rem; }
    .screener-rule-group-children { margin-left: 0; padding-left: .45rem; }
    .screener-rule-row { grid-template-columns: minmax(0, 1fr) 4rem auto; }
    .screener-rule-row [data-toggle-exclude] { grid-column: 1 / 3; justify-self: start; }
    .screener-rule-row [data-visual-field] { grid-column: 1; }
    .screener-rule-row [data-visual-op] { grid-column: 2; }
    .screener-rule-row [data-visual-value] { grid-column: 1 / 3; }
    .screener-rule-row [data-remove-visual-rule] { grid-column: 3; grid-row: 1 / 4; }
    .screener-data-strip { grid-template-columns: 1fr; }
    .screener-data-strip > div + div { border-left: 0; border-top: 1px solid var(--border-color); }
    .screener-results-table .screener-pin-price,
    .screener-results-table .screener-pin-change { position: static; }
    .screener-results-table .screener-pin-symbol { max-width: 175px; min-width: 175px; width: 175px; }
    .saved-screen-grid { grid-template-columns: 1fr; }
    .studio-dashboard-header { flex-direction: column; }
    .studio-dashboard-actions { justify-content: flex-start; width: 100%; }
    .studio-dashboard-actions .form-select { flex: 1 1 100%; width: 100%; }
    .studio-dashboard-grid { grid-template-columns: minmax(0, 1fr); }
    .studio-dashboard-card-w2 { grid-column: span 1; }
    .studio-dashboard-card-header { align-items: flex-start; }
}

#savedScreensContainer .list-group-item small {
    font-family: var(--font-numeric);
    font-size: .74rem;
}

/* --- XMarket Studio visual authoring ------------------------------------- */
.screener-mode-switch {
    display: flex;
    gap: .45rem;
    margin: -.45rem 0 1rem;
}

@media (max-width: 575.98px) {
    .screener-mode-switch .btn { flex: 1; }
}

/* --- XMarket Studio canvas-first workspace ------------------------------ */
.studio-appbar {
    align-items: center;
    background: linear-gradient(120deg, color-mix(in srgb, var(--surface-raised) 94%, var(--accent) 6%), var(--surface-raised));
    border: 1px solid var(--border-color);
    border-radius: .9rem;
    box-shadow: var(--shadow-card);
    display: grid;
    gap: .75rem 1rem;
    grid-template-columns: minmax(260px, auto) 1fr auto;
    margin-bottom: .85rem;
    padding: .7rem .8rem;
}

.studio-appbar-brand,
.studio-appbar-actions,
.studio-view-switch { align-items: center; display: flex; gap: .5rem; }
.studio-appbar-brand { min-width: 0; }
.studio-appbar-icon {
    align-items: center;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
    border-radius: .65rem;
    color: var(--accent);
    display: inline-flex;
    font-size: 1rem;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}
.studio-eyebrow,
.studio-stage-kicker {
    color: var(--muted);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.studio-appbar-title { font-size: 1.08rem; font-weight: 720; line-height: 1.1; margin: 0; }
.studio-view-switch {
    background: color-mix(in srgb, var(--bs-body-bg) 70%, transparent);
    border: 1px solid var(--border-color);
    border-radius: .65rem;
    justify-self: center;
    padding: .2rem;
}
.studio-view-button {
    background: transparent;
    border: 0;
    border-radius: .45rem;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 650;
    padding: .38rem .65rem;
}
.studio-view-button:hover { background: var(--hover-bg); color: var(--text); }
.studio-view-button.active {
    background: color-mix(in srgb, var(--accent) 17%, var(--surface-raised));
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    color: var(--accent);
}
.studio-view-button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.studio-appbar-actions { justify-content: flex-end; }
.studio-run-summary {
    align-items: flex-end;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    font-size: .68rem;
    line-height: 1.25;
    max-width: 15rem;
    text-align: right;
}
.studio-quick-link { color: var(--muted); font-size: .75rem; text-decoration: none; white-space: nowrap; }
.studio-quick-link:hover { color: var(--accent); text-decoration: underline; }

.studio-workbench {
    align-items: start;
    display: grid;
    gap: .85rem;
    grid-template-columns: minmax(330px, 390px) minmax(520px, 1fr) minmax(260px, 300px);
    min-height: 70vh;
}
.studio-filter-rail,
.studio-inspector {
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: .85rem;
    box-shadow: var(--shadow-card);
    max-height: calc(100vh - 9rem);
    overflow: auto;
    position: sticky;
    top: 5.5rem;
}
.studio-filter-rail .screener-build-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0 !important;
}
.studio-filter-rail .screener-build-card > .card-header { border-radius: .85rem .85rem 0 0; }
.studio-filter-rail .screener-build-card > .card-body { padding: .7rem; }
.studio-filter-rail .screener-help,
.studio-filter-rail .screener-disclaimer,
.studio-filter-rail .screener-hints { display: none; }
.studio-filter-rail .screener-toolbar { width: 100%; }
.studio-filter-rail .screener-toolbar .btn { flex: 1 1 auto; }
.studio-filter-rail .screener-rule-workspace { grid-template-columns: minmax(0, 1fr); }
.studio-filter-rail .screener-visual-builder,
.studio-filter-rail .screener-query-panel { padding: .65rem; }
.studio-filter-rail .screener-rule-row { grid-template-columns: auto minmax(0, 1fr) 4rem; }
.studio-filter-rail .screener-rule-row [data-toggle-exclude] { grid-column: 1 / 3; justify-self: start; }
.studio-filter-rail .screener-rule-row [data-visual-field] { grid-column: 1 / 3; }
.studio-filter-rail .screener-rule-row [data-visual-op] { grid-column: 3; grid-row: 2; }
.studio-filter-rail .screener-rule-row [data-visual-value] { grid-column: 1 / 3; }
.studio-filter-rail .screener-rule-row [data-remove-visual-rule] { grid-column: 3; grid-row: 3; }
.studio-filter-rail .screener-rule-node { grid-template-columns: minmax(0, 1fr); }
.studio-filter-rail .screener-rule-node-actions { justify-self: end; }
.studio-filter-rail #queryBox { min-height: 6rem; }
.studio-filter-rail #toggleFieldsBtn { display: none; }
.studio-filter-rail #fieldsHelp {
    background: color-mix(in srgb, var(--surface-raised) 58%, var(--bs-body-bg));
    border: 1px solid var(--border-color);
    border-radius: .7rem;
    max-height: 17rem;
    overflow: auto;
    padding: .65rem;
}
.studio-filter-rail #fieldSearchInput { max-width: none !important; width: 100%; }
.studio-filter-rail .field-chip { cursor: copy; }
.studio-filter-rail #visualRuleRows.is-drop-target {
    background: color-mix(in srgb, var(--accent) 9%, transparent);
    border: 1px dashed var(--accent);
    border-radius: .6rem;
    padding: .4rem;
}
.studio-filter-rail .screener-actions { align-items: stretch !important; }
.studio-filter-rail .screener-actions .form-control { max-width: none !important; }
.studio-filter-rail .screener-actions #runBtn { margin-left: 0 !important; }
.studio-rail-run-dock {
    align-items: center;
    background: color-mix(in srgb, var(--surface-raised) 94%, var(--accent) 6%);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border-color));
    border-radius: .7rem;
    display: grid;
    gap: .5rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin: 0;
    padding: .65rem .7rem;
    z-index: 4;
}
.studio-rail-run-dock .btn { white-space: nowrap; }
.studio-filter-rail #savedScreensContainer { margin: .7rem; max-height: 18rem; overflow: auto; }
.studio-filter-rail .saved-screen-grid { grid-template-columns: 1fr; }

.studio-stage { min-width: 0; }
.studio-dashboard,
.studio-data-surface {
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: .85rem;
    box-shadow: var(--shadow-card);
    min-width: 0;
    overflow: hidden;
}
.studio-dashboard-header,
.studio-surface-heading { padding: .85rem 1rem; }
.studio-dashboard-header { background: color-mix(in srgb, var(--surface-raised) 72%, transparent); border-bottom: 1px solid var(--border-color); }
.studio-canvas-surface {
    background-color: color-mix(in srgb, var(--bs-body-bg) 84%, var(--surface-raised));
    background-image: radial-gradient(color-mix(in srgb, var(--muted) 24%, transparent) .8px, transparent .8px);
    background-size: 18px 18px;
    min-height: 660px;
    padding: .85rem;
}
.studio-canvas-meta {
    align-items: center;
    background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--muted);
    display: flex;
    font-size: .7rem;
    gap: .4rem;
    margin-bottom: .8rem;
    padding: .32rem .6rem;
    width: fit-content;
}
.studio-live-dot { background: var(--bs-success); border-radius: 50%; height: .45rem; width: .45rem; }
.studio-dashboard-card { background: color-mix(in srgb, var(--surface-raised) 94%, transparent); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.studio-dashboard-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent), 0 8px 20px rgba(0,0,0,.1); }
.studio-dashboard-empty-canvas { background: color-mix(in srgb, var(--surface-raised) 70%, transparent); min-height: 440px; }
.studio-empty-icon { align-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 1rem; color: var(--accent); display: inline-flex; height: 3.5rem; justify-content: center; width: 3.5rem; }
.studio-template-actions { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; margin-top: .35rem; }

.studio-data-surface { display: none; padding: 0 1rem 1rem; }
.studio-data-surface .studio-surface-heading { margin-inline: -1rem; }
.studio-inspector { padding: .8rem; }
.studio-inspector-heading { align-items: flex-start; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; margin: -.1rem 0 .7rem; padding-bottom: .65rem; }
.studio-inspector-empty {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 19rem;
    padding: 1rem;
    text-align: center;
}
.studio-inspector-empty .studio-empty-icon { height: 3rem; margin-bottom: .7rem; width: 3rem; }
.studio-property-grid { display: grid; gap: .7rem; }
.studio-property-grid .form-label { color: var(--muted); font-size: .68rem; font-weight: 700; margin-bottom: .25rem; text-transform: uppercase; }
.studio-inspector-note { align-items: flex-start; background: color-mix(in srgb, var(--accent) 8%, transparent); border-left: 3px solid var(--accent); border-radius: 0 .5rem .5rem 0; color: var(--muted); display: flex; font-size: .72rem; gap: .45rem; line-height: 1.45; margin: .85rem 0; padding: .55rem; }

@media (min-width: 992px) {
    .studio-filter-rail {
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto auto;
        overflow: hidden;
    }
    .studio-filter-rail .screener-build-card { overflow: auto; }
    .studio-filter-rail #savedScreensContainer { max-height: 10rem; }
}

.studio-workbench[data-studio-mode="data"] { grid-template-columns: minmax(300px, 350px) minmax(0, 1fr); }
.studio-workbench[data-studio-mode="data"] .studio-dashboard,
.studio-workbench[data-studio-mode="data"] .studio-inspector { display: none; }
.studio-workbench[data-studio-mode="data"] .studio-data-surface { display: block; }
.studio-workbench[data-studio-mode="preview"] { grid-template-columns: minmax(0, 1fr); }
.studio-workbench[data-studio-mode="preview"] .studio-filter-rail,
.studio-workbench[data-studio-mode="preview"] .studio-inspector,
.studio-workbench[data-studio-mode="preview"] .studio-dashboard-actions { display: none; }
.studio-workbench[data-studio-mode="preview"] .studio-data-surface { display: none; }
.studio-workbench[data-studio-mode="preview"] .studio-dashboard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1450px) {
    .studio-appbar { grid-template-columns: 1fr auto; }
    .studio-view-switch { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
    .studio-workbench { grid-template-columns: minmax(310px, 360px) minmax(0, 1fr); }
    .studio-filter-rail { grid-row: span 2; }
    .studio-inspector { grid-column: 2; max-height: none; position: static; }
}

@media (max-width: 991.98px) {
    .studio-appbar { grid-template-columns: 1fr; }
    .studio-appbar-actions { justify-content: flex-start; }
    .studio-run-summary { align-items: flex-start; text-align: left; }
    .studio-view-switch { grid-column: auto; grid-row: auto; justify-self: stretch; }
    .studio-view-button { flex: 1; }
    .studio-workbench,
    .studio-workbench[data-studio-mode="data"] { grid-template-columns: minmax(0, 1fr); }
    .studio-filter-rail,
    .studio-inspector { grid-column: auto; grid-row: auto; max-height: none; position: static; }
    .studio-stage { order: 1; }
    .studio-filter-rail { order: 2; }
    .studio-inspector { order: 3; }
    .studio-workbench[data-studio-mode="data"] .studio-filter-rail { display: none; }
    .studio-canvas-surface { min-height: 480px; }
}

@media (max-width: 767.98px) {
    .studio-appbar-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .studio-run-summary { grid-column: 1 / -1; max-width: none; }
    .studio-quick-link { align-self: center; justify-self: start; }
    .studio-dashboard-header { align-items: stretch; }
    .studio-dashboard-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .studio-dashboard-actions .form-select { grid-column: 1 / -1; min-width: 0; width: 100%; }
    .studio-dashboard-actions .btn { padding-inline: .4rem; }
    .studio-workbench[data-studio-mode="preview"] .studio-dashboard-grid { grid-template-columns: minmax(0, 1fr); }
    .studio-canvas-surface { padding: .6rem; }
}