/* /Components/AuthModal.razor.rz.scp.css */
.nd-auth-modal-inner[b-mxvilpjj8x] {
    max-height: calc(100vh - 36px);
    overflow: auto;
    padding: 28px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.nd-auth-modal-inner.is-loading[b-mxvilpjj8x] {
    pointer-events: none;
    opacity: .5;
}

.nd-auth-input[b-mxvilpjj8x] {
    width: 100%;
    height: 44px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-sunken);
    padding: 0 14px;
    outline: none;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 450;
    color: var(--text-primary);
    box-shadow: var(--shadow-inset);
    transition: border-color var(--dur-base) var(--ease-quart),
                box-shadow var(--dur-base) var(--ease-quart);
}

.nd-auth-input[b-mxvilpjj8x]::placeholder { color: var(--text-muted); }

.nd-auth-input:focus[b-mxvilpjj8x] {
    border-color: var(--accent);
    box-shadow: var(--shadow-inset), 0 0 0 3px var(--accent-soft);
}

.nd-auth-actions[b-mxvilpjj8x] {
    display: flex;
    justify-content: stretch;
    padding-top: 4px;
}

.nd-auth-btn[b-mxvilpjj8x] {
    width: 100%;
    height: 44px;
    border-radius: var(--radius-md);
    border: 0;
    cursor: pointer;
    color: var(--accent-ink);
    font-weight: 600;
    font-size: 14px;
    background: var(--accent);
    transition: background var(--dur-fast) var(--ease-quart),
                transform var(--dur-fast) var(--ease-quart);
}

.nd-auth-btn:hover[b-mxvilpjj8x] { background: var(--accent-hover); transform: translateY(-1px); }
.nd-auth-btn:active[b-mxvilpjj8x] { background: var(--accent-pressed); transform: translateY(0); }
.nd-auth-btn:disabled[b-mxvilpjj8x] { opacity: .5; cursor: not-allowed; transform: none; }

.nd-auth-error[b-mxvilpjj8x] {
    margin-top: 14px;
    border-radius: var(--radius-md);
    padding: 11px 13px 11px 36px;
    position: relative;
    font-weight: 500;
    font-size: 13px;
    color: var(--text-primary);
    background: var(--danger-soft);
    border: 1px solid color-mix(in srgb, var(--danger) 32%, transparent);
}
.nd-auth-error[b-mxvilpjj8x]::before {
    content: "!";
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--danger);
    color: var(--accent-ink);
    font-size: 12px;
    font-weight: 800;
}

.nd-auth-loading-overlay[b-mxvilpjj8x] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(8, 9, 11, .72);
    z-index: 3;
    border-radius: inherit;
}

.nd-spinner[b-mxvilpjj8x] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid var(--border-strong);
    border-top-color: var(--accent);
    animation: nd-spin .8s linear infinite;
}
/* /Components/GreetingsTab.razor.rz.scp.css */
/* ============================================================
   GreetingsTab — Operator Slate design system
   Selectors: gt-toolbar, gt-stat, gt-warn, gt-list,
              gt-row, gt-row.is-off, gt-text, gt-actions
   Modal/form uses global nd-modal-overlay / nd-modal / nd-form.
   ============================================================ */

/* ---- Toolbar (platform selector + stat + warn) ----------------- */
.gt-toolbar[b-dw6p3lv7em] {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* The nd-select inside toolbar inherits max-width from context;
   constrain it so it doesn't stretch to full-width alone */
.gt-toolbar .nd-select-wrap[b-dw6p3lv7em] {
    max-width: 240px;
    flex: 1 1 180px;
}

/* Active count readout — secondary text, mono numerics */
.gt-stat[b-dw6p3lv7em] {
    color: var(--text-secondary);
    font-weight: 450;
    font-size: 13px;
    white-space: nowrap;
}

.gt-stat b[b-dw6p3lv7em] {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text-primary);
}

/* Warning pill — warning semantic, not accent */
.gt-warn[b-dw6p3lv7em] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    border: 1px solid color-mix(in srgb, var(--warning) 32%, transparent);
    background: var(--warning-soft);
    color: var(--warning);
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
    transition: opacity var(--dur-fast) var(--ease-quart);
}

/* ---- Phrase list ----------------------------------------------- */
.gt-list[b-dw6p3lv7em] {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: nd-fade-up var(--dur-reveal) var(--ease-quart) both;
}

/* Individual phrase row */
.gt-row[b-dw6p3lv7em] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-sunken);
    padding: 11px 14px;
    transition: border-color var(--dur-fast) var(--ease-quart),
                background var(--dur-fast) var(--ease-quart);
    box-shadow: var(--shadow-inset);
}

.gt-row:hover[b-dw6p3lv7em] {
    border-color: var(--border-strong);
    background: var(--surface-raised);
}

/* is-off: dimmed — toggle is off → muted appearance */
.gt-row.is-off[b-dw6p3lv7em] {
    opacity: .45;
}

.gt-row.is-off:hover[b-dw6p3lv7em] {
    opacity: .7;
}

/* Phrase text */
.gt-text[b-dw6p3lv7em] {
    color: var(--text-primary);
    font-weight: 450;
    font-size: 13px;
    line-height: 1.55;
    overflow-wrap: anywhere;
    flex: 1;
    min-width: 0;
}

/* Actions cluster (toggle / edit / delete icon buttons) */
.gt-actions[b-dw6p3lv7em] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    /* Show subtly at rest; full opacity on row hover */
    opacity: .75;
    transition: opacity var(--dur-fast) var(--ease-quart);
}

.gt-row:hover .gt-actions[b-dw6p3lv7em] {
    opacity: 1;
}

/* ---- Copy-from-platform row ------------------------------------ */
.gt-copyfrom[b-dw6p3lv7em] {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-sunken);
}

.gt-copyfrom-label[b-dw6p3lv7em] {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .03em;
    white-space: nowrap;
}

.gt-copyfrom .nd-select-wrap[b-dw6p3lv7em] {
    max-width: 220px;
    flex: 1 1 160px;
}

.gt-copyfrom-hint[b-dw6p3lv7em] {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.gt-copyfrom-hint b[b-dw6p3lv7em] {
    color: var(--text-secondary);
    font-weight: 600;
}

/* ---- Responsive ------------------------------------------------- */
@media (max-width: 760px) {
    .gt-toolbar .nd-select-wrap[b-dw6p3lv7em] {
        max-width: 100%;
        flex: 1 1 100%;
    }

    .gt-copyfrom[b-dw6p3lv7em] { align-items: stretch; }
    .gt-copyfrom .nd-select-wrap[b-dw6p3lv7em] { max-width: 100%; flex: 1 1 100%; }
    .gt-copyfrom .nd-btn-ghost[b-dw6p3lv7em] { justify-content: center; }
    .gt-copyfrom-hint[b-dw6p3lv7em] { white-space: normal; }

    .gt-row[b-dw6p3lv7em] {
        flex-direction: column;
        align-items: stretch;
    }

    .gt-actions[b-dw6p3lv7em] {
        justify-content: flex-end;
        opacity: 1;
    }
}
/* /Components/Layout/AuthorizedLayout.razor.rz.scp.css */
/* ===== App shell: left rail (>=980px) -> top bar + drawer (<980px) ===== */

.nd-shell[b-vjp59gwetx] {
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr);
    min-height: 100vh;
}

/* ---- Top bar (mobile only) -------------------------------------------- */
.nd-topbar[b-vjp59gwetx] {
    display: none;
    align-items: center;
    gap: 14px;
    height: 56px;
    padding: 0 16px;
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--bg-sunken);
    border-bottom: 1px solid var(--border-subtle);
    grid-column: 1 / -1;
}
.nd-topbar .nd-brand[b-vjp59gwetx] { gap: 9px; }
.nd-topbar-menu[b-vjp59gwetx] {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    align-content: center;
    gap: 4px;
    padding: 0 9px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--surface-raised);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-quart);
}
.nd-topbar-menu:hover[b-vjp59gwetx] { background: var(--surface-hover); }
.nd-topbar-menu span[b-vjp59gwetx] {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--text-secondary);
    border-radius: var(--radius-pill);
}
.nd-topbar-context[b-vjp59gwetx] {
    margin-left: auto;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* ---- Scrim (mobile drawer backdrop) ----------------------------------- */
.nd-shell-scrim[b-vjp59gwetx] {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(8, 9, 11, .6);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-quart);
}

/* ---- Rail ------------------------------------------------------------- */
.nd-rail[b-vjp59gwetx] {
    grid-row: 1 / -1;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 14px;
    background: var(--bg-sunken);
    border-right: 1px solid var(--border-subtle);
    overflow-y: auto;
}

.nd-rail-brand[b-vjp59gwetx] { padding: 4px 8px 0; margin-bottom: 6px; }

.nd-rail-user[b-vjp59gwetx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    margin-bottom: 8px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border-subtle);
}
.nd-rail-user-dot[b-vjp59gwetx] {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: var(--radius-pill);
    background: var(--success);
}
.nd-rail-user-text[b-vjp59gwetx] { display: grid; gap: 1px; min-width: 0; }
.nd-rail-user-role[b-vjp59gwetx] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.nd-rail-user-name[b-vjp59gwetx] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nd-rail-nav[b-vjp59gwetx] { display: grid; gap: 4px; }

.nd-rail-link[b-vjp59gwetx] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 42px;
    padding: 0 12px 0 16px;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-align: left;
    transition: background var(--dur-base) var(--ease-quart),
                color var(--dur-base) var(--ease-quart);
}
.nd-rail-link i[b-vjp59gwetx] {
    width: 18px;
    text-align: center;
    color: var(--text-muted);
    font-size: 15px;
    transition: color var(--dur-base) var(--ease-quart);
}
.nd-rail-link:hover[b-vjp59gwetx] { background: var(--surface-hover); color: var(--text-primary); }
.nd-rail-link:hover i[b-vjp59gwetx] { color: var(--text-secondary); }

.nd-rail-link.is-active[b-vjp59gwetx] {
    background: var(--surface-hover);
    color: var(--text-primary);
}
.nd-rail-link.is-active i[b-vjp59gwetx] { color: var(--accent); }
.nd-rail-link.is-active[b-vjp59gwetx]::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    border-radius: var(--radius-pill);
    background: var(--accent);
}

.nd-rail-logout[b-vjp59gwetx] { margin-top: auto; padding-top: 12px; }
.nd-rail-link-ghost[b-vjp59gwetx] { color: var(--text-muted); }
.nd-rail-link-ghost i[b-vjp59gwetx] { color: var(--text-muted); }
.nd-rail-link-ghost:hover[b-vjp59gwetx] { color: var(--danger); background: var(--danger-soft); }
.nd-rail-link-ghost:hover i[b-vjp59gwetx] { color: var(--danger); }

/* ---- Main content ----------------------------------------------------- */
.nd-shell-main[b-vjp59gwetx] {
    min-width: 0;
    grid-column: 2;
    grid-row: 1 / -1;
}
.nd-shell-inner[b-vjp59gwetx] {
    max-width: 1760px;
    margin: 0 auto;
    padding: 28px 40px 56px;
}

/* ---- Mobile: rail becomes a slide-in drawer --------------------------- */
@media (max-width: 980px) {
    /* Drop the grid entirely so the sticky top bar and the content can't
       fight over grid rows (the desktop main spans grid-row:1/-1). */
    .nd-shell[b-vjp59gwetx] {
        display: block;
    }
    .nd-topbar[b-vjp59gwetx] { display: flex; }
    .nd-shell-scrim[b-vjp59gwetx] { display: block; }

    .nd-rail[b-vjp59gwetx] {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 50;
        width: 274px;
        max-width: 86vw;
        height: 100vh;
        border-right: 1px solid var(--border-strong);
        box-shadow: var(--shadow-overlay);
        transform: translateX(-101%);
        transition: transform var(--dur-reveal) var(--ease-expo);
    }
    .nd-rail-brand[b-vjp59gwetx] { display: flex; }

    .nd-shell.drawer-open .nd-rail[b-vjp59gwetx] { transform: none; }
    .nd-shell.drawer-open .nd-shell-scrim[b-vjp59gwetx] { opacity: 1; pointer-events: auto; }

    .nd-shell-main[b-vjp59gwetx] { grid-column: auto; grid-row: auto; }
    .nd-shell-inner[b-vjp59gwetx] { padding: 20px 16px 48px; }
}

@media (min-width: 981px) {
    .nd-rail-brand[b-vjp59gwetx] { display: flex; }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-atd7moj4wa],
.components-reconnect-repeated-attempt-visible[b-atd7moj4wa],
.components-reconnect-failed-visible[b-atd7moj4wa],
.components-pause-visible[b-atd7moj4wa],
.components-resume-failed-visible[b-atd7moj4wa],
.components-rejoining-animation[b-atd7moj4wa] {
    display: none;
}

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


#components-reconnect-modal[b-atd7moj4wa] {
    background-color: #161922;
    color: #E6E8EE;
    width: 21rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid #3C4354;
    border-radius: 18px;
    box-shadow: 0 24px 64px -16px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-atd7moj4wa 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-atd7moj4wa 0.6s cubic-bezier(.16,1,.3,1) 0.1s, components-reconnect-modal-fadeInOpacity-b-atd7moj4wa 0.4s ease-out 0.1s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-atd7moj4wa]::backdrop {
    background-color: rgba(8, 9, 11, 0.66);
    animation: components-reconnect-modal-fadeInOpacity-b-atd7moj4wa 0.4s ease-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-atd7moj4wa {
    0% {
        transform: translateY(16px) scale(0.985);
    }

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

#components-reconnect-modal p[b-atd7moj4wa] {
    margin: 0;
    text-align: center;
    font-size: 14px;
    color: #A7ADBE;
}

#components-reconnect-modal button[b-atd7moj4wa] {
    border: 0;
    background-color: #E8B341;
    color: #15171F;
    font-weight: 600;
    padding: 9px 22px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 140ms cubic-bezier(.25,1,.5,1);
}

    #components-reconnect-modal button:hover[b-atd7moj4wa] {
        background-color: #F4C45A;
    }

    #components-reconnect-modal button:active[b-atd7moj4wa] {
        background-color: #D49E2C;
    }

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

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
.nd-admin-hero[b-73uo9s73be] {
    min-height: calc(100vh - 96px);
    display: grid;
    place-items: center;
    padding: 24px 0 48px;
}

.nd-admin-welcome[b-73uo9s73be] {
    width: min(440px, 100%);
    border-radius: var(--radius-xl);
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    padding: 36px 32px;
    text-align: center;
    animation: nd-pop-in var(--dur-reveal) var(--ease-expo) both;
}

.nd-admin-kicker[b-73uo9s73be] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    padding: 5px 12px;
    border-radius: var(--radius-pill);
}

.nd-admin-title[b-73uo9s73be] {
    margin-top: 18px;
    font-weight: 680;
    font-size: 28px;
    letter-spacing: -.02em;
    color: var(--text-primary);
}

.nd-admin-sub[b-73uo9s73be] {
    margin-top: 8px;
    font-weight: 450;
    font-size: 14px;
    color: var(--text-muted);
}

.nd-admin-enter[b-73uo9s73be] {
    margin-top: 28px;
    height: 46px;
    width: 100%;
    border-radius: var(--radius-md);
    border: 0;
    cursor: pointer;
    color: var(--accent-ink);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .04em;
    background: var(--accent);
    transition: background var(--dur-fast) var(--ease-quart),
                transform var(--dur-fast) var(--ease-quart);
}

.nd-admin-enter:hover[b-73uo9s73be] { background: var(--accent-hover); transform: translateY(-1px); }
.nd-admin-enter:active[b-73uo9s73be] { background: var(--accent-pressed); transform: translateY(0); }
/* /Components/Pages/Manager/Activity.razor.rz.scp.css */
/* ============================================================
   Activity — Operator Slate design system
   Scoped stylesheet for Pages/Manager/Activity.razor
   All selectors from the original file are preserved.
   ============================================================ */

/* ---- Top toolbar -------------------------------------------------- */
.nd-activity-top[b-uhh964vli3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.nd-activity-right[b-uhh964vli3] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---- Search field ------------------------------------------------- */
.nd-search[b-uhh964vli3] {
    position: relative;
    flex: 1;
    max-width: 480px;
    min-width: 200px;
}

.nd-search i[b-uhh964vli3] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 13px;
    pointer-events: none;
}

.nd-search-input[b-uhh964vli3] {
    width: 100%;
    height: 40px;
    border-radius: var(--radius-md);
    padding: 0 38px 0 36px;
    background: var(--bg-sunken);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-weight: 450;
    font-size: 13px;
    outline: none;
    box-shadow: var(--shadow-inset);
    transition: border-color var(--dur-base) var(--ease-quart),
                box-shadow var(--dur-base) var(--ease-quart);
}

.nd-search-input[b-uhh964vli3]::placeholder {
    color: var(--text-muted);
    font-weight: 450;
}

.nd-search-input:focus[b-uhh964vli3] {
    border-color: var(--accent);
    box-shadow: var(--shadow-inset), 0 0 0 3px var(--accent-soft);
}

.nd-search-clear[b-uhh964vli3] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
    background: var(--surface-raised);
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    transition: background var(--dur-fast) var(--ease-quart),
                color var(--dur-fast) var(--ease-quart),
                border-color var(--dur-fast) var(--ease-quart);
}

.nd-search-clear:hover[b-uhh964vli3] {
    background: var(--surface-hover);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

/* ---- Total count hint --------------------------------------------- */
/* .nd-help reused from global as a neutral count chip (drop the "i" badge) */
.nd-activity-right .nd-help[b-uhh964vli3] {
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text-secondary);
    background: var(--surface-raised);
    border-color: var(--border-subtle);
}
.nd-activity-right .nd-help[b-uhh964vli3]::before { content: none; display: none; }

/* ---- Mobile cards: preserve every value, wrap instead of clipping -- */
.nd-cards .nd-mini-value[b-uhh964vli3] {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: 64%;
    overflow-wrap: anywhere;
}
.nd-cards .nd-mini-value .nd-adurl[b-uhh964vli3] { color: var(--text-muted); font-family: var(--font-mono); text-decoration: none; }
.nd-cards .nd-mini-value .nd-adurl:hover[b-uhh964vli3] { color: var(--accent); }
.nd-cards .nd-mini-value.nd-err[b-uhh964vli3] { color: var(--danger); font-family: var(--font-mono); }

/* ---- Table wrapper ------------------------------------------------ */
/* Overrides the global .nd-table-wrap to remove old-style rounding/bg */
.nd-table-wrap[b-uhh964vli3] {
    width: 100%;
    overflow-x: auto;
    margin-top: 0;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    background: transparent;
}

/* ---- Table -------------------------------------------------------- */
/* Tighter rows: override global .nd-table for this page */
.nd-table[b-uhh964vli3] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 4px;
    min-width: 900px;
}

.nd-table thead th[b-uhh964vli3] {
    text-align: left;
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    padding: 8px 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--border-subtle);
}

.nd-table tbody td[b-uhh964vli3] {
    padding: 10px 12px;
    color: var(--text-primary);
    font-weight: 450;
    font-size: 13px;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
    background: var(--bg-sunken);
    transition: background var(--dur-fast) var(--ease-quart);
}

.nd-table tbody tr td:first-child[b-uhh964vli3] {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    border-left: 1px solid var(--border-subtle);
}

.nd-table tbody tr td:last-child[b-uhh964vli3] {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    border-right: 1px solid var(--border-subtle);
}

.nd-table tbody tr:hover td[b-uhh964vli3] {
    background: var(--surface-hover);
}

/* ---- Time column -------------------------------------------------- */
.nd-th-time[b-uhh964vli3] {
    width: 136px;
    text-align: right;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--text-muted);
}

/* ---- Ad cell ------------------------------------------------------ */
.nd-adcell[b-uhh964vli3] {
    min-width: 0;
}

.nd-adcell .nd-adtitle[b-uhh964vli3] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
}

.nd-adcell .nd-adurl[b-uhh964vli3] {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 12px;
    font-family: var(--font-mono);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-quart);
}

.nd-adcell .nd-adurl:hover[b-uhh964vli3] {
    color: var(--accent);
}

/* ---- Error text in failed row ------------------------------------- */
.nd-err[b-uhh964vli3] {
    margin-top: 4px;
    color: var(--danger);
    font-size: 11px;
    font-weight: 450;
    font-family: var(--font-mono);
    opacity: .85;
}

/* ---- Status badge (nd-status family) ------------------------------ */
/* icon + label + semantic color. All three modifiers must be present. */
.nd-status[b-uhh964vli3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--surface-raised);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
}

.nd-status i[b-uhh964vli3] {
    font-size: 10px;
}

.nd-status--sent[b-uhh964vli3] {
    color: var(--success);
    background: var(--success-soft);
    border-color: color-mix(in srgb, var(--success) 30%, transparent);
}

.nd-status--failed[b-uhh964vli3] {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}

/* Failed rows: full 1px border + ~6% wash per spec */
.nd-table tbody tr:has(.nd-status--failed) td[b-uhh964vli3] {
    background: color-mix(in srgb, var(--danger) 5%, var(--bg-sunken));
    border-color: color-mix(in srgb, var(--danger) 18%, var(--border-subtle));
}

.nd-table tbody tr:has(.nd-status--failed):hover td[b-uhh964vli3] {
    background: color-mix(in srgb, var(--danger) 8%, var(--surface-hover));
}

.nd-status--pending[b-uhh964vli3] {
    color: var(--warning);
    background: var(--warning-soft);
    border-color: color-mix(in srgb, var(--warning) 30%, transparent);
}

/* ---- Generic pill (Project column) -------------------------------- */
.nd-pill[b-uhh964vli3] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    background: var(--surface-raised);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    white-space: nowrap;
}

/* ---- Action column ------------------------------------------------ */
.nd-th-actions[b-uhh964vli3] {
    width: 52px;
    text-align: right;
}

.nd-td-actions[b-uhh964vli3] {
    text-align: right;
    white-space: nowrap;
    width: 52px;
}

/* ---- Delete icon button ------------------------------------------ */
.nd-icon-danger[b-uhh964vli3] {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--danger) 32%, transparent);
    background: var(--danger-soft);
    color: var(--danger);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: background var(--dur-fast) var(--ease-quart),
                border-color var(--dur-fast) var(--ease-quart),
                transform var(--dur-fast) var(--ease-quart);
}

.nd-icon-danger:hover[b-uhh964vli3] {
    background: color-mix(in srgb, var(--danger) 20%, transparent);
    border-color: color-mix(in srgb, var(--danger) 55%, transparent);
    transform: translateY(-1px);
}

.nd-icon-danger:disabled[b-uhh964vli3],
.nd-icon-danger[disabled][b-uhh964vli3] {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}

/* ---- Badge (count, inline generic) -------------------------------- */
/* Used in pager for current page pill */
.nd-badge[b-uhh964vli3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 0 7px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 11px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--accent-ink);
    background: var(--accent);
    white-space: nowrap;
}

/* The old .nd-badge.ok/.bad/.wait variants — map to semantic tokens */
.nd-badge.ok[b-uhh964vli3] {
    color: var(--success);
    background: var(--success-soft);
    border: 1px solid color-mix(in srgb, var(--success) 28%, transparent);
}

.nd-badge.bad[b-uhh964vli3] {
    color: var(--danger);
    background: var(--danger-soft);
    border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
}

.nd-badge.wait[b-uhh964vli3] {
    color: var(--warning);
    background: var(--warning-soft);
    border: 1px solid color-mix(in srgb, var(--warning) 28%, transparent);
}

/* ---- Pager -------------------------------------------------------- */
/* Supplement the global .nd-pager: tighten margin for dense pages */
.nd-pager[b-uhh964vli3] {
    margin-top: 12px;
}

.nd-pager-mid[b-uhh964vli3] {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
}

/* ---- Page-size select --------------------------------------------- */
/* Supplement global .nd-select for the inline page-size picker */
.nd-pager-mid .nd-select[b-uhh964vli3] {
    height: 32px;
    padding: 0 28px 0 10px;
    font-size: 12px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* ---- Tabs offset -------------------------------------------------- */
.nd-tabs-tight[b-uhh964vli3] {
    margin-top: 10px;
    margin-bottom: 12px;
}

/* ---- Danger button variant (retained for backwards compat) -------- */
/* .nd-btn-danger: used if markup ever uses it; ghost-danger style */
.nd-btn-danger[b-uhh964vli3] {
    background: var(--danger-soft);
    border: 1px solid color-mix(in srgb, var(--danger) 32%, transparent);
    color: var(--danger);
    border-radius: var(--radius-md);
    height: 38px;
    padding: 0 14px;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-quart),
                border-color var(--dur-fast) var(--ease-quart);
}

.nd-btn-danger:hover[b-uhh964vli3] {
    background: color-mix(in srgb, var(--danger) 16%, transparent);
    border-color: color-mix(in srgb, var(--danger) 55%, transparent);
}

/* ---- Channel filter row ------------------------------------------- */
.nd-channel-filter[b-uhh964vli3] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

/* Slightly smaller than the main tabs to read as a secondary control */
.nd-channel-filter .nd-tab[b-uhh964vli3] {
    padding: 5px 11px;
    font-size: 12px;
    height: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ---- Channel badge (nd-ch-badge family) --------------------------- */
/* Distinct from nd-status: no icon+label status semantics, informational only */
.nd-ch-badge[b-uhh964vli3] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    font-family: var(--font-sans);
}

.nd-ch-badge i[b-uhh964vli3] {
    font-size: 9px;
}

/* SMTP = info tint (sky blue — neutral informational, not a status) */
.nd-ch-badge--smtp[b-uhh964vli3] {
    color: var(--info);
    background: var(--info-soft);
    border: 1px solid color-mix(in srgb, var(--info) 25%, transparent);
}

/* Telegram = a slightly different info tint to be distinct from SMTP */
.nd-ch-badge--tg[b-uhh964vli3] {
    color: color-mix(in srgb, var(--info) 85%, var(--success));
    background: color-mix(in srgb, var(--info-soft) 70%, var(--success-soft));
    border: 1px solid color-mix(in srgb, var(--info) 20%, color-mix(in srgb, var(--success) 15%, transparent));
}

/* ---- Responsive --------------------------------------------------- */
@media (max-width: 980px) {
    .nd-activity-top[b-uhh964vli3] {
        flex-direction: column;
        align-items: stretch;
    }

    .nd-activity-right[b-uhh964vli3] {
        justify-content: flex-end;
    }

    .nd-search[b-uhh964vli3] {
        max-width: 100%;
    }

    .nd-table[b-uhh964vli3] {
        min-width: 860px;
    }
}

@media (max-width: 860px) {
    .nd-table-wrap[b-uhh964vli3] {
        display: none;
    }
}

@media (max-width: 740px) {
    .nd-activity-right[b-uhh964vli3] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Pages/Manager/Dashboard.razor.rz.scp.css */
/* ============================================================================
   Manager / Dashboard — Operator Slate
   Range/channel-scoped analytics: filter bar, DB-reconcile line, KPI grid with
   per-channel split, Sent→Replied funnel, failure breakdown, per-project table,
   account health. Tokens from global app.css :root. Status = semantic;
   accent = controls only. Flat at rest, hairline borders, no glow/glass.
   ========================================================================== */

.nd-dash[b-7ajyzu28hd] { margin-top: 10px; }

/* ---- Filter bar -------------------------------------------------------- */
.nd-filterbar[b-7ajyzu28hd] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-sm);
    align-items: center;
    margin: var(--sp-sm) 0 var(--sp-sm);
}

.nd-filterbar-end[b-7ajyzu28hd] {
    display: flex;
    gap: var(--sp-sm);
    align-items: center;
    margin-left: auto;
    flex-wrap: wrap;
}

/* ---- Segmented controls (control → accent on selection) --------------- */
.nd-seg[b-7ajyzu28hd] {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--radius-md);
    background: var(--bg-sunken);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-inset);
}

.nd-seg-btn[b-7ajyzu28hd] {
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    padding: 7px 13px;
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-quart),
                color var(--dur-fast) var(--ease-quart),
                border-color var(--dur-fast) var(--ease-quart);
}
.nd-seg-btn i[b-7ajyzu28hd] {
    color: var(--text-muted);
    width: 15px;
    text-align: center;
    transition: color var(--dur-fast) var(--ease-quart);
}
.nd-seg-btn:hover[b-7ajyzu28hd] { color: var(--text-secondary); }
.nd-seg-btn:hover i[b-7ajyzu28hd] { color: var(--text-secondary); }
.nd-seg-btn.is-active[b-7ajyzu28hd] {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 38%, transparent);
    color: var(--accent);
}
.nd-seg-btn.is-active i[b-7ajyzu28hd] { color: var(--accent); }

/* ---- Meta pills (not controls) ---------------------------------------- */
.nd-pill[b-7ajyzu28hd] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
    background: var(--surface-raised);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}
.nd-pill i[b-7ajyzu28hd] { color: var(--text-muted); font-size: 12px; }
.nd-pill span[b-7ajyzu28hd] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.nd-pill-soft[b-7ajyzu28hd] { background: var(--surface-raised); border-color: var(--border-subtle); }

/* ---- DB reconciliation line ------------------------------------------- */
.nd-reconcile[b-7ajyzu28hd] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 var(--sp-sm);
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-sunken);
    box-shadow: var(--shadow-inset);
    font-size: 12px;
}
.nd-reconcile i[b-7ajyzu28hd] { color: var(--text-muted); font-size: 12px; }
.nd-reconcile .nd-dim[b-7ajyzu28hd] {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.nd-reconcile-num[b-7ajyzu28hd] {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    letter-spacing: -.01em;
}

.nd-dim[b-7ajyzu28hd] { color: var(--text-muted); font-weight: 450; }
.nd-mono[b-7ajyzu28hd] {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.nd-trim[b-7ajyzu28hd] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.nd-card-top-tight[b-7ajyzu28hd] { padding-bottom: 0; }

/* ---- KPI grid ---------------------------------------------------------- */
.nd-kpis[b-7ajyzu28hd] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-sm);
    margin-top: 16px;
}
.nd-kpis-3[b-7ajyzu28hd] { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }

.nd-kpi[b-7ajyzu28hd] {
    border-radius: var(--radius-lg);
    background: var(--bg-sunken);
    border: 1px solid var(--border-subtle);
    padding: 16px;
    transition: border-color var(--dur-fast) var(--ease-quart);
}

.nd-kpi-top[b-7ajyzu28hd] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.nd-kpi-ico[b-7ajyzu28hd] {
    width: 32px; height: 32px;
    border-radius: var(--radius-md);
    display: grid; place-items: center;
    background: var(--surface-raised);
    color: var(--text-secondary);
    flex: 0 0 auto;
    font-size: 13px;
}
.nd-kpi-ico.ok[b-7ajyzu28hd]   { background: var(--success-soft); color: var(--success); }
.nd-kpi-ico.warn[b-7ajyzu28hd] { background: var(--danger-soft);  color: var(--danger); }
.nd-kpi-ico.pend[b-7ajyzu28hd] { background: var(--warning-soft); color: var(--warning); }
.nd-kpi-ico.info[b-7ajyzu28hd] { background: var(--info-soft);    color: var(--info); }

.nd-kpi-label[b-7ajyzu28hd] {
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.nd-kpi-val[b-7ajyzu28hd] {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 26px;
    letter-spacing: -.01em;
    color: var(--text-primary);
}
.nd-kpi-val.ok[b-7ajyzu28hd]   { color: var(--success); }
.nd-kpi-val.warn[b-7ajyzu28hd] { color: var(--danger); }
.nd-kpi-val.pend[b-7ajyzu28hd] { color: var(--warning); }
.nd-kpi-val.info[b-7ajyzu28hd] { color: var(--info); }

.nd-kpi-split[b-7ajyzu28hd] {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 450;
    color: var(--text-secondary);
}
.nd-kpi-split .nd-mono[b-7ajyzu28hd] {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}
.nd-kpi-split .nd-dim[b-7ajyzu28hd] { color: var(--text-muted); }

/* ---- Two-up card grid -------------------------------------------------- */
.nd-grid2[b-7ajyzu28hd] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-md);
}

/* ---- Funnel ------------------------------------------------------------ */
.nd-funnel[b-7ajyzu28hd] { display: grid; gap: 12px; }
.nd-funnel-step[b-7ajyzu28hd] { display: grid; gap: 6px; }
.nd-funnel-bar[b-7ajyzu28hd] {
    height: 10px;
    border-radius: var(--radius-pill);
    background: var(--text-muted);
    min-width: 3px;
    transition: width var(--dur-reveal) var(--ease-expo);
}
.nd-funnel-bar.ok[b-7ajyzu28hd]     { background: var(--success); }
.nd-funnel-bar.info[b-7ajyzu28hd]   { background: var(--info); }
.nd-funnel-bar.danger[b-7ajyzu28hd] { background: var(--danger); }

.nd-funnel-meta[b-7ajyzu28hd] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.nd-funnel-name[b-7ajyzu28hd] {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.nd-funnel-meta .nd-mono[b-7ajyzu28hd] {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.nd-funnel-meta .nd-dim[b-7ajyzu28hd] { color: var(--text-muted); font-weight: 450; }

.nd-note[b-7ajyzu28hd] {
    margin-top: 16px;
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--info) 30%, var(--border-subtle));
    background: var(--info-soft);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 450;
    line-height: 1.5;
}
.nd-note i[b-7ajyzu28hd] { color: var(--info); margin-top: 2px; }

/* ---- Failure breakdown ------------------------------------------------- */
.nd-faillist[b-7ajyzu28hd] { display: grid; gap: 6px; }
.nd-fail-row[b-7ajyzu28hd] {
    position: relative;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-sunken);
    overflow: hidden;
}
.nd-fail-bar[b-7ajyzu28hd] {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--danger-soft);
    border-right: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
    transition: width var(--dur-reveal) var(--ease-expo);
}
.nd-fail-text[b-7ajyzu28hd] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
}
.nd-fail-text .nd-trim[b-7ajyzu28hd] {
    font-size: 12px;
    font-weight: 450;
    color: var(--text-primary);
}
.nd-fail-text .nd-mono[b-7ajyzu28hd] {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 600;
    color: var(--danger);
    flex: 0 0 auto;
}

/* ---- Data table (dense) ------------------------------------------------ */
.nd-table[b-7ajyzu28hd] {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-sunken);
    overflow: hidden;
}

.nd-table-head[b-7ajyzu28hd],
.nd-table-row[b-7ajyzu28hd] {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) repeat(6, minmax(0, .8fr));
    gap: var(--sp-sm);
    align-items: center;
    padding: 0 16px;
}
.nd-table-proj .nd-table-head[b-7ajyzu28hd],
.nd-table-proj .nd-table-row[b-7ajyzu28hd] {
    grid-template-columns: minmax(0, 1.8fr) repeat(6, minmax(0, .8fr));
}

.nd-table-head[b-7ajyzu28hd] {
    min-height: 36px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border-subtle);
}
.nd-table-head > div:not(:first-child)[b-7ajyzu28hd],
.nd-table-row > div:not(:first-child)[b-7ajyzu28hd] {
    text-align: right;
    justify-self: end;
}

.nd-table-row[b-7ajyzu28hd] {
    min-height: 40px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 450;
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--dur-fast) var(--ease-quart);
}
.nd-table-row:hover[b-7ajyzu28hd] { background: var(--surface-hover); }
.nd-table-row:last-child[b-7ajyzu28hd] { border-bottom: 0; }
.nd-table-row .nd-mono[b-7ajyzu28hd] {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.nd-table-row .nd-mono.ok[b-7ajyzu28hd]   { color: var(--success); }
.nd-table-row .nd-mono.warn[b-7ajyzu28hd] { color: var(--danger); }
.nd-table-row .nd-mono.info[b-7ajyzu28hd] { color: var(--info); }

/* Critical row: full 1px border + soft wash, no thick side stripe */
.nd-table-row.is-critical[b-7ajyzu28hd] {
    background: color-mix(in srgb, var(--danger) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 32%, transparent);
}

/* ---- Responsive: 980 (shell) / 860 (table → stacked cards) ------------ */
@media (max-width: 980px) {
    .nd-kpis[b-7ajyzu28hd],
    .nd-kpis-3[b-7ajyzu28hd] { grid-template-columns: 1fr 1fr; }
    .nd-grid2[b-7ajyzu28hd] { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .nd-kpis[b-7ajyzu28hd],
    .nd-kpis-3[b-7ajyzu28hd] { grid-template-columns: 1fr; }

    .nd-filterbar[b-7ajyzu28hd] { gap: 8px; }
    .nd-filterbar-end[b-7ajyzu28hd] { margin-left: 0; width: 100%; }

    /* Wide grid table → stacked label/value cards, no hidden columns */
    .nd-table[b-7ajyzu28hd] { border: 0; background: transparent; overflow: visible; }
    .nd-table .nd-table-head[b-7ajyzu28hd] { display: none; }
    .nd-table .nd-table-row[b-7ajyzu28hd] {
        grid-template-columns: 1fr !important;
        gap: 0;
        padding: 12px 14px;
        min-height: 0;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        background: var(--bg-sunken);
        margin-bottom: 8px;
    }
    .nd-table .nd-table-row:last-child[b-7ajyzu28hd] { margin-bottom: 0; border-bottom: 1px solid var(--border-subtle); }
    .nd-table .nd-table-row > div[b-7ajyzu28hd] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 5px 0;
        text-align: right;
        justify-self: stretch;
    }
    .nd-table .nd-table-row > div:first-child[b-7ajyzu28hd] {
        font-weight: 600;
        color: var(--text-primary);
        border-bottom: 1px solid var(--border-subtle);
        padding-bottom: 8px;
        margin-bottom: 4px;
    }
    /* Restore semantic label for each stacked cell */
    .nd-table-proj .nd-table-row > div:nth-child(2)[b-7ajyzu28hd]::before { content: "Total"; }
    .nd-table-proj .nd-table-row > div:nth-child(3)[b-7ajyzu28hd]::before { content: "Sent"; }
    .nd-table-proj .nd-table-row > div:nth-child(4)[b-7ajyzu28hd]::before { content: "Failed"; }
    .nd-table-proj .nd-table-row > div:nth-child(5)[b-7ajyzu28hd]::before { content: "Fail %"; }
    .nd-table-proj .nd-table-row > div:nth-child(6)[b-7ajyzu28hd]::before { content: "Replied"; }
    .nd-table-proj .nd-table-row > div:nth-child(7)[b-7ajyzu28hd]::before { content: "Reply %"; }
    .nd-table-proj .nd-table-row > div:not(:first-child)[b-7ajyzu28hd]::before {
        color: var(--text-muted);
        font-weight: 600;
        font-size: 11px;
        letter-spacing: .05em;
        text-transform: uppercase;
    }
    .nd-table-row.is-critical[b-7ajyzu28hd] { border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
}

@media (max-width: 760px) {
    .nd-filterbar[b-7ajyzu28hd] { flex-direction: column; align-items: stretch; }
    .nd-seg[b-7ajyzu28hd] { width: 100%; }
    .nd-seg-btn[b-7ajyzu28hd] { flex: 1; justify-content: center; }
    .nd-filterbar-end .nd-btn[b-7ajyzu28hd] { flex: 1; }
    .nd-kpi-val[b-7ajyzu28hd] { font-size: 24px; }
}

@media (max-width: 380px) {
    .nd-kpi[b-7ajyzu28hd] { padding: 14px; }
    .nd-kpi-val[b-7ajyzu28hd] { font-size: 22px; }
}
/* /Components/Pages/Manager/Inbox.razor.rz.scp.css */
/* ============================================================
   Inbox — Operator Slate design system
   Scoped stylesheet for Pages/Manager/Inbox.razor
   All selectors from the original file are preserved.
   ============================================================ */

/* ---- Toolbar row (tabs + toggle + search) ------------------------- */
.nd-inbox-tools[b-yjmfvz1pg6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0 14px;
}

/* ---- iOS-style toggle (unanswered/unread filter) ------------------ */
/* Attention-state toggle: amber accent per "selection/attention" rule */
.nd-ios-toggle-wrap[b-yjmfvz1pg6] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    user-select: none;
    cursor: pointer;
}

.nd-ios-toggle-label[b-yjmfvz1pg6] {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-quart);
}

.nd-ios-toggle-wrap:hover .nd-ios-toggle-label[b-yjmfvz1pg6] {
    color: var(--text-primary);
}

.nd-ios-toggle[b-yjmfvz1pg6] {
    position: relative;
    display: inline-flex;
}

.nd-ios-toggle-input[b-yjmfvz1pg6] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    /* Accessible: keyboard focus will fall through to the track */
}

.nd-ios-toggle-track[b-yjmfvz1pg6] {
    width: 44px;
    height: 26px;
    border-radius: var(--radius-pill);
    background: var(--surface-hover);
    border: 1px solid var(--border-strong);
    position: relative;
    transition: background var(--dur-base) var(--ease-quart),
                border-color var(--dur-base) var(--ease-quart);
}

.nd-ios-toggle-track[b-yjmfvz1pg6]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-pill);
    background: var(--text-muted);
    transition: transform var(--dur-base) var(--ease-quart),
                background var(--dur-base) var(--ease-quart);
}

/* Checked: accent fill — acceptable for a selection/attention control */
.nd-ios-toggle-input:checked + .nd-ios-toggle-track[b-yjmfvz1pg6] {
    background: var(--accent);
    border-color: var(--accent-pressed);
}

.nd-ios-toggle-input:checked + .nd-ios-toggle-track[b-yjmfvz1pg6]::after {
    transform: translateX(18px);
    background: var(--accent-ink);
}

/* Focus ring via keyboard */
.nd-ios-toggle-input:focus-visible + .nd-ios-toggle-track[b-yjmfvz1pg6] {
    box-shadow: 0 0 0 3px var(--accent-ring);
}

/* ---- Search field ------------------------------------------------- */
.nd-search[b-yjmfvz1pg6] {
    position: relative;
    max-width: 400px;
    flex: 1;
    min-width: 180px;
}

.nd-search i[b-yjmfvz1pg6] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 13px;
    pointer-events: none;
}

.nd-search-input[b-yjmfvz1pg6] {
    width: 100%;
    height: 40px;
    border-radius: var(--radius-md);
    padding: 0 38px 0 36px;
    background: var(--bg-sunken);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-weight: 450;
    font-size: 13px;
    outline: none;
    box-shadow: var(--shadow-inset);
    transition: border-color var(--dur-base) var(--ease-quart),
                box-shadow var(--dur-base) var(--ease-quart);
}

.nd-search-input[b-yjmfvz1pg6]::placeholder {
    color: var(--text-muted);
    font-weight: 450;
}

.nd-search-input:focus[b-yjmfvz1pg6] {
    border-color: var(--accent);
    box-shadow: var(--shadow-inset), 0 0 0 3px var(--accent-soft);
}

.nd-search-clear[b-yjmfvz1pg6] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
    background: var(--surface-raised);
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    transition: background var(--dur-fast) var(--ease-quart),
                color var(--dur-fast) var(--ease-quart),
                border-color var(--dur-fast) var(--ease-quart);
}

.nd-search-clear:hover[b-yjmfvz1pg6] {
    background: var(--surface-hover);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

/* ---- Card body container ------------------------------------------ */
.nd-card-body[b-yjmfvz1pg6] {
    margin-top: 4px;
}

/* ---- Mobile inbox cards ------------------------------------------- */
/* The global .nd-inbox-cards / .nd-inbox-mini are already styled in
   app.css. The scoped overrides below tune density and unread state.  */

/* Unread conversation: accent-soft tint + accent border.
   Spec says: unread = "needs attention" -> accent-soft tint + accent
   border is acceptable (selection/attention, not status). */
.nd-inbox-mini.unread[b-yjmfvz1pg6] {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 38%, transparent);
}

.nd-inbox-mini.unread:hover[b-yjmfvz1pg6] {
    background: color-mix(in srgb, var(--accent-soft) 100%, var(--surface-raised));
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    box-shadow: var(--shadow-lift);
}

/* ---- Unread dot (amber accent — attention indicator) -------------- */
/* .nd-dot is global; no override needed here; accent is correct use  */

/* ---- Unread count badge ------------------------------------------- */
/* .nd-badge is global (amber pill); already correct */

/* ---- Mono / trim helpers ------------------------------------------ */
/* Used inline on emails, timestamps. Global .nd-mono / .nd-trim cover
   these; no scoped override needed. */

/* ---- Subject text in mobile card ---------------------------------- */
.nd-inbox-mini-subject[b-yjmfvz1pg6] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nd-inbox-mini-meta[b-yjmfvz1pg6] {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-weight: 450;
    font-size: 12px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    min-width: 0;
    overflow: hidden;
}

.nd-inbox-mini-time[b-yjmfvz1pg6] {
    margin-top: 5px;
    color: var(--text-muted);
    font-weight: 450;
    font-size: 12px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* ---- Responsive --------------------------------------------------- */
@media (max-width: 980px) {
    .nd-inbox-tools[b-yjmfvz1pg6] {
        flex-direction: column;
        align-items: stretch;
    }

    .nd-search[b-yjmfvz1pg6] {
        max-width: 100%;
    }
}

@media (max-width: 740px) {
    .nd-ios-toggle-wrap[b-yjmfvz1pg6] {
        justify-content: space-between;
        width: 100%;
    }
}
/* /Components/Pages/Manager/InboxThread.razor.rz.scp.css */
/* ============================================================
   InboxThread — Operator Slate design system
   Reading surface: generous spacing, clear mine/theirs contrast
   ============================================================ */

/* ---- Card shell ------------------------------------------ */
.nd-thread-card[b-yfwm1bnrab] {
    margin-top: 14px;
    border-radius: var(--radius-xl);
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    padding: 20px;
}

/* ---- Back link ------------------------------------------- */
.nd-back[b-yfwm1bnrab] {
    gap: 8px;
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 450;
    transition: color var(--dur-fast) var(--ease-quart);
}
.nd-back:hover[b-yfwm1bnrab] { color: var(--text-primary); }

/* ---- Thread header (subject / meta) ---------------------- */
.nd-thread-head[b-yfwm1bnrab] {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 16px;
}

.nd-thread-subject[b-yfwm1bnrab] {
    font-weight: 620;
    font-size: 0.9375rem;
    color: var(--text-primary);
    letter-spacing: -0.006em;
}

.nd-thread-meta[b-yfwm1bnrab] {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* ---- Thread top bar (count + reply toggle) --------------- */
.nd-thread-top[b-yfwm1bnrab] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.nd-thread-sub[b-yfwm1bnrab] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.nd-thread-actions[b-yfwm1bnrab] {
    display: flex;
    gap: 8px;
}

/* ---- Compose area ---------------------------------------- */
.nd-compose[b-yfwm1bnrab] {
    margin-top: 0;
    margin-bottom: 20px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    background: var(--bg-sunken);
    box-shadow: var(--shadow-inset);
    padding: 14px;
    transition: border-color var(--dur-fast) var(--ease-quart);
}

.nd-compose:focus-within[b-yfwm1bnrab] {
    border-color: var(--accent);
}

.nd-compose-input[b-yfwm1bnrab] {
    width: 100%;
    min-height: 96px;
    resize: vertical;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-sunken);
    color: var(--text-primary);
    padding: 10px 12px;
    outline: none;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 450;
    line-height: 1.55;
    box-shadow: var(--shadow-inset);
    transition: border-color var(--dur-fast) var(--ease-quart),
                box-shadow var(--dur-fast) var(--ease-quart);
}

.nd-compose-input:focus[b-yfwm1bnrab] {
    border-color: var(--accent);
    box-shadow: var(--shadow-inset), 0 0 0 3px var(--accent-ring);
}

.nd-compose-input[b-yfwm1bnrab]::placeholder { color: var(--text-muted); }

.nd-compose-file-wrap[b-yfwm1bnrab] {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nd-compose-file-label[b-yfwm1bnrab] {
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.nd-input-file[b-yfwm1bnrab] {
    display: block;
    max-width: 100%;
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

.nd-input-file[b-yfwm1bnrab]::file-selector-button {
    margin-right: 10px;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--surface-raised);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-quart),
                background var(--dur-fast) var(--ease-quart),
                color var(--dur-fast) var(--ease-quart);
}

.nd-input-file:hover[b-yfwm1bnrab]::file-selector-button {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--text-primary);
}

.nd-input-file:active[b-yfwm1bnrab]::file-selector-button {
    transform: translateY(1px);
}

.nd-input-file:focus-visible[b-yfwm1bnrab]::file-selector-button {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.nd-input-file:disabled[b-yfwm1bnrab]::file-selector-button {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Webkit fallback — keep same shape */
.nd-input-file[b-yfwm1bnrab]::-webkit-file-upload-button {
    margin-right: 10px;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--surface-raised);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.nd-file-pill[b-yfwm1bnrab] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    border-radius: var(--radius-pill);
    padding: 4px 8px 4px 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
    background: var(--accent-soft);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    transition: border-color var(--dur-fast) var(--ease-quart);
}

.nd-compose-actions[b-yfwm1bnrab] {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ---- Divider (between compose and chat) ------------------ */
.nd-divider-yellow[b-yfwm1bnrab] {
    height: 1px;
    background: var(--border-subtle);
    margin: 20px 0;
}

/* ---- Chat feed ------------------------------------------- */
.nd-chat[b-yfwm1bnrab] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ---- Message row ----------------------------------------- */
.nd-msg[b-yfwm1bnrab] {
    display: flex;
}
.nd-msg.is-theirs[b-yfwm1bnrab] { justify-content: flex-start; }
.nd-msg.is-mine[b-yfwm1bnrab]   { justify-content: flex-end; }

/* ---- Bubble ---------------------------------------------- */
.nd-bubble[b-yfwm1bnrab] {
    width: min(640px, 88%);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    background: var(--surface-raised);
    padding: 14px 16px;
    transition: box-shadow var(--dur-fast) var(--ease-quart);
}

/* "Theirs" — default surface-raised, left-aligned */
.nd-msg.is-theirs .nd-bubble[b-yfwm1bnrab] {
    background: var(--surface-raised);
    border-color: var(--border-subtle);
    border-bottom-left-radius: var(--radius-xs);
}

/* "Mine" — accent-soft tint, right-aligned, amber border hint */
.nd-msg.is-mine .nd-bubble[b-yfwm1bnrab] {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 38%, transparent);
    border-bottom-right-radius: var(--radius-xs);
}

/* ---- Bubble top (from + timestamp) ----------------------- */
.nd-bubble-top[b-yfwm1bnrab] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    margin-bottom: 8px;
}

.nd-msg.is-mine .nd-bubble-top[b-yfwm1bnrab] { color: var(--text-secondary); }

/* ---- Bubble body text ------------------------------------ */
.nd-bubble-mid[b-yfwm1bnrab] { /* container only */ }

.nd-body[b-yfwm1bnrab] {
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 450;
    line-height: 1.6;
}

.nd-body.nd-dim[b-yfwm1bnrab] { color: var(--text-muted); font-style: italic; }

/* ---- Bubble footer (account pill + unread badge) --------- */
.nd-bubble-bot[b-yfwm1bnrab] {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

/* ---- Pills (account email + unread) ---------------------- */
.nd-pill[b-yfwm1bnrab] {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 9px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
    background: var(--surface-raised);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* "Unread" badge — info semantic (neutral, not accent) */
.nd-pill.warn[b-yfwm1bnrab] {
    border-color: color-mix(in srgb, var(--info) 40%, transparent);
    background: var(--info-soft);
    color: var(--info);
}

/* ---- Dim helper (dots, meta) ----------------------------- */
.nd-dim[b-yfwm1bnrab] {
    color: var(--text-muted);
}

/* ---- Mono helper ----------------------------------------- */
.nd-mono[b-yfwm1bnrab] {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* ---- Trim (overflow ellipsis) ---------------------------- */
.nd-trim[b-yfwm1bnrab] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}

/* ---- Alert ----------------------------------------------- */
.nd-alert[b-yfwm1bnrab] {
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
    background: var(--danger-soft);
    color: var(--danger);
    font-size: 0.875rem;
    font-weight: 450;
}

/* ---- Skeleton / empty ------------------------------------ */
.nd-skeleton[b-yfwm1bnrab] {
    padding: 20px 0;
    color: var(--text-muted);
    font-size: 0.875rem;
    text-align: center;
}

.nd-empty[b-yfwm1bnrab] {
    padding: 40px 0;
    text-align: center;
}

.nd-empty-title[b-yfwm1bnrab] {
    font-size: 0.9375rem;
    font-weight: 620;
    color: var(--text-secondary);
    letter-spacing: -0.006em;
}

.nd-empty-sub[b-yfwm1bnrab] {
    margin-top: 6px;
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* ---- Responsive ------------------------------------------ */
@media (max-width: 600px) {
    .nd-thread-card[b-yfwm1bnrab] { padding: 14px; }

    .nd-bubble[b-yfwm1bnrab] { width: 95%; padding: 12px; }

    .nd-trim[b-yfwm1bnrab] { max-width: 140px; }

    .nd-thread-top[b-yfwm1bnrab] { flex-direction: column; gap: 8px; }

    .nd-compose[b-yfwm1bnrab] { padding: 12px; }
}
/* /Components/Pages/Manager/ProjectDetails.razor.rz.scp.css */
/* ============================================================================
   ProjectDetails.razor.css — "Operator Slate" conversion
   Form page: spacious / adaptive density per spec.
   All tokens resolved from :root in app.css. No hardcoded palette.
   ========================================================================== */

/* ---- Monospace override (emails, IDs, proxy lines) --------------------- */

.nd-mono[b-dsbfnjv749] {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: normal;
}

/* ---- Card top (title row + save button) -------------------------------- */

.nd-card-top[b-dsbfnjv749] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

/* Save button: standard primary height, no padding override needed —
   let global .nd-btn handle it. Override only the min-width for clarity. */
.nd-card-top > button[b-dsbfnjv749] {
    height: 38px;
    min-width: 100px;
    padding: 0 24px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

/* ---- Form fields: spacious density for a settings/commit form ---------- */

/* Extra breathing room between the divider and the first field */
.nd-divider + .nd-field[b-dsbfnjv749] {
    margin-top: 20px;
}

.nd-field[b-dsbfnjv749] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
}

.nd-field:first-of-type[b-dsbfnjv749] {
    margin-top: 0;
}

/* Field labels: uppercase, muted, small — Label type per spec */
.nd-field label[b-dsbfnjv749] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* VPS input: taller touch target, monospace for machine ID */
.nd-field .nd-input[b-dsbfnjv749] {
    height: 42px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}

/* Proxies textarea: generous height, mono, full amber-on-focus per spec */
.nd-field .nd-textarea[b-dsbfnjv749] {
    min-height: 280px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    line-height: 1.6;
    margin-top: 0;
}

/* Unique count helper (nd-help block) — spacious gap above */
.nd-field .nd-help[b-dsbfnjv749] {
    margin-top: 0;
}

/* Unique count value: accent weight */
.nd-field .nd-help b[b-dsbfnjv749] {
    color: var(--text-primary);
    font-weight: 600;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 740px) {
    .nd-card-top[b-dsbfnjv749] {
        flex-direction: column;
        align-items: stretch;
    }

    .nd-card-top > button[b-dsbfnjv749] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/Manager/Settings.razor.rz.scp.css */
/* ============================================================================
   Settings.razor.css — "Operator Slate" conversion
   All tokens resolved from :root in app.css. No hardcoded palette.
   ========================================================================== */

/* ---- Toolbar (search + selects) ---------------------------------------- */

.nd-tools[b-hqlo7ukdze] {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.nd-search[b-hqlo7ukdze] {
    position: relative;
    flex: 1;
    min-width: 180px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-sunken);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0 12px;
    height: 40px;
    box-shadow: var(--shadow-inset);
    transition: border-color var(--dur-base) var(--ease-quart),
                box-shadow var(--dur-base) var(--ease-quart);
}

.nd-search:focus-within[b-hqlo7ukdze] {
    border-color: var(--accent);
    box-shadow: var(--shadow-inset), 0 0 0 3px var(--accent-soft);
}

.nd-search i[b-hqlo7ukdze] {
    color: var(--text-muted);
    font-size: 13px;
    flex-shrink: 0;
}

.nd-search-input[b-hqlo7ukdze] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 450;
    font-family: var(--font-sans);
    min-width: 0;
}

.nd-search-input[b-hqlo7ukdze]::placeholder {
    color: var(--text-muted);
}

.nd-search-clear[b-hqlo7ukdze] {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: color var(--dur-fast) var(--ease-quart),
                background var(--dur-fast) var(--ease-quart),
                border-color var(--dur-fast) var(--ease-quart);
}

.nd-search-clear:hover[b-hqlo7ukdze] {
    color: var(--text-primary);
    background: var(--surface-raised);
    border-color: var(--border-subtle);
}

/* Local nd-select override: compact toolbar variant
   (global app.css .nd-select is the full-width form field version) */
.nd-select[b-hqlo7ukdze] {
    height: 40px;
    padding: 0 34px 0 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-sunken);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-sans);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    box-shadow: var(--shadow-inset);
    transition: border-color var(--dur-base) var(--ease-quart),
                box-shadow var(--dur-base) var(--ease-quart);
}

.nd-select:focus[b-hqlo7ukdze] {
    border-color: var(--accent);
    box-shadow: var(--shadow-inset), 0 0 0 3px var(--accent-soft);
}

/* ---- State badge — local overrides aligned to global semantic tokens ---
   The global .nd-state-badge states in app.css already cover:
   is-active, is-sleep, is-resting, is-review, is-blocked, is-spam, is-mblocked.
   This block re-affirms them scoped to this component for specificity parity. */

.nd-state-badge[b-hqlo7ukdze] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--surface-raised);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
}

.nd-state-badge[b-hqlo7ukdze]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: currentColor;
    flex: 0 0 auto;
}

/* Active → success */
.nd-state-badge.is-active[b-hqlo7ukdze] {
    color: var(--success);
    background: var(--success-soft);
    border-color: color-mix(in srgb, var(--success) 30%, transparent);
}

/* Sleep → warning (blocked until date, not critical) */
.nd-state-badge.is-sleep[b-hqlo7ukdze] {
    color: var(--warning);
    background: var(--warning-soft);
    border-color: color-mix(in srgb, var(--warning) 30%, transparent);
}

/* Blocked → danger */
.nd-state-badge.is-blocked[b-hqlo7ukdze] {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}

/* Needs Review → warning */
.nd-state-badge.is-review[b-hqlo7ukdze] {
    color: var(--warning);
    background: var(--warning-soft);
    border-color: color-mix(in srgb, var(--warning) 30%, transparent);
}

/* Spam → danger */
.nd-state-badge.is-spam[b-hqlo7ukdze] {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}

/* MBlocked → danger */
.nd-state-badge.is-mblocked[b-hqlo7ukdze] {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}

/* Resting → warning */
.nd-state-badge.is-resting[b-hqlo7ukdze] {
    color: var(--warning);
    background: var(--warning-soft);
    border-color: color-mix(in srgb, var(--warning) 30%, transparent);
}

/* ---- Status sub-line (e.g. "Checked 4h ago") --------------------------- */

.nd-state-sub[b-hqlo7ukdze] {
    margin-top: 3px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* ---- Critical row tinting (full 1px border + ~6% semantic wash)
   NEVER a thick left stripe per spec. Applied to tbody tr. --------------- */

/* Spam rows → danger wash */
.nd-row-spam td[b-hqlo7ukdze] {
    background: rgba(251, 113, 133, .06);
}

.nd-row-spam td:first-child[b-hqlo7ukdze] {
    border-left-color: color-mix(in srgb, var(--danger) 40%, transparent);
}

.nd-row-spam td:last-child[b-hqlo7ukdze] {
    border-right-color: color-mix(in srgb, var(--danger) 40%, transparent);
}

.nd-row-spam td[b-hqlo7ukdze] {
    border-top-color: color-mix(in srgb, var(--danger) 25%, transparent);
    border-bottom-color: color-mix(in srgb, var(--danger) 25%, transparent);
    color: var(--text-primary);
}

/* MBlocked rows → danger wash */
.nd-row-mblocked td[b-hqlo7ukdze] {
    background: rgba(251, 113, 133, .06);
}

.nd-row-mblocked td:first-child[b-hqlo7ukdze] {
    border-left-color: color-mix(in srgb, var(--danger) 40%, transparent);
}

.nd-row-mblocked td:last-child[b-hqlo7ukdze] {
    border-right-color: color-mix(in srgb, var(--danger) 40%, transparent);
}

.nd-row-mblocked td[b-hqlo7ukdze] {
    border-top-color: color-mix(in srgb, var(--danger) 25%, transparent);
    border-bottom-color: color-mix(in srgb, var(--danger) 25%, transparent);
    color: var(--text-primary);
}

/* Manual blocked rows → danger wash (same severity) */
.nd-row-manual-blocked td[b-hqlo7ukdze] {
    background: rgba(251, 113, 133, .06);
}

.nd-row-manual-blocked td:first-child[b-hqlo7ukdze] {
    border-left-color: color-mix(in srgb, var(--danger) 40%, transparent);
}

.nd-row-manual-blocked td:last-child[b-hqlo7ukdze] {
    border-right-color: color-mix(in srgb, var(--danger) 40%, transparent);
}

.nd-row-manual-blocked td[b-hqlo7ukdze] {
    border-top-color: color-mix(in srgb, var(--danger) 25%, transparent);
    border-bottom-color: color-mix(in srgb, var(--danger) 25%, transparent);
    color: var(--text-primary);
}

/* Sleep rows → warning wash, dimmed text */
.nd-row-sleep td[b-hqlo7ukdze] {
    background: rgba(232, 155, 61, .05);
    border-top-color: color-mix(in srgb, var(--warning) 20%, transparent);
    border-bottom-color: color-mix(in srgb, var(--warning) 20%, transparent);
    color: var(--text-secondary);
}

.nd-row-sleep td:first-child[b-hqlo7ukdze] {
    border-left-color: color-mix(in srgb, var(--warning) 28%, transparent);
}

.nd-row-sleep td:last-child[b-hqlo7ukdze] {
    border-right-color: color-mix(in srgb, var(--warning) 28%, transparent);
}

.nd-row-sleep .nd-icon-btn[b-hqlo7ukdze] {
    opacity: .65;
}

/* Resting rows → warning wash, lightly dimmed */
.nd-row-resting td[b-hqlo7ukdze] {
    background: rgba(232, 155, 61, .04);
    border-top-color: color-mix(in srgb, var(--warning) 18%, transparent);
    border-bottom-color: color-mix(in srgb, var(--warning) 18%, transparent);
    color: var(--text-secondary);
}

.nd-row-resting td:first-child[b-hqlo7ukdze] {
    border-left-color: color-mix(in srgb, var(--warning) 25%, transparent);
}

.nd-row-resting td:last-child[b-hqlo7ukdze] {
    border-right-color: color-mix(in srgb, var(--warning) 25%, transparent);
}

/* ---- Mobile card state tints ------------------------------------------ */

.nd-mini-card.is-spam[b-hqlo7ukdze] {
    border-color: color-mix(in srgb, var(--danger) 35%, transparent);
    background: rgba(251, 113, 133, .07);
}

.nd-mini-card.is-mblocked[b-hqlo7ukdze] {
    border-color: color-mix(in srgb, var(--danger) 35%, transparent);
    background: rgba(251, 113, 133, .07);
}

.nd-mini-card.is-manual-blocked[b-hqlo7ukdze] {
    border-color: color-mix(in srgb, var(--danger) 35%, transparent);
    background: rgba(251, 113, 133, .07);
}

.nd-mini-card.is-sleep[b-hqlo7ukdze] {
    border-color: color-mix(in srgb, var(--warning) 28%, transparent);
    background: rgba(232, 155, 61, .06);
    opacity: .88;
}

.nd-mini-card.is-resting[b-hqlo7ukdze] {
    border-color: color-mix(in srgb, var(--warning) 25%, transparent);
    background: rgba(232, 155, 61, .05);
    opacity: .90;
}

/* ---- Icon button semantic modifiers ------------------------------------ */

/* Lock/Unlock toggle — warning tint (caution, not critical) */
.nd-icon-btn.warn[b-hqlo7ukdze] {
    color: var(--warning);
}

.nd-icon-btn.warn:hover[b-hqlo7ukdze] {
    color: var(--warning);
    background: var(--warning-soft);
    border-color: color-mix(in srgb, var(--warning) 40%, transparent);
}

/* Spam action button — danger tint */
.nd-icon-btn.spam[b-hqlo7ukdze] {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 28%, transparent);
}

.nd-icon-btn.spam:hover[b-hqlo7ukdze] {
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 50%, transparent);
    color: var(--danger);
}

/* Clear spam / clear review — success tint */
.nd-icon-btn.spam-clear[b-hqlo7ukdze] {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 28%, transparent);
}

.nd-icon-btn.spam-clear:hover[b-hqlo7ukdze] {
    background: var(--success-soft);
    border-color: color-mix(in srgb, var(--success) 45%, transparent);
    color: var(--success);
}

.nd-icon-btn.review-clear[b-hqlo7ukdze] {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 25%, transparent);
}

.nd-icon-btn.review-clear:hover[b-hqlo7ukdze] {
    background: var(--success-soft);
    border-color: color-mix(in srgb, var(--success) 45%, transparent);
    color: var(--success);
}

/* Rest toggle (moon/sun) — info tint (state transition, not critical) */
.nd-icon-btn.rest-toggle[b-hqlo7ukdze] {
    color: var(--info);
    border-color: color-mix(in srgb, var(--info) 25%, transparent);
}

.nd-icon-btn.rest-toggle:hover[b-hqlo7ukdze] {
    background: var(--info-soft);
    border-color: color-mix(in srgb, var(--info) 45%, transparent);
    color: var(--info);
}

/* ---- Ghost button semantic modifiers ----------------------------------- */

.nd-btn-ghost.warn[b-hqlo7ukdze] {
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 30%, transparent);
}

.nd-btn-ghost.warn:hover[b-hqlo7ukdze] {
    background: var(--warning-soft);
    border-color: color-mix(in srgb, var(--warning) 50%, transparent);
    color: var(--warning);
}

.nd-btn-ghost.spam[b-hqlo7ukdze] {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 28%, transparent);
}

.nd-btn-ghost.spam:hover[b-hqlo7ukdze] {
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 50%, transparent);
    color: var(--danger);
}

.nd-btn-ghost.spam-clear[b-hqlo7ukdze] {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 28%, transparent);
}

.nd-btn-ghost.spam-clear:hover[b-hqlo7ukdze] {
    background: var(--success-soft);
    border-color: color-mix(in srgb, var(--success) 45%, transparent);
    color: var(--success);
}

.nd-btn-ghost.review-clear[b-hqlo7ukdze] {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 28%, transparent);
}

.nd-btn-ghost.review-clear:hover[b-hqlo7ukdze] {
    background: var(--success-soft);
    border-color: color-mix(in srgb, var(--success) 45%, transparent);
    color: var(--success);
}

.nd-btn-ghost.rest-toggle[b-hqlo7ukdze] {
    color: var(--info);
    border-color: color-mix(in srgb, var(--info) 28%, transparent);
}

.nd-btn-ghost.rest-toggle:hover[b-hqlo7ukdze] {
    background: var(--info-soft);
    border-color: color-mix(in srgb, var(--info) 45%, transparent);
    color: var(--info);
}

/* ---- File input -------------------------------------------------------- */

.nd-input-file[b-hqlo7ukdze] {
    display: block;
    max-width: 100%;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 450;
    font-family: var(--font-sans);
}

.nd-input-file[b-hqlo7ukdze]::file-selector-button {
    margin-right: 10px;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--surface-raised);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-quart),
                border-color var(--dur-fast) var(--ease-quart),
                color var(--dur-fast) var(--ease-quart),
                transform var(--dur-fast) var(--ease-quart);
}

.nd-input-file[b-hqlo7ukdze]::file-selector-button:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.nd-input-file:hover[b-hqlo7ukdze]::file-selector-button {
    background: var(--surface-hover);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.nd-input-file:active[b-hqlo7ukdze]::file-selector-button {
    transform: translateY(1px);
}

.nd-input-file:focus-visible[b-hqlo7ukdze]::file-selector-button {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.nd-input-file:disabled[b-hqlo7ukdze]::file-selector-button {
    opacity: .45;
    cursor: not-allowed;
}

/* Webkit alias */
.nd-input-file[b-hqlo7ukdze]::-webkit-file-upload-button {
    margin-right: 10px;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--surface-raised);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

/* ---- Attachment pill --------------------------------------------------- */

.nd-file-pill[b-hqlo7ukdze] {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    border-radius: var(--radius-pill);
    padding: 4px 8px 4px 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
    background: var(--accent-soft);
    font-size: 12px;
    color: var(--text-secondary);
}

/* ---- Email details modal ---------------------------------------------- */

.nd-details-modal[b-hqlo7ukdze] {
    width: min(480px, 100%);
    max-height: 88vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.nd-details-head[b-hqlo7ukdze] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border-subtle);
}

.nd-details-head-main[b-hqlo7ukdze] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.nd-details-head-main .nd-modal-title[b-hqlo7ukdze] {
    font-size: 15px;
}

.nd-details-head-sub[b-hqlo7ukdze] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.nd-details-email[b-hqlo7ukdze] {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 450;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    min-width: 0;
}

.nd-details-close[b-hqlo7ukdze] {
    flex-shrink: 0;
}

.nd-details-body[b-hqlo7ukdze] {
    flex: 1;
    overflow-y: auto;
    padding: 4px 20px 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

.nd-details-body[b-hqlo7ukdze]::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.nd-details-body[b-hqlo7ukdze]::-webkit-scrollbar-track {
    background: transparent;
}

.nd-details-body[b-hqlo7ukdze]::-webkit-scrollbar-thumb {
    border-radius: var(--radius-pill);
    background: var(--border-strong);
    border: 3px solid transparent;
    background-clip: padding-box;
}

.nd-details-body[b-hqlo7ukdze]::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
    background-clip: padding-box;
}

.nd-details-loading[b-hqlo7ukdze] {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
    font-weight: 450;
    font-size: 13px;
}

.nd-details-section[b-hqlo7ukdze] {
    padding: 12px 0 4px;
    border-top: 1px solid var(--border-subtle);
}

.nd-details-section:first-of-type[b-hqlo7ukdze] {
    border-top: none;
    padding-top: 8px;
}

.nd-details-section-title[b-hqlo7ukdze] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* .nd-dfield* styles live in wwwroot/app.css because they are rendered
   via RenderTreeBuilder in C# and do not receive the Blazor scope attribute. */

.nd-details-foot[b-hqlo7ukdze] {
    padding: 12px 20px 16px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    justify-content: flex-end;
}

/* Status badge inside details header — no extra sizing needed */
.nd-details-head-sub .nd-state-badge[b-hqlo7ukdze] {
    flex-shrink: 0;
}

/* Daily limit switched off — keep the "/ limit" readable but clearly faded */
.nd-limit-off[b-hqlo7ukdze] {
    opacity: .42;
}

/* ---- Account TYPE badge (SMTP neutral / TG read-only info tint) --------- */

.nd-kind-badge[b-hqlo7ukdze] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    font-family: var(--font-mono);
    background: var(--surface-raised);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
}

/* SMTP → neutral */
.nd-kind-badge.is-smtp[b-hqlo7ukdze] {
    color: var(--text-secondary);
    background: var(--surface-raised);
    border-color: var(--border-subtle);
}

/* Telegram read-only → info tint */
.nd-kind-badge.is-telegram[b-hqlo7ukdze] {
    color: var(--info);
    background: var(--info-soft);
    border-color: color-mix(in srgb, var(--info) 30%, transparent);
}

/* Cells/values that don't apply to read-only accounts */
.nd-na[b-hqlo7ukdze] {
    color: var(--text-muted);
}

/* ---- Add-modal: account type toggle ------------------------------------ */

.nd-type-toggle[b-hqlo7ukdze] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.nd-type-opt[b-hqlo7ukdze] {
    flex: 1 1 0;
    min-width: 150px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--surface-raised);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-quart),
                border-color var(--dur-fast) var(--ease-quart),
                color var(--dur-fast) var(--ease-quart);
}

.nd-type-opt i[b-hqlo7ukdze] {
    font-size: 13px;
}

.nd-type-opt:hover[b-hqlo7ukdze] {
    background: var(--surface-hover);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.nd-type-opt.is-active[b-hqlo7ukdze] {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 38%, transparent);
    color: var(--accent);
}

.nd-field-hint[b-hqlo7ukdze] {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 450;
    line-height: 1.45;
    color: var(--text-muted);
}
/* /Components/ProjectsTab.razor.rz.scp.css */
/* ============================================================
   ProjectsTab — Operator Slate design system
   Selectors: pt-stats, pt-stat, pt-stat-label, pt-stat-value,
              pt-group, pt-group-head, pt-group-title,
              pt-group-count, pt-group-empty
   Rows use global .nd-row / .nd-list — no override needed here.
   ============================================================ */

/* ---- Summary stat strip ---------------------------------------- */
.pt-stats[b-s8aircd1vt] {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.pt-stat[b-s8aircd1vt] {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-sunken);
    padding: 10px 14px;
    box-shadow: var(--shadow-inset);
}

.pt-stat-label[b-s8aircd1vt] {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.pt-stat-value[b-s8aircd1vt] {
    margin-top: 5px;
    color: var(--text-primary);
    font-weight: 620;
    font-size: 22px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

/* ---- Project groups (Active / Offline) -------------------------- */
.pt-group[b-s8aircd1vt] {
    margin-top: 20px;
}

/* First group sits directly below the stat strip or divider */
.pt-group + .pt-group[b-s8aircd1vt] {
    margin-top: 24px;
}

.pt-group-head[b-s8aircd1vt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.pt-group-title[b-s8aircd1vt] {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* Count pill — surface-raised chip, no amber (not a control) */
.pt-group-count[b-s8aircd1vt] {
    min-width: 24px;
    height: 20px;
    padding: 0 7px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
    background: var(--surface-raised);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 11px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.pt-group-empty[b-s8aircd1vt] {
    margin-top: 10px;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border-strong);
    padding: 10px 14px;
    color: var(--text-muted);
    font-weight: 450;
    font-size: 13px;
}

/* ---- Responsive ------------------------------------------------- */
@media (max-width: 760px) {
    .pt-stats[b-s8aircd1vt] {
        grid-template-columns: 1fr;
    }
}
/* /Components/SeedEmailsTab.razor.rz.scp.css */
/* ============================================================
   SeedEmailsTab — Operator Slate design system
   This file was not present before; created fresh.
   The component uses exclusively global nd-* classes:
     nd-card, nd-card-head, nd-card-title, nd-card-sub,
     nd-btn, nd-alert, nd-skeleton, nd-empty,
     nd-table-wrap, nd-table, nd-mono, nd-state-badge,
     nd-col-actions, nd-actions, nd-icon-btn, nd-btn-ghost,
     nd-cards, nd-mini-card, nd-mini-row, nd-mini-label,
     nd-mini-value, nd-mini-actions,
     nd-modal-overlay, nd-modal, nd-modal-head, nd-modal-title,
     nd-modal-sub, nd-form, nd-field, nd-input, nd-modal-actions
   All of those are styled in app.css.
   No component-local selectors are needed; this file acts as
   a declaration that no scoped overrides are required.

   Badge mapping (from .razor):
     is-active  → --success  (Active seed)
     is-blocked → --danger   (Disabled seed)
   These map correctly via nd-state-badge rules in app.css.

   If future overrides are needed for this component,
   add them below this comment block.
   ============================================================ */

/*
   Active seed rows: add a very subtle success wash so the
   operator can quickly scan which accounts are operational.
   Applied via td column background — stays within spec
   (full border + ~6% wash, no stripe).
*/
/* /Components/SpamChecksTab.razor.rz.scp.css */
/* ============================================================
   SpamChecksTab — Operator Slate design system
   Selectors: sc-stats, sc-stat, sc-stat-label, sc-stat-value,
              sc-ok, sc-spam, sc-progress, sc-progress-label,
              sc-progress-bar, sc-progress-fill, sc-batch-row,
              nd-row-spam (row tint for spam detail rows)
   ============================================================ */

/* ---- Detail stat cards ----------------------------------------- */
.sc-stats[b-o0jiaqpazj] {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.sc-stat[b-o0jiaqpazj] {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-sunken);
    padding: 10px 14px;
    box-shadow: var(--shadow-inset);
}

.sc-stat-label[b-o0jiaqpazj] {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.sc-stat-value[b-o0jiaqpazj] {
    margin-top: 5px;
    color: var(--text-primary);
    font-weight: 620;
    font-size: 22px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

/* Inbox → success, Spam → danger, Not Found → warning */
.sc-stat-value.sc-ok[b-o0jiaqpazj]   { color: var(--success); }
.sc-stat-value.sc-spam[b-o0jiaqpazj] { color: var(--danger); }
.sc-ok[b-o0jiaqpazj]   { color: var(--success); }
.sc-spam[b-o0jiaqpazj] { color: var(--danger); }
.sc-nf[b-o0jiaqpazj]   { color: var(--warning); }

/* ---- Progress bar (active operation indicator) ------------------ */
.sc-progress[b-o0jiaqpazj] {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
    background: var(--accent-soft);
    animation: nd-fade-up var(--dur-reveal) var(--ease-quart) both;
}

.sc-progress-label[b-o0jiaqpazj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 8px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.sc-progress-label span[b-o0jiaqpazj] {
    color: var(--text-secondary);
    font-size: 12px;
}

.sc-progress-bar[b-o0jiaqpazj] {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--border-subtle);
    overflow: hidden;
}

/* accent fill — it's a control-state indicator, accent is correct here */
.sc-progress-fill[b-o0jiaqpazj] {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--accent);
    transition: width var(--dur-base) var(--ease-quart);
    min-width: 4px; /* always visible even at 0% */
}

/* ---- Batch list clickable rows ---------------------------------- */
/*
   sc-batch-row is applied to <tr> inside nd-table.
   nd-table tbody tr already has a transition; we just add cursor
   and the hover tint using token colors.
*/
.sc-batch-row[b-o0jiaqpazj] {
    cursor: pointer;
}

.sc-batch-row:hover td[b-o0jiaqpazj] {
    background: var(--surface-hover);
}

/* ---- Spam detail row tint (critical state: full border + wash) -- */
/*
   GetRowClass() returns "nd-row-spam" for SpamCheckStatus.Spam.
   Rule: critical rows get 1px full border + ~6% wash, not a stripe.
*/
.nd-row-spam td[b-o0jiaqpazj] {
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 22%, transparent);
}

.nd-row-spam:hover td[b-o0jiaqpazj] {
    background: color-mix(in srgb, var(--danger-soft) 80%, var(--surface-hover));
}

/* Mobile card tint for spam items */
.nd-mini-card.is-spam[b-o0jiaqpazj] {
    border-color: color-mix(in srgb, var(--danger) 32%, transparent);
    background: var(--danger-soft);
}

/* ---- Responsive ------------------------------------------------- */
@media (max-width: 860px) {
    .sc-stats[b-o0jiaqpazj] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .sc-stats[b-o0jiaqpazj] {
        grid-template-columns: 1fr 1fr;
    }
}
/* /Components/TrafficSplitTab.razor.rz.scp.css */
/* ============================================================
   TrafficSplitTab — Operator Slate design system
   3 drag-drop zones: Email (info), Telegram (accent), Off (danger-muted)
   ============================================================ */

/* ---- Bot registry panel ---------------------------------- */
.ts-bots[b-j07r09rbi6] {
    margin-top: 16px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    background: var(--bg-sunken);
    box-shadow: var(--shadow-inset);
    padding: 12px 16px;
}

.ts-bots-title[b-j07r09rbi6] {
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ts-bots-empty[b-j07r09rbi6] {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 450;
    line-height: 1.55;
}

.ts-bot-list[b-j07r09rbi6] {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ---- Bot pill -------------------------------------------- */
.ts-bot-pill[b-j07r09rbi6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--radius-pill);
    padding: 5px 8px 5px 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
    background: var(--surface-raised);
    transition: border-color var(--dur-fast) var(--ease-quart),
                background var(--dur-fast) var(--ease-quart),
                box-shadow var(--dur-fast) var(--ease-quart);
}

.ts-bot-pill:hover[b-j07r09rbi6] {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: var(--shadow-lift);
}

.ts-bot-pill i[b-j07r09rbi6] {
    color: var(--accent);
    font-size: 0.75rem;
}

.ts-bot-name[b-j07r09rbi6] {
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.ts-bot-token[b-j07r09rbi6] {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
    font-weight: 450;
    /* Truncate long tokens gracefully */
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Zone grid ------------------------------------------- */
.ts-zones[b-j07r09rbi6] {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

/* ---- Zone card base -------------------------------------- */
.ts-zone[b-j07r09rbi6] {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    background: var(--surface);
    padding: 14px;
    min-height: 220px;
    transition: border-color var(--dur-fast) var(--ease-quart),
                background var(--dur-fast) var(--ease-quart),
                box-shadow var(--dur-fast) var(--ease-quart);
}

/* Zone identity colors — hairline + very faint wash */
/* Email → info/sky */
.ts-zone-0[b-j07r09rbi6] {
    border-color: color-mix(in srgb, var(--info) 35%, transparent);
    background: color-mix(in srgb, var(--info) 5%, var(--surface));
}

/* Telegram → accent amber */
.ts-zone-1[b-j07r09rbi6] {
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}

/* Off → danger-muted/subtle */
.ts-zone-2[b-j07r09rbi6] {
    border-color: color-mix(in srgb, var(--danger) 25%, transparent);
    background: color-mix(in srgb, var(--danger) 4%, var(--surface));
}

/* Drag-over: accent ring + soft tint (set via .drag-over while dragging a
   project over the zone; never on mere focus of an inner control) */
.ts-zone[data-drag-over="true"][b-j07r09rbi6],
.ts-zone.drag-over[b-j07r09rbi6] {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 3px var(--accent-ring);
    outline: none;
}

/* General hover — lighter lift */
.ts-zone:hover[b-j07r09rbi6] {
    box-shadow: var(--shadow-lift);
}

/* ---- Zone header ----------------------------------------- */
.ts-zone-head[b-j07r09rbi6] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 4px;
}

/* Zone icon colors match zone identity */
.ts-zone-0 .ts-zone-head i[b-j07r09rbi6] { color: var(--info); }
.ts-zone-1 .ts-zone-head i[b-j07r09rbi6] { color: var(--accent); }
.ts-zone-2 .ts-zone-head i[b-j07r09rbi6] { color: var(--danger); }

.ts-zone-title[b-j07r09rbi6] {
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 620;
    letter-spacing: -0.006em;
    flex: 1;
}

.ts-zone-count[b-j07r09rbi6] {
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
    background: var(--surface-raised);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.6875rem;
    font-weight: 600;
}

/* ---- Zone empty drop target ------------------------------ */
.ts-zone-empty[b-j07r09rbi6] {
    margin-top: 14px;
    border-radius: var(--radius-md);
    border: 1px dashed var(--border-strong);
    padding: 20px 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.55;
    transition: border-color var(--dur-fast) var(--ease-quart),
                color var(--dur-fast) var(--ease-quart);
}

.ts-zone:hover .ts-zone-empty[b-j07r09rbi6] {
    border-color: var(--accent);
    color: var(--text-secondary);
}

/* ---- Project card ---------------------------------------- */
.ts-proj[b-j07r09rbi6] {
    margin-top: 8px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--surface-raised);
    padding: 10px 12px;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    /* Tactile drag lift: transform + shadow, no layout shift */
    transition: border-color var(--dur-fast) var(--ease-quart),
                background var(--dur-fast) var(--ease-quart),
                box-shadow var(--dur-fast) var(--ease-quart),
                transform var(--dur-fast) var(--ease-quart);
}

.ts-proj:hover[b-j07r09rbi6] {
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    background: var(--surface-hover);
    box-shadow: var(--shadow-lift);
    transform: translateY(-1px);
}

.ts-proj:active[b-j07r09rbi6] {
    cursor: grabbing;
    /* Lifted drag state: more pronounced */
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 12px 32px -8px rgba(0,0,0,.55),
                0 0 0 2px var(--accent-ring);
    border-color: var(--accent);
    background: var(--accent-soft);
    z-index: 10;
    position: relative;
}

.ts-proj-main[b-j07r09rbi6] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ts-proj-name[b-j07r09rbi6] {
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.006em;
    overflow-wrap: anywhere;
}

.ts-proj-bot[b-j07r09rbi6] {
    height: 34px;
    font-size: 0.8125rem;
    max-width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-sunken);
    color: var(--text-primary);
    padding: 0 8px;
    box-shadow: var(--shadow-inset);
    transition: border-color var(--dur-fast) var(--ease-quart),
                box-shadow var(--dur-fast) var(--ease-quart);
}

.ts-proj-bot:focus[b-j07r09rbi6] {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-inset), 0 0 0 3px var(--accent-ring);
}

/* Per-project chat override input (under the bot selector) */
.ts-proj-chat[b-j07r09rbi6] {
    height: 32px;
    width: 100%;
    max-width: 100%;
    font-size: 0.75rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-sunken);
    color: var(--text-primary);
    padding: 0 8px;
    box-shadow: var(--shadow-inset);
    transition: border-color var(--dur-fast) var(--ease-quart),
                box-shadow var(--dur-fast) var(--ease-quart);
}
.ts-proj-chat[b-j07r09rbi6]::placeholder { color: var(--text-muted); }
.ts-proj-chat:focus[b-j07r09rbi6] {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-inset), 0 0 0 3px var(--accent-ring);
}

/* Modal field hint */
.ts-field-hint[b-j07r09rbi6] {
    color: var(--text-muted);
    font-size: 0.6875rem;
    line-height: 1.45;
}

/* ---- Move buttons ---------------------------------------- */
.ts-proj-moves[b-j07r09rbi6] {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.ts-move[b-j07r09rbi6] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: border-color var(--dur-fast) var(--ease-quart),
                color var(--dur-fast) var(--ease-quart),
                background var(--dur-fast) var(--ease-quart),
                transform var(--dur-fast) var(--ease-quart);
}

.ts-move:hover[b-j07r09rbi6] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lift);
}

/* Move to Email → info/sky */
.ts-move-0:hover[b-j07r09rbi6] {
    border-color: color-mix(in srgb, var(--info) 55%, transparent);
    background: color-mix(in srgb, var(--info) 12%, transparent);
    color: var(--info);
}

/* Move to Telegram → accent */
.ts-move-1:hover[b-j07r09rbi6] {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    background: var(--accent-soft);
    color: var(--accent);
}

/* Move to Off → danger */
.ts-move-2:hover[b-j07r09rbi6] {
    border-color: color-mix(in srgb, var(--danger) 45%, transparent);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger);
}

.ts-move:active[b-j07r09rbi6] { transform: translateY(0); }

/* ---- Modal overlay --------------------------------------- */
.nd-modal-overlay[b-j07r09rbi6] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    padding: 16px;
    animation: ts-overlay-in-b-j07r09rbi6 var(--dur-reveal) var(--ease-expo) both;
}

@keyframes ts-overlay-in-b-j07r09rbi6 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---- Modal card ------------------------------------------ */
.nd-modal[b-j07r09rbi6] {
    width: 100%;
    max-width: 460px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-subtle);
    background: var(--surface);
    box-shadow: var(--shadow-overlay);
    padding: 24px;
    animation: ts-modal-in-b-j07r09rbi6 var(--dur-reveal) var(--ease-expo) both;
}

@keyframes ts-modal-in-b-j07r09rbi6 {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.nd-modal-head[b-j07r09rbi6] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.nd-modal-title[b-j07r09rbi6] {
    font-size: 0.9375rem;
    font-weight: 650;
    color: var(--text-primary);
    letter-spacing: -0.012em;
}

.nd-modal-sub[b-j07r09rbi6] {
    margin-top: 4px;
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ---- Form inside modal ----------------------------------- */
.nd-form[b-j07r09rbi6] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.nd-field[b-j07r09rbi6] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.nd-field label[b-j07r09rbi6] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.nd-input[b-j07r09rbi6] {
    height: 40px;
    padding: 0 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-sunken);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 450;
    box-shadow: var(--shadow-inset);
    transition: border-color var(--dur-fast) var(--ease-quart),
                box-shadow var(--dur-fast) var(--ease-quart);
}

.nd-input:focus[b-j07r09rbi6] {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-inset), 0 0 0 3px var(--accent-ring);
}

.nd-input[b-j07r09rbi6]::placeholder { color: var(--text-muted); }

/* Mono input variant (bot token) */
.nd-input.nd-mono[b-j07r09rbi6] {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
}

.nd-modal-actions[b-j07r09rbi6] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

/* ---- Alert (error banner) -------------------------------- */
.nd-alert[b-j07r09rbi6] {
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
    background: var(--danger-soft);
    color: var(--danger);
    font-size: 0.875rem;
    font-weight: 450;
}

/* ---- Skeleton -------------------------------------------- */
.nd-skeleton[b-j07r09rbi6] {
    padding: 20px 0;
    color: var(--text-muted);
    font-size: 0.875rem;
    text-align: center;
}

/* ---- Responsive ------------------------------------------ */
@media (max-width: 860px) {
    .ts-zones[b-j07r09rbi6] {
        grid-template-columns: 1fr;
    }

    .ts-zone[b-j07r09rbi6] { min-height: 0; }

    /* Drag is unavailable on touch — turn the move controls into clear,
       labelled, tap-friendly channel buttons. */
    .ts-proj[b-j07r09rbi6] {
        flex-direction: column;
        align-items: stretch;
        cursor: default;
    }
    .ts-proj:hover[b-j07r09rbi6] {
        transform: none;
        box-shadow: none;
        border-color: var(--border-subtle);
        background: var(--surface-raised);
    }
    .ts-proj:active[b-j07r09rbi6] {
        transform: none;
        box-shadow: none;
        border-color: var(--border-subtle);
        background: var(--surface-raised);
        z-index: auto;
        position: static;
    }

    .ts-proj-moves[b-j07r09rbi6] {
        width: 100%;
        gap: 8px;
    }
    .ts-move[b-j07r09rbi6] {
        flex: 1;
        width: auto;
        height: 40px;
        gap: 8px;
        border-radius: var(--radius-md);
        font-size: 0.8125rem;
        font-weight: 600;
    }
    .ts-move[b-j07r09rbi6]::after { font-weight: 600; }
    .ts-move-0[b-j07r09rbi6]::after { content: "Email"; }
    .ts-move-1[b-j07r09rbi6]::after { content: "Telegram"; }
    .ts-move-2[b-j07r09rbi6]::after { content: "Off"; }

    /* Channel colours at rest so each destination is obvious without hover */
    .ts-move-0[b-j07r09rbi6] {
        border-color: color-mix(in srgb, var(--info) 40%, transparent);
        color: var(--info);
    }
    .ts-move-1[b-j07r09rbi6] {
        border-color: color-mix(in srgb, var(--accent) 40%, transparent);
        color: var(--accent);
    }
    .ts-move-2[b-j07r09rbi6] {
        border-color: color-mix(in srgb, var(--danger) 35%, transparent);
        color: var(--danger);
    }
}

@media (max-width: 480px) {
    .ts-bot-token[b-j07r09rbi6] { max-width: 80px; }

    .nd-modal[b-j07r09rbi6] { padding: 16px; }
}