/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-yysgq5od1p],
.components-reconnect-repeated-attempt-visible[b-yysgq5od1p],
.components-reconnect-failed-visible[b-yysgq5od1p],
.components-pause-visible[b-yysgq5od1p],
.components-resume-failed-visible[b-yysgq5od1p],
.components-rejoining-animation[b-yysgq5od1p] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-yysgq5od1p {
    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/AccountSecurity/OAuthConsent.razor.rz.scp.css */
.oauth-scope-list[b-tw3hot8df9] {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0.5rem 0 0.75rem;
}

.oauth-scope-list li[b-tw3hot8df9] {
    margin: 0.25rem 0;
    line-height: 1.45;
}

.oauth-consent-form .form-actions[b-tw3hot8df9] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-top: 0.5rem;
}
/* /Components/Pages/Admin/AdminTranslationMemory.razor.rz.scp.css */
/* Translation memory management page. Reuses .admin-page / .data-table from
   admin.css; these are the page-specific bits. */

.tr-mem-filters[b-184apg9c9s] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.tr-mem-mini[b-184apg9c9s] {
    font-size: 0.85rem; padding: 6px 9px; border: 1px solid var(--color-border);
    border-radius: var(--radius); background: var(--color-surface); color: var(--color-text);
}
.tr-mem-incl[b-184apg9c9s] { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; }

.tr-mem-count[b-184apg9c9s] { font-size: 0.8rem; margin-bottom: 8px; }

.tr-mem-table[b-184apg9c9s] { width: 100%; }
.tr-mem-num[b-184apg9c9s] { text-align: center; white-space: nowrap; }
.tr-mem-actions[b-184apg9c9s] { text-align: right; white-space: nowrap; }
.tr-mem-src[b-184apg9c9s] { font-weight: 500; }
.tr-mem-lang[b-184apg9c9s] {
    display: inline-block; margin-left: 8px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em;
    color: var(--color-text-secondary); background: var(--color-surface-2);
    border: 1px solid var(--color-border); padding: 1px 5px; border-radius: 4px; vertical-align: middle;
}
.tr-mem-kind[b-184apg9c9s] {
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
    color: var(--color-text-secondary); background: var(--color-surface-2);
    padding: 2px 6px; border-radius: 4px;
}
.tr-mem-removed[b-184apg9c9s] { opacity: 0.55; }
.tr-mem-removed .tr-mem-src[b-184apg9c9s] { text-decoration: line-through; }

.tr-mem-pager[b-184apg9c9s] { display: flex; align-items: center; gap: 12px; margin-top: 14px; justify-content: center; }

/* Vote controls (mirrors the Translator chip controls). */
.tr-vote[b-184apg9c9s] { display: inline-flex; align-items: center; gap: 4px; }
.tr-vbtn[b-184apg9c9s] {
    appearance: none; border: 1px solid var(--color-border); background: var(--color-surface);
    color: var(--color-text-secondary); border-radius: 6px; padding: 3px; cursor: pointer;
    display: grid; place-items: center; line-height: 0;
}
.tr-vbtn:hover[b-184apg9c9s] { background: var(--color-surface-2); color: var(--color-text); }
.tr-vbtn.on[b-184apg9c9s] { color: var(--color-accent); border-color: var(--color-accent); background: var(--color-accent-soft); }
.tr-vscore[b-184apg9c9s] { font-size: 0.72rem; font-weight: 700; min-width: 16px; text-align: center; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.tr-vscore.pos[b-184apg9c9s] { color: var(--color-valid); }
.tr-vscore.neg[b-184apg9c9s] { color: var(--color-error-text); }
/* /Components/Pages/Docs/McpDocs.razor.rz.scp.css */
/* Slightly wider than account-page's default so the code blocks below
   don't wrap awkwardly. Mirrors what we'd want for any long-form doc. */
[b-vuyv28ukog] .account-page {
    max-width: 880px;
}

[b-vuyv28ukog] .account-section h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.05rem;
}

[b-vuyv28ukog] .account-section ol,
[b-vuyv28ukog] .account-section ul {
    line-height: 1.55;
    padding-left: 1.25rem;
}

[b-vuyv28ukog] .account-section pre {
    background: var(--surface-2, #f4f4f4);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    padding: 0.65rem 0.9rem;
    overflow-x: auto;
    font-size: 0.85rem;
    line-height: 1.45;
    margin: 0.5rem 0;
}

[b-vuyv28ukog] .account-section pre code {
    background: transparent;
    padding: 0;
    font-size: inherit;
}

[b-vuyv28ukog] .account-section details {
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    margin: 0.5rem 0;
    background: var(--surface-1, #fafafa);
}

[b-vuyv28ukog] .account-section details > summary {
    cursor: pointer;
    padding: 0.2rem 0;
}

[b-vuyv28ukog] .troubleshoot dt {
    font-weight: 600;
    margin-top: 0.85rem;
}

[b-vuyv28ukog] .troubleshoot dd {
    margin: 0.25rem 0 0 0;
    color: var(--text-muted, #666);
}
/* /Components/Pages/Mcp.razor.rz.scp.css */
.mcp-step__heading[b-ufojqp9z9h] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 6px;
}

.mcp-step__heading h2[b-ufojqp9z9h] {
    margin: 0;
}

.mcp-step__number[b-ufojqp9z9h] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.mcp-step__actions[b-ufojqp9z9h] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.mcp-step__choice[b-ufojqp9z9h] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: stretch;
    margin-top: 16px;
}

.mcp-step__choice-card[b-ufojqp9z9h] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 16px 18px;
    background: var(--color-surface);
}

.mcp-step__choice-card .mcp-step__actions[b-ufojqp9z9h] {
    margin-top: auto;
    padding-top: 12px;
}

.mcp-step__choice-heading[b-ufojqp9z9h] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
}

.mcp-step__choice-heading h3[b-ufojqp9z9h] {
    margin: 0;
    font-size: 15px;
}

.mcp-step__choice-divider[b-ufojqp9z9h] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    position: relative;
}

.mcp-step__choice-divider[b-ufojqp9z9h]::before,
.mcp-step__choice-divider[b-ufojqp9z9h]::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 1px;
    background: var(--color-border);
    transform: translateX(-50%);
}

.mcp-step__choice-divider[b-ufojqp9z9h]::before { top: 0; bottom: calc(50% + 14px); }
.mcp-step__choice-divider[b-ufojqp9z9h]::after  { top: calc(50% + 14px); bottom: 0; }

@media (max-width: 720px) {
    .mcp-step__choice[b-ufojqp9z9h] {
        grid-template-columns: 1fr;
    }
    .mcp-step__choice-divider[b-ufojqp9z9h]::before,
    .mcp-step__choice-divider[b-ufojqp9z9h]::after {
        left: 0;
        right: 0;
        width: auto;
        height: 1px;
        background: var(--color-border);
        transform: none;
    }
    .mcp-step__choice-divider[b-ufojqp9z9h]::before { top: 50%; bottom: auto; right: calc(50% + 18px); left: 0; }
    .mcp-step__choice-divider[b-ufojqp9z9h]::after  { top: 50%; bottom: auto; left: calc(50% + 18px); right: 0; }
}

.mcp-step__hint[b-ufojqp9z9h] {
    margin-top: 10px;
}

.mcp-tabs[b-ufojqp9z9h] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 8px;
    border-bottom: 1px solid var(--color-border);
}

.mcp-tab[b-ufojqp9z9h] {
    background: none;
    border: none;
    padding: 8px 14px;
    font-size: 14px;
    cursor: pointer;
    color: var(--color-text-secondary);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.mcp-tab:hover[b-ufojqp9z9h] {
    color: var(--color-text);
}

.mcp-tab--active[b-ufojqp9z9h] {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.mcp-snippet[b-ufojqp9z9h] {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 12px 16px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.55;
    overflow-x: auto;
    white-space: pre;
    margin: 0 0 8px;
}

.mcp-prompts[b-ufojqp9z9h] {
    margin: 6px 0 16px;
    padding-left: 20px;
}

.mcp-prompts li[b-ufojqp9z9h] {
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.mcp-tools__heading[b-ufojqp9z9h] {
    margin: 18px 0 8px;
    font-size: 14px;
    font-weight: 600;
}

.mcp-tools code[b-ufojqp9z9h] {
    font-size: 12.5px;
}

.mcp-troubleshoot[b-ufojqp9z9h] {
    margin: 0;
}

.mcp-troubleshoot dt[b-ufojqp9z9h] {
    font-weight: 600;
    margin-top: 12px;
}

.mcp-troubleshoot dt:first-child[b-ufojqp9z9h] {
    margin-top: 0;
}

.mcp-troubleshoot dd[b-ufojqp9z9h] {
    margin: 4px 0 0;
    color: var(--color-text-secondary);
}
/* /Components/Pages/Piper.razor.rz.scp.css */
.piper-layout[b-mc5t6vyaml] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 24px;
    align-items: start;
}

.piper-main[b-mc5t6vyaml] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* Without align-self the inline-flex pill bar still gets stretched to
   the column-flex parent's cross axis (full width), which feels loose
   next to a 100% textarea. flex-start sizes it to its content. */
.piper-main[b-mc5t6vyaml]  .pill-tabs {
    margin-bottom: 0;
    align-self: flex-start;
}

.piper-main[b-mc5t6vyaml]  textarea {
    font-family: var(--font-mono);
    font-size: 13px;
}

.piper-settings[b-mc5t6vyaml] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: calc(var(--top-bar-height) + 16px);
}

.piper-settings__title[b-mc5t6vyaml] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin: 0 0 4px;
}

.piper-settings[b-mc5t6vyaml]  .form-section {
    gap: 6px;
}

.piper-meta[b-mc5t6vyaml] {
    font-size: 12px;
    margin: 0;
}

.piper-hint[b-mc5t6vyaml] {
    font-size: 12px;
    margin: 0;
}

.piper-wrap-row[b-mc5t6vyaml] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.piper-hint[b-mc5t6vyaml]  code {
    font-family: var(--font-mono);
    font-size: 11.5px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding: 0 4px;
}

@media (max-width: 900px) {
    .piper-layout[b-mc5t6vyaml] {
        grid-template-columns: 1fr;
    }

    .piper-settings[b-mc5t6vyaml] {
        position: static;
    }
}
/* /Components/Pages/Translator.razor.rz.scp.css */
/* Translator tool — recreates the approved design (.design/translator/) on the
   app's own tokens. The design is a cohesive panel: a header band, a toolbar
   band, and a seamless list <-> detail-rail split separated by a divider —
   not floating cards. Status colours are local; everything else reuses
   base.css tokens. */

.tr-page[b-pg98q3zrne] {
    --st-todo: #cf9b5c;          /* needs-translation */
    --st-review: #e0922b;        /* fuzzy / needs review */
    --st-trans: var(--color-accent);
    --st-final: #26b050;
    --st-todo-bg: color-mix(in srgb, var(--st-todo) 16%, transparent);
    --st-review-bg: color-mix(in srgb, var(--st-review) 16%, transparent);
    --st-trans-bg: var(--color-accent-soft);
    --st-final-bg: color-mix(in srgb, var(--st-final) 15%, transparent);

    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* The framed panel that holds the loaded-file UI. */
.tr[b-pg98q3zrne] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    overflow: hidden;
}

/* ── Header band ────────────────────────────────────────────────────────── */
.tr-head[b-pg98q3zrne] { padding: 20px 24px 16px; }
.tr .tr-head[b-pg98q3zrne] { border-bottom: 1px solid var(--color-border); }
.tr-head__row[b-pg98q3zrne] { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }

.tr-title[b-pg98q3zrne] { display: flex; align-items: center; gap: 12px; }
.tr-title h1[b-pg98q3zrne] {
    margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.4px;
    display: flex; align-items: center; gap: 10px; color: var(--color-text);
}
.tr-title__icon[b-pg98q3zrne] { color: var(--color-accent); display: grid; place-items: center; }

.tr-fname[b-pg98q3zrne] {
    font-family: var(--font-mono); font-size: 13.5px; font-weight: 500;
    color: var(--color-text-muted); background: var(--color-surface-2);
    border: 1px solid var(--color-border); border-radius: 7px;
    padding: 5px 10px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
.tr-fname__ed[b-pg98q3zrne] { color: var(--color-text-secondary); display: grid; place-items: center; }
input.tr-fname[b-pg98q3zrne] { cursor: text; color: var(--color-text); min-width: 240px; }

.tr-sub[b-pg98q3zrne] {
    margin-top: 8px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    color: var(--color-text-muted); font-size: 13px;
}
.tr-lang[b-pg98q3zrne] { display: inline-flex; align-items: center; gap: 7px; }
.tr-flag[b-pg98q3zrne] {
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px;
    color: var(--color-text-muted); background: var(--color-surface-2);
    border: 1px solid var(--color-border); padding: 2px 6px; border-radius: 5px;
}
.tr-arrow[b-pg98q3zrne] { color: var(--color-text-secondary); }
.tr-dotsep[b-pg98q3zrne] { width: 3px; height: 3px; border-radius: 999px; background: var(--color-border-strong); }
.tr-orig[b-pg98q3zrne] { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-muted); }
.tr-langsel[b-pg98q3zrne] {
    font: inherit; font-size: 13px; color: var(--color-text); cursor: pointer;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 7px; padding: 4px 8px;
}

.tr-actions[b-pg98q3zrne] { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }

/* ── Progress ───────────────────────────────────────────────────────────── */
.tr-progress[b-pg98q3zrne] { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.tr-pbar[b-pg98q3zrne] {
    height: 9px; border-radius: 999px; overflow: hidden; display: flex;
    background: var(--color-surface-2); border: 1px solid var(--color-border);
}
.tr-seg[b-pg98q3zrne] { display: block; height: 100%; }
.tr-seg--final[b-pg98q3zrne] { background: var(--st-final); }
.tr-seg--trans[b-pg98q3zrne] { background: var(--st-trans); }
.tr-seg--review[b-pg98q3zrne] { background: var(--st-review); }
.tr-seg--todo[b-pg98q3zrne] { background: var(--st-todo); opacity: 0.38; }

.tr-pfoot[b-pg98q3zrne] { display: flex; align-items: center; justify-content: space-between; }
.tr-counts[b-pg98q3zrne] { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.tr-count[b-pg98q3zrne] { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--color-text); }
.tr-count[b-pg98q3zrne] { font-variant-numeric: tabular-nums; }
.tr-dot[b-pg98q3zrne] { width: 9px; height: 9px; border-radius: 999px; background: var(--color-border-strong); flex-shrink: 0; }
.tr-dot--final[b-pg98q3zrne], .tr-dot.is-final[b-pg98q3zrne] { background: var(--st-final); }
.tr-dot--trans[b-pg98q3zrne], .tr-dot.is-trans[b-pg98q3zrne] { background: var(--st-trans); }
.tr-dot--review[b-pg98q3zrne], .tr-dot.is-review[b-pg98q3zrne] { background: var(--st-review); }
.tr-dot--todo[b-pg98q3zrne], .tr-dot.is-todo[b-pg98q3zrne] { background: var(--st-todo); }
/* The count dots are square chips in the design. */
.tr-count .tr-dot[b-pg98q3zrne] { width: 9px; height: 9px; border-radius: 3px; }
.tr-pct[b-pg98q3zrne] { font-size: 12.5px; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; }
.tr-pct small[b-pg98q3zrne] { color: var(--color-text-muted); font-weight: 500; }

/* ── Toolbar band ───────────────────────────────────────────────────────── */
.tr-toolbar[b-pg98q3zrne] {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 11px 24px; border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-2);
}

/* Segmented controls (filter tabs + view toggle). */
.tr-ftabs[b-pg98q3zrne], .tr-viewtoggle[b-pg98q3zrne] {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 9px;
}
.tr-ftabs button[b-pg98q3zrne], .tr-viewtoggle button[b-pg98q3zrne] {
    appearance: none; border: 0; background: transparent; font: inherit;
    font-size: 12.5px; font-weight: 600; color: var(--color-text-muted);
    padding: 6px 11px; border-radius: 6px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px; transition: background .12s, color .12s;
}
.tr-ftabs button:hover[b-pg98q3zrne], .tr-viewtoggle button:hover[b-pg98q3zrne] { color: var(--color-text); }
.tr-ftabs button.on[b-pg98q3zrne], .tr-viewtoggle button.on[b-pg98q3zrne] {
    background: var(--color-surface-2); color: var(--color-text);
    box-shadow: 0 1px 2px var(--color-shadow);
}
.tr-viewtoggle button.on[b-pg98q3zrne] { color: var(--color-accent); }
.tr-cb[b-pg98q3zrne] {
    font-size: 11px; font-weight: 700; color: var(--color-text-secondary);
    background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: 999px; padding: 0 6px; min-width: 18px; text-align: center;
}
.tr-ftabs button.on .tr-cb[b-pg98q3zrne] { color: var(--color-accent); background: var(--color-accent-soft); border-color: var(--color-accent-soft); }

.tr-kindsel[b-pg98q3zrne] {
    font: inherit; font-size: 13px; font-weight: 500; color: var(--color-text);
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: 7px 11px; cursor: pointer;
}
.tr-search[b-pg98q3zrne] {
    display: inline-flex; align-items: center; gap: 8px; flex: 1; max-width: 360px;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: 7px 11px; color: var(--color-text-secondary);
}
.tr-search input[b-pg98q3zrne] { border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: var(--color-text); width: 100%; }
.tr-spacer[b-pg98q3zrne] { flex: 1; }
.tr-hidden[b-pg98q3zrne] { font-size: 12px; color: var(--color-text-secondary); }
.tr-hidden strong[b-pg98q3zrne] { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* ── Shared chips / state badge ─────────────────────────────────────────── */
.tr-kind[b-pg98q3zrne] {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700;
    color: var(--color-text-secondary);
}
.tr-id[b-pg98q3zrne] { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-secondary); }
.tr-state[b-pg98q3zrne] {
    display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
    letter-spacing: 0.3px; text-transform: uppercase; color: var(--color-text-secondary);
}
.tr-state.is-todo[b-pg98q3zrne] { color: var(--st-todo); }
.tr-state.is-review[b-pg98q3zrne] { color: var(--st-review); }
.tr-state.is-trans[b-pg98q3zrne] { color: var(--st-trans); }
.tr-state.is-final[b-pg98q3zrne] { color: var(--st-final); }

/* ── Layout A: list + sticky-feel rail (one seamless split) ─────────────── */
.tr-la[b-pg98q3zrne] { display: grid; grid-template-columns: 1fr 400px; min-height: 0; }
.tr-la__list[b-pg98q3zrne] { overflow-y: auto; border-right: 1px solid var(--color-border); max-height: calc(100vh - 288px); }
.tr-la__rail[b-pg98q3zrne] { overflow-y: auto; max-height: calc(100vh - 288px); background: var(--color-surface); }

.tr-urow[b-pg98q3zrne] {
    display: grid; grid-template-columns: 22px 1fr; gap: 12px;
    padding: 13px 24px 13px 18px; border-bottom: 1px solid var(--color-border);
    cursor: pointer; background: var(--color-surface); transition: background .1s;
    border-left: 3px solid transparent;
}
.tr-urow:hover[b-pg98q3zrne] { background: var(--color-surface-2); }
.tr-urow.sel[b-pg98q3zrne] { background: var(--color-accent-soft); border-left-color: var(--color-accent); }
.tr-urow__st[b-pg98q3zrne] { display: grid; place-items: center; padding-top: 3px; align-self: start; }
.tr-urow__body[b-pg98q3zrne] { min-width: 0; }
.tr-urow__meta[b-pg98q3zrne] { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.tr-urow__src[b-pg98q3zrne] { color: var(--color-text); font-size: 14px; font-weight: 500; line-height: 1.45; }
.tr-urow__tgt[b-pg98q3zrne] { color: var(--color-text-muted); font-size: 13px; margin-top: 3px; line-height: 1.45; }
.tr-urow__tgt.empty[b-pg98q3zrne] { color: var(--st-todo); font-style: italic; opacity: 0.95; }
.tr-urow__tgt.empty[b-pg98q3zrne]::before { content: "— "; opacity: 0.6; }

/* detail rail */
.tr-detail[b-pg98q3zrne] { padding: 20px 22px 28px; display: flex; flex-direction: column; gap: 18px; }
.tr-detail__head[b-pg98q3zrne] { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tr-detail__unit[b-pg98q3zrne] { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-secondary); }
.tr-detail__nav[b-pg98q3zrne] { display: flex; gap: 6px; }
.tr-detail__nav button[b-pg98q3zrne] {
    width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--color-border);
    background: var(--color-surface); color: var(--color-text-muted);
    display: grid; place-items: center; cursor: pointer;
}
.tr-detail__nav button:hover[b-pg98q3zrne] { background: var(--color-surface-2); color: var(--color-text); }

.tr-field[b-pg98q3zrne] { display: flex; flex-direction: column; }
.tr-field__label[b-pg98q3zrne] {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700;
    color: var(--color-text-secondary);
}
.tr-srcbox[b-pg98q3zrne] {
    background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius);
    padding: 12px 13px; color: var(--color-text); font-size: 14.5px; line-height: 1.5;
}
.tr-notebox[b-pg98q3zrne] {
    margin-top: 10px; border-left: 2px solid var(--color-border-strong); padding: 2px 0 2px 12px;
    color: var(--color-text-muted); font-size: 12.5px; line-height: 1.5; font-style: italic;
}
.tr-tgtarea[b-pg98q3zrne] {
    width: 100%; min-height: 92px; resize: vertical; font: inherit; font-size: 14.5px; line-height: 1.5;
    color: var(--color-text); background: var(--color-surface);
    border: 1.5px solid var(--color-accent); border-radius: var(--radius);
    padding: 12px 13px; outline: none; box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.tr-tgtarea[b-pg98q3zrne]::placeholder { color: var(--color-text-secondary); }

.tr-statepick[b-pg98q3zrne] { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.tr-statepick button[b-pg98q3zrne] {
    appearance: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600;
    border-radius: 999px; padding: 4px 10px; border: 1px solid var(--color-border);
    background: var(--color-surface); color: var(--color-text-muted);
    display: inline-flex; align-items: center; gap: 6px;
}
.tr-statepick button .tr-dot[b-pg98q3zrne] { width: 7px; height: 7px; }
.tr-statepick button.on.is-todo[b-pg98q3zrne] { border-color: var(--st-todo); color: var(--st-todo); background: var(--st-todo-bg); }
.tr-statepick button.on.is-trans[b-pg98q3zrne] { border-color: var(--st-trans); color: var(--st-trans); background: var(--st-trans-bg); }
.tr-statepick button.on.is-final[b-pg98q3zrne] { border-color: var(--st-final); color: var(--st-final); background: var(--st-final-bg); }

/* ── Suggestions ────────────────────────────────────────────────────────── */
.tr-sugg__head[b-pg98q3zrne] {
    display: flex; align-items: center; gap: 8px; margin-bottom: 9px;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700;
    color: var(--color-text-secondary);
}
.tr-mempill[b-pg98q3zrne] {
    font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
    color: var(--color-accent); background: var(--color-accent-soft); padding: 2px 7px; border-radius: 999px;
}
.tr-sugg__list[b-pg98q3zrne] { display: flex; flex-direction: column; gap: 8px; }
.tr-sugg[b-pg98q3zrne] {
    display: grid; grid-template-columns: 22px 1fr auto; gap: 11px; align-items: start;
    padding: 11px 12px; border: 1px solid var(--color-border); border-radius: var(--radius);
    background: var(--color-surface); cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.tr-sugg:hover[b-pg98q3zrne] { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.tr-skey[b-pg98q3zrne] {
    font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--color-text-secondary);
    background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 5px;
    width: 22px; height: 22px; display: grid; place-items: center;
}
.tr-sugg__body[b-pg98q3zrne] { min-width: 0; }
.tr-stext[b-pg98q3zrne] { color: var(--color-text); font-size: 14px; line-height: 1.4; }
.tr-smeta[b-pg98q3zrne] { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.tr-sorigin[b-pg98q3zrne] { font-size: 11.5px; color: var(--color-text-muted); display: inline-flex; align-items: center; gap: 5px; }
.tr-ssim[b-pg98q3zrne] {
    font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tr-ssim.exact[b-pg98q3zrne] { color: var(--st-final); background: var(--st-final-bg); }
.tr-ssim.high[b-pg98q3zrne] { color: var(--st-trans); background: var(--st-trans-bg); }
.tr-ssim.mid[b-pg98q3zrne] { color: var(--st-review); background: var(--st-review-bg); }
.tr-sugg__empty[b-pg98q3zrne] { color: var(--color-text-secondary); font-size: 13px; padding: 12px 2px; font-style: italic; }

/* ── Keyboard legend ────────────────────────────────────────────────────── */
.tr-kbd[b-pg98q3zrne] {
    margin-top: 2px; padding: 12px 14px; border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius); background: var(--color-surface-2);
    display: flex; flex-direction: column; gap: 2px;
}
.tr-kbd__row[b-pg98q3zrne] { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; font-size: 12.5px; }
.tr-kbd__row > span:last-child[b-pg98q3zrne] { display: inline-flex; gap: 4px; }
.tr-kbd kbd[b-pg98q3zrne] {
    font-family: var(--font-mono); font-size: 10.5px; color: var(--color-text-muted);
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 4px; padding: 1px 6px; box-shadow: 0 1px 0 var(--color-border);
}

/* ── Layout C: compact grid ─────────────────────────────────────────────── */
.tr-lc[b-pg98q3zrne] { overflow-y: auto; max-height: calc(100vh - 288px); }
.tr-cgrid__head[b-pg98q3zrne], .tr-crow[b-pg98q3zrne] {
    display: grid; grid-template-columns: 30px 160px 1fr 38%; gap: 14px; align-items: start;
    padding: 11px 24px;
}
.tr-cgrid__head[b-pg98q3zrne] {
    position: sticky; top: 0; z-index: 1; background: var(--color-surface);
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700;
    color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border);
}
.tr-crow[b-pg98q3zrne] { border-bottom: 1px solid var(--color-border); cursor: pointer; background: var(--color-surface); }
.tr-crow:hover[b-pg98q3zrne] { background: var(--color-surface-2); }
.tr-crow.active[b-pg98q3zrne] { background: var(--color-accent-soft); }
.tr-cgrid__c-st[b-pg98q3zrne] { padding-top: 4px; }
.tr-cgrid__c-unit[b-pg98q3zrne] { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.tr-cgrid__c-src[b-pg98q3zrne] { color: var(--color-text); font-size: 14px; line-height: 1.45; font-weight: 500; }
.tr-cellinput[b-pg98q3zrne] {
    width: 100%; border: 1px solid transparent; background: transparent; border-radius: 7px;
    padding: 6px 8px; font: inherit; font-size: 14px; color: var(--color-text); line-height: 1.45;
}
.tr-cellinput[b-pg98q3zrne]::placeholder { color: var(--st-todo); font-style: italic; opacity: 0.8; }
.tr-cellinput:hover[b-pg98q3zrne] { background: var(--color-surface); border-color: var(--color-border); }
.tr-crow.active .tr-cellinput[b-pg98q3zrne] { background: var(--color-surface); border: 1.5px solid var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }

/* ── Empty filtered state ───────────────────────────────────────────────── */
.tr-empty[b-pg98q3zrne] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 60px 20px; color: var(--color-text-secondary); text-align: center;
}
.tr-empty__icon[b-pg98q3zrne] {
    width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
    background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text-muted);
}
.tr-empty__title[b-pg98q3zrne] { font-size: 15px; font-weight: 600; color: var(--color-text); }

/* ── Upload / restore (no-file state) ───────────────────────────────────── */
.tr-drop[b-pg98q3zrne] {
    position: relative;
    border: 1.5px dashed var(--color-border-strong); border-radius: 12px; padding: 36px;
    display: flex; flex-direction: column; align-items: center; gap: 10px; background: var(--color-surface);
    color: var(--color-text-muted);
    transition: border-color 120ms ease, background 120ms ease;
}
/* #306: the file input fills the whole dashed zone (transparent) so clicking
   anywhere on it opens the picker. Dropping a file is handled explicitly in
   Translator.razor.js (initDropZone) — a native file input doesn't reliably
   fire `change` on drop, so without that the browser would just navigate to
   the dropped file. */
.tr-drop:hover[b-pg98q3zrne],
.tr-drop--over[b-pg98q3zrne] { border-color: var(--color-accent); background: var(--color-accent-soft); }
/* The no-file state fills the content area so the drop target is easy to hit;
   the dashed zone grows to take whatever the header (and optional restore
   banner) leave behind. The content column's own padding is the bottom gap. */
.tr-page--empty[b-pg98q3zrne] { min-height: 100%; }
.tr-page--empty .tr-drop[b-pg98q3zrne] { flex: 1; justify-content: center; }
.tr-drop__label[b-pg98q3zrne] { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
.tr-drop__title[b-pg98q3zrne] { font-size: 1rem; font-weight: 600; color: var(--color-text); }
.tr-drop__hint[b-pg98q3zrne] { font-size: 0.8rem; color: var(--color-text-muted); }
.tr-drop__input[b-pg98q3zrne] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; padding: 0; opacity: 0; cursor: pointer;
}
.tr-error[b-pg98q3zrne] { color: var(--color-error-text); display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; }

.tr-restore[b-pg98q3zrne] {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 0.875rem;
    background: var(--color-accent-soft); color: var(--color-text); border-radius: 10px;
}
.tr-restore .btn[b-pg98q3zrne] { margin-left: 4px; }

/* ── Toast ──────────────────────────────────────────────────────────────── */
.tr-hiddenform[b-pg98q3zrne] { display: none; }
.tr-toast[b-pg98q3zrne] {
    position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(8px);
    background: var(--color-text); color: var(--color-bg); padding: 10px 16px; border-radius: 10px;
    display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500;
    box-shadow: 0 8px 28px var(--color-shadow); opacity: 0; pointer-events: none;
    transition: opacity .18s, transform .18s; z-index: 80;
}
.tr-toast.show[b-pg98q3zrne] { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 1100px) {
    .tr-la[b-pg98q3zrne] { grid-template-columns: 1fr; }
    .tr-la__list[b-pg98q3zrne] { border-right: none; border-bottom: 1px solid var(--color-border); max-height: 40vh; }
    .tr-la__rail[b-pg98q3zrne] { max-height: none; }
}

/* ── Suggestion vote / remove controls ──────────────────────────────────── */
.tr-sugg__side[b-pg98q3zrne] { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.tr-vote[b-pg98q3zrne] { display: inline-flex; align-items: center; gap: 4px; }
.tr-vbtn[b-pg98q3zrne] {
    appearance: none; border: 1px solid var(--color-border); background: var(--color-surface);
    color: var(--color-text-secondary); border-radius: 6px; padding: 3px; cursor: pointer;
    display: grid; place-items: center; line-height: 0;
}
.tr-vbtn:hover[b-pg98q3zrne] { background: var(--color-surface-2); color: var(--color-text); }
.tr-vbtn.on[b-pg98q3zrne] { color: var(--color-accent); border-color: var(--color-accent); background: var(--color-accent-soft); }
.tr-vbtn--del:hover[b-pg98q3zrne] { color: var(--color-error-text); border-color: var(--color-error-text); background: transparent; }
.tr-vscore[b-pg98q3zrne] { font-size: 0.72rem; font-weight: 700; min-width: 16px; text-align: center; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.tr-vscore.pos[b-pg98q3zrne] { color: var(--color-valid); }
.tr-vscore.neg[b-pg98q3zrne] { color: var(--color-error-text); }
/* /Components/Shared/CodeViewer.razor.rz.scp.css */
.code-viewer-host[b-n9ykjeg9fc] {
    border: 1px solid var(--border, #2a2a35);
    border-radius: 6px;
    overflow: hidden;
    /* Default: fixed viewport-relative height with internal scrolling.
       Used by the side-by-side diff so both panes stay aligned. The
       single-file viewer overrides this via .code-viewer-host--fluid
       to grow with content and defer scrolling to the page. */
    height: 75vh;
    display: flex;
}

.code-viewer-host--fluid[b-n9ykjeg9fc] {
    height: auto;
    min-height: 240px;
    flex-direction: column;
}

[b-n9ykjeg9fc] .cm-editor {
    height: 100%;
    width: 100%;
}

.code-viewer-host--fluid[b-n9ykjeg9fc]  .cm-editor {
    height: auto;
}

[b-n9ykjeg9fc] .cm-scroller {
    overflow: auto;
}

.code-viewer-host--fluid[b-n9ykjeg9fc]  .cm-scroller {
    /* Page scrolls vertically; the scroller itself handles horizontal
       overflow for files with long lines. Without overflow-x: auto the
       host's overflow: hidden would clip long lines entirely.
       Per CSS spec, overflow-y: visible is implicitly auto when
       overflow-x is set — but since the fluid cm-editor has
       height: auto, vertical content fits its parent exactly, so no
       phantom vertical scrollbar appears. CodeMirror still
       virtualizes via the scroller's bounding rect intersected with
       the visible window, so long files only render lines near the
       viewport. */
    overflow-x: auto;
    overflow-y: visible;
}
/* /Components/Shared/StorageBar.razor.rz.scp.css */
.storage-bar[b-8rp66vn00a] {
    padding: 0.6rem 0.8rem 0.8rem;
    border-top: 1px solid var(--border-muted, rgba(0, 0, 0, 0.08));
    font-size: 0.78rem;
}

.storage-bar__label[b-8rp66vn00a] {
    display: flex;
    justify-content: space-between;
    color: var(--text-muted, #6b7280);
    margin-bottom: 0.3rem;
}

.storage-bar__value[b-8rp66vn00a] {
    font-variant-numeric: tabular-nums;
}

.storage-bar__track[b-8rp66vn00a] {
    height: 4px;
    background: var(--border-muted, rgba(0, 0, 0, 0.1));
    border-radius: 2px;
    overflow: hidden;
}

.storage-bar__fill[b-8rp66vn00a] {
    height: 100%;
    background: var(--accent, #0ea5e9);
    transition: width 0.2s ease;
}

.storage-bar--warn .storage-bar__fill[b-8rp66vn00a] {
    background: #f59e0b;
}

.storage-bar--over .storage-bar__fill[b-8rp66vn00a] {
    background: #ef4444;
}

.storage-bar--over .storage-bar__value[b-8rp66vn00a] {
    color: #ef4444;
    font-weight: 600;
}