/* ==========================================================
   SFR Studio Shell
========================================================== */

html,
body
{
    margin: 0;
    height: 100%;
    overflow: hidden;

    background: #111317;

    font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

:root
{
    --tblr-font-sans-serif: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
    --sfr-panel: #20252b;
    --sfr-line: #3c454f;
    --sfr-orange: #f28c28;
}

button, input, select, textarea { font-family: inherit !important; }


.badge
{
    border-radius: 3px;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: .02em;

    padding: 7px 12px;
}

.page-title
{
    font-size: 22px;

    font-weight: 700;
    letter-spacing: -.04em;
}

.page-pretitle
{
    font-size: 12px;

    letter-spacing: .08em;

    text-transform: uppercase;

    color: #8b94a3;
}

/* ==========================================================
   Preview Area
========================================================== */

.preview-body
{
    flex: 1;

    display: flex;

    justify-content: center;
    align-items: center;

    min-height: 700px;

    padding: 40px;

    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, #262b33 0%, #1d2127 100%);
}

/* ==========================================================
   Preview Canvas
========================================================== */

.preview-canvas
{
    flex: 1;

    display: flex;

    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100%;

    min-height: 550px;

    padding: 50px;

    border-radius: 4px;

    background: linear-gradient(
        180deg,
        #313743 0%,
        #272c35 100%);

    border: 1px solid #454d59;

    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 18px rgba(0,0,0,.38);
}

.preview-panel
{
    min-width: 0;
}

.virtual-renderer
{
    display: flex;
    flex: 1;

    min-width: 0;
    min-height: 0;

    width: 100%;
    height: 100%;
}

.workspace-preview .preview-canvas
{
    height: min(560px, 60vh);
    min-height: 320px;
}

.sidebar
{
    grid-area: sidebar;

    /* Tabler's default muted navigation gray is too dark on the Studio's
       matte charcoal shell. Keep the industrial palette, but meet a useful
       reading contrast for normal navigation as well as active links. */
    --tblr-navbar-color: #bec8d4;
    --tblr-navbar-active-color: #ff9b3d;

    background:
        linear-gradient(90deg, rgba(242,140,40,.16) 0 2px, transparent 2px),
        #181b20;

    border-right: 1px solid #2b3038;

    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

/* Neutralise Tabler's vertical-navbar centring. The Studio sidebar has one
   deliberate 20px alignment line for the brand, section labels and actions. */
.studio-sidebar-nav
{
    width: 100%;
    min-height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
}

.studio-sidebar-content
{
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    max-width: 100%;
    overflow: hidden;
}

.studio-sidebar-brand
{
    display: block;
    margin: 0;
    padding: 0 !important;
    white-space: normal;
}

.sidebar .navbar-nav,
.sidebar .nav-item
{
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.sidebar .nav-link
{
    display: flex;
    justify-content: flex-start !important;
    align-items: center;
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px);
    margin: 2px 10px;

    padding: 10px 14px;

    border-radius: 3px;
    color: #bec8d4;
    font-size: 12px;
    font-weight: 600;

    transition: all .15s;
}

.sidebar .nav-link i
{
    display: inline-block;
    width: 20px;
    margin-right: 8px;
    color: #aeb9c6;
}

.sidebar .nav-link.active i,
.sidebar .nav-link:hover i
{
    color: currentColor;
}

.sidebar .nav-link:hover
{
    color: #f1f4f7;
    background: #2b313b;
}

.sidebar .nav-link.active
{
    box-shadow: inset 3px 0 0 var(--sfr-orange);
    background: rgba(242,140,40,.16);

    color: #ff9b3d;
}

.sidebar-accordion-toggle
{
    width: calc(100% - 20px) !important;
    border: 0;
    color: inherit;
    text-align: left;
    background: transparent;
}

.sidebar-accordion-toggle::after
{
    content: "⌄";
    float: right;
    color: #8b94a3;
    transition: transform .15s ease;
}

.sidebar-accordion-toggle[aria-expanded="false"]::after
{
    transform: rotate(-90deg);
}

.sidebar-subnav
{
    display: grid;
    gap: 2px;
    margin: 2px 10px 8px 42px;
    max-width: calc(100% - 52px);
}

.sidebar::-webkit-scrollbar { width: 9px; }
.sidebar::-webkit-scrollbar-thumb
{
    border: 2px solid #181b20;
    border-radius: 999px;
    background: #596474;
}

.sidebar-subnav[hidden]
{
    display: none;
}

.sidebar-subnav a
{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    color: #c2cad4;
    font-size: 13px;
    text-decoration: none;
}

.sidebar-subnav a i
{
    width: 15px;
    color: #9ba7b5;
    font-size: 14px;
}

.sidebar-subnav a:hover i
{
    color: currentColor;
}

.sidebar-subnav a:hover
{
    color: #fff;
    background: #2b313b;
}

.sidebar .nav-item.active .nav-link
{
    background: rgba(255,129,0,.16);

    color: #ff8100;
}

.theme-photo-gallery
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 14px;
    padding: 2px;
    max-height: 360px;
    overflow-y: auto;
}

.media-library-card
{
    margin-top: 18px;
    padding: clamp(14px, 2vw, 22px);
    border: 1px solid #435060;
    border-radius: 8px;
    background: #171b21;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 7px 18px rgba(0,0,0,.18);
}

.media-library-heading
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
    padding: 0 2px 12px;
    border-bottom: 1px solid rgba(70, 80, 93, .72);
}

.media-library-heading h3
{
    margin: 0;
    color: #f1f3f5;
    font-size: 21px;
}

.media-library-heading p
{
    margin: 3px 0 0;
    color: var(--tblr-secondary, #9ba7b4);
    font-size: 11px;
}

.media-library-heading > span
{
    flex: 0 0 auto;
    padding: 3px 6px;
    border-radius: 3px;
    color: #9fc3e8;
    background: rgba(47, 140, 235, .16);
    font-size: 10px;
    font-weight: 700;
}

.media-library-grid
{
    display: grid;
    grid-template-areas: "upload library rotation";
    grid-template-columns: minmax(230px, .75fr) minmax(360px, 1.4fr) minmax(280px, 1fr);
    align-items: stretch;
    gap: 14px;
}

.media-library-section
{
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(70, 80, 93, .72);
    border-radius: 5px;
    background: rgba(0, 0, 0, .10);
}

.media-upload-section { grid-area: upload; }
.media-gallery-section { grid-area: library; }
.media-rotation-section { grid-area: rotation; }

.media-library-section-heading
{
    min-height: 58px;
    margin-bottom: 14px;
}

.media-library-section-heading .widget-settings-heading
{
    color: #ff8100;
    font-size: 12px;
}

.media-gallery-section .theme-photo-gallery
{
    margin-top: 0;
    max-height: 470px;
}

@media (max-width: 1180px)
{
    .media-library-grid
    {
        grid-template-areas:
            "upload rotation"
            "library library";
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .media-gallery-section .theme-photo-gallery
    {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

@media (max-width: 700px)
{
    .media-library-heading
    {
        align-items: stretch;
        flex-direction: column;
    }

    .media-library-grid
    {
        grid-template-areas:
            "upload"
            "library"
            "rotation";
        grid-template-columns: 1fr;
    }

    .media-library-section
    {
        padding: 14px;
    }

    .media-library-section-heading
    {
        min-height: 0;
    }
}

.typography-card
{
    margin-top: 18px;
    padding: clamp(14px, 2vw, 22px);
    border: 1px solid #435060;
    border-radius: 8px;
    background: #171b21;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 7px 18px rgba(0,0,0,.18);
}

.typography-heading
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
    padding: 0 2px 12px;
    border-bottom: 1px solid rgba(70, 80, 93, .72);
}

.typography-heading h3
{
    margin: 0;
    color: #f1f3f5;
    font-size: 21px;
}

.typography-heading p
{
    margin: 3px 0 0;
    color: var(--tblr-secondary, #9ba7b4);
    font-size: 11px;
}

.typography-heading > span
{
    flex: 0 0 auto;
    padding: 3px 6px;
    border-radius: 3px;
    color: #d3b5f5;
    background: rgba(142, 68, 214, .16);
    font-size: 10px;
    font-weight: 700;
}

.typography-grid
{
    display: grid;
    grid-template-areas: "font appearance custom";
    grid-template-columns: minmax(300px, 1.1fr) minmax(260px, .85fr) minmax(280px, .95fr);
    align-items: stretch;
    gap: 14px;
}

.typography-section
{
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(70, 80, 93, .72);
    border-radius: 5px;
    background: rgba(0, 0, 0, .10);
}

.typography-font-section { grid-area: font; }
.typography-appearance-section { grid-area: appearance; }
.typography-custom-section { grid-area: custom; }

.typography-section-heading
{
    min-height: 58px;
    margin-bottom: 14px;
}

.typography-section-heading .widget-settings-heading
{
    color: #ff8100;
    font-size: 12px;
}

.typography-appearance-section .google-font-preview
{
    margin-top: 0;
}

@media (max-width: 1180px)
{
    .typography-grid
    {
        grid-template-areas:
            "font appearance"
            "custom custom";
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px)
{
    .typography-heading
    {
        align-items: stretch;
        flex-direction: column;
    }

    .typography-grid
    {
        grid-template-areas:
            "font"
            "appearance"
            "custom";
        grid-template-columns: 1fr;
    }

    .typography-section
    {
        padding: 14px;
    }

    .typography-section-heading
    {
        min-height: 0;
    }

    .typography-section .btn
    {
        min-width: 0;
        white-space: normal;
    }
}

.theme-photo-item
{
    min-width: 0;
    padding: 7px;
    border: 1px solid #354150;
    border-radius: 8px;
    background: #171b21;
}

.theme-photo-choice
{
    min-width: 0;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 4px;
    color: #b8c3d1;
    background: transparent;
    font: inherit;
    font-size: 10px;
    text-align: left;
}

.theme-photo-choice:hover,
.theme-photo-choice.is-active
{
    color: #fff;
}

.theme-photo-choice:hover img,
.theme-photo-choice.is-active img
{
    outline: 2px solid #ff8100;
    outline-offset: 2px;
}

.theme-photo-choice img
{
    display: block;
    width: 100%;
    aspect-ratio: 1.35;
    border-radius: 4px;
    object-fit: cover;
    background: #050505;
}

.theme-photo-choice span
{
    display: block;
    overflow: hidden;
    padding: 7px 2px 1px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.theme-photo-usage
{
    display: block;
    min-height: 2.5em;
    margin: 5px 2px 0;
    color: #9ca7b6;
    font-size: .62rem;
    line-height: 1.25;
}

.theme-photo-actions
{
    display: flex;
    gap: 4px;
    margin-top: 7px;
}

.theme-photo-actions .btn
{
    flex: 1;
    min-width: 0;
    padding-inline: 4px;
    font-size: .66rem;
}

.system-log-overlay
{
    display: none;
    position: fixed;
    z-index: 5000;
    inset: 0;
    background: rgba(0, 0, 0, .7);
}

.system-log-overlay.is-open
{
    display: block;
}

.system-log-dialog
{
    display: none;
    position: fixed;
    z-index: 5001;
    top: 50%;
    left: 50%;
    width: min(960px, calc(100vw - 32px));
    height: min(720px, calc(100dvh - 32px));
    padding: 22px;
    overflow: hidden;
    border: 1px solid #526175;
    border-radius: 10px;
    color: #e6edf5;
    background: #1c232c;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .72);
    transform: translate(-50%, -50%);
}

.system-log-dialog.is-open
{
    display: block;
}

.system-log-dialog-header
{
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
}

.system-log-dialog h2
{
    margin: 4px 0 0;
    font-size: 20px;
}

.system-log-list-dialog
{
    height: calc(100% - 94px);
    max-height: none;
    overflow: auto;
}

.display-list { display:grid; gap:8px; margin-top:16px; }
.display-list-item, .display-create-result { padding:10px; border:1px solid #3e4a59; border-radius:6px; background:#171c23; }
.display-list-item.is-studio-target { border-color:rgba(47, 140, 235, .9); box-shadow:inset 3px 0 0 #2f8ceb; }
.display-list-item strong, .display-create-result strong { display:block; }
.display-list-item code, .display-create-result code { display:block; margin-top:5px; overflow-wrap:anywhere; color:#9fbbc9; }
.display-list-heading { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.display-output-state { font-size:11px; font-weight:700; white-space:nowrap; }
.display-output-state[data-state="sent"] { color:#56d364; }
.display-output-state[data-state="pending"] { color:#9aa8b5; }
.display-output-detail { display:block; margin-top:4px; color:#aebbc6; font-size:11px; line-height:1.35; }
.display-output-token-note { display:block; margin-top:7px; color:#8f9cab; font-size:10px; line-height:1.4; }
.display-output-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.display-output-actions .btn { flex:0 0 auto; }
.display-output-regenerate { border-color:rgba(239, 137, 43, .7); color:#ffb36e; }
.display-output-regenerate:hover, .display-output-regenerate:focus-visible { border-color:#ef892b; background:rgba(239, 137, 43, .14); color:#ffd0a1; }
.quick-widget-tools { margin:0 0 16px; padding:16px; border:1px solid var(--sfr-line); border-radius:3px; background:#171c23; }
.quick-widget-tools-heading { display:flex; justify-content:space-between; gap:16px; align-items:start; margin-bottom:12px; }
.quick-widget-tools-heading h3 { margin:2px 0 0; color:#f1f3f5; font-size:15px; }
.quick-widget-tools-heading p { max-width:300px; margin:2px 0 0; color:#9aa5b4; font-size:11px; text-align:right; }
.quick-widget-tools-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
.quick-widget-tool { min-width:0; padding:12px; border:1px solid #3e4a59; border-radius:3px; color:#e8ebee; text-align:left; background:#20262d; transition:border-color .15s ease, background .15s ease; }
.quick-widget-tool:hover, .quick-widget-tool:focus { border-color:var(--sfr-orange); background:#282f37; outline:0; }
.quick-widget-tool span, .quick-widget-tool small { display:block; }
.quick-widget-tool span { font-weight:700; font-size:12px; }
.quick-widget-tool small { margin-top:5px; color:#aab5c0; font-size:10px; line-height:1.3; }
.widget-detail-panel[hidden] { display:none !important; }
@media (min-width:769px) and (max-width:1100px) { .quick-widget-tools-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:768px) { .quick-widget-tools { padding:14px; } .quick-widget-tools-heading { display:block; } .quick-widget-tools-heading p { margin-top:7px; text-align:left; } .quick-widget-tools-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:420px) { .quick-widget-tools-grid { grid-template-columns:minmax(0, 1fr); } }
.display-details { margin-top:16px; padding-top:16px; border-top:1px solid #3e4a59; }
.display-details-content { min-height:44px; margin-top:10px; padding:9px; border:1px solid #3e4a59; border-radius:6px; color:#aebbc6; background:#171c23; font-size:11px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }

.managed-displays-heading
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
    padding: 0 2px 12px;
    border-bottom: 1px solid rgba(70, 80, 93, .72);
}

.managed-displays-heading h2
{
    margin: 0;
    color: #f1f3f5;
    font-size: 21px;
}

.managed-displays-heading p
{
    margin: 3px 0 0;
    color: var(--tblr-secondary, #9ba7b4);
    font-size: 11px;
}

.managed-displays-heading > span
{
    flex: 0 0 auto;
    padding: 3px 6px;
    border-radius: 3px;
    color: #9fc3e8;
    background: rgba(47, 140, 235, .16);
    font-size: 10px;
    font-weight: 700;
}

.managed-displays-grid
{
    display: grid;
    grid-template-areas: "create inventory details";
    grid-template-columns: minmax(250px, .78fr) minmax(280px, .92fr) minmax(330px, 1.15fr);
    align-items: stretch;
    gap: 14px;
}

.managed-display-section
{
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(70, 80, 93, .72);
    border-radius: 5px;
    background: rgba(0, 0, 0, .10);
}

.display-create-section { grid-area: create; }
.display-inventory-section { grid-area: inventory; }
.managed-displays-grid .display-details
{
    grid-area: details;
    margin-top: 0;
    padding-top: 16px;
    border-top: 1px solid rgba(70, 80, 93, .72);
}

.managed-display-section-heading
{
    min-height: 58px;
    margin-bottom: 14px;
}

.managed-display-section-heading .widget-settings-heading
{
    color: #ff8100;
    font-size: 12px;
}

.display-inventory-section .display-list
{
    max-height: 520px;
    margin-top: 0;
    padding-right: 2px;
    overflow-y: auto;
}

@media (max-width: 1180px)
{
    .managed-displays-grid
    {
        grid-template-areas:
            "create inventory"
            "details details";
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px)
{
    .managed-displays-heading
    {
        align-items: stretch;
        flex-direction: column;
    }

    .managed-displays-grid
    {
        grid-template-areas:
            "create"
            "inventory"
            "details";
        grid-template-columns: 1fr;
    }

    .managed-display-section
    {
        padding: 14px;
    }

    .managed-display-section-heading
    {
        min-height: 0;
    }

    .managed-display-section .btn
    {
        min-width: 0;
        white-space: normal;
    }

    .managed-display-section .display-output-actions .btn
    {
        flex: 1 1 110px;
    }
}

.sidebar-brand
{
    padding: 28px 20px 30px;

    border-bottom: 1px solid var(--sfr-line);
}

.sidebar-logo
{
    font-size: 38px;

    font-weight: 700;

    color: var(--sfr-orange);

    letter-spacing: -.1em;

    line-height: 1;
}

.sidebar-section
{
    margin: 26px 20px 8px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .12em;

    color: #9ca8b7;

    text-transform: uppercase;

    color: #9ca8b7;
}

.sidebar-language
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 28px 20px 18px;
    padding-top: 14px;
    border-top: 1px solid var(--sfr-line);
    color: #8b94a3;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sidebar-language select
{
    width: 78px;
    min-height: 30px;
    padding: 4px 7px;
    border: 1px solid #3e4a59;
    border-radius: 3px;
    color: #dfe5eb;
    font-size: 11px;
    background: #20262d;
}

.sidebar-session-actions
{
    margin: -8px 20px 20px;
}

.sidebar-session-actions + .sidebar-session-actions
{
    margin-top: -12px;
}

.sidebar-session-actions .btn
{
    min-height: 34px;
    border-color: #3e4a59;
    color: #c1cad4;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
}

.sidebar-session-actions .btn:hover
{
    border-color: var(--sfr-orange);
    color: var(--sfr-orange);
    background: rgba(242, 140, 40, .08);
}

.composer-stack
{
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.widget-settings-stack
{
    display: grid;
    gap: 12px;
}

.widget-detail-card
{
    min-width: 0;
    border: 1px solid var(--sfr-line);
    border-radius: 3px;
    background: #20262d;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 7px 18px rgba(0,0,0,.14);
}

.widget-detail-card > summary
{
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 12px 42px 12px 14px;
    position: relative;
    cursor: pointer;
    list-style: none;
    color: #f1f3f5;
}

.widget-detail-card > summary::-webkit-details-marker { display: none; }
.widget-detail-card > summary::after
{
    content: "⌄";
    position: absolute;
    right: 14px;
    top: 50%;
    color: #9aa5b4;
    font-size: 18px;
    transform: translateY(-55%);
    transition: transform .18s ease;
}
.widget-detail-card:not([open]) > summary::after { transform: translateY(-50%) rotate(-90deg); }
.widget-detail-card > summary:hover { background: #252b33; }
.widget-detail-card > summary span { font-size: 14px; font-weight: 700; }
.widget-detail-card > summary small { margin-left: auto; color: #9ba7b4; font-size: 10px; }
.widget-detail-card > .widget-detail-panel { padding: 0 14px 16px; border-top: 1px solid var(--sfr-line); }
.widget-detail-card > .widget-detail-panel .widget-settings-heading { margin-top: 14px; }

.composer-section-heading
{
    position: relative;
    margin: 0;
    padding: 12px 38px 12px 14px;
    color: #f1f3f5;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    border: 1px solid var(--sfr-line);
    border-radius: 3px;
    background: #1b2026;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.composer-section-heading::-webkit-details-marker { display: none; }

.composer-section-heading::after
{
    content: "⌄";
    position: absolute;
    top: 50%;
    right: 14px;
    color: #9aa5b4;
    font-size: 20px;
    line-height: 1;
    transform: translateY(-55%);
    transition: transform .18s ease;
}

.composer-section:not([open]) .composer-section-heading::after
{
    transform: translateY(-50%) rotate(-90deg);
}

.composer-section-heading:hover { background: #252b33; }

.composer-section-content
{
    padding-top: 10px;
}

.composer-section-heading span
{
    display: block;
    margin-bottom: 4px;
    color: #8b94a3;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.composer-subsection
{
    margin-top: 14px;
    border: 1px solid var(--sfr-line);
    border-radius: 3px;
    background: #191e24;
}

.composer-subsection-heading
{
    position: relative;
    padding: 11px 36px 11px 13px;
    color: #e7ebef;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.composer-subsection-heading::-webkit-details-marker { display: none; }

.composer-subsection-heading::after
{
    content: "⌄";
    position: absolute;
    top: 50%;
    right: 13px;
    color: #9aa5b4;
    font-size: 17px;
    transform: translateY(-55%);
    transition: transform .18s ease;
}

.composer-subsection:not([open]) .composer-subsection-heading::after
{
    transform: translateY(-50%) rotate(-90deg);
}

.composer-subsection-content
{
    padding: 0 10px 10px;
    border-top: 1px solid var(--sfr-line);
}

.composer-subsection-content > .card
{
    margin-top: 10px;
}

.sidebar-title
{
    margin-top: 10px;

    font-size: 18px;

    font-weight: 600;

    color: white;
}

.sidebar-subtitle
{
    margin-top: 4px;

    font-size: 13px;

    color: #b0bbc8;
}

.sidebar .text-uppercase
{
    margin: 30px 20px 10px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .14em;

    color: #707887;
}

.statusbar
{
    grid-area: statusbar;

    background: #1e2228;

    border-top: 1px solid #2b3038;
}

.studio
{
    display: grid;

    height: 100dvh;
    min-height: 0;

    grid-template-columns: 280px 1fr;
    grid-template-rows: 70px minmax(0, 1fr) 30px;

    grid-template-areas:
        "sidebar toolbar"
        "sidebar workspace"
        "statusbar statusbar";
}
.toolbar
{
    grid-area: toolbar;

    background: #1c2127;

    border-bottom: 1px solid #2b3038;
}

.workspace
{
    grid-area: workspace;

    min-width: 0;
    min-height: 0;

    overflow: auto;

    padding: 28px;

    background:
        radial-gradient(circle at 20% 0, rgba(242,140,40,.045), transparent 28rem),
        #13161b;


}

.workspace-grid
{
    display: grid;

    grid-template-columns: 340px minmax(0, 1fr);

    gap: 24px;

    min-height: 100%;
    height: auto;
}

/* Dedicated administration page. It uses the same Studio shell but does not
   compete with the Composer preview for screen space. */
.system-workspace
{
    width: 100%;
    max-width: none;
    margin: 0;
    min-width: 0;
}

.system-workspace-heading
{
    margin: 0 0 20px;
}

.system-workspace-heading h1
{
    margin: 4px 0 8px;
    font-size: clamp(20px, 2vw, 28px);
}

.system-workspace-heading p
{
    max-width: 760px;
    margin: 0;
    color: #98a3ae;
    font-size: 12px;
}

.system-management-grid
{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.system-management-grid > #displays
{
    grid-column: 1 / -1;
}

.system-management-grid > .card
{
    margin-top: 0 !important;
    min-width: 0;
}

/* System functions use separate full-width routes, so a registration session
   never competes with device provisioning or technical logs. */
.system-workspace[data-system-section="registration"] .system-management-grid
{
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.system-workspace[data-system-section="registration"] #displays,
.system-workspace[data-system-section="registration"] #system-logs,
.system-workspace[data-system-section="registration"] #backup-recovery,
.system-workspace[data-system-section="displays"] #organizations,
.system-workspace[data-system-section="displays"] #users,
.system-workspace[data-system-section="displays"] #system-logs,
.system-workspace[data-system-section="displays"] #backup-recovery,
.system-workspace[data-system-section="diagnostics"] #displays,
.system-workspace[data-system-section="diagnostics"] #organizations,
.system-workspace[data-system-section="diagnostics"] #users,
.system-workspace[data-system-section="diagnostics"] #backup-recovery,
.system-workspace[data-system-section="backups"] #displays,
.system-workspace[data-system-section="backups"] #organizations,
.system-workspace[data-system-section="backups"] #users,
.system-workspace[data-system-section="backups"] #system-logs
{
    display: none;
}

.system-workspace[data-system-section="displays"] #displays,
.system-workspace[data-system-section="diagnostics"] #system-logs,
.system-workspace[data-system-section="backups"] #backup-recovery
{
    grid-column: 1 / -1;
}

.backup-status-card { display:flex; flex-direction:column; gap:4px; padding:12px; border:1px solid var(--sfr-line); border-radius:3px; background:#1b2026; color:#dce3e9; font-size:12px; }
.backup-status-card span { color:#aeb9c5; }
.backup-status-card.is-ready { border-color:rgba(42, 195, 94, .55); }
.backup-setup-list { margin:12px 0 0; padding-left:20px; color:#b9c3cd; font-size:12px; line-height:1.7; }

.system-advanced
{
    border-top: 1px solid var(--sfr-line);
    padding-top: 12px;
}

.system-advanced summary
{
    cursor: pointer;
    color: #aeb9c5;
    font-size: 11px;
    font-weight: 700;
}

.system-advanced[open] summary
{
    color: var(--sfr-orange);
}

.guide-workspace { width:100%; max-width:1200px; margin:0 auto; }
.guide-heading { margin-bottom:20px; }
.guide-heading h1 { margin:4px 0 8px; font-size:clamp(22px, 3vw, 30px); }
.guide-heading p { margin:0; color:#98a3ae; font-size:12px; }
.guide-toc { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.guide-toc a { padding:8px 10px; border:1px solid #3e4a59; border-radius:3px; color:#dbe3ea; font-size:11px; text-decoration:none; background:#1b2026; }
.guide-toc a:hover { border-color:var(--sfr-orange); color:#fff; }
.guide-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
.guide-card { min-width:0; padding:20px; border:1px solid var(--sfr-line); border-radius:3px; background:var(--sfr-panel); }
.guide-card > span { color:var(--sfr-orange); font-size:11px; font-weight:700; letter-spacing:.12em; }
.guide-card h2 { margin:6px 0 12px; color:#f1f3f5; font-size:17px; }
.guide-card ol { margin:0; padding-left:20px; color:#b6c0ca; font-size:12px; line-height:1.65; }
.guide-note { margin-top:16px; padding:14px 16px; border:1px solid rgba(242,140,40,.55); border-radius:3px; color:#e9d3b5; font-size:12px; background:rgba(242,140,40,.08); }
.guide-accordion-group { margin-top:16px; }
.guide-accordion { border:1px solid var(--sfr-line); border-radius:3px; background:var(--sfr-panel); }
.guide-accordion > summary { display:flex; align-items:center; gap:10px; padding:14px 16px; cursor:pointer; color:#eef2f5; list-style:none; }
.guide-accordion > summary::-webkit-details-marker, .guide-widget-list > details > summary::-webkit-details-marker { display:none; }
.guide-accordion > summary::after { content:"⌄"; margin-left:auto; color:#aeb9c6; font-size:18px; transition:transform .15s ease; }
.guide-accordion:not([open]) > summary::after { transform:rotate(-90deg); }
.guide-accordion > summary span { color:var(--sfr-orange); font-size:11px; font-weight:700; letter-spacing:.12em; }
.guide-accordion > summary strong { font-size:15px; }
.guide-accordion-content { padding:0 16px 16px; border-top:1px solid var(--sfr-line); color:#bdc7d1; font-size:12px; line-height:1.6; }
.guide-accordion-content p { margin:12px 0 0; }
.guide-widget-list > details { margin-top:10px; border:1px solid #3e4a59; border-radius:3px; background:#1a1e24; }
.guide-widget-list > details > summary { display:flex; gap:10px; align-items:center; padding:10px 12px; cursor:pointer; color:#e7ebef; list-style:none; }
.guide-widget-list > details > summary span { margin-left:auto; color:#aeb9c6; font-size:10px; }
.guide-widget-list > details > p { margin:0; padding:0 12px 11px; color:#b4bec9; }
.guide-widget-list > details[open] { border-color:#596779; }

@media (min-width: 769px) and (max-width: 1200px)
{
    .system-management-grid
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .system-workspace[data-system-section="registration"] .system-management-grid
    {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The preview remains the focal point. The first two compact controls stay
   left, while secondary tools live directly beneath the renderer. */
@media (min-width: 1101px)
{
    .workspace
    {
        overflow: hidden;
    }

    .workspace-grid
    {
        grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
        grid-template-rows: minmax(300px, 56%) minmax(0, 1fr);
        height: 100%;
        min-height: 0;
        align-items: stretch;
    }

    .workspace-composer
    {
        grid-column: 1;
        grid-row: 1 / -1;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 8px;
        scrollbar-gutter: stable;
    }

    .workspace-preview
    {
        grid-column: 2;
        grid-row: 1;
        min-height: 0;
    }

    .workspace-tools
    {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 8px 8px 0 0;
        scrollbar-gutter: stable;
    }

    .workspace-tools .composer-section-content
    {
        display: grid;
        grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
        gap: 16px;
        align-items: start;
    }

    .workspace-tools #system-logs
    {
        margin-top: 0 !important;
    }
}

/* Wide desktop control desk: content and widgets receive their own scroll
   columns while Output Preview stays in its dedicated right-side panel. */
@media (min-width: 1500px)
{
    .workspace-grid
    {
        grid-template-columns: minmax(260px, .85fr) minmax(300px, 1fr) minmax(440px, 1.55fr);
    }

    .workspace-composer,
    .workspace-composer .composer-stack
    {
        display: contents;
    }

    .workspace-composer .composer-section
    {
        min-width: 0;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 8px;
        scrollbar-gutter: stable;
    }

    .workspace-composer .composer-section:first-child
    {
        grid-column: 1;
        grid-row: 1 / -1;
    }

    .workspace-composer .composer-section:nth-child(2)
    {
        grid-column: 2;
        grid-row: 1 / -1;
    }

    .workspace-preview,
    .workspace-tools
    {
        grid-column: 3;
    }

    .workspace-composer .composer-section::-webkit-scrollbar
    {
        width: 10px;
    }

    .workspace-composer .composer-section::-webkit-scrollbar-thumb
    {
        border: 2px solid #13161b;
        border-radius: 999px;
        background: #596474;
    }
}

.workspace-composer
{
    min-width: 0;
    min-height: 0;
}

.workspace-preview
{
    min-width: 0;
}

/* Industrial control-panel treatment for the Studio only. */
.studio .card
{
    border: 1px solid var(--sfr-line);
    border-radius: 3px;
    background: var(--sfr-panel);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 5px 14px rgba(0,0,0,.2);
}

.studio .card-header,
.studio .card-footer
{
    border-color: var(--sfr-line);
    background: rgba(0,0,0,.08);
}

.studio .card-title,
.studio .form-label,
.studio .widget-settings-heading
{
    font-family: inherit;
    font-weight: 700;
    letter-spacing: -.03em;
}

.studio .form-label,
.studio .form-hint,
.studio .widget-settings-note
{
    font-size: 11px;
}

.studio .form-label
{
    letter-spacing: .015em;
}

.station-search { position: relative; }

.station-search-results
{
    position: absolute;
    z-index: 20;
    top: calc(100% + 3px);
    right: 0;
    left: 0;
    max-height: 176px;
    overflow-y: auto;
    border: 1px solid #46515d;
    border-radius: 3px;
    background: #171b20;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .35);
}

.station-search-option
{
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid rgba(70, 81, 93, .55);
    background: transparent;
    color: #e8ebee;
    font: inherit;
    font-size: 12px;
    text-align: left;
}

.station-search-option:last-child { border-bottom: 0; }
.station-search-option:hover, .station-search-option:focus { background: rgba(242, 140, 40, .16); outline: 0; }
.station-search-code { margin-left: 12px; color: var(--sfr-orange); font-weight: 700; }

.studio .form-control,
.studio .form-select,
.studio .input-group-text
{
    border-color: #46515d;
    border-radius: 3px;
    background: #171b20;
    color: #e8ebee;
    font-size: 12px;
}

.schedule-date-picker { position: relative; }
.schedule-picker-trigger { display:block; width:100%; cursor:pointer; text-align:left; }
.schedule-picker-popover
{
    position:absolute;
    z-index:80;
    top:calc(100% + 4px);
    left:0;
    width:min(250px, calc(100vw - 64px));
    padding:12px;
    border:1px solid #596474;
    border-radius:3px;
    background:#1b2026;
    box-shadow:0 12px 28px rgba(0,0,0,.45);
}
.schedule-picker-popover[hidden] { display:none; }
.schedule-picker-actions { display:flex; justify-content:space-between; gap:8px; margin-top:12px; }

.studio .form-control:focus,
.studio .form-select:focus
{
    border-color: var(--sfr-orange);
    box-shadow: 0 0 0 2px rgba(242,140,40,.18);
}

.studio .btn
{
    border-radius: 3px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .01em;
}

.studio .btn-primary
{
    border-color: #bc6516;
    background: #d8751f;
}

.studio .btn-primary:hover,
.studio .btn-primary:focus
{
    border-color: #f0a14c;
    background: var(--sfr-orange);
}

.system-log-list
{
    max-height: 360px;
    overflow: auto;
    border: 1px solid var(--sfr-line);
    background: #15191e;
}

.system-log-entry
{
    display: grid;
    grid-template-columns: 140px 62px 110px minmax(0, 1fr);
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(90,105,119,.35);
    color: #b7c0ca;
    font-size: 10px;
}

.system-log-entry:last-child { border-bottom: 0; }
.system-log-entry[data-level="ERROR"] { color: #f1a0a0; }
.system-log-entry[data-level="WARNING"] { color: #efc371; }

@media (max-width: 768px)
{
    .guide-grid { grid-template-columns:minmax(0, 1fr); gap:12px; }
    .guide-card { padding:16px; }
    .guide-accordion > summary { padding:12px 14px; }
    .guide-accordion-content { padding:0 14px 14px; }
    .guide-widget-list > details > summary { align-items:flex-start; flex-direction:column; gap:2px; }
    .guide-widget-list > details > summary span { margin-left:0; }
    .system-workspace-heading
    {
        margin-bottom: 16px;
    }

    .system-workspace-heading p
    {
        font-size: 11px;
        line-height: 1.5;
    }

    .system-management-grid
    {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .system-management-grid > #displays
    {
        grid-column: auto;
    }

    .system-log-entry
    {
        grid-template-columns: 1fr auto;
    }
    .system-log-entry > :nth-child(3),
    .system-log-entry > :nth-child(4)
    {
        grid-column: 1 / -1;
    }
}

/* Studio navigation revision: the preview is the shared, first element on
   every Composer or widget page. The old control-desk columns remain in the
   source only for compatibility; this layer turns the workspace into one
   readable work surface without changing the widget controls themselves. */
@media (min-width: 769px)
{
    .studio
    {
        grid-template-columns: 248px minmax(0, 1fr);
    }

    .workspace-grid
    {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        height: auto;
        min-height: 0;
        gap: 20px;
    }

    .workspace-preview,
    .workspace-composer,
    .workspace-tools
    {
        grid-column: auto;
        grid-row: auto;
        min-width: 0;
        min-height: 0;
    }

    .workspace-preview
    {
        order: -1;
        height: auto;
        overflow: visible;
        align-self: auto;
    }

    .workspace-preview > #live-preview
    {
        height: auto !important;
    }

    .workspace-preview .preview-body
    {
        min-height: 0;
        padding: clamp(16px, 2vw, 28px);
    }

    .workspace-preview .preview-canvas
    {
        height: min(500px, 48vw);
        min-height: 300px;
        padding: clamp(16px, 2vw, 28px);
    }

    .workspace-composer,
    .workspace-tools,
    .workspace-composer .composer-stack,
    .workspace-composer .composer-section
    {
        display: block;
        height: auto;
        overflow: visible;
        padding-right: 0;
    }

    .workspace-composer .composer-section
    {
        margin-bottom: 16px;
    }
}

/* A direct widget link becomes a focused settings page. Its Output Preview
   remains immediately above it; the general composer and tool desk do not
   compete for attention. */
.workspace-grid.is-widget-page .workspace-composer [data-studio-page="composer"],
.workspace-grid.is-widget-page .widget-settings-stack > .widget-settings-card,
.workspace-grid.is-widget-page .widget-detail-card,
.workspace-grid.is-widget-page .workspace-tools
{
    display: none;
}

.workspace-grid.is-widget-page[data-widget-page="weather"] .widget-detail-card[data-widget-card="weather"],
.workspace-grid.is-widget-page[data-widget-page="clock"] .widget-detail-card[data-widget-card="clock"],
.workspace-grid.is-widget-page[data-widget-page="news"] .widget-detail-card[data-widget-card="news"],
.workspace-grid.is-widget-page[data-widget-page="airport"] .widget-detail-card[data-widget-card="airport"],
.workspace-grid.is-widget-page[data-widget-page="trains"] .widget-detail-card[data-widget-card="trains"],
.workspace-grid.is-widget-page[data-widget-page="menu"] .widget-detail-card[data-widget-card="menu"],
.workspace-grid.is-widget-page[data-widget-page="message-composer"] .widget-detail-card[data-widget-card="message-composer"]
{
    display: block;
}

.workspace-grid.is-widget-page[data-widget-page="widget-overview"] .widget-settings-stack > .widget-settings-card,
.workspace-grid.is-widget-page[data-widget-page="widget-playlist"] .widget-settings-stack > .widget-settings-card
{
    display: block;
}

.workspace-grid.is-widget-page[data-widget-page="widget-overview"] [data-widget-playlist-panel],
.workspace-grid.is-widget-page[data-widget-page="widget-playlist"] [data-widget-overview-panel]
{
    display: none;
}

.workspace-grid.is-widget-page .widget-detail-card > summary
{
    min-height: 60px;
    padding-left: 20px;
    background: #1b2026;
    cursor: default;
}

.workspace-grid.is-widget-page .widget-detail-card > .widget-detail-panel
{
    padding: 0 20px 24px;
}

/* Weather is the first widget using the dedicated desktop work-page layout.
   Its own heading replaces the two accordion headings while it is selected. */
.workspace-grid.is-widget-page[data-widget-page="weather"] .composer-section[data-studio-page="widgets"] > .composer-section-heading,
.workspace-grid.is-widget-page[data-widget-page="weather"] .widget-detail-card[data-widget-card="weather"] > summary
{
    display: none;
}

.workspace-grid.is-widget-page[data-widget-page="weather"] .composer-section[data-studio-page="widgets"] > .composer-section-content
{
    padding-top: 0;
}

.workspace-grid.is-widget-page[data-widget-page="weather"] #weather-settings
{
    margin-top: 0;
    border-top: 0;
}

/* Clock follows the approved Weather work-page structure while retaining its
   existing form controls and save behaviour. */
.workspace-grid.is-widget-page[data-widget-page="clock"] .composer-section[data-studio-page="widgets"] > .composer-section-heading,
.workspace-grid.is-widget-page[data-widget-page="clock"] .widget-detail-card[data-widget-card="clock"] > summary
{
    display: none;
}

.workspace-grid.is-widget-page[data-widget-page="clock"] .composer-section[data-studio-page="widgets"] > .composer-section-content
{
    padding-top: 0;
}

.workspace-grid.is-widget-page[data-widget-page="clock"] #clock-settings
{
    margin-top: 0;
    border-top: 0;
}

/* Message Composer uses a wide message editor with a compact schedule panel;
   the existing dynamic row editor remains unchanged. */
.workspace-grid.is-widget-page[data-widget-page="message-composer"] .composer-section[data-studio-page="widgets"] > .composer-section-heading,
.workspace-grid.is-widget-page[data-widget-page="message-composer"] .widget-detail-card[data-widget-card="message-composer"] > summary
{
    display: none;
}

.workspace-grid.is-widget-page[data-widget-page="message-composer"] .composer-section[data-studio-page="widgets"] > .composer-section-content
{
    padding-top: 0;
}

.workspace-grid.is-widget-page[data-widget-page="message-composer"] #message-composer-settings
{
    margin-top: 0;
    border-top: 0;
}

/* Menu keeps its three persistence boundaries while presenting them as one
   page editor and a compact import/appearance side column. */
.workspace-grid.is-widget-page[data-widget-page="menu"] .composer-section[data-studio-page="widgets"] > .composer-section-heading,
.workspace-grid.is-widget-page[data-widget-page="menu"] .widget-detail-card[data-widget-card="menu"] > summary
{
    display: none;
}

.workspace-grid.is-widget-page[data-widget-page="menu"] .composer-section[data-studio-page="widgets"] > .composer-section-content
{
    padding-top: 0;
}

.workspace-grid.is-widget-page[data-widget-page="menu"] #menu-settings
{
    margin-top: 0;
    border-top: 0;
}

/* Regional news separates source, background and per-row colour controls into
   three desktop panels without changing its two existing save boundaries. */
.workspace-grid.is-widget-page[data-widget-page="news"] .composer-section[data-studio-page="widgets"] > .composer-section-heading,
.workspace-grid.is-widget-page[data-widget-page="news"] .widget-detail-card[data-widget-card="news"] > summary
{
    display: none;
}

.workspace-grid.is-widget-page[data-widget-page="news"] .composer-section[data-studio-page="widgets"] > .composer-section-content
{
    padding-top: 0;
}

.workspace-grid.is-widget-page[data-widget-page="news"] #news-settings
{
    margin-top: 0;
    border-top: 0;
}

/* Airport flights presents source, live behaviour and appearance as three
   desktop panels while preserving its existing save operations. */
.workspace-grid.is-widget-page[data-widget-page="airport"] .composer-section[data-studio-page="widgets"] > .composer-section-heading,
.workspace-grid.is-widget-page[data-widget-page="airport"] .widget-detail-card[data-widget-card="airport"] > summary
{
    display: none;
}

.workspace-grid.is-widget-page[data-widget-page="airport"] .composer-section[data-studio-page="widgets"] > .composer-section-content
{
    padding-top: 0;
}

.workspace-grid.is-widget-page[data-widget-page="airport"] #airport-settings
{
    margin-top: 0;
    border-top: 0;
}

.workspace-page-context
{
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border: 1px solid var(--sfr-line);
    border-left: 3px solid var(--sfr-orange);
    border-radius: 3px;
    background: #1b2026;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.workspace-page-context:not([hidden])
{
    display: flex;
}

.workspace-page-context span
{
    display: block;
    margin-bottom: 3px;
    color: #9aa6b4;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.workspace-page-context h2
{
    margin: 0;
    color: #f1f3f5;
    font-size: 17px;
}

.sidebar-subnav a.is-active
{
    color: #ff9b3d;
    background: rgba(242,140,40,.14);
    box-shadow: inset 2px 0 0 var(--sfr-orange);
}

.sidebar-subnav a.is-active i
{
    color: currentColor;
}

@media (max-width: 768px)
{
    .workspace-page-context
    {
        align-items: flex-start;
        flex-direction: column;
    }

    .workspace-page-context .btn
    {
        width: 100%;
    }
}

@media (min-width: 1101px)
{
    .workspace
    {
        /* One shared desktop scroll area is reliable wherever the pointer is:
           composer, preview or the gap between them. */
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    .workspace-composer
    {
        height: auto;
        overflow: visible;
        padding-right: 0;
    }
}

@media (min-width: 769px) and (max-width: 1100px)
{
    .workspace-grid
    {
        grid-template-columns: minmax(0, 1fr);
    }

    .workspace-preview,
    .workspace-composer,
    .workspace-tools
    {
        grid-column: auto;
        grid-row: auto;
    }
}

@media (max-width: 768px)
{
    .workspace-grid
    {
        display: flex;
        flex-direction: column;
    }

    .workspace-preview { order: -1; }
    .workspace-composer { order: 0; }
    .workspace-tools { order: 1; }
}

@media (min-width: 1101px)
{
    .workspace-preview
    {
        align-self: start;
        height: 100%;
        overflow: hidden;
        padding-right: 0;
    }

    .workspace-preview > #live-preview
    {
        display: flex;
        flex-direction: column;
        height: 100% !important;
        min-height: 0;
    }

    .workspace-preview .preview-body
    {
        min-height: 0;
        padding: clamp(16px, 2vw, 32px);
    }

    .workspace-preview .preview-canvas
    {
        min-height: 0;
        height: 100%;
        padding: clamp(16px, 2vw, 32px);
    }

    .workspace-composer::-webkit-scrollbar,
    .workspace-tools::-webkit-scrollbar
    {
        width: 10px;
    }

    .workspace-composer::-webkit-scrollbar-thumb,
    .workspace-tools::-webkit-scrollbar-thumb
    {
        border: 2px solid #13161b;
        border-radius: 999px;
        background: #596474;
    }
}

.mobile-nav-toggle
{
    display: none;
}

.preview-mobile-controls
{
    display: none;
}

@media (max-width: 1100px)
{
    .workspace
    {
        padding: 20px;
    }

    .workspace-grid
    {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
    }

    .preview-body
    {
        min-height: 420px;
        padding: 24px;
    }

    .workspace-preview .preview-canvas
    {
        height: min(420px, 54vw);
        min-height: 360px;
        padding: 24px;
    }
}

@media (max-width: 768px)
{
    html,
    body
    {
        height: 100%;
    }

    body
    {
        overflow: hidden;
    }

    .studio
    {
        height: 100dvh;
        min-height: 0;

        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr auto;

        grid-template-areas:
            "toolbar"
            "workspace"
            "statusbar";
    }

    .sidebar
    {
        grid-area: auto;

        position: fixed;
        inset: 0 auto 0 0;

        width: min(280px, calc(100vw - 48px));

        transform: translateX(-100%);
        transition: transform .2s ease;

        z-index: 1040;

        box-shadow: 12px 0 28px rgba(0,0,0,.35);
    }

    .studio-sidebar-nav
    {
        width: 100%;
    }

    .studio.mobile-nav-open .sidebar
    {
        transform: translateX(0);
    }

    .mobile-nav-toggle
    {
        display: inline-flex;
    }

    .toolbar-content
    {
        align-items: flex-start !important;
    }

    .page-title
    {
        font-size: 20px;
    }

    .toolbar-status .badge:not(:first-child)
    {
        display: none;
    }

    .workspace
    {
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;

        padding: 16px;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    .workspace-grid
    {
        gap: 16px;
    }

    .preview-body
    {
        min-height: 320px;
        padding: 16px;
    }

    .workspace-preview .preview-canvas
    {
        height: min(360px, 70vw);
        min-height: 240px;
        padding: 16px;
    }

    .card-footer
    {
        flex-wrap: wrap;
        gap: 8px;
    }

    .preview-mobile-controls
    {
        display: flex;
        gap: 8px;
        margin-top: 10px;
    }

    .workspace-preview .preview-canvas.preview-detail-mode
    {
        justify-content: flex-start;
        overflow: auto;
    }

    .preview-detail-mode .virtual-renderer
    {
        flex: 0 0 1600px;

        width: 1600px;
    }

    .preview-canvas:fullscreen
    {
        height: 100dvh;
        padding: 16px;

        background: #000;
    }

    .workspace-preview .preview-canvas.preview-fullscreen-fallback
    {
        position: fixed;
        inset: 0;

        width: 100vw;
        height: 100dvh;
        max-width: none;

        z-index: 1100;

        border-radius: 0;
        overflow: auto;
    }

    .preview-fullscreen-close
    {
        display: none;
    }

    .preview-fullscreen-fallback .preview-fullscreen-close
    {
        display: block;

        position: fixed;
        top: 16px;
        right: 16px;

        z-index: 1101;
    }
}

/* Keep this final desktop override after legacy responsive rules. */
@media (min-width: 769px)
{
    .studio { grid-template-columns: 248px minmax(0, 1fr); }
    .workspace-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; height: auto; min-height: 0; gap: 20px; }
    .workspace-preview, .workspace-composer, .workspace-tools { grid-column: auto; grid-row: auto; min-width: 0; min-height: 0; }
    .workspace-preview
    {
        position: sticky;
        top: 0;
        z-index: 20;
        order: -1;
        height: auto;
        overflow: visible;
        align-self: start;
    }
    .workspace-preview > #live-preview { height: auto !important; }
    .workspace-preview .preview-body { min-height: 0; padding: clamp(14px, 1.5vw, 22px); }
    .workspace-preview .preview-canvas { height: min(400px, 42vw); min-height: 260px; padding: clamp(14px, 1.5vw, 22px); }
    .workspace-composer, .workspace-tools, .workspace-composer .composer-stack, .workspace-composer .composer-section { display: block; height: auto; overflow: visible; padding-right: 0; }
    .workspace-composer .composer-section { margin-bottom: 16px; }
}

/* Sprint: keep Output Preview useful as a monitor dock, rather than letting
   it consume most of a desktop work page.  The canvas renderer observes this
   container and retains its own fit/detail behaviour. */
@media (min-width: 1101px)
{
    .workspace-preview
    {
        top: 12px;
    }

    .workspace-preview > #live-preview
    {
        max-height: min(348px, calc(100dvh - 142px));
        overflow: hidden;
    }

    .workspace-preview .card-header
    {
        min-height: 42px;
        padding: 7px 12px;
    }

    .workspace-preview .card-title { font-size: 13px; }
    .workspace-preview .card-header .small { font-size: 9px; line-height: 1.2; }
    .workspace-preview .card-header .badge { padding: 4px 8px; font-size: 9px; }

    .workspace-preview .preview-body
    {
        flex: 1 1 auto;
        padding: 6px 8px;
    }

    .workspace-preview .preview-canvas
    {
        height: clamp(224px, 24vw, 286px);
        min-height: 224px;
        padding: 5px;
    }

    .workspace-preview .card-footer
    {
        min-height: 29px;
        padding: 5px 10px;
        font-size: 10px;
    }
}

/* Widget work needs deliberately generous targets.  It remains compact by
   grouping rows, but controls no longer look like dense developer fields. */
.widget-detail-card > summary
{
    min-height: 62px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.widget-detail-card > .widget-detail-panel
{
    padding-bottom: 22px;
}

.widget-detail-card .form-control,
.widget-detail-card .form-select
{
    min-height: 40px;
}

.widget-detail-card .widget-settings-heading
{
    margin-top: 18px;
    margin-bottom: 12px;
}

/* The expanded Widgets group is a compact tab rail on desktop.  Text stays
   available to screen readers and as a native hover title; mobile retains its
   labelled list because it is clearer and easier to tap there. */
@media (min-width: 769px)
{
    .sidebar-widget-tabs
    {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        margin: 5px 12px 12px 42px;
        max-width: calc(100% - 54px);
    }

    .sidebar-widget-tabs a
    {
        position: relative;
        justify-content: center;
        min-height: 48px;
        padding: 8px;
        border: 1px solid #3c4654;
        border-radius: 5px;
        background: #1d2229;
    }

    .sidebar-widget-tabs .sidebar-widget-icon
    {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        color: #c0cad5;
        font-size: 19px;
        stroke: currentColor;
        stroke-width: 1.8;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .sidebar-widget-tabs a > span
    {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .sidebar-widget-tabs a:hover,
    .sidebar-widget-tabs a.is-active
    {
        color: #ff9b3d;
        border-color: #d77a2c;
        background: rgba(242, 140, 40, .16);
        box-shadow: inset 0 0 0 1px rgba(255, 171, 83, .12);
    }
}

@media (max-width: 768px)
{
    .sidebar-widget-tabs
    {
        grid-template-columns: 1fr;
        gap: 2px;
        margin: 2px 10px 8px 42px;
        max-width: calc(100% - 52px);
    }

    .sidebar-widget-tabs a
    {
        justify-content: flex-start;
        min-height: 30px;
        padding: 7px 10px;
        border: 0;
        background: transparent;
    }

    .sidebar-widget-tabs .sidebar-widget-icon
    {
        width: 15px;
        height: 15px;
        flex-basis: 15px;
        color: #c0cad5;
        stroke: currentColor;
        stroke-width: 1.8;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .sidebar-widget-tabs a > span
    {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
        border: 0;
    }
}
.studio-save-toast {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1200;
    min-width: 8.5rem;
    padding: .7rem 1rem;
    border: 1px solid rgba(84, 204, 85, .55);
    border-radius: .45rem;
    background: rgba(17, 35, 27, .96);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .35);
    color: #8ee58f;
    font-weight: 700;
    text-align: center;
    opacity: 0;
    transform: translateY(-.5rem);
    transition: opacity 180ms ease, transform 180ms ease;
    pointer-events: none;
}

.studio-save-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.studio-save-toast[hidden] {
    display: none;
}

@media (max-width: 767px) {
    .studio-save-toast {
        top: auto;
        right: 1rem;
        bottom: 1rem;
        left: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .studio-save-toast {
        transition: none;
    }
}

.password-input-wrap {
    position: relative;
    width: 100%;
}

.password-input-wrap > input {
    padding-right: 2.9rem !important;
}

.password-visibility-toggle {
    position: absolute;
    top: 50%;
    right: .45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: .35rem;
    background: transparent;
    color: var(--tblr-secondary-color, #929dab);
    cursor: pointer;
    transform: translateY(-50%);
}

.password-visibility-toggle:hover {
    background: rgba(146, 157, 171, .12);
    color: var(--tblr-body-color, #f8f9fa);
}

.password-visibility-toggle:focus-visible {
    outline: 2px solid var(--tblr-primary, #ff8100);
    outline-offset: 1px;
}

.studio-tour-guard {
    position: fixed;
    inset: 0;
    z-index: 2099;
    background: transparent;
}

.studio-tour-spotlight {
    position: fixed;
    z-index: 2100;
    border: 2px solid var(--sfr-orange, #f28c28);
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(4, 7, 10, .76), 0 0 0 5px rgba(242, 140, 40, .2);
    pointer-events: none;
    transition: left 180ms ease, top 180ms ease, width 180ms ease, height 180ms ease;
}

.studio-tour-dialog {
    position: fixed;
    z-index: 2101;
    width: min(380px, calc(100vw - 24px));
    padding: 20px;
    border: 1px solid #4a535f;
    border-top: 3px solid var(--sfr-orange, #f28c28);
    border-radius: 9px;
    background: #1b2026;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
    color: #f1f3f5;
}

.studio-tour-progress {
    margin-bottom: 8px;
    color: #f6a04b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.studio-tour-dialog h2 {
    margin: 0 0 8px;
    font-size: 19px;
}

.studio-tour-dialog p {
    margin: 0;
    color: #bac3cd;
    font-size: 13px;
    line-height: 1.55;
}

.studio-tour-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
}

.studio-tour-actions > div {
    display: flex;
    gap: 8px;
}

.studio-tour-actions .btn-link {
    padding-inline: 0;
    color: #9ca8b5;
}

@media (max-width: 560px) {
    .studio-tour-dialog { padding: 16px; }
    .studio-tour-actions { align-items: stretch; flex-direction: column-reverse; }
    .studio-tour-actions > div { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .studio-tour-spotlight { transition: none; }
}

.studio-start-checklist {
    position: fixed;
    right: 18px;
    bottom: 42px;
    z-index: 1180;
    width: min(390px, calc(100vw - 24px));
    overflow: hidden;
    border: 1px solid #414a55;
    border-radius: 9px;
    background: rgba(27, 32, 38, .98);
    box-shadow: 0 14px 42px rgba(0, 0, 0, .48);
    color: #f1f3f5;
}

.studio-checklist-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
}

.studio-checklist-heading > span:first-child {
    display: grid;
    gap: 2px;
}

.studio-checklist-heading strong {
    font-size: 13px;
}

.studio-checklist-heading small {
    color: #9da9b6;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.studio-checklist-chevron {
    color: #f29a43;
    font-size: 18px;
}

.studio-checklist-body {
    border-top: 1px solid #353d47;
}

.studio-checklist-body ol {
    display: grid;
    gap: 0;
    padding: 0;
    margin: 0;
    list-style: none;
}

.studio-checklist-body li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    border-bottom: 1px solid rgba(65, 74, 85, .62);
}

.studio-checklist-body li:last-child {
    border-bottom: 0;
}

.studio-checklist-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid #626d79;
    border-radius: 50%;
    color: #102016;
    font-size: 12px;
    font-weight: 800;
}

.studio-checklist-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.studio-checklist-copy strong {
    font-size: 12px;
}

.studio-checklist-copy small {
    color: #98a4b1;
    font-size: 10px;
    line-height: 1.35;
}

.studio-checklist-body li.is-complete .studio-checklist-mark {
    border-color: #70cf87;
    background: #70cf87;
}

.studio-checklist-body li.is-complete .studio-checklist-copy strong {
    color: #9eabb7;
    text-decoration: line-through;
}

.studio-start-checklist.is-complete {
    border-color: rgba(112, 207, 135, .65);
}

.studio-start-checklist.is-complete .studio-checklist-heading small {
    color: #70cf87;
}

.studio-start-checklist.is-collapsed {
    width: min(270px, calc(100vw - 24px));
}

@media (max-width: 560px) {
    .studio-start-checklist { right: 12px; bottom: 12px; }
    .studio-checklist-body li { grid-template-columns: 22px minmax(0, 1fr); }
    .studio-checklist-body li .btn { grid-column: 2; justify-self: start; }
}