/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Editorial in-app chrome. Cream paper canvas + ink-tinted sidebar with a
 * mono wordmark and ember accents. The auth pages (/account/login etc.)
 * have their own AuthLayout that bypasses this shell entirely. */

.page[b-k9s9vv3ciy] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--ld-paper, #f7f4ec);
    color: var(--ld-ink, #16181c);
    font-family: var(--ld-body, system-ui, sans-serif);
    font-feature-settings: "ss01", "cv11";
    min-height: 100vh;
}

main[b-k9s9vv3ciy] {
    flex: 1;
    background: var(--ld-paper, #f7f4ec);
}

.sidebar[b-k9s9vv3ciy] {
    background: var(--ld-paper-deep, #efeadf);
    border-right: 1px solid var(--ld-rule-soft, #e6e0d0);
    color: var(--ld-ink, #16181c);
}

#blazor-error-ui[b-k9s9vv3ciy] {
    color-scheme: light only;
    background: #fdf5e6;
    border-top: 1px solid var(--ld-rule, #d8d2c2);
    bottom: 0;
    box-shadow: 0 -2px 8px rgba(22, 24, 28, 0.08);
    box-sizing: border-box;
    color: var(--ld-ink, #16181c);
    display: none;
    font-family: var(--ld-mono, monospace);
    font-size: 12px;
    left: 0;
    padding: 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-k9s9vv3ciy] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.55rem;
}

#blazor-error-ui .reload[b-k9s9vv3ciy] {
    color: var(--ld-ember, #cf5a26);
    text-decoration: none;
    margin-left: 8px;
}

@media (min-width: 641px) {
    .page[b-k9s9vv3ciy] {
        flex-direction: row;
    }

    .sidebar[b-k9s9vv3ciy] {
        width: 248px;
        height: 100vh;
        position: sticky;
        top: 0;
        flex-shrink: 0;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Editorial sidebar nav.
 * Cream paper-deep background (from MainLayout.razor.css), ink text, mono
 * labels, ember accents on the active link. No icons — the active rule is
 * carried by typography + a 3px ember left bar. */

.nav-brand-bar[b-samt50s05i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 22px 18px;
    border-bottom: 1px solid var(--ld-rule-soft, #e6e0d0);
}

.nav-brand-bar[b-samt50s05i]  .ld-wordmark {
    font-family: var(--ld-mono, monospace);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--ld-ink, #16181c);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-brand-bar[b-samt50s05i]  .ld-wordmark::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--ld-ember, #cf5a26);
    display: inline-block;
}

.nav-brand-bar[b-samt50s05i]  .ld-wordmark-dot {
    color: var(--ld-ink-muted, #6b6e78);
    font-weight: 400;
}

.sidebar-collapse-btn[b-samt50s05i] {
    background: transparent;
    border: 0;
    color: var(--ld-ink-muted, #6b6e78);
    font-size: 1.35rem;
    line-height: 1;
    padding: 0 6px;
    cursor: pointer;
    transition: color 0.18s ease;
}

.sidebar-collapse-btn:hover[b-samt50s05i] {
    color: var(--ld-ember, #cf5a26);
}

@media (max-width: 640px) {
    .sidebar-collapse-btn[b-samt50s05i] {
        display: none;
    }
}

.nav-scrollable[b-samt50s05i] {
    display: none;
    padding: 22px 0 26px;
}

.navbar-toggler[b-samt50s05i] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: var(--ld-ink, #16181c);
    position: absolute;
    top: 0.4rem;
    right: 0.5rem;
    border: 1px solid var(--ld-rule, #d8d2c2);
    border-radius: 6px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2316181c' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.5rem;
}

.navbar-toggler:checked[b-samt50s05i] {
    background-color: rgba(22, 24, 28, 0.06);
}

.navbar-toggler:checked ~ .nav-scrollable[b-samt50s05i] {
    display: block;
}

.nav-section-label[b-samt50s05i] {
    font-family: var(--ld-mono, monospace);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ld-ink-muted, #6b6e78);
    margin: 0 0 8px;
    padding: 0 22px;
}

.nav-section-label:not(:first-child)[b-samt50s05i] {
    margin-top: 28px;
}

.nav-stack[b-samt50s05i] {
    display: flex;
    flex-direction: column;
    margin-bottom: 4px;
}

.nav-stack-form[b-samt50s05i] {
    margin: 0;
    padding: 0;
    display: contents;
}

.nav-stack[b-samt50s05i]  .nav-stack-link,
.nav-stack-button[b-samt50s05i] {
    font-family: var(--ld-body, system-ui, sans-serif);
    font-size: 14px;
    color: var(--ld-ink-soft, #3a3d44);
    text-decoration: none;
    padding: 8px 22px 8px 19px;
    border-left: 3px solid transparent;
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    background: none;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    text-align: left;
    width: 100%;
    cursor: pointer;
    line-height: 1.4;
}

.nav-stack[b-samt50s05i]  .nav-stack-link:hover,
.nav-stack-button:hover[b-samt50s05i] {
    color: var(--ld-ink, #16181c);
    background: rgba(22, 24, 28, 0.04);
}

.nav-stack[b-samt50s05i]  .nav-stack-link.active {
    color: var(--ld-ink, #16181c);
    background: rgba(207, 90, 38, 0.07);
    border-left-color: var(--ld-ember, #cf5a26);
    font-weight: 500;
}

.nav-footer[b-samt50s05i] {
    margin: 36px 0 0;
    padding: 16px 22px 0;
    border-top: 1px solid var(--ld-rule-soft, #e6e0d0);
    font-family: var(--ld-mono, monospace);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--ld-ink-muted, #6b6e78);
}

@media (min-width: 641px) {
    .navbar-toggler[b-samt50s05i] {
        display: none;
    }

    .nav-scrollable[b-samt50s05i] {
        display: block;
        height: calc(100vh - 78px);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-x0834iqivp],
.components-reconnect-repeated-attempt-visible[b-x0834iqivp],
.components-reconnect-failed-visible[b-x0834iqivp],
.components-pause-visible[b-x0834iqivp],
.components-resume-failed-visible[b-x0834iqivp],
.components-rejoining-animation[b-x0834iqivp] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-x0834iqivp],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-x0834iqivp],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-x0834iqivp],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-x0834iqivp],
#components-reconnect-modal.components-reconnect-retrying[b-x0834iqivp],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-x0834iqivp],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-x0834iqivp],
#components-reconnect-modal.components-reconnect-failed[b-x0834iqivp],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-x0834iqivp] {
    display: block;
}


#components-reconnect-modal[b-x0834iqivp] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-x0834iqivp 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-x0834iqivp 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-x0834iqivp 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-x0834iqivp]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-x0834iqivp 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-x0834iqivp {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-x0834iqivp {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-x0834iqivp {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-x0834iqivp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-x0834iqivp] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-x0834iqivp] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-x0834iqivp] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-x0834iqivp] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-x0834iqivp] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-x0834iqivp] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-x0834iqivp 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-x0834iqivp] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-x0834iqivp {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/AccountCredits.razor.rz.scp.css */
.account-content[b-w8onck526n] {
    container-type: inline-size;
}

.credits-grid[b-w8onck526n] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin: var(--space-3) 0;
}

@container (max-width: 640px) {
    .credits-grid[b-w8onck526n] {
        grid-template-columns: 1fr;
    }
}

.credits-card[b-w8onck526n] {
    background: var(--surface);
    border: 1px solid var(--ld-rule);
    border-radius: var(--radius-2);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.credits-card-topup[b-w8onck526n] {
    border-color: var(--ld-ember);
    background: var(--ld-ember-soft);
}

.credits-label[b-w8onck526n] {
    font-family: var(--ld-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ld-ink-muted);
}

.credits-amount[b-w8onck526n] {
    font-family: var(--ld-display);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--ld-ink);
}

.credits-meta[b-w8onck526n] {
    font-size: 0.85rem;
    color: var(--ld-ink-soft);
}

.credits-tier[b-w8onck526n] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: var(--space-2) var(--space-3);
    background: var(--ld-paper-deep);
    border-radius: var(--radius-1);
    margin-bottom: var(--space-4);
    font-size: 0.92rem;
    color: var(--ld-ink-soft);
}

.credits-tier-label[b-w8onck526n] {
    font-family: var(--ld-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ld-ink-muted);
}

.credits-tier-value[b-w8onck526n] {
    font-weight: 700;
    color: var(--ld-ink);
}

.credits-tier-hint[b-w8onck526n] {
    font-style: italic;
}

.credits-chips[b-w8onck526n] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}

.credits-chip[b-w8onck526n] {
    min-width: 80px;
    padding: var(--space-2) var(--space-3);
    background: var(--surface);
    border: 1px solid var(--ld-rule);
    border-radius: var(--radius-1);
    color: var(--ld-ink);
    font-family: var(--ld-mono);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.credits-chip:hover:not(:disabled)[b-w8onck526n] {
    border-color: var(--ld-ember);
    color: var(--ld-ember);
}

.credits-chip:disabled[b-w8onck526n] {
    opacity: 0.55;
    cursor: not-allowed;
}

.credits-chip-spin[b-w8onck526n] {
    font-family: var(--ld-mono);
    color: var(--ld-ember);
}

.credits-custom[b-w8onck526n] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-width: 320px;
}

.credits-custom-label[b-w8onck526n] {
    font-family: var(--ld-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ld-ink-muted);
}

.credits-custom-row[b-w8onck526n] {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
}

.credits-custom-prefix[b-w8onck526n] {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-2);
    background: var(--ld-paper-deep);
    border: 1px solid var(--ld-rule);
    border-right: none;
    border-radius: var(--radius-1) 0 0 var(--radius-1);
    color: var(--ld-ink-muted);
    font-family: var(--ld-mono);
}

.credits-custom-row input[b-w8onck526n] {
    flex: 1;
    padding: var(--space-2);
    border: 1px solid var(--ld-rule);
    border-radius: 0;
    font-family: var(--ld-mono);
    font-size: 0.95rem;
    background: var(--surface);
    color: var(--ld-ink);
}

.credits-chip-buy[b-w8onck526n] {
    background: var(--ld-ember);
    color: var(--surface);
    border-color: var(--ld-ember);
}

.credits-chip-buy:hover:not(:disabled)[b-w8onck526n] {
    filter: brightness(0.9);
}

.credits-upgrade-btn[b-w8onck526n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    background: var(--ld-ember);
    color: var(--surface);
    border: 1px solid var(--ld-ember);
    border-radius: var(--radius-1);
    font-family: var(--ld-mono);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: filter 0.12s ease;
    margin-bottom: var(--space-3);
}

.credits-upgrade-btn:hover:not(:disabled)[b-w8onck526n] {
    filter: brightness(0.9);
}

.credits-upgrade-btn:disabled[b-w8onck526n] {
    opacity: 0.55;
    cursor: not-allowed;
}

.credits-plans[b-w8onck526n] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: var(--space-3) 0;
}

@container (max-width: 640px) {
    .credits-plans[b-w8onck526n] {
        grid-template-columns: 1fr;
    }
}

.credits-plan[b-w8onck526n] {
    appearance: none;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--ld-rule);
    border-radius: var(--radius-2);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    cursor: pointer;
    color: var(--ld-ink);
    font: inherit;
    transition: border-color 0.12s ease, transform 0.12s ease;
}

.credits-plan:hover:not(:disabled)[b-w8onck526n] {
    border-color: var(--ld-ember);
    transform: translateY(-1px);
}

.credits-plan:disabled[b-w8onck526n] {
    cursor: not-allowed;
}

.credits-plan-current[b-w8onck526n] {
    border-color: var(--ld-ember);
    background: var(--ld-ember-soft);
}

.credits-plan-name[b-w8onck526n] {
    font-family: var(--ld-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ld-ink);
}

.credits-plan-price[b-w8onck526n] {
    font-family: var(--ld-mono);
    font-size: 0.92rem;
    color: var(--ld-ink-soft);
}

.credits-plan-blurb[b-w8onck526n] {
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--ld-ink-soft);
}

.credits-plan-tag[b-w8onck526n] {
    align-self: flex-start;
    margin-top: var(--space-1);
    padding: 2px var(--space-2);
    background: var(--ld-ember);
    color: var(--surface);
    font-family: var(--ld-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: var(--radius-1);
}

.credits-downgrade-note[b-w8onck526n] {
    margin-bottom: var(--space-4);
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
.home-shell[b-8bokpayrf0] {
    padding: var(--space-4);
    max-width: 1280px;
    margin: 0 auto;
}

.home-header[b-8bokpayrf0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--gray-200);
}

.home-header h1[b-8bokpayrf0] {
    color: var(--brand-primary);
    margin: 0;
    font-size: var(--font-size-headline);
    font-weight: 800;
    letter-spacing: -0.3px;
}

.home-tiles[b-8bokpayrf0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-3);
}

.home-tile[b-8bokpayrf0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-2);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.12s ease, transform 0.06s ease, border-color 0.12s ease;
    min-height: var(--tile-min-height);
}

.home-tile:hover[b-8bokpayrf0] {
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-2);
    transform: translateY(-1px);
}

.home-tile-top[b-8bokpayrf0] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.home-tile-name[b-8bokpayrf0] {
    font-weight: 700;
    color: var(--navy-dark);
    font-size: var(--font-size-card-title);
}

.home-tile-blurb[b-8bokpayrf0] {
    margin: 0;
    color: var(--gray-700);
    font-size: var(--font-size-card-body);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-tile-meta[b-8bokpayrf0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    color: var(--gray-500);
    font-size: var(--font-size-card-body);
}

.home-tile-mode[b-8bokpayrf0] {
    color: var(--gray-700);
    font-weight: 600;
}

.home-tile-updated[b-8bokpayrf0] {
    color: var(--gray-500);
    font-style: italic;
    font-size: var(--font-size-chip);
}

.home-tile-status[b-8bokpayrf0] {
    margin-top: auto;
}

.home-tile-status .status-badge[b-8bokpayrf0] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-chip);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.home-tile-status .status-badge.status-draft[b-8bokpayrf0] {
    background: var(--status-draft);
    color: var(--status-draft-text);
}

.home-tile-status .status-badge.status-published[b-8bokpayrf0] {
    background: var(--status-published);
    color: var(--status-published-text);
}

.home-tile-status .status-badge.status-archived[b-8bokpayrf0] {
    background: var(--status-archived);
    color: var(--status-archived-text);
}

/* Comment-badge as a sibling anchor over the tile's bottom-right corner. Lives
   outside the tile <a> so its own navigation wins; absolute positioning keeps the
   visual placement the in-flow badge had before. */
.home-tile-wrap[b-8bokpayrf0] {
    position: relative;
    display: flex;
}
.home-tile-wrap > .home-tile[b-8bokpayrf0] {
    flex: 1;
    min-width: 0;
}
.home-tile-comment-badge[b-8bokpayrf0] {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-chip);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: var(--orange-soft);
    color: var(--brand-accent);
    text-decoration: none;
    cursor: pointer;
    transition: background 120ms ease, transform 120ms ease;
}
.home-tile-comment-badge:hover[b-8bokpayrf0],
.home-tile-comment-badge:focus-visible[b-8bokpayrf0] {
    background: var(--brand-accent);
    color: var(--surface);
    transform: translateY(-1px);
    outline: none;
    text-decoration: none;
}

.status-dot[b-8bokpayrf0] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}

.status-dot.status-on-track[b-8bokpayrf0] { background: var(--green); }
.status-dot.status-decision[b-8bokpayrf0] { background: var(--purple); }
.status-dot.status-blocked[b-8bokpayrf0] { background: var(--red); }
.status-dot.status-new[b-8bokpayrf0] { background: var(--blue); }

.empty-state[b-8bokpayrf0] {
    text-align: center;
    padding: var(--space-5);
}

.empty-state h2[b-8bokpayrf0] {
    color: var(--brand-primary);
    margin: 0 0 var(--space-2);
}

.error-card[b-8bokpayrf0] {
    background: var(--red-soft);
    border-left: 4px solid var(--red);
    padding: var(--space-3);
    border-radius: var(--radius-2);
    margin-bottom: var(--space-4);
}

.loading[b-8bokpayrf0] {
    color: var(--gray-500);
    font-style: italic;
    padding: var(--space-4);
}
/* /Components/Pages/KitEditor.razor.rz.scp.css */
/* Kit editor layout — cream/ember editorial palette matching landing.css and the
 * design tokens. Three regions: header (title + actions), body (sidebar + main),
 * collapsible preview drawer at the bottom of the main column.
 */

.kit-shell[b-3d8ukh5p39] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 4rem);
    background: var(--ld-paper);
    color: var(--ld-ink);
    font-family: var(--ld-body);
}

.kit-header[b-3d8ukh5p39] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--surface);
    border-bottom: 1px solid var(--ld-rule);
}

.kit-title h1[b-3d8ukh5p39] {
    margin: 0;
    font-family: var(--ld-display);
    font-size: 1.6rem;
    color: var(--ld-ink);
    line-height: 1.2;
}

.kit-subtitle[b-3d8ukh5p39] {
    display: inline-block;
    margin-left: var(--space-2);
    font-family: var(--ld-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ld-ember);
    vertical-align: middle;
}

.kit-back[b-3d8ukh5p39] {
    display: inline-block;
    margin-bottom: var(--space-1);
    font-family: var(--ld-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ld-ink-muted);
    text-decoration: none;
}

.kit-back:hover[b-3d8ukh5p39] {
    color: var(--ld-ember);
}

.kit-actions[b-3d8ukh5p39] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.kit-dirty[b-3d8ukh5p39] {
    font-size: 0.85rem;
    color: var(--ld-ember);
    font-style: italic;
    margin-right: var(--space-2);
}

.kit-btn[b-3d8ukh5p39] {
    font-family: var(--ld-body);
    font-size: 0.9rem;
    font-weight: 600;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-1);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.kit-btn:disabled[b-3d8ukh5p39] {
    opacity: 0.55;
    cursor: not-allowed;
}

.kit-btn-primary[b-3d8ukh5p39] {
    background: var(--ld-ember);
    color: var(--surface);
    border-color: var(--ld-ember);
}

.kit-btn-primary:hover:not(:disabled)[b-3d8ukh5p39] {
    filter: brightness(0.9);
}

.kit-btn-ghost[b-3d8ukh5p39] {
    background: transparent;
    color: var(--ld-ink-soft);
    border-color: var(--ld-rule);
}

.kit-btn-ghost:hover:not(:disabled)[b-3d8ukh5p39] {
    border-color: var(--ld-ember);
    color: var(--ld-ember);
}

.kit-btn-danger[b-3d8ukh5p39] {
    background: var(--red);
    color: var(--surface);
    border-color: var(--red);
}

.kit-btn-danger:hover:not(:disabled)[b-3d8ukh5p39] {
    filter: brightness(0.9);
}

.kit-btn-sm[b-3d8ukh5p39] {
    padding: 4px 10px;
    font-size: 0.8rem;
}

/* ---------- Banner / toast ---------- */

.kit-banner[b-3d8ukh5p39] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-5);
    border-bottom: 1px solid var(--ld-rule);
    font-size: 0.92rem;
}

.kit-banner-info[b-3d8ukh5p39] {
    background: var(--ld-paper-deep);
    color: var(--ld-ink-soft);
}

.kit-banner-warn[b-3d8ukh5p39] {
    background: var(--ld-ember-soft);
    color: var(--ld-ink);
    border-bottom-color: var(--ld-ember);
}

.kit-banner-action[b-3d8ukh5p39] {
    background: transparent;
    border: 1px solid var(--ld-ember);
    color: var(--ld-ember);
    border-radius: var(--radius-1);
    padding: 4px 10px;
    cursor: pointer;
    font-size: 0.85rem;
}

.kit-banner-action:hover[b-3d8ukh5p39] {
    background: var(--ld-ember);
    color: var(--surface);
}

.kit-banner-action-danger[b-3d8ukh5p39] {
    border-color: var(--red);
    color: var(--red);
    margin-left: var(--space-2);
}

.kit-banner-action-danger:hover[b-3d8ukh5p39] {
    background: var(--red);
    color: var(--surface);
}

.kit-banner-action-danger:disabled[b-3d8ukh5p39] {
    opacity: 0.5;
    cursor: not-allowed;
}

.kit-toast[b-3d8ukh5p39] {
    position: fixed;
    bottom: var(--space-4);
    right: var(--space-4);
    background: var(--ld-night);
    color: var(--ld-paper);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-1);
    font-size: 0.88rem;
    box-shadow: var(--shadow-3);
    z-index: 50;
    animation: kit-toast-in-b-3d8ukh5p39 0.18s ease-out;
}

@keyframes kit-toast-in-b-3d8ukh5p39 {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Body / sidebar ---------- */

.kit-body[b-3d8ukh5p39] {
    flex: 1;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    align-items: start;
}

/* Three-column layout when the agent panel is showing: files | editor | agent. The agent
 * rail is fixed at 360px to match the page brief and uses an auto-min content track on the
 * editor so the textarea still gets all the leftover width. */
.kit-body-with-agent[b-3d8ukh5p39] {
    grid-template-columns: 280px minmax(0, 1fr) 360px;
}

@media (max-width: 1180px) {
    .kit-body-with-agent[b-3d8ukh5p39] {
        grid-template-columns: 240px minmax(0, 1fr) 320px;
    }
}

@media (max-width: 980px) {
    .kit-body-with-agent[b-3d8ukh5p39] {
        /* Below 980px the agent rail drops to the bottom; the editor still gets full width
         * for typing. */
        grid-template-columns: 240px 1fr;
    }
    .kit-body-with-agent .kit-agent[b-3d8ukh5p39] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 880px) {
    .kit-body[b-3d8ukh5p39],
    .kit-body-with-agent[b-3d8ukh5p39] {
        grid-template-columns: 1fr;
    }
}

.kit-sidebar[b-3d8ukh5p39] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--ld-rule);
    border-radius: var(--radius-2);
    padding: var(--space-3);
}

.kit-section-title[b-3d8ukh5p39] {
    margin: 0 0 var(--space-2);
    font-family: var(--ld-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ld-ink-muted);
}

.kit-file-list[b-3d8ukh5p39] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kit-file-list li.selected .kit-file-btn[b-3d8ukh5p39] {
    background: var(--ld-ember-soft);
    color: var(--ld-ember);
    border-color: var(--ld-ember);
}

.kit-file-btn[b-3d8ukh5p39] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-1);
    padding: var(--space-2) var(--space-3);
    font-family: var(--ld-mono);
    font-size: 0.88rem;
    color: var(--ld-ink-soft);
    cursor: pointer;
    text-align: left;
}

.kit-file-btn:hover:not(:disabled)[b-3d8ukh5p39] {
    background: var(--ld-paper-deep);
}

.kit-file-btn:disabled[b-3d8ukh5p39] {
    cursor: not-allowed;
    opacity: 0.6;
}

.kit-file-name[b-3d8ukh5p39] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kit-file-dot[b-3d8ukh5p39] {
    color: var(--ld-ember);
    font-size: 0.6rem;
    margin-left: var(--space-2);
}

/* ---------- Assets ---------- */

.kit-asset-grid[b-3d8ukh5p39] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
}

.kit-asset-card[b-3d8ukh5p39] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    border: 1px solid var(--ld-rule-soft);
    border-radius: var(--radius-1);
}

.kit-asset-thumb[b-3d8ukh5p39] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ld-paper-deep);
    border-radius: var(--radius-1);
    overflow: hidden;
    flex-shrink: 0;
}

.kit-asset-img[b-3d8ukh5p39] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.kit-asset-placeholder[b-3d8ukh5p39] {
    font-family: var(--ld-mono);
    font-size: 0.65rem;
    color: var(--ld-ink-muted);
    text-align: center;
    padding: 4px;
}

.kit-asset-meta[b-3d8ukh5p39] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.kit-asset-label[b-3d8ukh5p39] {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ld-ink);
}

.kit-asset-upload[b-3d8ukh5p39] {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-family: var(--ld-mono);
    font-size: 0.75rem;
    color: var(--ld-ember);
    border: 1px dashed var(--ld-ember);
    border-radius: var(--radius-1);
    padding: 4px 8px;
    background: transparent;
    align-self: flex-start;
}

.kit-asset-upload:hover[b-3d8ukh5p39] {
    background: var(--ld-ember-soft);
}

.kit-asset-upload.is-disabled[b-3d8ukh5p39] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ::deep is required because <InputFile> is a child component, so the scoped
   attribute isn't applied to its rendered <input>. Without this, the native
   "Choose File / No file" chrome bleeds through the label. */
.kit-asset-upload[b-3d8ukh5p39]  .kit-asset-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.kit-asset-error[b-3d8ukh5p39] {
    margin: var(--space-2) 0 0;
    color: var(--red);
    font-size: 0.85rem;
}

/* ---------- Main / editor ---------- */

.kit-main[b-3d8ukh5p39] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

.kit-editor-pane[b-3d8ukh5p39] {
    background: var(--surface);
    border: 1px solid var(--ld-rule);
    border-radius: var(--radius-2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.kit-editor-meta[b-3d8ukh5p39] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--ld-rule-soft);
    background: var(--ld-paper);
}

.kit-editor-path[b-3d8ukh5p39] {
    font-family: var(--ld-mono);
    font-size: 0.85rem;
    color: var(--ld-ink-soft);
}

.kit-readonly-pill[b-3d8ukh5p39] {
    font-family: var(--ld-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ld-ember);
    background: var(--ld-ember-soft);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.kit-editor-textarea[b-3d8ukh5p39] {
    width: 100%;
    flex: 1;
    min-height: 520px;
    border: 0;
    outline: 0;
    resize: vertical;
    padding: var(--space-3);
    font-family: var(--ld-mono);
    font-size: 0.9rem;
    line-height: 1.55;
    background: var(--surface);
    color: var(--ld-ink);
    white-space: pre;
}

.kit-editor-textarea:disabled[b-3d8ukh5p39] {
    background: var(--ld-paper-deep);
    color: var(--ld-ink-muted);
}

/* ---------- Preview ---------- */

.kit-preview[b-3d8ukh5p39] {
    background: var(--surface);
    border: 1px solid var(--ld-rule);
    border-radius: var(--radius-2);
    overflow: hidden;
}

.kit-preview summary[b-3d8ukh5p39] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    font-family: var(--ld-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ld-ink-muted);
    cursor: pointer;
    list-style: none;
    background: var(--ld-paper);
}

.kit-preview summary[b-3d8ukh5p39]::-webkit-details-marker { display: none; }

.kit-preview-actions[b-3d8ukh5p39] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.kit-preview-file-label[b-3d8ukh5p39] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--ld-mono);
    font-size: 0.75rem;
    color: var(--ld-ink-muted);
}

.kit-preview-file-select[b-3d8ukh5p39] {
    font-family: var(--ld-mono);
    font-size: 0.8rem;
    border: 1px solid var(--ld-rule-soft);
    background: var(--surface);
    border-radius: var(--radius-1);
    padding: 2px 6px;
    max-width: 220px;
}

.kit-preview-frame[b-3d8ukh5p39] {
    width: 100%;
    height: 420px;
    border: 0;
    background: var(--surface);
    display: block;
}

.kit-preview-empty[b-3d8ukh5p39],
.kit-preview-error[b-3d8ukh5p39] {
    margin: 0;
    padding: var(--space-3);
    font-size: 0.92rem;
    color: var(--ld-ink-muted);
}

.kit-preview-error[b-3d8ukh5p39] {
    color: var(--red);
}

/* ---------- Loading / error ---------- */

.kit-loading[b-3d8ukh5p39],
.kit-error[b-3d8ukh5p39] {
    padding: var(--space-5);
    text-align: center;
    color: var(--ld-ink-muted);
}

.kit-error p[b-3d8ukh5p39] {
    margin: 0 0 var(--space-3);
    color: var(--red);
}

/* ---------- History drawer ---------- */

.kit-drawer-scrim[b-3d8ukh5p39] {
    position: fixed;
    inset: 0;
    background: var(--scrim);
    z-index: 40;
}

.kit-drawer[b-3d8ukh5p39] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 360px;
    max-width: 100vw;
    background: var(--surface);
    border-left: 1px solid var(--ld-rule);
    box-shadow: var(--shadow-3);
    z-index: 41;
    display: flex;
    flex-direction: column;
}

.kit-drawer-head[b-3d8ukh5p39] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--ld-rule);
}

.kit-drawer-head h2[b-3d8ukh5p39] {
    margin: 0;
    font-family: var(--ld-display);
    font-size: 1.2rem;
}

.kit-drawer-close[b-3d8ukh5p39] {
    background: transparent;
    border: 0;
    color: var(--ld-ink-muted);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
}

.kit-drawer-close:hover[b-3d8ukh5p39] {
    color: var(--ld-ember);
}

.kit-drawer-body[b-3d8ukh5p39] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-3);
}

.kit-drawer-loading[b-3d8ukh5p39],
.kit-drawer-empty[b-3d8ukh5p39],
.kit-drawer-error[b-3d8ukh5p39] {
    margin: 0;
    color: var(--ld-ink-muted);
    font-size: 0.9rem;
}

.kit-drawer-error[b-3d8ukh5p39] {
    color: var(--red);
}

.kit-history-list[b-3d8ukh5p39] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.kit-history-row[b-3d8ukh5p39] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--ld-rule-soft);
    border-radius: var(--radius-1);
}

.kit-history-meta[b-3d8ukh5p39] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.kit-history-badge[b-3d8ukh5p39] {
    align-self: flex-start;
    font-family: var(--ld-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.kit-history-badge-publish[b-3d8ukh5p39] {
    background: var(--green-soft);
    color: var(--green);
}

.kit-history-badge-draft[b-3d8ukh5p39] {
    background: var(--ld-ember-soft);
    color: var(--ld-ember);
}

.kit-history-name[b-3d8ukh5p39] {
    font-weight: 600;
    color: var(--ld-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kit-history-time[b-3d8ukh5p39] {
    font-size: 0.78rem;
    color: var(--ld-ink-muted);
}

/* ---------- Modal (draft + revert confirm) ---------- */

.kit-modal-scrim[b-3d8ukh5p39] {
    position: fixed;
    inset: 0;
    background: var(--scrim-strong);
    z-index: 50;
}

.kit-modal[b-3d8ukh5p39] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(440px, calc(100vw - 32px));
    background: var(--surface);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-4);
    padding: var(--space-4);
    z-index: 51;
}

.kit-modal-title[b-3d8ukh5p39] {
    margin: 0 0 var(--space-2);
    font-family: var(--ld-display);
    font-size: 1.25rem;
    color: var(--ld-ink);
}

.kit-modal-body[b-3d8ukh5p39] {
    margin: 0 0 var(--space-3);
    color: var(--ld-ink-soft);
    font-size: 0.95rem;
    line-height: 1.5;
}

.kit-modal-input[b-3d8ukh5p39] {
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-2);
    border: 1px solid var(--ld-rule);
    border-radius: var(--radius-1);
    font-family: var(--ld-body);
    font-size: 0.95rem;
}

.kit-modal-input:focus[b-3d8ukh5p39] {
    outline: none;
    border-color: var(--ld-ember);
    box-shadow: 0 0 0 2px var(--ld-ember-soft);
}

.kit-modal-error[b-3d8ukh5p39] {
    margin: var(--space-2) 0 0;
    color: var(--red);
    font-size: 0.85rem;
}

.kit-modal-actions[b-3d8ukh5p39] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

/* ---------- Agent panel ---------- */

/* Free-tier header CTA. Links to the credits page where users can upgrade. */
.kit-agent-cta[b-3d8ukh5p39] {
    font-family: var(--ld-mono);
    font-size: 0.78rem;
    color: var(--ld-ember);
    text-decoration: none;
    border: 1px dashed var(--ld-ember);
    border-radius: var(--radius-1);
    padding: 4px 10px;
    background: transparent;
    margin-right: var(--space-2);
}

.kit-agent-cta:hover[b-3d8ukh5p39] {
    background: var(--ld-ember-soft);
}

.kit-agent[b-3d8ukh5p39] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    background: var(--surface);
    border: 1px solid var(--ld-rule);
    border-radius: var(--radius-2);
    padding: var(--space-3);
    min-height: 540px;
    max-height: calc(100vh - 8rem);
}

.kit-agent-head[b-3d8ukh5p39] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--ld-rule-soft);
}

.kit-agent-head h2[b-3d8ukh5p39] {
    margin: 0;
    font-family: var(--ld-display);
    font-size: 1.05rem;
    color: var(--ld-ink);
    white-space: nowrap;
}

.kit-agent-chip[b-3d8ukh5p39] {
    font-family: var(--ld-mono);
    font-size: 0.74rem;
    color: var(--ld-ink-soft);
    background: var(--ld-paper-deep);
    border: 1px solid var(--ld-rule-soft);
    border-radius: var(--radius-pill);
    padding: 4px 10px;
    cursor: pointer;
    white-space: nowrap;
}

.kit-agent-chip:hover[b-3d8ukh5p39] {
    border-color: var(--ld-ember);
    color: var(--ld-ember);
}

.kit-agent-budget[b-3d8ukh5p39] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-width: 0;
}

.kit-agent-topup-link[b-3d8ukh5p39] {
    font-family: var(--ld-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ld-ember);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.kit-agent-topup-link:hover[b-3d8ukh5p39] {
    filter: brightness(0.85);
}

/* Pre-send weight banner. Sits between the transcript and the textarea so the user sees
 * the estimate at the moment of decision. Default style is a soft info; the warning style
 * fires once the upper-bound estimate crosses the server-supplied threshold. */
.kit-agent-weight[b-3d8ukh5p39] {
    font-family: var(--ld-mono);
    font-size: 0.72rem;
    color: var(--ld-ink-soft);
    background: var(--ld-paper-deep);
    border: 1px solid var(--ld-rule-soft);
    border-radius: var(--radius-1);
    padding: 4px 10px;
    margin-top: var(--space-2);
}

.kit-agent-weight-warn[b-3d8ukh5p39] {
    color: var(--ld-ember);
    background: var(--ld-ember-soft);
    border-color: var(--ld-ember);
}

/* ---------- Top-up modal ---------- */

.kit-modal-topup[b-3d8ukh5p39] {
    width: min(520px, calc(100vw - 32px));
}

.kit-modal-subtitle[b-3d8ukh5p39] {
    margin: var(--space-3) 0 var(--space-1);
    font-family: var(--ld-display);
    font-size: 1rem;
    color: var(--ld-ink);
}

.kit-modal-hint[b-3d8ukh5p39] {
    margin: 0 0 var(--space-2);
    font-size: 0.85rem;
    color: var(--ld-ink-muted);
}

.kit-topup-chips[b-3d8ukh5p39] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}

.kit-topup-chip[b-3d8ukh5p39] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--ld-mono);
    font-size: 0.88rem;
    color: var(--ld-ember);
    background: var(--surface);
    border: 1px solid var(--ld-ember);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
    min-width: 72px;
    justify-content: center;
}

.kit-topup-chip:hover:not(:disabled)[b-3d8ukh5p39] {
    background: var(--ld-ember-soft);
}

.kit-topup-chip.selected[b-3d8ukh5p39] {
    background: var(--ld-ember);
    color: var(--surface);
}

.kit-topup-chip:disabled[b-3d8ukh5p39] {
    opacity: 0.6;
    cursor: not-allowed;
}

.kit-topup-custom[b-3d8ukh5p39] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.kit-topup-custom-input[b-3d8ukh5p39] {
    flex: 1;
    min-width: 0;
}

.kit-topup-spinner[b-3d8ukh5p39] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--ld-ember-soft);
    border-top-color: var(--ld-ember);
    border-radius: 50%;
    animation: kit-topup-spin-b-3d8ukh5p39 0.7s linear infinite;
}

.kit-topup-chip.selected .kit-topup-spinner[b-3d8ukh5p39] {
    border-color: var(--surface);
    border-top-color: var(--ld-ember);
}

@keyframes kit-topup-spin-b-3d8ukh5p39 {
    to { transform: rotate(360deg); }
}

.kit-agent-transcript[b-3d8ukh5p39] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    min-height: 220px;
}

.kit-agent-empty[b-3d8ukh5p39] {
    margin: 0;
    padding: var(--space-3);
    color: var(--ld-ink-muted);
    font-size: 0.88rem;
    text-align: center;
    border: 1px dashed var(--ld-rule-soft);
    border-radius: var(--radius-1);
}

.kit-agent-bubble[b-3d8ukh5p39] {
    font-size: 0.92rem;
    line-height: 1.5;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-2);
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.kit-agent-bubble-user[b-3d8ukh5p39] {
    align-self: flex-end;
    background: var(--ld-paper-deep);
    color: var(--ld-ink);
    max-width: 280px;
    border: 1px solid var(--ld-rule-soft);
}

.kit-agent-bubble-assistant[b-3d8ukh5p39] {
    align-self: flex-start;
    background: transparent;
    color: var(--ld-ink);
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
}

.kit-agent-tool[b-3d8ukh5p39] {
    align-self: stretch;
    background: var(--ld-paper-deep);
    border: 1px solid var(--ld-rule-soft);
    border-radius: var(--radius-1);
    padding: var(--space-2);
}

.kit-agent-tool summary[b-3d8ukh5p39] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-family: var(--ld-mono);
    font-size: 0.78rem;
    color: var(--ld-ink-soft);
    list-style: none;
}

.kit-agent-tool summary[b-3d8ukh5p39]::-webkit-details-marker { display: none; }

.kit-agent-tool-arrow[b-3d8ukh5p39] {
    color: var(--ld-ember);
    font-weight: 700;
}

.kit-agent-tool code[b-3d8ukh5p39] {
    font-family: var(--ld-mono);
    font-size: 0.78rem;
    color: var(--ld-ember);
}

.kit-agent-tool-status[b-3d8ukh5p39] {
    font-style: italic;
    color: var(--ld-ink-muted);
    margin-left: auto;
}

.kit-agent-tool-status-error[b-3d8ukh5p39] {
    color: var(--red);
    font-style: normal;
}

.kit-agent-tool-block[b-3d8ukh5p39] {
    margin: var(--space-2) 0 0;
    padding: var(--space-2);
    background: var(--surface);
    border: 1px solid var(--ld-rule-soft);
    border-radius: var(--radius-1);
    font-family: var(--ld-mono);
    font-size: 0.72rem;
    color: var(--ld-ink-soft);
    overflow-x: auto;
    white-space: pre;
}

.kit-agent-tool-label[b-3d8ukh5p39] {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.65rem;
    color: var(--ld-ink-muted);
    margin-bottom: 4px;
}

.kit-agent-usage[b-3d8ukh5p39] {
    margin: 0;
    align-self: flex-start;
    font-style: italic;
    color: var(--ld-ink-muted);
    font-size: 0.78rem;
}

.kit-agent-divider[b-3d8ukh5p39] {
    align-self: stretch;
    text-align: center;
    font-family: var(--ld-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ld-ink-muted);
    border-top: 1px solid var(--ld-rule-soft);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
}

.kit-agent-input-row[b-3d8ukh5p39] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    border-top: 1px solid var(--ld-rule-soft);
    padding-top: var(--space-2);
}

.kit-agent-input[b-3d8ukh5p39] {
    width: 100%;
    box-sizing: border-box;
    min-height: 64px;
    max-height: 160px;
    resize: vertical;
    padding: var(--space-2);
    border: 1px solid var(--ld-rule);
    border-radius: var(--radius-1);
    font-family: var(--ld-body);
    font-size: 0.92rem;
    background: var(--surface);
    color: var(--ld-ink);
}

.kit-agent-input:focus[b-3d8ukh5p39] {
    outline: none;
    border-color: var(--ld-ember);
    box-shadow: 0 0 0 2px var(--ld-ember-soft);
}

.kit-agent-input:disabled[b-3d8ukh5p39] {
    background: var(--ld-paper-deep);
    color: var(--ld-ink-muted);
}

.kit-agent-actions[b-3d8ukh5p39] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

/* AI prompt panel: copy-and-paste authoring prompt for external Claude / ChatGPT.
   Mirrors the .prompt-panel pattern on ProjectDetail; kit-prefixed so CSS isolation
   keeps the two pages independent. Drops below the header when toggled on. */
.kit-prompt-panel[b-3d8ukh5p39] {
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
    padding: var(--space-2) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.kit-prompt-panel-head[b-3d8ukh5p39] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    color: var(--gray-700);
    font-size: var(--font-size-card-body);
}

.kit-prompt-copy-btn[b-3d8ukh5p39] {
    background: var(--brand-primary);
    color: var(--surface);
    border: none;
    border-radius: var(--radius-1);
    padding: var(--space-1) var(--space-3);
    cursor: pointer;
    white-space: nowrap;
}

.kit-prompt-copy-btn:hover[b-3d8ukh5p39] {
    filter: brightness(1.08);
}

.kit-prompt-textarea[b-3d8ukh5p39] {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-mono);
    font-size: var(--font-size-card-body);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-1);
    padding: var(--space-2);
    resize: vertical;
}
/* /Components/Pages/MarkdownEditor.razor.rz.scp.css */
.editor-shell[b-qomj6acf0y] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-2);
    overflow: hidden;
}

.editor-toolbar[b-qomj6acf0y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
    gap: var(--space-3);
}

.dirty-badge[b-qomj6acf0y] {
    font-size: 0.85em;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-1);
    background: var(--gray-200);
    color: var(--gray-700);
}

.dirty-badge[data-state="unsaved"][b-qomj6acf0y] {
    background: var(--orange-soft);
    color: var(--orange);
}

.dirty-badge[data-state="draftsaved"][b-qomj6acf0y] {
    background: var(--blue-soft);
    color: var(--blue);
}

.dirty-badge[data-state="published"][b-qomj6acf0y] {
    background: var(--green-soft);
    color: var(--green);
}

.editor-error[b-qomj6acf0y] {
    color: var(--red);
    font-size: 0.85em;
}

.editor-wrap[b-qomj6acf0y] {
    display: flex;
    flex: 1;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

.line-numbers[b-qomj6acf0y] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: var(--space-3) var(--space-2);
    background: var(--gray-100);
    color: var(--gray-500);
    user-select: none;
    border-right: 1px solid var(--gray-200);
    min-width: 3ch;
    font-family: var(--font-mono);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    overflow: hidden;
}

.editor-textarea[b-qomj6acf0y] {
    flex: 1;
    border: none;
    outline: none;
    resize: none;
    padding: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--text);
    background: var(--surface);
    white-space: pre-wrap;
    word-wrap: break-word;
}
/* /Components/Pages/MyShares.razor.rz.scp.css */
.my-shares-shell[b-ti0bry0pvh] {
    max-width: 64rem;
    margin: 0 auto;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.my-shares-header h1[b-ti0bry0pvh] {
    margin: 0;
    color: var(--gray-800);
}

.my-shares-subtitle[b-ti0bry0pvh] {
    margin: 0;
    color: var(--gray-500);
}

.my-shares-loading[b-ti0bry0pvh] {
    color: var(--gray-500);
}

.my-shares-error[b-ti0bry0pvh] {
    padding: var(--space-3);
    border: 1px solid var(--red-soft);
    background: var(--gray-100);
    border-radius: 6px;
}

.my-shares-error p[b-ti0bry0pvh] {
    margin: 0;
    color: var(--red);
}

.my-shares-empty[b-ti0bry0pvh] {
    padding: var(--space-5) var(--space-4);
    border: 1px dashed var(--gray-300);
    border-radius: 8px;
    text-align: center;
    background: var(--gray-100);
}

.my-shares-empty h2[b-ti0bry0pvh] {
    margin: 0 0 var(--space-1);
    color: var(--gray-700);
}

.my-shares-empty p[b-ti0bry0pvh] {
    margin: 0;
    color: var(--gray-500);
}

.my-shares-list[b-ti0bry0pvh] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.my-shares-card[b-ti0bry0pvh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
}

.my-shares-card-head[b-ti0bry0pvh] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.my-shares-card-name[b-ti0bry0pvh] {
    font-weight: 600;
    color: var(--gray-800);
}

.my-shares-card-scope[b-ti0bry0pvh] {
    padding: .1rem .5rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-radius: 999px;
    border: 1px solid var(--gray-200);
    white-space: nowrap;
}

.my-shares-card-scope.scope-project[b-ti0bry0pvh] {
    background: var(--green-soft);
    color: var(--green);
    border-color: var(--green);
}

.my-shares-card-scope.scope-file[b-ti0bry0pvh] {
    background: var(--gray-100);
    color: var(--gray-600);
}

.my-shares-card-filepath[b-ti0bry0pvh] {
    color: var(--gray-500);
    font-size: .85rem;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.my-shares-row[b-ti0bry0pvh] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.my-shares-label[b-ti0bry0pvh] {
    color: var(--gray-500);
    font-size: .85rem;
    min-width: 5.5rem;
}

.my-shares-url[b-ti0bry0pvh] {
    color: var(--brand-primary);
    text-decoration: underline;
    word-break: break-all;
    flex: 1;
    min-width: 0;
}

.my-shares-copy-btn[b-ti0bry0pvh],
.my-shares-update-btn[b-ti0bry0pvh],
.my-shares-clear-btn[b-ti0bry0pvh],
.my-shares-revoke-btn[b-ti0bry0pvh] {
    padding: .25rem .75rem;
    border-radius: 4px;
    font-size: .85rem;
    cursor: pointer;
    border: 1px solid var(--gray-300);
    background: var(--gray-100);
    color: var(--gray-700);
}

.my-shares-copy-btn:hover[b-ti0bry0pvh],
.my-shares-update-btn:hover[b-ti0bry0pvh] {
    background: var(--gray-200);
}

.my-shares-clear-btn[b-ti0bry0pvh] {
    border-color: var(--red-soft);
    color: var(--red);
}

.my-shares-revoke-btn[b-ti0bry0pvh] {
    border-color: var(--red);
    background: var(--red);
    color: white;
}

.my-shares-revoke-btn[disabled][b-ti0bry0pvh],
.my-shares-update-btn[disabled][b-ti0bry0pvh],
.my-shares-clear-btn[disabled][b-ti0bry0pvh],
.my-shares-copy-btn[disabled][b-ti0bry0pvh] {
    opacity: .5;
    cursor: not-allowed;
}

.my-shares-code-input[b-ti0bry0pvh] {
    flex: 1;
    min-width: 10rem;
    padding: .25rem .5rem;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    font-size: .9rem;
}

.my-shares-code-status[b-ti0bry0pvh] {
    padding: .1rem .5rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-radius: 999px;
    border: 1px solid var(--gray-200);
}

.my-shares-code-status.is-set[b-ti0bry0pvh] {
    background: var(--green-soft);
    color: var(--green);
    border-color: var(--green);
}

.my-shares-code-status.is-unset[b-ti0bry0pvh] {
    background: var(--gray-100);
    color: var(--gray-500);
}

.my-shares-meta[b-ti0bry0pvh] {
    color: var(--gray-600);
    font-size: .85rem;
}

.my-shares-meta-item[b-ti0bry0pvh] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-right: var(--space-3);
}

.my-shares-meta-item .my-shares-label[b-ti0bry0pvh] {
    min-width: 0;
}

.my-shares-actions[b-ti0bry0pvh] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-1);
}

.my-shares-row-error[b-ti0bry0pvh] {
    margin: 0;
    color: var(--red);
    font-size: .85rem;
}
/* /Components/Pages/ProjectDetail.razor.rz.scp.css */
.detail-shell[b-1i7kkemv9c] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--gray-100);
}

.detail-header[b-1i7kkemv9c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border-bottom: 1px solid var(--gray-200);
    min-height: 4rem;
    box-sizing: border-box;
}

.header-actions[b-1i7kkemv9c] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: var(--space-4);
}

.detail-header h1[b-1i7kkemv9c] {
    margin: 0;
    color: var(--brand-primary);
    font-size: 1.25rem;
}

.meta-display[b-1i7kkemv9c] {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
}

.meta-description[b-1i7kkemv9c] {
    margin: 0;
    color: var(--gray-500);
    font-size: var(--font-size-card-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.meta-edit-btn[b-1i7kkemv9c] {
    background: transparent;
    color: var(--gray-500);
    border: 0;
    border-radius: var(--radius-1);
    padding: 4px 8px;
    font-size: var(--font-size-chip);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
    flex-shrink: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.meta-edit-btn:hover[b-1i7kkemv9c] {
    background: transparent;
    color: var(--brand-primary);
}

.meta-edit[b-1i7kkemv9c] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    flex-wrap: wrap;
}

.meta-name-input[b-1i7kkemv9c] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--navy-dark);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-1);
    padding: 4px 8px;
    min-width: 200px;
}

.meta-description-input[b-1i7kkemv9c] {
    flex: 1;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-1);
    padding: 4px 8px;
    min-width: 240px;
}

.meta-save-btn[b-1i7kkemv9c] {
    background: var(--brand-primary);
    color: var(--surface);
    border: 1px solid var(--brand-primary);
    border-radius: var(--radius-1);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

.meta-save-btn:hover:not(:disabled)[b-1i7kkemv9c] {
    background: var(--navy-dark);
    border-color: var(--navy-dark);
}

.meta-save-btn:disabled[b-1i7kkemv9c] {
    opacity: 0.6;
    cursor: not-allowed;
}

.meta-cancel-btn[b-1i7kkemv9c] {
    background: var(--surface);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-1);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

.meta-cancel-btn:hover:not(:disabled)[b-1i7kkemv9c] {
    background: var(--gray-100);
    border-color: var(--gray-500);
}

.meta-error[b-1i7kkemv9c] {
    color: var(--red);
    font-size: var(--font-size-chip);
}

.header-actions[b-1i7kkemv9c] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.publish-error[b-1i7kkemv9c] {
    color: var(--red);
    font-size: 0.9em;
}

.publish-btn[b-1i7kkemv9c] {
    background: var(--brand-primary);
    color: var(--surface);
    border: none;
    border-radius: var(--radius-1);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-base);
    cursor: pointer;
}

.publish-btn:hover:not(:disabled)[b-1i7kkemv9c] {
    background: var(--navy-dark);
}

.publish-btn:disabled[b-1i7kkemv9c] {
    background: var(--gray-300);
    color: var(--gray-500);
    cursor: not-allowed;
}

.customize-kit-btn[b-1i7kkemv9c] {
    display: inline-flex;
    align-items: center;
    background: var(--surface);
    color: var(--brand-primary);
    border: 1px solid var(--brand-primary);
    border-radius: var(--radius-1);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-base);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.customize-kit-btn:hover[b-1i7kkemv9c] {
    background: var(--brand-primary);
    color: var(--surface);
}

.detail-toolbar[b-1i7kkemv9c] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--surface);
    border-bottom: 1px solid var(--gray-200);
}

.mode-selector[b-1i7kkemv9c] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text);
}

.mode-selector select[b-1i7kkemv9c] {
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-1);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-stack);
}

.mode-selector-label[b-1i7kkemv9c] {
    color: var(--gray-700);
    font-weight: 600;
}

.mode-progress[b-1i7kkemv9c] {
    color: var(--gray-500);
    font-style: italic;
}

.mode-error[b-1i7kkemv9c] {
    color: var(--red);
}

.prompt-btn[b-1i7kkemv9c] {
    margin-left: auto;
    background: var(--surface);
    color: var(--brand-primary);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-base);
    cursor: pointer;
}

.prompt-btn:hover[b-1i7kkemv9c] {
    border-color: var(--brand-primary);
}

.prompt-panel[b-1i7kkemv9c] {
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
    padding: var(--space-2) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.prompt-panel-head[b-1i7kkemv9c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    color: var(--gray-700);
}

.prompt-copy-btn[b-1i7kkemv9c] {
    background: var(--brand-primary);
    color: var(--surface);
    border: none;
    border-radius: var(--radius-1);
    padding: var(--space-1) var(--space-3);
    cursor: pointer;
}

.prompt-textarea[b-1i7kkemv9c] {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-mono);
    font-size: var(--font-size-card-body);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-1);
    padding: var(--space-2);
    resize: vertical;
}

.detail-body[b-1i7kkemv9c] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* Bound the single row to the flex height. Without this the row is auto-sized
       (tallest pane), so the tree pane grows past the viewport and its own
       overflow:auto never engages — the file list below the fold becomes
       unreachable. minmax(0, 1fr) lets panes shrink so their internal scroll
       regions take over. */
    grid-template-rows: minmax(0, 1fr);
    flex: 1;
    gap: var(--space-2);
    padding: var(--space-2);
    overflow: hidden;
}

.detail-body.with-tree[b-1i7kkemv9c] {
    /* Three columns when there is room: tree + editor + preview. The first track
       is `auto` (not a fixed 280px) so it follows the tree pane's own width — the
       pane is user-resizable (resize:horizontal) and an `auto` track reflows as
       the pane grows, shrinking the editor/preview columns instead of letting the
       pane overflow on top of them. minmax(0, 1fr) lets editor/preview shrink so
       iframe content cannot push the grid past the viewport edge. */
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
}

/* At narrower content widths the side-by-side editor/preview is too cramped:
   stack them under the tree instead. Container query so the layout adapts to
   the actual content area, not the viewport (which is misleading when the
   left sidebar is showing or collapsed). */
.detail-shell[b-1i7kkemv9c] {
    container-type: inline-size;
}

@container (max-width: 1100px) {
    .detail-body.with-tree[b-1i7kkemv9c] {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto auto;
    }
    .detail-body.with-tree .pane-editor[b-1i7kkemv9c] {
        grid-column: 2;
        grid-row: 1;
    }
    .detail-body.with-tree .pane-preview[b-1i7kkemv9c] {
        grid-column: 2;
        grid-row: 2;
        min-height: 360px;
    }
    .detail-body.with-tree .pane-tree[b-1i7kkemv9c] {
        grid-column: 1;
        grid-row: 1 / span 2;
    }
}

@container (max-width: 760px) {
    .detail-body[b-1i7kkemv9c],
    .detail-body.with-tree[b-1i7kkemv9c] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
    }
    .detail-body.with-tree .pane-tree[b-1i7kkemv9c],
    .detail-body.with-tree .pane-editor[b-1i7kkemv9c],
    .detail-body.with-tree .pane-preview[b-1i7kkemv9c] {
        grid-column: 1;
        grid-row: auto;
    }
    /* Single-column stack: the tree spans the full width, so drop the fixed
       width + start-alignment the wide layout uses for the resize behavior, and
       hide the splitter — there is no editor column beside the tree to resize. */
    .detail-body.with-tree .pane-tree[b-1i7kkemv9c] {
        width: auto;
        justify-self: stretch;
    }
    .pane-splitter[b-1i7kkemv9c] {
        display: none;
    }
}

/* Mobile: release the fixed-viewport shell so stacked panes can take their
   own height instead of fighting inside a 100vh box (which clipped the editor
   text and bled the preview iframe under it). */
@media (max-width: 640px) {
    .detail-shell[b-1i7kkemv9c] {
        height: auto;
        min-height: 100vh;
    }

    .detail-header[b-1i7kkemv9c] {
        flex-wrap: wrap;
        height: auto;
        padding: var(--space-3);
        gap: var(--space-2);
    }

    .header-actions[b-1i7kkemv9c] {
        margin-left: 0;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .detail-toolbar[b-1i7kkemv9c] {
        flex-wrap: wrap;
        padding: var(--space-2) var(--space-3);
    }

    .mode-selector[b-1i7kkemv9c] {
        flex-wrap: wrap;
    }

    .prompt-btn[b-1i7kkemv9c] {
        margin-left: auto;
        white-space: nowrap;
    }

    .detail-body[b-1i7kkemv9c],
    .detail-body.with-tree[b-1i7kkemv9c] {
        overflow: visible;
        flex: none;
    }

    .pane-tree[b-1i7kkemv9c] {
        width: auto;
        justify-self: stretch;
        max-width: none;
        max-height: 240px;
    }

    .pane-splitter[b-1i7kkemv9c] {
        display: none;
    }

    .pane-editor[b-1i7kkemv9c] {
        min-height: 50vh;
    }

    .pane-preview[b-1i7kkemv9c] {
        min-height: 70vh;
    }
}

.pane-tree[b-1i7kkemv9c] {
    background: var(--surface);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-2);
    /* The pane itself does not scroll — its header stays put and the file list
       (.file-tree) is the internal scroll region. */
    overflow: hidden;
    padding: 0;
    /* Width is driven by the .pane-splitter drag, which writes the --tree-width
       custom property as an inline style. Reading it through `width: var(...)`
       (rather than an inline `width`) leaves the narrow-layout media/container
       queries free to override with width:auto. start-alignment keeps the `auto`
       grid track sized to this width so resizing reflows the editor column. */
    width: var(--tree-width, 280px);
    justify-self: start;
    position: relative;
    min-width: 200px;
    max-width: 520px;
}

/* Full-height drag handle on the pane's right edge. A 9px hit area straddling
   the inter-pane gap, with a hairline that thickens + brand-colors on hover/drag. */
.pane-splitter[b-1i7kkemv9c] {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -5px;
    width: 9px;
    cursor: col-resize;
    z-index: 5;
    background: transparent;
    touch-action: none;
}

.pane-splitter[b-1i7kkemv9c]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    background: var(--gray-200);
    transition: width 0.1s ease, background-color 0.1s ease;
}

.pane-splitter:hover[b-1i7kkemv9c]::before,
.pane-splitter.dragging[b-1i7kkemv9c]::before {
    width: 3px;
    background: var(--brand-primary);
}

/* Viewport-covering layer active only during a splitter drag, so the editor
   iframe cannot swallow the pointer-move stream. */
.resize-overlay[b-1i7kkemv9c] {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    cursor: col-resize;
}

.tree-header[b-1i7kkemv9c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    /* Fixed header — never shrinks or scrolls; the .file-tree list below it
       is the scroll region. */
    flex: none;
    font-weight: 700;
    color: var(--navy-dark);
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-100);
    font-size: var(--font-size-chip);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.tree-header-actions[b-1i7kkemv9c] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.tree-newfile-btn[b-1i7kkemv9c] {
    border: 1px solid var(--brand-primary);
    background: var(--surface);
    color: var(--brand-primary);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.2;
}

.tree-newfile-btn:hover:not(:disabled)[b-1i7kkemv9c] {
    background: var(--blue-soft);
}

.tree-newfile-btn:disabled[b-1i7kkemv9c] {
    opacity: 0.5;
    cursor: not-allowed;
}

.tree-upload-btn[b-1i7kkemv9c] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--brand-primary);
    background: var(--surface);
    color: var(--brand-primary);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.2;
    overflow: hidden;
}

.tree-upload-btn:hover[b-1i7kkemv9c] {
    background: var(--blue-soft);
}

.tree-upload-label[b-1i7kkemv9c] {
    pointer-events: none;
}

.tree-upload-btn[b-1i7kkemv9c]  .tree-upload-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}

.tree-upload-btn[b-1i7kkemv9c]  .tree-upload-input::-webkit-file-upload-button {
    display: none;
}

.tree-upload-btn[b-1i7kkemv9c]  .tree-upload-input::file-selector-button {
    display: none;
}

.pane-tree.drop-over[b-1i7kkemv9c] {
    outline: 2px dashed var(--brand-primary);
    outline-offset: -4px;
    background: var(--blue-soft);
}

.tree-error[b-1i7kkemv9c] {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    color: var(--red);
    background: var(--red-soft);
    border-bottom: 1px solid var(--gray-200);
    font-size: var(--font-size-card-body);
}

.file-tree[b-1i7kkemv9c] {
    list-style: none;
    margin: 0;
    padding: 0;
    /* The scroll region inside the tree pane: grows to fill the space below the
       fixed header, scrolls its own overflow. min-height:0 lets a flex item
       shrink below its content so the scrollbar actually engages. This is what
       makes the file list reachable when an expanded share panel inside a row
       makes the list taller than the pane. */
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.file-tree li[b-1i7kkemv9c] {
    border-bottom: 1px solid var(--gray-100);
}

.file-tree li.selected[b-1i7kkemv9c] {
    background: var(--blue-soft);
}

.file-tree .file-row[b-1i7kkemv9c] {
    display: grid;
    grid-template-columns: 14px 22px 1fr 22px auto 22px;
    gap: var(--space-1);
    align-items: center;
    padding: 0 var(--space-1);
}

.file-tree .file-copy-btn[b-1i7kkemv9c] {
    background: none;
    border: 0;
    color: var(--gray-500);
    font-size: 13px;
    line-height: 1;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    user-select: none;
}

.file-tree .file-copy-btn:hover[b-1i7kkemv9c] {
    color: var(--navy);
    background: var(--blue-soft);
}

.file-tree .file-delete-btn[b-1i7kkemv9c] {
    background: none;
    border: 0;
    color: var(--gray-400);
    font-size: 18px;
    line-height: 1;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
}

.file-tree .file-delete-btn:hover:not(:disabled)[b-1i7kkemv9c] {
    color: var(--red);
    background: var(--red-soft);
}

.file-tree .file-delete-btn:disabled[b-1i7kkemv9c] {
    opacity: 0.4;
    cursor: not-allowed;
}

.file-tree .drag-handle[b-1i7kkemv9c] {
    color: var(--gray-300);
    cursor: grab;
    font-size: 11px;
    line-height: 1;
    text-align: center;
    user-select: none;
}

.file-tree li:hover .drag-handle[b-1i7kkemv9c] {
    color: var(--gray-500);
}

.file-tree li.dragging[b-1i7kkemv9c] {
    opacity: 0.45;
}

.file-tree li.drop-target[b-1i7kkemv9c] {
    background: var(--blue-soft);
    outline: 2px dashed var(--blue);
    outline-offset: -2px;
}

.file-tree .file-link[b-1i7kkemv9c] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    background: none;
    border: 0;
    padding: var(--space-2) var(--space-2);
    text-align: left;
    cursor: pointer;
    color: var(--text);
    font-family: inherit;
    font-size: var(--font-size-card-body);
    overflow: hidden;
}

.file-tree .set-main-btn[b-1i7kkemv9c] {
    background: none;
    border: 0;
    color: var(--gray-300);
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    line-height: 1;
}

.file-tree .set-main-btn:hover[b-1i7kkemv9c] {
    color: var(--amber);
}

.file-tree .set-main-btn.is-main[b-1i7kkemv9c] {
    color: var(--amber);
    cursor: default;
}

.file-tree .set-main-btn:disabled.is-main[b-1i7kkemv9c] {
    cursor: default;
}

.file-tree .set-main-btn:disabled:not(.is-main)[b-1i7kkemv9c] {
    color: var(--gray-200);
    cursor: not-allowed;
}

.file-tree .file-link:hover[b-1i7kkemv9c] {
    background: var(--gray-100);
}

.file-tree li.selected .file-link[b-1i7kkemv9c] {
    background: var(--blue-soft);
    color: var(--navy-dark);
    font-weight: 700;
}

.file-tree .main-badge[b-1i7kkemv9c] {
    color: var(--amber);
    font-weight: 800;
    flex: 0 0 auto;
}

.file-tree .file-name[b-1i7kkemv9c] {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    color: var(--text);
}

/* Status is rendered as a single glyph (✓ / ●) via ::before instead of a
 * wide PUBLISHED/DRAFT pill — that pill ate ~75px of the file-link's row
 * and was crowding the filename. The span itself is empty in markup; the
 * accessible name comes from aria-label. */
.file-tree .file-status[b-1i7kkemv9c] {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    padding: 0;
}

.file-tree .file-status[b-1i7kkemv9c]::before {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.file-tree .file-status.status-published[b-1i7kkemv9c]::before {
    content: "✓";
    color: var(--green);
}

.file-tree .file-status.status-draft[b-1i7kkemv9c]::before {
    content: "●";
    color: var(--amber);
    font-size: 10px;
}

.file-tree .file-status.status-archived[b-1i7kkemv9c]::before {
    content: "·";
    color: var(--gray-500);
    font-size: 18px;
}

/* Per-file version chip. Published rows show "vN" in a neutral pill; draft rows show
   "v(N+1) draft" in an amber pill so the next-version label is visible at a glance. */
.file-tree .file-version[b-1i7kkemv9c] {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--gray-700);
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    padding: 1px 6px;
    line-height: 1.4;
    white-space: nowrap;
}

.file-tree .file-version.is-draft[b-1i7kkemv9c] {
    color: var(--amber-dark);
    background: var(--amber-soft);
    border-color: var(--amber);
}

.pane[b-1i7kkemv9c] {
    background: var(--surface);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.preview-frame[b-1i7kkemv9c] {
    width: 100%;
    height: 100%;
    border: none;
    background: var(--surface);
}

.preview-empty[b-1i7kkemv9c] {
    padding: var(--space-4);
    color: var(--gray-500);
    font-style: italic;
}

.loading[b-1i7kkemv9c] {
    padding: var(--space-4);
    color: var(--gray-500);
}

.error-card[b-1i7kkemv9c] {
    margin: var(--space-4);
    padding: var(--space-3);
    background: var(--red-soft);
    border: 1px solid var(--red);
    border-radius: var(--radius-2);
    color: var(--red);
}

.retry-btn[b-1i7kkemv9c] {
    margin-top: var(--space-2);
    background: var(--brand-primary);
    color: var(--surface);
    border: none;
    border-radius: var(--radius-1);
    padding: var(--space-1) var(--space-3);
    cursor: pointer;
}
/* /Components/Pages/Projects.razor.rz.scp.css */
.projects-shell[b-p5hycd2pyb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    max-width: 1280px;
}

.projects-toast[b-p5hycd2pyb] {
    padding: var(--space-2) var(--space-3);
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-left: 3px solid var(--brand-primary);
    border-radius: var(--radius-1);
    color: var(--gray-900);
    font-size: var(--font-size-body, 0.95rem);
}

.projects-header[b-p5hycd2pyb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--gray-200);
}

.projects-header h1[b-p5hycd2pyb] {
    color: var(--brand-primary);
    margin: 0;
    font-size: var(--font-size-headline);
    font-weight: 800;
    letter-spacing: -0.3px;
}

.projects-toolbar[b-p5hycd2pyb] {
    display: flex;
    gap: var(--space-4);
    align-items: end;
    flex-wrap: wrap;
    padding: var(--space-3);
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-2);
}

.filter[b-p5hycd2pyb], .search[b-p5hycd2pyb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1 1 200px;
}

.filter-label[b-p5hycd2pyb], .search-label[b-p5hycd2pyb] {
    font-size: var(--font-size-chip);
    color: var(--gray-700);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.projects-toolbar select[b-p5hycd2pyb],
.projects-toolbar input[type="text"][b-p5hycd2pyb] {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-2);
    background: var(--surface);
    font-size: var(--font-size-base);
    color: var(--text);
}

.projects-toolbar select:focus[b-p5hycd2pyb],
.projects-toolbar input[type="text"]:focus[b-p5hycd2pyb] {
    outline: none;
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 2px var(--blue-soft);
}

.loading[b-p5hycd2pyb] {
    padding: var(--space-4);
    color: var(--gray-500);
    font-style: italic;
}

.error-card[b-p5hycd2pyb] {
    background: var(--red-soft);
    border-left: 4px solid var(--red);
    padding: var(--space-3);
    border-radius: var(--radius-2);
}

.error-card p[b-p5hycd2pyb] {
    margin: 0 0 var(--space-2) 0;
    color: var(--gray-700);
}

.retry-btn[b-p5hycd2pyb] {
    background: var(--brand-primary);
    color: var(--surface);
    border: none;
    border-radius: var(--radius-1);
    padding: var(--space-1) var(--space-3);
    cursor: pointer;
}

.empty-state[b-p5hycd2pyb] {
    text-align: center;
    padding: var(--space-5);
    background: var(--gray-100);
    border: 1px dashed var(--gray-300);
    border-radius: var(--radius-2);
}

.empty-state h2[b-p5hycd2pyb] {
    color: var(--brand-primary);
    margin: 0 0 var(--space-2) 0;
}

.empty-state p[b-p5hycd2pyb] {
    color: var(--gray-700);
    margin: 0 0 var(--space-3) 0;
}

.projects-table-scroll[b-p5hycd2pyb] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.projects-table[b-p5hycd2pyb] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-2);
    overflow: hidden;
}

.projects-table thead th[b-p5hycd2pyb] {
    background: var(--gray-100);
    color: var(--navy-dark);
    text-align: left;
    padding: var(--space-2) var(--space-3);
    font-weight: 700;
    font-size: var(--font-size-chip);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid var(--gray-200);
}

.projects-table tbody td[b-p5hycd2pyb] {
    padding: var(--space-3);
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
    font-size: var(--font-size-base);
}

.projects-table tbody tr:last-child td[b-p5hycd2pyb] {
    border-bottom: none;
}

.projects-table .project-row[b-p5hycd2pyb] {
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.projects-table .project-row:hover[b-p5hycd2pyb] {
    background: var(--gray-100);
}

.projects-table .name-cell a[b-p5hycd2pyb] {
    color: var(--brand-primary);
    font-weight: 700;
    text-decoration: none;
}

.projects-table .name-cell a:hover[b-p5hycd2pyb] {
    text-decoration: underline;
}

.status-badge[b-p5hycd2pyb] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-chip);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.status-badge.status-draft[b-p5hycd2pyb] {
    background: var(--status-draft);
    color: var(--status-draft-text);
}

.status-badge.status-published[b-p5hycd2pyb] {
    background: var(--status-published);
    color: var(--status-published-text);
}

.status-badge.status-archived[b-p5hycd2pyb] {
    background: var(--status-archived);
    color: var(--status-archived-text);
}

.actions-col[b-p5hycd2pyb] {
    width: 200px;
}

.actions-cell[b-p5hycd2pyb] {
    display: flex;
    gap: var(--space-1);
    justify-content: flex-end;
}

.actions-cell .btn-sm[b-p5hycd2pyb] {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-chip);
}

.pagination[b-p5hycd2pyb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--gray-100);
    border-radius: var(--radius-2);
}

.page-btn[b-p5hycd2pyb] {
    background: var(--surface);
    color: var(--brand-primary);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-1);
    padding: var(--space-1) var(--space-4);
    cursor: pointer;
    font-weight: 600;
}

.page-btn:hover:not(:disabled)[b-p5hycd2pyb] {
    background: var(--blue-soft);
    border-color: var(--brand-accent);
}

.page-btn:disabled[b-p5hycd2pyb] {
    color: var(--gray-300);
    cursor: not-allowed;
}

.page-indicator[b-p5hycd2pyb] {
    color: var(--gray-700);
    font-size: var(--font-size-card-body);
}

/* Drag-and-drop reordering. The handle is a small ::-style grip in the first column; rows
   are draggable as a whole so dropping anywhere on them registers. While dragging, the
   source row fades and the active drop target gets a top border that reads as an
   insertion line. */
.projects-table .drag-col[b-p5hycd2pyb] {
    width: 28px;
}

.projects-table .drag-cell[b-p5hycd2pyb] {
    width: 28px;
    text-align: center;
    color: var(--gray-400);
}

.projects-table .drag-handle[b-p5hycd2pyb] {
    cursor: grab;
    user-select: none;
    display: inline-block;
    padding: 0 var(--space-1);
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1;
}

.projects-table .drag-handle:active[b-p5hycd2pyb] {
    cursor: grabbing;
}

.projects-table .project-row.is-dragging[b-p5hycd2pyb] {
    opacity: 0.45;
}

.projects-table .project-row.is-drop-target td[b-p5hycd2pyb] {
    box-shadow: inset 0 2px 0 0 var(--brand-accent);
}

@media (max-width: 640px) {
    .projects-shell[b-p5hycd2pyb] {
        padding: var(--space-3);
        gap: var(--space-3);
    }

    .projects-header[b-p5hycd2pyb] {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .projects-table[b-p5hycd2pyb] {
        min-width: 560px;
    }

    .actions-col[b-p5hycd2pyb] {
        width: auto;
    }
}
/* /Components/Pages/ProjectView.razor.rz.scp.css */
.view-shell[b-matae4ybgq] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--gray-100);
    /* Anchor for the absolutely-positioned drawer + pull tab. The tab and drawer pin to
       the right edge of this container so they slide in over the iframe without affecting
       its layout. */
    position: relative;
    overflow: hidden;
}

.view-header[b-matae4ybgq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--surface);
    border-bottom: 1px solid var(--gray-200);
    box-sizing: border-box;
}

.view-actions[b-matae4ybgq] {
    display: flex;
    gap: var(--space-2);
}

.view-actions.left[b-matae4ybgq] {
    margin-right: auto;
}

.view-frame[b-matae4ybgq] {
    width: 100%;
    flex: 1;
    border: none;
    background: var(--surface);
}

.preview-empty[b-matae4ybgq] {
    padding: var(--space-5);
    text-align: center;
    color: var(--gray-500);
}

.loading[b-matae4ybgq] {
    padding: var(--space-4);
    color: var(--gray-500);
    font-style: italic;
}

.error-card[b-matae4ybgq] {
    margin: var(--space-4);
    padding: var(--space-3);
    background: var(--red-soft);
    border-left: 4px solid var(--red);
    border-radius: var(--radius-2);
}

/* Right-edge files drawer + its pull tab. The tab is always visible; the drawer slides
   in from the right when open. The two share the same right offset so the tab visually
   "rides" the drawer's leading edge. */

.view-drawer-tab[b-matae4ybgq] {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 4px;
    background: var(--brand-primary);
    color: var(--surface-inverse);
    border: none;
    border-radius: 6px 0 0 6px;
    cursor: pointer;
    z-index: 20;
    box-shadow: var(--shadow-drawer-edge);
    transition: right 220ms ease;
}

.view-drawer-tab.open[b-matae4ybgq] {
    right: 320px;
}

.view-drawer-tab:hover[b-matae4ybgq] {
    background: var(--brand-accent);
    color: var(--text);
}

.view-drawer-tab-icon[b-matae4ybgq] {
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
}

.view-drawer-tab-label[b-matae4ybgq] {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}

.view-drawer[b-matae4ybgq] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    background: var(--surface);
    border-left: 1px solid var(--gray-200);
    box-shadow: var(--shadow-drawer);
    display: flex;
    flex-direction: column;
    z-index: 15;
    /* Default state: parked just off the right edge. The .open modifier slides it back in. */
    transform: translateX(100%);
    transition: transform 220ms ease;
}

.view-drawer.open[b-matae4ybgq] {
    transform: translateX(0);
}

.view-drawer-header[b-matae4ybgq] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: var(--space-3) var(--space-3);
    border-bottom: 1px solid var(--gray-200);
}

.view-drawer-title[b-matae4ybgq] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-700);
}

.view-drawer-count[b-matae4ybgq] {
    font-size: 12px;
    color: var(--gray-500);
}

.view-drawer-list[b-matae4ybgq] {
    list-style: none;
    margin: 0;
    padding: var(--space-2) 0;
    overflow-y: auto;
    flex: 1;
}

.view-drawer-item[b-matae4ybgq] {
    margin: 0;
}

.view-drawer-item.current .view-drawer-btn[b-matae4ybgq] {
    background: var(--blue-soft);
    color: var(--brand-primary);
    font-weight: 600;
}

.view-drawer-btn[b-matae4ybgq] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 8px var(--space-3);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--gray-800);
    font-size: 13px;
    line-height: 1.3;
}

.view-drawer-btn:hover:not(:disabled)[b-matae4ybgq] {
    background: var(--gray-100);
}

.view-drawer-btn:disabled[b-matae4ybgq] {
    cursor: progress;
    opacity: 0.7;
}

.view-drawer-star[b-matae4ybgq] {
    color: var(--brand-accent);
    font-size: 13px;
    width: 12px;
    text-align: center;
    flex-shrink: 0;
}

.view-drawer-star.placeholder[b-matae4ybgq] {
    color: transparent;
}

.view-drawer-name[b-matae4ybgq] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.view-drawer-spinner[b-matae4ybgq] {
    width: 12px;
    height: 12px;
    border: 2px solid var(--gray-300);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: view-drawer-spin-b-matae4ybgq 700ms linear infinite;
    flex-shrink: 0;
}

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

.view-drawer-error[b-matae4ybgq] {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    color: var(--red);
    font-size: 12px;
    border-top: 1px solid var(--gray-200);
}
/* /Components/Pages/Settings/Developer.razor.rz.scp.css */
/* Layout for the plaintext-key reveal in the "Copy your new key" modal. The pre
   block stretches to fill the row; the copy button sits beside it and stays
   vertically centered against the key text. */
.dev-plaintext-row[b-x6cc42sqvj] {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.dev-plaintext-row .dev-plaintext[b-x6cc42sqvj] {
    flex: 1;
    margin: 0;
    overflow-x: auto;
    white-space: pre;
}

.dev-plaintext-copy[b-x6cc42sqvj] {
    flex-shrink: 0;
    align-self: stretch;
    min-width: 88px;
}
/* /Components/Pages/SharedWithMe.razor.rz.scp.css */
.shared-shell[b-hgt20fogh7] {
    max-width: 64rem;
    margin: 0 auto;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.shared-header h1[b-hgt20fogh7] {
    margin: 0;
    color: var(--gray-800);
}

.shared-loading[b-hgt20fogh7] {
    color: var(--gray-500);
}

.shared-error[b-hgt20fogh7] {
    padding: var(--space-3);
    border: 1px solid var(--red-soft);
    background: var(--gray-100);
    border-radius: 6px;
}

.shared-error p[b-hgt20fogh7] {
    margin: 0;
    color: var(--red);
}

.shared-empty[b-hgt20fogh7] {
    padding: var(--space-5) var(--space-4);
    border: 1px dashed var(--gray-300);
    border-radius: 8px;
    text-align: center;
    background: var(--gray-100);
}

.shared-empty h2[b-hgt20fogh7] {
    margin: 0 0 var(--space-1);
    color: var(--gray-700);
}

.shared-empty p[b-hgt20fogh7] {
    margin: 0;
    color: var(--gray-500);
}

.shared-list[b-hgt20fogh7] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.shared-card[b-hgt20fogh7] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
}

.shared-card-main[b-hgt20fogh7] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    flex: 1;
}

.shared-card-name[b-hgt20fogh7] {
    font-weight: 600;
    color: var(--gray-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shared-card-scope[b-hgt20fogh7] {
    padding: .1rem .5rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-radius: 999px;
    border: 1px solid var(--gray-200);
    white-space: nowrap;
}

.shared-card-scope.scope-project[b-hgt20fogh7] {
    background: var(--green-soft);
    color: var(--green);
    border-color: var(--green);
}

.shared-card-scope.scope-file[b-hgt20fogh7] {
    background: var(--gray-100);
    color: var(--gray-600);
}

.shared-card-meta[b-hgt20fogh7] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    color: var(--gray-500);
    font-size: .85rem;
    min-width: 0;
}

.shared-card-owner[b-hgt20fogh7],
.shared-card-project[b-hgt20fogh7] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shared-card-actions[b-hgt20fogh7] {
    margin-left: auto;
}

.shared-card-open[b-hgt20fogh7] {
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--brand-primary);
    background: var(--brand-primary);
    color: white;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
}
/* /Components/Pages/ShareEdit.razor.rz.scp.css */
.cse-shell[b-vz81oij13m] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.cse-header[b-vz81oij13m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--surface);
    border-bottom: 1px solid var(--gray-200);
    flex: none;
}

.cse-meta[b-vz81oij13m] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.cse-path[b-vz81oij13m] {
    font-weight: 600;
    color: var(--gray-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cse-badge[b-vz81oij13m] {
    padding: .1rem .5rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    background: var(--gray-100);
    color: var(--gray-600);
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    white-space: nowrap;
}

.cse-actions[b-vz81oij13m] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.cse-link[b-vz81oij13m] {
    color: var(--brand-primary);
    text-decoration: none;
    font-size: .9rem;
}

.cse-link:hover[b-vz81oij13m] {
    text-decoration: underline;
}

.cse-publish-btn[b-vz81oij13m] {
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--brand-primary);
    background: var(--brand-primary);
    color: white;
    border-radius: 4px;
    cursor: pointer;
}

.cse-publish-btn:disabled[b-vz81oij13m] {
    opacity: .5;
    cursor: not-allowed;
}

.cse-body[b-vz81oij13m] {
    flex: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: var(--space-2);
    padding: var(--space-2);
    overflow: hidden;
}

/* File-scoped share: no picker, so the editor + preview split the row in two. */
.cse-body:not(:has(.cse-pane-files))[b-vz81oij13m] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.cse-pane[b-vz81oij13m] {
    background: var(--surface);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cse-pane-files[b-vz81oij13m] {
    width: 240px;
    overflow: hidden;
}

.cse-files-header[b-vz81oij13m] {
    padding: var(--space-2) var(--space-3);
    font-weight: 700;
    font-size: var(--font-size-chip);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--navy-dark);
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
    flex: none;
}

.cse-file-list[b-vz81oij13m] {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.cse-file-list li[b-vz81oij13m] {
    border-bottom: 1px solid var(--gray-100);
}

.cse-file-list li.selected[b-vz81oij13m] {
    background: var(--blue-soft);
}

.cse-file-link[b-vz81oij13m] {
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    font: inherit;
    color: var(--gray-700);
}

.cse-file-link:hover:not(:disabled)[b-vz81oij13m] {
    background: var(--gray-100);
}

.cse-file-name[b-vz81oij13m] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cse-preview-frame[b-vz81oij13m] {
    width: 100%;
    height: 100%;
    border: none;
    background: var(--surface);
}

.cse-preview-empty[b-vz81oij13m] {
    padding: var(--space-4);
    color: var(--gray-500);
    font-style: italic;
}

.cse-loading[b-vz81oij13m] {
    padding: var(--space-4);
    color: var(--gray-500);
}

.cse-error[b-vz81oij13m] {
    margin: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--red-soft);
    background: var(--gray-100);
    border-radius: 6px;
}

.cse-error p[b-vz81oij13m] {
    margin: 0;
    color: var(--red);
}

.cse-conflict[b-vz81oij13m] {
    margin: 0 var(--space-2) var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--amber-soft);
    background: var(--gray-100);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.cse-conflict p[b-vz81oij13m] {
    margin: 0;
    color: var(--gray-700);
}

.cse-reload-btn[b-vz81oij13m] {
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--gray-300);
    background: var(--surface);
    color: var(--gray-700);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.cse-publish-msg[b-vz81oij13m] {
    margin: 0 var(--space-3) var(--space-2);
    font-size: .9rem;
}

.cse-publish-msg.is-ok[b-vz81oij13m] {
    color: var(--green);
}

.cse-publish-msg.is-error[b-vz81oij13m] {
    color: var(--red);
}
/* /Components/Pages/Upload.razor.rz.scp.css */
.upload-shell[b-y92lf03et6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    max-width: 960px;
}

.upload-header h1[b-y92lf03et6] {
    color: var(--brand-primary);
    margin: 0 0 var(--space-2) 0;
}

.subtitle[b-y92lf03et6] {
    color: var(--gray-500);
    margin: 0 0 var(--space-3) 0;
}

.link-secondary[b-y92lf03et6] {
    color: var(--brand-accent);
    text-decoration: none;
    font-size: var(--font-size-base);
}

.link-secondary:hover[b-y92lf03et6] {
    text-decoration: underline;
}

.upload-zone[b-y92lf03et6] {
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-2);
    padding: var(--space-5);
    background: var(--gray-100);
    text-align: center;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    position: relative;
}

.upload-zone.drag-over[b-y92lf03et6] {
    border-color: var(--brand-primary);
    background: var(--blue-soft);
}

.zone-hint[b-y92lf03et6] {
    margin: var(--space-3) 0 0 0;
    color: var(--gray-700);
}

.file-input[b-y92lf03et6] {
    display: block;
    margin: 0 auto;
}

.empty-state[b-y92lf03et6] {
    color: var(--gray-500);
    font-style: italic;
    margin: 0;
}

.selection-error[b-y92lf03et6] {
    color: var(--red);
    margin: 0;
}

.upload-list[b-y92lf03et6] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.upload-row[b-y92lf03et6] {
    display: grid;
    /* radio | filename (flex) | size | mode | remove. minmax(0, 1fr) lets the filename
       shrink with ellipsis instead of pushing the other columns off-screen. */
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
}

.upload-row[data-status="error"][b-y92lf03et6] {
    border-color: var(--red);
    background: var(--red-soft);
}

.upload-row[data-status="success"][b-y92lf03et6] {
    border-color: var(--green);
    background: var(--green-soft);
}

.filename[b-y92lf03et6] {
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.size[b-y92lf03et6] {
    color: var(--gray-500);
    font-size: 0.85em;
}

.progress[b-y92lf03et6] {
    width: 100%;
    height: var(--space-2);
}

.status[b-y92lf03et6] {
    text-transform: capitalize;
    color: var(--gray-700);
    font-size: 0.9em;
}

.retry-btn[b-y92lf03et6] {
    background: var(--brand-primary);
    color: var(--surface);
    border: none;
    border-radius: var(--radius-1);
    padding: var(--space-1) var(--space-3);
    cursor: pointer;
    font-size: 0.9em;
}

.retry-btn:hover[b-y92lf03et6] {
    background: var(--navy-dark);
}

.error-message[b-y92lf03et6] {
    grid-column: 1 / -1;
    color: var(--red);
    font-size: 0.9em;
    margin-top: var(--space-1);
}

.open-link[b-y92lf03et6] {
    color: var(--brand-accent);
    text-decoration: none;
}

.open-link:hover[b-y92lf03et6] {
    text-decoration: underline;
}
/* /Components/Shared/AccountTabs.razor.rz.scp.css */
.account-tabs[b-sruuxztmu7] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

[b-sruuxztmu7] .account-tab {
    display: block;
    padding: 0.5rem 0.875rem;
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.95rem;
}

[b-sruuxztmu7] .account-tab:hover {
    background-color: var(--gray-100);
}

[b-sruuxztmu7] .account-tab.active {
    background-color: var(--brand-primary);
    color: var(--surface-inverse);
}

[b-sruuxztmu7] .account-tab-button {
    background: none;
    border: 0;
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
}
/* /Components/Shared/CollaboratorsPanel.razor.rz.scp.css */
.collaborators-panel[b-pi2uj1yuo3] {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--gray-200);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.collaborators-heading[b-pi2uj1yuo3] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-700);
}

.collaborators-help[b-pi2uj1yuo3] {
    margin: 0;
    color: var(--gray-500);
    font-size: .9rem;
}

.collaborators-chip-input[b-pi2uj1yuo3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: var(--surface);
    min-height: 2.25rem;
}

.collaborators-chip-input.is-invalid[b-pi2uj1yuo3] {
    border-color: var(--red);
    box-shadow: 0 0 0 1px var(--red-soft);
}

.collaborators-chip[b-pi2uj1yuo3] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem .5rem;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    font-size: .9rem;
    max-width: 100%;
}

.collaborators-chip > span[b-pi2uj1yuo3] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 16rem;
}

.collaborators-chip-remove[b-pi2uj1yuo3] {
    background: transparent;
    border: 0;
    color: var(--gray-500);
    cursor: pointer;
    padding: 0 .15rem;
    line-height: 1;
    font-size: 1rem;
}

.collaborators-chip-remove:hover[b-pi2uj1yuo3] {
    color: var(--red);
}

.collaborators-chip-typing[b-pi2uj1yuo3] {
    flex: 1;
    min-width: 8rem;
    border: 0;
    outline: 0;
    padding: .25rem .15rem;
    background: transparent;
    font: inherit;
}

.collaborators-input-error[b-pi2uj1yuo3] {
    margin: 0;
    color: var(--red);
    font-size: .85rem;
}

.collaborators-send-row[b-pi2uj1yuo3] {
    display: flex;
    justify-content: flex-end;
}

.collaborators-send-btn[b-pi2uj1yuo3] {
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--brand-primary);
    background: var(--brand-primary);
    color: white;
    border-radius: 4px;
    cursor: pointer;
}

.collaborators-send-btn:disabled[b-pi2uj1yuo3] {
    opacity: .55;
    cursor: not-allowed;
}

.collaborators-batch-summary[b-pi2uj1yuo3] {
    margin: 0;
    color: var(--gray-600);
    font-size: .9rem;
}

.collaborators-sep[b-pi2uj1yuo3] {
    margin: var(--space-2) 0;
    border: 0;
    border-top: 1px dashed var(--gray-200);
}

.collaborators-list[b-pi2uj1yuo3] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.collaborators-row[b-pi2uj1yuo3] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: .25rem 0;
}

.collaborators-email[b-pi2uj1yuo3] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collaborators-status[b-pi2uj1yuo3] {
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    border: 1px solid transparent;
}

.collaborators-status.status-active[b-pi2uj1yuo3] {
    background: var(--green-soft);
    color: var(--green);
    border-color: var(--green);
}

.collaborators-status.status-revoked[b-pi2uj1yuo3] {
    background: var(--gray-100);
    color: var(--gray-500);
    border-color: var(--gray-200);
    text-decoration: line-through;
}

.collaborators-revoke-btn[b-pi2uj1yuo3] {
    padding: .15rem .5rem;
    border: 1px solid var(--red-soft);
    background: var(--surface);
    color: var(--red);
    border-radius: 4px;
    cursor: pointer;
    font-size: .85rem;
}

.collaborators-resend-btn[b-pi2uj1yuo3] {
    padding: .15rem .5rem;
    border: 1px solid var(--gray-300);
    background: var(--surface);
    color: var(--brand-primary);
    border-radius: 4px;
    cursor: pointer;
    font-size: .85rem;
}

.collaborators-resend-btn:disabled[b-pi2uj1yuo3],
.collaborators-revoke-btn:disabled[b-pi2uj1yuo3] {
    opacity: .55;
    cursor: not-allowed;
}

.collaborators-loading[b-pi2uj1yuo3],
.collaborators-empty[b-pi2uj1yuo3] {
    margin: 0;
    color: var(--gray-500);
    font-size: .9rem;
}

.collaborators-error[b-pi2uj1yuo3] {
    margin: 0;
    color: var(--red);
}
/* /Components/Shared/SharePanel.razor.rz.scp.css */
.share-panel[b-e8rvvzscp8] {
    background: var(--surface);
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
    padding: var(--space-3) var(--space-4);
}

.share-panel summary[b-e8rvvzscp8] {
    cursor: pointer;
    font-weight: 600;
    color: var(--brand-primary);
}

.share-empty[b-e8rvvzscp8],
.share-active[b-e8rvvzscp8] {
    margin-top: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.share-create-row[b-e8rvvzscp8],
.share-row[b-e8rvvzscp8] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.share-label[b-e8rvvzscp8] {
    color: var(--gray-500);
    min-width: 6rem;
}

.share-slug-input[b-e8rvvzscp8] {
    flex: 1;
    min-width: 12rem;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--gray-300);
    border-radius: 4px;
}

.share-url[b-e8rvvzscp8] {
    color: var(--brand-primary);
    word-break: break-all;
}

.share-copy-btn[b-e8rvvzscp8],
.share-update-btn[b-e8rvvzscp8],
.share-create-btn[b-e8rvvzscp8],
.share-revoke-btn[b-e8rvvzscp8] {
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--gray-300);
    background: var(--surface);
    border-radius: 4px;
    cursor: pointer;
}

.share-revoke-btn[b-e8rvvzscp8] {
    color: var(--red);
    border-color: var(--red-soft);
}

.share-error[b-e8rvvzscp8] {
    color: var(--red);
    margin: 0;
}

.share-last-viewed[b-e8rvvzscp8] {
    color: var(--gray-500);
}

.share-actions[b-e8rvvzscp8] {
    margin-top: var(--space-2);
}