@import '_content/Krome.Blazor/Krome.Blazor.pl7s5h6e7e.bundle.scp.css';

/* /Components/Editor/EditorSheet.razor.rz.scp.css */
.eds[b-4re6bd3f73] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    background: var(--ks-surface, #16161a);
    color: inherit;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
    transition: height 0.2s ease;
}

.eds--peek[b-4re6bd3f73] { height: 96px; }
.eds--half[b-4re6bd3f73] { height: 50dvh; }
.eds--full[b-4re6bd3f73] { height: 85dvh; }

.eds-head[b-4re6bd3f73] { display: flex; align-items: center; gap: 8px; padding: 0 8px; min-height: 48px; touch-action: none; }
.eds-title[b-4re6bd3f73] { flex: 1; }

.eds-handle[b-4re6bd3f73], .eds-close[b-4re6bd3f73] {
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 1.4rem;
    cursor: pointer;
}

.eds-handle span[b-4re6bd3f73] { display: block; width: 36px; height: 4px; margin: 0 auto; border-radius: 2px; background: rgba(255, 255, 255, 0.35); }

.eds-body[b-4re6bd3f73] { flex: 1; overflow-y: auto; padding: 8px 16px 16px; }

/* The inspector host: a bottom sheet while Open at <= 900 px, nothing otherwise; the static inspector pane above that. */
@media (max-width: 900px) {
    .eds--idle[b-4re6bd3f73] { display: none; }
}

@media (min-width: 901px) {
    .eds.eds--inline[b-4re6bd3f73] {
        position: static;
        width: auto;
        height: auto;
        z-index: auto;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    .eds--inline .eds-head[b-4re6bd3f73] { display: none; }
    .eds--inline .eds-body[b-4re6bd3f73] { padding: 0; overflow: visible; }
}

@media (min-width: 900px) {
    .eds[b-4re6bd3f73] {
        left: auto;
        top: 64px;
        width: 360px;
        height: auto;
        border-radius: 0;
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.3);
    }

    .eds--peek[b-4re6bd3f73], .eds--half[b-4re6bd3f73], .eds--full[b-4re6bd3f73] { height: auto; }
    .eds-handle[b-4re6bd3f73] { display: none; }
}
/* /Components/Editor/EditorStageSlot.razor.rz.scp.css */
.ed-stage-slot[b-l01pcmk25t] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.ed-stage-slot[b-l01pcmk25t]  > * {
    pointer-events: auto;
}
/* /Components/Editor/EditorToolDock.razor.rz.scp.css */
.etd[b-iy2zrdgd6h] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 8px 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.etd[b-iy2zrdgd6h]::-webkit-scrollbar { display: none; }

.etd-btn[b-iy2zrdgd6h] {
    flex: 0 0 auto;
    min-width: 72px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.etd-btn--on[b-iy2zrdgd6h] {
    background: rgba(255, 255, 255, 0.14);
    border-color: currentColor;
}

.etd-btn--idle[b-iy2zrdgd6h] { opacity: 0.55; }

.etd-hint[b-iy2zrdgd6h] { margin: 0; padding: 0 12px 8px; font-size: 0.85rem; opacity: 0.75; }

.etd-ico[b-iy2zrdgd6h] { margin-right: 6px; }
/* /Components/Editor/Inspector/GroupSection.razor.rz.scp.css */
.grp-btn[b-mjt1n1ysx1] {
    min-height: 44px;
    min-width: 44px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid var(--ks-border-strong);
    border-radius: 10px;
    color: var(--ks-text);
    font: inherit;
    font-size: 13px;
    font-weight: 550;
    cursor: pointer;
}

.grp-btn:hover:not(:disabled)[b-mjt1n1ysx1] { border-color: var(--ks-accent); }
.grp-btn:focus-visible[b-mjt1n1ysx1] { outline: 2px solid var(--ks-accent-ring); outline-offset: 2px; }
.grp-btn:disabled[b-mjt1n1ysx1] { opacity: 0.5; cursor: default; }
.grp-btn small[b-mjt1n1ysx1] { color: var(--ks-text-muted); font-weight: 400; }

.grp-actions[b-mjt1n1ysx1] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.grp-count[b-mjt1n1ysx1] { margin: 0 0 8px; color: var(--ks-text-muted); font-size: 13px; }
/* /Components/Editor/Inspector/KeyframeSection.razor.rz.scp.css */
.kfs-row[b-oih7bg2hmp] { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 8px; margin-bottom: 8px; }
.kfs-inputs[b-oih7bg2hmp] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kfs-name[b-oih7bg2hmp] { font-size: 12px; color: var(--ks-text-dim); font-weight: 550; }
.kfs-inputs input[type=range][b-oih7bg2hmp] { width: 100%; min-height: 32px; accent-color: var(--ks-accent); }
.kfs-xy[b-oih7bg2hmp] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.kfs-dia[b-oih7bg2hmp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--ks-border-strong);
    border-radius: 22px;
    color: var(--ks-text-dim);
    cursor: pointer;
    touch-action: manipulation;
}

.kfs-dia:hover[b-oih7bg2hmp] { border-color: var(--ks-accent); }
.kfs-dia:focus-visible[b-oih7bg2hmp] { outline: 2px solid var(--ks-accent-ring); outline-offset: 2px; }
.kfs-dia--on[b-oih7bg2hmp] { color: var(--ks-accent); border-color: var(--ks-accent); background: var(--ks-accent-ring); }
.kfs-dia:disabled[b-oih7bg2hmp] { opacity: 0.4; cursor: default; }

.kfs-clear[b-oih7bg2hmp] {
    min-height: 44px;
    min-width: 44px;
    padding: 0 16px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.kfs-hint[b-oih7bg2hmp] { margin: 0 0 8px; font-size: 12px; line-height: 1.4; color: var(--ks-text-dim); }
/* /Components/Editor/Inspector/StickerSection.razor.rz.scp.css */
.stk-actions[b-vaa0296yyz] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.stk-btn[b-vaa0296yyz] {
    min-height: 44px;
    min-width: 44px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid var(--ks-border-strong);
    border-radius: 10px;
    color: var(--ks-text);
    font: inherit;
    font-size: 13px;
    font-weight: 550;
    cursor: pointer;
}

.stk-btn:hover[b-vaa0296yyz] { border-color: var(--ks-accent); }
.stk-btn:focus-visible[b-vaa0296yyz] { outline: 2px solid var(--ks-accent-ring); outline-offset: 2px; }
.stk-btn--on[b-vaa0296yyz] { border-color: var(--ks-accent); background: var(--ks-accent-ring); }
.stk-btn--danger[b-vaa0296yyz] { color: var(--ks-text-muted); }
.stk-btn--danger:hover[b-vaa0296yyz] { color: var(--ks-danger-text); border-color: var(--ks-danger); }
/* /Components/Editor/KeyframeButton.razor.rz.scp.css */
.ekf-btn[b-wql4dujikb] {
    min-width: 44px;
    min-height: 44px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.ekf-btn--on[b-wql4dujikb] {
    background: rgba(255, 255, 255, 0.14);
    border-color: currentColor;
    color: #f5b301;
}

.ekf-btn:disabled[b-wql4dujikb] { opacity: 0.4; cursor: default; }
/* /Components/Editor/KeyframeLanes.razor.rz.scp.css */
/* Desktop property lanes (KF-U6). Same two-column grid as .ed-tl-grid (168px header | timeline area) so a diamond's x matches the canvas. */
.ekl[b-snie4d82jf] { margin-top: 6px; border: 1px solid var(--ks-border); border-radius: var(--ks-radius-sm); background: var(--ks-surface); overflow: hidden; }
.ekl[hidden][b-snie4d82jf] { display: none; }
.ekl-row[b-snie4d82jf] { display: grid; grid-template-columns: 168px 1fr; align-items: center; min-height: 28px; border-bottom: 1px solid var(--ks-border); }
.ekl-row:last-child[b-snie4d82jf] { border-bottom: 0; }
.ekl-label[b-snie4d82jf] { padding: 0 8px; font-size: 12px; font-weight: 600; color: var(--ks-text-dim); background: var(--ks-inset); border-right: 1px solid var(--ks-border); align-self: stretch; display: flex; align-items: center; }
.ekl-track[b-snie4d82jf] { position: relative; height: 28px; overflow: hidden; }
/* 24 px hit target around a 10 px painted diamond; centred on the key time. */
.ekl-diamond[b-snie4d82jf] { position: absolute; top: 2px; width: 24px; height: 24px; margin-left: -12px; padding: 0; border: 0; background: transparent; cursor: ew-resize; touch-action: none; display: grid; place-items: center; }
.ekl-gem[b-snie4d82jf] { width: 10px; height: 10px; transform: rotate(45deg); border: 2px solid var(--ks-accent-2); background: var(--ks-surface); box-sizing: border-box; transition: background-color 0.12s ease, transform 0.12s ease; }
.ekl-diamond--on .ekl-gem[b-snie4d82jf] { background: var(--ks-accent); }
.ekl-diamond:hover .ekl-gem[b-snie4d82jf] { background: var(--ks-accent-2); }
.ekl-diamond:focus-visible[b-snie4d82jf] { outline: 2px solid var(--ks-accent-2); outline-offset: 0; border-radius: 4px; }
.ekl-diamond--drag .ekl-gem[b-snie4d82jf] { background: var(--ks-accent); transform: rotate(45deg) scale(1.2); }
.ekl-diamond:disabled[b-snie4d82jf] { cursor: default; opacity: 0.5; }
@media (prefers-reduced-motion: reduce) { .ekl-gem[b-snie4d82jf] { transition: none; } }
/* Phone width keeps the clip diamonds and the Motion sheet's key list: no lanes (mobile is the primary surface). */
@media (max-width: 899.98px) { .ekl[b-snie4d82jf] { display: none; } }
/* /Components/Editor/LookPreviewLayer.razor.rz.scp.css */
/* Sits exactly over the proxy video; shown only while JS reports a graded frame (data-live), else the plain video is visible. */
.ed-look-canvas[b-scu6a3y7jo] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none;
    pointer-events: none;
}

.ed-look-canvas[data-live="true"][b-scu6a3y7jo] {
    display: block;
}
/* /Components/Editor/MultiSelectBar.razor.rz.scp.css */
.msb[b-pwljg0jvdu] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
}

.msb-count[b-pwljg0jvdu] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    border-radius: 22px;
    background: rgba(245, 182, 66, 0.18);
    border: 1px solid #f5b642;
}

.msb-actions[b-pwljg0jvdu] {
    display: flex;
    gap: 8px;
    flex: 1 1 auto;
}

.msb-btn[b-pwljg0jvdu] {
    min-width: 72px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.msb-btn--danger[b-pwljg0jvdu] { border-color: #e5484d; color: #e5484d; }
.msb-btn:disabled[b-pwljg0jvdu] { opacity: 0.4; cursor: default; }
/* /Components/Editor/ScopeBreadcrumb.razor.rz.scp.css */
.ed-scope-crumbs[b-bvnkul8vpg] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 8px;
}

.ed-scope-crumb[b-bvnkul8vpg] {
    min-height: 44px;
    min-width: 44px;
    padding: 0 12px;
    border: 1px solid var(--ed-border, #3a3a40);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
}

.ed-scope-crumb[aria-current="location"][b-bvnkul8vpg] {
    font-weight: 600;
    background: var(--ed-surface-2, #26262b);
}

.ed-scope-sep[b-bvnkul8vpg] {
    opacity: .6;
}
/* /Components/Editor/Tools/EaseSheet.razor.rz.scp.css */
.eze[b-hcie655f6g] { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.12); }

.eze-title[b-hcie655f6g] { opacity: 0.8; }

.eze-note[b-hcie655f6g] { margin: 0; font-size: 0.85rem; opacity: 0.85; }

.eze-chips[b-hcie655f6g] { display: flex; flex-wrap: wrap; gap: 8px; }

.eze-chip[b-hcie655f6g] {
    min-height: 44px;
    min-width: 44px;
    padding: 0 16px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
}

.eze-chip--on[b-hcie655f6g] { background: rgba(255, 255, 255, 0.14); border-color: currentColor; }

.eze-curve[b-hcie655f6g],
.eze-pad[b-hcie655f6g] {
    width: 160px;
    height: 160px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.eze-guide[b-hcie655f6g] { stroke: rgba(255, 255, 255, 0.18); stroke-width: 0.6; stroke-dasharray: 3 3; }

.eze-path[b-hcie655f6g] { stroke: var(--ks-accent, #f5b301); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.eze-pad[b-hcie655f6g] { position: relative; touch-action: none; }

.eze-pad-lines[b-hcie655f6g] { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.eze-arm[b-hcie655f6g] { stroke: rgba(255, 255, 255, 0.45); stroke-width: 1; }

/* The visible knob is small; the hit area is the full 44x44 button. */
.eze-handle[b-hcie655f6g] {
    position: absolute;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: grab;
    touch-action: none;
}

.eze-handle[b-hcie655f6g]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    background: var(--ks-accent, #f5b301);
    border: 2px solid #fff;
}

.eze-handle:focus-visible[b-hcie655f6g] { outline: 2px solid #fff; outline-offset: -2px; }

@media (prefers-reduced-motion: no-preference) {
    .eze-chip[b-hcie655f6g] { transition: background 150ms ease-out; }
}
/* /Components/Editor/Tools/GroupSheet.razor.rz.scp.css */
.grp-btn[b-tac767veeh] {
    min-height: 44px;
    min-width: 44px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid var(--ks-border-strong);
    border-radius: 10px;
    color: var(--ks-text);
    font: inherit;
    font-size: 13px;
    font-weight: 550;
    cursor: pointer;
}

.grp-btn:hover:not(:disabled)[b-tac767veeh] { border-color: var(--ks-accent); }
.grp-btn:focus-visible[b-tac767veeh] { outline: 2px solid var(--ks-accent-ring); outline-offset: 2px; }
.grp-btn:disabled[b-tac767veeh] { opacity: 0.5; cursor: default; }
.grp-btn small[b-tac767veeh] { color: var(--ks-text-muted); font-weight: 400; }

.grp-sheet[b-tac767veeh] { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; }
.grp-title[b-tac767veeh] { margin: 0; font-weight: 600; }
.grp-hint[b-tac767veeh] { margin: 0; color: var(--ks-text-muted); font-size: 13px; }
.grp-field[b-tac767veeh] { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
/* /Components/Editor/Tools/LooksSheet.razor.rz.scp.css */
.lk[b-107pj9c167] { display: flex; flex-direction: column; gap: 8px; }

.lk-tabs[b-107pj9c167] { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.lk-tab[b-107pj9c167] {
    flex: none;
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 22px;
    border: 0;
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
    cursor: pointer;
}

.lk-tab--on[b-107pj9c167] { background: rgba(255, 255, 255, 0.24); font-weight: 600; }

.lk-intensity[b-107pj9c167] { display: flex; flex-direction: column; gap: 4px; }
.lk-intensity input[type=range][b-107pj9c167] { width: 100%; min-height: 44px; touch-action: pan-y; }

/* 44 px hit area on the input box, 26 px visible thumb (the native ~16 px thumb is too small to grab on a phone). */
.lk-intensity input[type=range][b-107pj9c167]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; border: 0; background: currentColor; cursor: pointer; }
.lk-intensity input[type=range][b-107pj9c167]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; border: 0; background: currentColor; cursor: pointer; }

.lk-grid[b-107pj9c167] { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }

.lk-tile[b-107pj9c167] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    min-width: 44px;
    min-height: 44px;
    padding: 4px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: inherit;
    cursor: pointer;
    touch-action: manipulation;
}

.lk-tile--on[b-107pj9c167] { border-color: var(--ks-accent); box-shadow: 0 0 0 2px var(--ks-accent-ring); }
/* 192x340 look pictures (2x of a 96x170 tile): the 9:16-ish box is reserved up front so the grid does not jump while lazy images load. */
.lk-tile img[b-107pj9c167] { width: 100%; height: auto; aspect-ratio: 192 / 340; object-fit: cover; background: rgba(255, 255, 255, 0.08); border-radius: 6px; pointer-events: none; }
.lk-name[b-107pj9c167] { font-size: 0.72rem; text-align: center; word-break: break-word; }

.lk-hint[b-107pj9c167], .lk-empty[b-107pj9c167] { opacity: 0.7; text-align: center; padding: 24px 8px; margin: 0; }
.lk-error[b-107pj9c167] { color: #ff8a80; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lk-retry[b-107pj9c167] { min-width: 44px; min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; cursor: pointer; }

.lk-loading[b-107pj9c167] { display: flex; align-items: center; justify-content: center; gap: 8px; opacity: 0.7; padding: 24px 8px; margin: 0; }
.lk-spinner[b-107pj9c167] { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: currentColor; animation: lk-spin-b-107pj9c167 0.8s linear infinite; }
@keyframes lk-spin-b-107pj9c167 { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lk-spinner[b-107pj9c167] { animation: none; } }

.lk-tile--fav[b-107pj9c167] { border-color: var(--ks-warn); }
.lk-tile--fav.lk-tile--on[b-107pj9c167] { border-color: var(--ks-accent); }
.lk-star[b-107pj9c167] { position: absolute; top: 2px; right: 4px; color: var(--ks-warn); font-size: 0.9rem; }
.lk-actions[b-107pj9c167] { display: flex; flex-wrap: wrap; gap: 8px; }
.lk-fav[b-107pj9c167] { display: inline-flex; align-items: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; cursor: pointer; touch-action: manipulation; }
.lk-fav[aria-pressed=true][b-107pj9c167] { color: var(--ks-warn); }
.lk-compare[b-107pj9c167] { min-width: 44px; min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; cursor: pointer;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.lk-compare[aria-pressed="true"][b-107pj9c167] { background: color-mix(in srgb, currentColor 18%, transparent); }
.lk-compare:focus-visible[b-107pj9c167] { outline: 2px solid currentColor; outline-offset: 2px; }
.lk-all[b-107pj9c167] { min-width: 44px; min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; cursor: pointer; touch-action: manipulation; }
.lk-add[b-107pj9c167] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lk-add .lk-hint[b-107pj9c167] { flex: 1 1 160px; padding: 8px 0; text-align: left; }
.lk-add-btn[b-107pj9c167] { min-width: 44px; min-height: 44px; padding: 0 20px; border-radius: 22px; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.lk-add-btn:not(:disabled)[b-107pj9c167] { background: var(--ks-warn); border-color: var(--ks-warn); color: #000; }
.lk-add-btn:disabled[b-107pj9c167] { opacity: 0.45; cursor: not-allowed; }
/* /Components/Editor/Tools/MotionSheet.razor.rz.scp.css */
.ems[b-2qthdcmm33] { display: flex; flex-direction: column; gap: 12px; padding: 4px 4px 12px; }

.ems-hint[b-2qthdcmm33] { margin: 0; opacity: 0.7; }

.ems-tabs[b-2qthdcmm33] { display: flex; gap: 8px; }

.ems-tab[b-2qthdcmm33],
.ems-chip[b-2qthdcmm33] {
    min-height: 44px;
    min-width: 44px;
    padding: 0 16px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.ems-tab--on[b-2qthdcmm33],
.ems-chip--on[b-2qthdcmm33] {
    background: rgba(255, 255, 255, 0.14);
    border-color: currentColor;
}

.ems-chip:disabled[b-2qthdcmm33] { opacity: 0.4; cursor: default; }

.ems-chips[b-2qthdcmm33] { display: flex; flex-wrap: wrap; gap: 8px; }

.ems-keys[b-2qthdcmm33] { display: flex; flex-direction: column; gap: 8px; }

.ems-keys-title[b-2qthdcmm33] { opacity: 0.8; }

.ems-key[b-2qthdcmm33] { display: flex; gap: 8px; }

.ems-key-seek[b-2qthdcmm33] { flex: 1 1 auto; text-align: left; }
/* /Components/Editor/Tools/StickersSheet.razor.rz.scp.css */
.sd[b-8idperk0n1] { display: flex; flex-direction: column; gap: 8px; }

.sd-search[b-8idperk0n1] {
    min-height: 44px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    font-size: 1rem;
}

.sd-tabs[b-8idperk0n1] { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }

.sd-tab[b-8idperk0n1] {
    flex: none;
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 22px;
    border: 0;
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
    scroll-snap-align: start;
    cursor: pointer;
}

.sd-tab--on[b-8idperk0n1] { background: rgba(255, 255, 255, 0.24); font-weight: 600; }

.sd-grid[b-8idperk0n1] { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }

.sd-tile[b-8idperk0n1] {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    min-width: 44px;
    min-height: 44px;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: inherit;
    cursor: pointer;
    -webkit-touch-callout: none;
    user-select: none;
    touch-action: manipulation;
}

.sd-tile--fav[b-8idperk0n1] { border-color: #f5c542; }
.sd-tile img[b-8idperk0n1] { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.sd-noimg[b-8idperk0n1] { font-size: 0.7rem; word-break: break-word; }
.sd-star[b-8idperk0n1] { position: absolute; top: 2px; right: 4px; color: #f5c542; font-size: 0.9rem; }

.sd-more[b-8idperk0n1] { min-height: 44px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.08); color: inherit; cursor: pointer; }
.sd-empty[b-8idperk0n1], .sd-loading[b-8idperk0n1] { opacity: 0.7; text-align: center; padding: 24px 8px; margin: 0; }
.sd-error[b-8idperk0n1] { color: #ff8a80; margin: 0; }
.sd-replacing[b-8idperk0n1] { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 10px; background: rgba(124, 92, 255, 0.22); border: 1px solid rgba(124, 92, 255, 0.6); font-weight: 600; }
.sd-replacing-cancel[b-8idperk0n1] { min-height: 44px; min-width: 44px; padding: 0 14px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.12); color: inherit; cursor: pointer; }
/* /Components/Editor/Tools/TemplatesSheet.razor.rz.scp.css */
.tp[b-ck4n3kvkey] { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.tp-heading[b-ck4n3kvkey] { margin: 4px 0 0; font-size: 0.8rem; font-weight: 600; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.04em; }

.tp-grid[b-ck4n3kvkey], .tp-recents[b-ck4n3kvkey] { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.tp-recents[b-ck4n3kvkey] { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }

.tp-card[b-ck4n3kvkey] { position: relative; }

.tp-tile[b-ck4n3kvkey] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    width: 100%;
    min-height: 44px;
    padding: 4px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
}

.tp-card--on .tp-tile[b-ck4n3kvkey] { border-color: var(--ks-accent); box-shadow: 0 0 0 2px var(--ks-accent-ring); }
.tp-card--gone .tp-tile[b-ck4n3kvkey] { opacity: 0.45; cursor: not-allowed; }
.tp-tile img[b-ck4n3kvkey] { width: 100%; height: auto; aspect-ratio: 192 / 340; object-fit: cover; background: rgba(255, 255, 255, 0.08); border-radius: 6px; pointer-events: none; }
.tp-name[b-ck4n3kvkey] { font-size: 0.85rem; font-weight: 600; word-break: break-word; padding: 0 2px; }
.tp-desc[b-ck4n3kvkey] { font-size: 0.72rem; opacity: 0.75; padding: 0 2px 2px; word-break: break-word; }

/* 44 px star hit area pinned to the tile's top-right corner. */
.tp-star[b-ck4n3kvkey] {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    border-radius: 22px;
    background: rgba(0, 0, 0, 0.35);
    color: inherit;
    font-size: 1.1rem;
    cursor: pointer;
    touch-action: manipulation;
}
.tp-star[aria-pressed=true][b-ck4n3kvkey] { color: var(--ks-warn); }

.tp-confirm[b-ck4n3kvkey] { position: sticky; top: 0; z-index: 2; backdrop-filter: blur(8px); display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; border: 1px solid var(--ks-accent); background: rgba(255, 255, 255, 0.06); }
.tp-confirm-title[b-ck4n3kvkey] { margin: 0; font-weight: 600; }
.tp-confirm-body[b-ck4n3kvkey] { margin: 0; font-size: 0.9rem; opacity: 0.85; }
.tp-confirm-actions[b-ck4n3kvkey] { display: flex; gap: 8px; flex-wrap: wrap; }

.tp-btn[b-ck4n3kvkey] { min-width: 44px; min-height: 44px; padding: 0 20px; border-radius: 22px; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; cursor: pointer; touch-action: manipulation; }
.tp-btn--primary:not(:disabled)[b-ck4n3kvkey] { background: var(--ks-warn); border-color: var(--ks-warn); color: #000; font-weight: 600; }
.tp-btn:disabled[b-ck4n3kvkey] { opacity: 0.55; cursor: not-allowed; }

.tp-note[b-ck4n3kvkey] { margin: 0; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); font-size: 0.9rem; }
.tp-error[b-ck4n3kvkey] { color: #ff8a80; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tp-empty[b-ck4n3kvkey] { opacity: 0.7; text-align: center; padding: 24px 8px; margin: 0; }
.tp-loading[b-ck4n3kvkey] { display: flex; align-items: center; justify-content: center; gap: 8px; opacity: 0.7; padding: 24px 8px; margin: 0; }
.tp-spinner[b-ck4n3kvkey] { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: currentColor; animation: tp-spin-b-ck4n3kvkey 0.8s linear infinite; }
@keyframes tp-spin-b-ck4n3kvkey { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tp-spinner[b-ck4n3kvkey] { animation: none; } }
/* /Components/Media/MediaItemSheet.razor.rz.scp.css */
/* Bottom sheet on phones, side panel from 901 px. One markup, pure CSS. */

.sheet-backdrop[b-94k0pe7m1e] { position: fixed; inset: 0; z-index: 900; background: rgba(0, 0, 0, 0.55); }
.sheet[b-94k0pe7m1e] {
    position: fixed; z-index: 901; left: 0; right: 0; bottom: 0; max-height: 88dvh; overflow-y: auto;
    background: var(--ks-surface); border-top: 1px solid var(--ks-border-strong); border-radius: 18px 18px 0 0;
    padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
    animation: sheet-in-b-94k0pe7m1e 200ms ease-out;
}
@keyframes sheet-in-b-94k0pe7m1e { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sheet[b-94k0pe7m1e] { animation: none; } }
@media (min-width: 901px) {
    .sheet[b-94k0pe7m1e] { left: auto; top: 0; width: 420px; max-height: none; border-radius: 0; border-top: 0; border-left: 1px solid var(--ks-border-strong); }
}

.sheet-head[b-94k0pe7m1e] { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: sticky; top: 0; background: var(--ks-surface); padding: 8px 0; }
.sheet-title[b-94k0pe7m1e] { margin: 0; font-size: 18px; overflow-wrap: anywhere; min-width: 0; }
.sheet-close[b-94k0pe7m1e] {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ks-border-strong);
    background: var(--ks-surface-2); color: var(--ks-text); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.sheet-close svg[b-94k0pe7m1e] { width: 20px; height: 20px; }
.sheet-error[b-94k0pe7m1e], .sheet-ok[b-94k0pe7m1e] { padding: 10px 12px; border-radius: var(--ks-radius-sm); margin: 6px 0; font-size: 14px; }
.sheet-error[b-94k0pe7m1e] { border: 1px solid var(--ks-danger); color: var(--ks-danger-text); }
.sheet-ok[b-94k0pe7m1e] { border: 1px solid var(--ks-ok); color: var(--ks-ok-text); }

.sheet-facts[b-94k0pe7m1e] { display: grid; gap: 6px; margin: 8px 0 14px; }
.sheet-facts > div[b-94k0pe7m1e] { display: flex; justify-content: space-between; gap: 12px; }
.sheet-facts dt[b-94k0pe7m1e] { color: var(--ks-text-muted); }
.sheet-facts dd[b-94k0pe7m1e] { margin: 0; text-align: right; overflow-wrap: anywhere; }

.sheet-section[b-94k0pe7m1e] { border-top: 1px solid var(--ks-border); padding: 14px 0; display: flex; flex-direction: column; gap: 10px; }
.sheet-section h3[b-94k0pe7m1e] { margin: 0; font-size: 15px; color: var(--ks-text-dim); }
.sheet-hint[b-94k0pe7m1e] { margin: 0; color: var(--ks-warn-text); font-size: 14px; }
.sheet-field[b-94k0pe7m1e] { display: flex; flex-direction: column; gap: 6px; }
.sheet-field > span[b-94k0pe7m1e] { color: var(--ks-text-muted); font-size: 14px; }
.sheet-row[b-94k0pe7m1e] { display: flex; gap: 8px; }
.sheet-row > select[b-94k0pe7m1e], .sheet-row > input[b-94k0pe7m1e] { flex: 1 1 auto; min-width: 0; }
.sheet select[b-94k0pe7m1e], .sheet input[type="text"][b-94k0pe7m1e] {
    width: 100%; min-height: 44px; padding: 0 12px; border-radius: var(--ks-radius-sm);
    border: 1px solid var(--ks-border-strong); background: var(--ks-inset); color: var(--ks-text); font: inherit; font-size: 16px;
}
.btn[b-94k0pe7m1e] {
    min-height: 44px; padding: 0 16px; border-radius: var(--ks-radius-sm); border: 1px solid var(--ks-border-strong);
    background: var(--ks-surface-2); color: var(--ks-text); font: inherit; font-weight: 600; cursor: pointer; touch-action: manipulation;
}
.btn:disabled[b-94k0pe7m1e] { opacity: 0.5; cursor: default; }
.btn-primary[b-94k0pe7m1e] { background: var(--ks-accent); border-color: var(--ks-accent); color: #fff; }
.btn-danger[b-94k0pe7m1e] { background: transparent; border-color: var(--ks-danger); color: var(--ks-danger-text); }
.btn:focus-visible[b-94k0pe7m1e], .sheet-close:focus-visible[b-94k0pe7m1e], .sheet select:focus-visible[b-94k0pe7m1e], .sheet input:focus-visible[b-94k0pe7m1e] { outline: 2px solid var(--ks-signature); outline-offset: 2px; }
/* /Components/Pages/MediaLibrary.razor.rz.scp.css */
/* /library — mobile-first: 2 columns at 390, more as the viewport grows. Every control is >= 44 px tall. */

.ml-btn[b-cwga9c4jyj] {
    min-height: 44px; padding: 0 16px; border-radius: var(--ks-radius-sm);
    border: 1px solid var(--ks-border-strong); background: var(--ks-surface-2); color: var(--ks-text);
    font: inherit; font-weight: 600; cursor: pointer; touch-action: manipulation;
}
.ml-btn:hover:not(:disabled)[b-cwga9c4jyj] { border-color: var(--ks-accent-2); }
.ml-btn:disabled[b-cwga9c4jyj] { opacity: 0.5; cursor: default; }
.ml-btn--primary[b-cwga9c4jyj] { background: var(--ks-accent); border-color: var(--ks-accent); color: #fff; }
.ml-btn--danger[b-cwga9c4jyj] { background: transparent; border-color: var(--ks-danger); color: var(--ks-danger-text); }
.ml-btn:focus-visible[b-cwga9c4jyj], .ml-chip:focus-visible[b-cwga9c4jyj], .ml-thumb--open:focus-visible[b-cwga9c4jyj], .ml-more:focus-visible[b-cwga9c4jyj], .ml-check:focus-visible[b-cwga9c4jyj] {
    outline: 2px solid var(--ks-signature); outline-offset: 2px;
}

/* --- filters ---------------------------------------------------------------------------------------- */
.ml-filters[b-cwga9c4jyj] { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.ml-chips[b-cwga9c4jyj] { display: flex; flex-wrap: wrap; gap: 8px; }
.ml-chip[b-cwga9c4jyj] {
    min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ks-border-strong);
    background: var(--ks-surface); color: var(--ks-text-dim); font: inherit; cursor: pointer; touch-action: manipulation;
}
.ml-chip[aria-pressed="true"][b-cwga9c4jyj] { background: var(--ks-accent); border-color: var(--ks-accent); color: #fff; font-weight: 600; }
.ml-chip:disabled[b-cwga9c4jyj] { opacity: 0.6; cursor: default; }
.ml-row[b-cwga9c4jyj] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ml-collections[b-cwga9c4jyj] { flex: 1 1 200px; min-width: 0; display: block; }
.ml-collections select[b-cwga9c4jyj], .ml-bulk-row select[b-cwga9c4jyj], .ml-bulk-row input[b-cwga9c4jyj] {
    width: 100%; min-height: 44px; padding: 0 12px; border-radius: var(--ks-radius-sm);
    border: 1px solid var(--ks-border-strong); background: var(--ks-inset); color: var(--ks-text); font: inherit; font-size: 16px;
}
.ml-visually-hidden[b-cwga9c4jyj] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- grid ------------------------------------------------------------------------------------------- */
.ml-grid[b-cwga9c4jyj] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ml-grid--busy[b-cwga9c4jyj] { opacity: 0.6; transition: opacity 150ms ease-out; }
.ml-tile[b-cwga9c4jyj] {
    position: relative; min-width: 0; display: flex; flex-direction: column;
    border: 1px solid var(--ks-border); border-radius: var(--ks-radius); background: var(--ks-surface); overflow: hidden;
}
.ml-tile--selected[b-cwga9c4jyj] { border-color: var(--ks-accent-2); box-shadow: 0 0 0 2px var(--ks-accent-ring); }
.ml-thumb[b-cwga9c4jyj] {
    position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1;
    background: var(--ks-inset); border: 0; padding: 0; color: var(--ks-text-muted); overflow: hidden;
}
.ml-thumb--open[b-cwga9c4jyj] { cursor: pointer; touch-action: manipulation; }
.ml-thumb img[b-cwga9c4jyj] { width: 100%; height: 100%; object-fit: cover; display: block; }
.ml-thumb svg[b-cwga9c4jyj] { width: 40px; height: 40px; }
.ml-thumb--pending[b-cwga9c4jyj]::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%); pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
    animation: ml-shimmer-b-cwga9c4jyj 1.4s ease-in-out infinite;
}
.ml-previews-note[b-cwga9c4jyj] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ml-thumb--audio[b-cwga9c4jyj] { aspect-ratio: 2 / 1; flex-direction: column; gap: 4px; }
.ml-duration[b-cwga9c4jyj] { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ks-text-dim); }
.ml-play[b-cwga9c4jyj] {
    position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; border-radius: 50%;
    background: rgba(11, 12, 16, 0.72); color: #fff; display: flex; align-items: center; justify-content: center;
}
.ml-play svg[b-cwga9c4jyj] { width: 16px; height: 16px; }
.ml-more[b-cwga9c4jyj], .ml-check[b-cwga9c4jyj] {
    position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; touch-action: manipulation;
    background: rgba(11, 12, 16, 0.72); color: #fff; border: 1px solid rgba(255, 255, 255, 0.18);
}
.ml-more svg[b-cwga9c4jyj] { width: 22px; height: 22px; }
.ml-check svg[b-cwga9c4jyj] { width: 22px; height: 22px; }
.ml-check[aria-checked="true"][b-cwga9c4jyj] { background: var(--ks-accent); border-color: var(--ks-accent-2); }
.ml-meta[b-cwga9c4jyj] { display: flex; flex-direction: column; gap: 6px; padding: 10px; min-width: 0; }
.ml-title[b-cwga9c4jyj] { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-audio[b-cwga9c4jyj] { width: 100%; height: 44px; }
.ml-badge[b-cwga9c4jyj] {
    align-self: flex-start; font-size: 12px; padding: 2px 8px; border-radius: 999px;
    border: 1px solid var(--ks-border-strong); color: var(--ks-text-dim);
}
.ml-badge--warn[b-cwga9c4jyj] { border-color: var(--ks-warn); color: var(--ks-warn-text); }

.ml-skeleton[b-cwga9c4jyj] {
    aspect-ratio: 1 / 1.25; border-radius: var(--ks-radius); border: 1px solid var(--ks-border);
    background: var(--ks-surface); position: relative; overflow: hidden;
}
.ml-skeleton[b-cwga9c4jyj]::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
    animation: ml-shimmer-b-cwga9c4jyj 1.4s ease-in-out infinite;
}
@keyframes ml-shimmer-b-cwga9c4jyj { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .ml-skeleton[b-cwga9c4jyj]::after, .ml-thumb--pending[b-cwga9c4jyj]::after { animation: none; } .ml-grid--busy[b-cwga9c4jyj] { transition: none; } }

.ml-empty[b-cwga9c4jyj] {
    text-align: center; padding: 40px 16px; border: 1px dashed var(--ks-border-strong); border-radius: var(--ks-radius);
    color: var(--ks-text-dim);
}
.ml-empty h2[b-cwga9c4jyj] { margin: 0 0 8px; font-size: 20px; color: var(--ks-text); }
.ml-empty p[b-cwga9c4jyj] { margin: 0 auto 14px; max-width: 42ch; }
.ml-empty-hint[b-cwga9c4jyj] { color: var(--ks-text-muted); }
.ml-more-row[b-cwga9c4jyj] { display: flex; justify-content: center; margin: 18px 0 8px; }

/* --- bulk bar: sits above the content, clear of the phone's bottom edge ------------------------------- */
.ml-bulkbar[b-cwga9c4jyj] {
    position: sticky; bottom: 0; z-index: 20; margin-top: 16px; padding: 12px;
    display: flex; flex-direction: column; gap: 10px;
    background: var(--ks-surface-2); border: 1px solid var(--ks-border-strong); border-radius: var(--ks-radius);
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.ml-bulk-count[b-cwga9c4jyj] { font-weight: 600; }
.ml-bulk-row[b-cwga9c4jyj] { display: flex; gap: 8px; }
.ml-bulk-row > select[b-cwga9c4jyj], .ml-bulk-row > input[b-cwga9c4jyj] { flex: 1 1 auto; min-width: 0; }

@media (min-width: 600px) { .ml-grid[b-cwga9c4jyj] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) {
    .ml-grid[b-cwga9c4jyj] { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
    .ml-bulkbar[b-cwga9c4jyj] { flex-direction: row; align-items: center; flex-wrap: wrap; }
    .ml-bulk-row[b-cwga9c4jyj] { flex: 0 1 320px; }
}

/* "Preparing preview" - a quiet plain-words label on a video tile whose poster is still being made (GitLab #193). */
.ml-preparing[b-cwga9c4jyj] {
    position: absolute; left: 8px; right: 8px; bottom: 8px; text-align: center;
    font-size: 12px; line-height: 1.3; color: var(--ks-text-dim); pointer-events: none;
}
/* /Components/Pages/PersonaChannel.razor.rz.scp.css */
/* GitLab #46 item 1: page overflowed the 390px mobile viewport (scrollWidth 398, a SPAN.pd-muted right
   edge at 398). The shared app.css rows below don't reserve shrink room on narrow flex/grid items, so a
   long label can push past the container instead of wrapping. Scoped here (not app.css) so other pages
   that use the same shared classes are unaffected. */

.pd-identity[b-5se5zk3ogl] {
    min-width: 0;
}

.pd-identity > div[b-5se5zk3ogl] {
    min-width: 0;
}

.pd-meter-head[b-5se5zk3ogl] {
    flex-wrap: wrap;
    row-gap: 2px;
}

.pd-rollup[b-5se5zk3ogl] {
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
}

.pd-stat[b-5se5zk3ogl] {
    min-width: 0;
}

.pd-muted[b-5se5zk3ogl] {
    overflow-wrap: anywhere;
}
/* /Components/Pages/Playbook.razor.rz.scp.css */
/* Creator Playbook (/playbook). Mobile-first: every strip that can outgrow 390px scrolls INSIDE its own container,
   never the page; touch targets are 44px; inputs are 16px so iOS does not zoom on focus. */
.pb-notice[b-d446ht93tt] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    margin: 0 0 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--ks-text-dim);
    background: color-mix(in srgb, var(--ks-signature) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--ks-signature) 25%, transparent);
}

.pb-notice-icon[b-d446ht93tt] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    font-style: italic;
    color: var(--ks-bg);
    background: var(--ks-signature);
}

.pb-notice-text[b-d446ht93tt] { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

.pb-notice-link[b-d446ht93tt] {
    color: var(--ks-signature);
    font-weight: 600;
    text-decoration: underline;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
}

.pb-tabs[b-d446ht93tt], .pb-filters[b-d446ht93tt] {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    margin-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}

.pb-filters[b-d446ht93tt] { align-items: center; }

.pb-tab[b-d446ht93tt], .pb-chip[b-d446ht93tt] {
    flex: none;
    border: 1px solid var(--ks-border);
    background: var(--ks-surface);
    color: var(--ks-text-dim);
    border-radius: 999px;
    padding: 0 14px;
    line-height: 44px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.pb-chip[b-d446ht93tt] { background: transparent; color: var(--ks-text-muted); font-weight: 500; }
.pb-tab--active[b-d446ht93tt] { background: var(--ks-accent); border-color: var(--ks-accent); color: #fff; }
.pb-chip--active[b-d446ht93tt] { border-color: var(--ks-accent); color: var(--ks-text); background: rgba(255, 255, 255, 0.06); }
.pb-tab:disabled[b-d446ht93tt], .pb-chip:disabled[b-d446ht93tt] { cursor: default; }

.pb-toggle[b-d446ht93tt] { flex: none; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ks-text-dim); white-space: nowrap; min-height: 44px; padding: 0 6px; }

.pb-list[b-d446ht93tt] { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin-top: 8px; }

@media (min-width: 900px) {
    .pb-list[b-d446ht93tt] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pb-skeleton[b-d446ht93tt] { height: 150px; border-radius: var(--ks-radius); background: var(--ks-surface); border: 1px solid var(--ks-border); }

.pb-card[b-d446ht93tt] {
    min-width: 0;
    padding: 14px 16px;
    border-radius: var(--ks-radius);
    background: var(--ks-surface);
    border: 1px solid var(--ks-border);
}

.pb-card-head[b-d446ht93tt] { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pb-card-title[b-d446ht93tt] { font-size: 17px; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pb-meta[b-d446ht93tt] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 8px; font-size: 12.5px; color: var(--ks-text-muted); }
.pb-rule[b-d446ht93tt] { margin: 0 0 8px; color: var(--ks-text); overflow-wrap: anywhere; }
.pb-aside[b-d446ht93tt] { margin: 0 0 6px; font-size: 13.5px; color: var(--ks-text-dim); overflow-wrap: anywhere; }
.pb-cite[b-d446ht93tt] { margin: 8px 0 0; font-size: 12.5px; color: var(--ks-text-faint); overflow-wrap: anywhere; }

.pb-badge[b-d446ht93tt] {
    display: inline-block;
    flex: none;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    border: 1px solid var(--ks-border-strong);
    color: var(--ks-text-dim);
}

.pb-badge--active[b-d446ht93tt] { color: var(--ks-ok-text); border-color: var(--ks-ok); }
.pb-badge--rejected[b-d446ht93tt] { color: var(--ks-danger-text); border-color: var(--ks-danger); }
.pb-badge--draft[b-d446ht93tt] { color: var(--ks-warn-text); border-color: var(--ks-warn); }

.pb-actions[b-d446ht93tt] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }

.pb-fav[b-d446ht93tt] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--ks-border);
    background: transparent;
    color: var(--ks-text-muted);
    font-size: 20px;
    cursor: pointer;
}

.pb-fav--on[b-d446ht93tt] { color: var(--ks-signature); border-color: var(--ks-signature); }

.pb-backdrop[b-d446ht93tt] { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 40; }

/* A bottom sheet on a phone, a side panel on desktop — one markup. */
.pb-sheet[b-d446ht93tt] {
    position: fixed;
    z-index: 41;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 92dvh;
    overflow-y: auto;
    padding: 16px;
    background: var(--ks-surface);
    border-top: 1px solid var(--ks-border-strong);
    border-radius: var(--ks-radius) var(--ks-radius) 0 0;
}

@media (min-width: 900px) {
    .pb-sheet[b-d446ht93tt] {
        left: auto;
        top: 0;
        width: 460px;
        max-height: none;
        border-radius: 0;
        border-top: 0;
        border-left: 1px solid var(--ks-border-strong);
    }
}

.pb-sheet-head[b-d446ht93tt] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pb-sheet-title[b-d446ht93tt] { font-size: 19px; margin: 0; }
.pb-sheet-close[b-d446ht93tt] { width: 44px; height: 44px; border: 0; background: transparent; color: var(--ks-text-dim); font-size: 26px; cursor: pointer; }

.pb-form[b-d446ht93tt] { display: grid; gap: 12px; }
.pb-field[b-d446ht93tt] { display: grid; gap: 4px; font-size: 13px; color: var(--ks-text-dim); min-width: 0; }
.pb-field small[b-d446ht93tt] { color: var(--ks-text-faint); }

.pb-field input[b-d446ht93tt], .pb-field textarea[b-d446ht93tt], .pb-field select[b-d446ht93tt] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 16px;
    color: var(--ks-text);
    background: var(--ks-inset);
    border: 1px solid var(--ks-border);
    border-radius: var(--ks-radius-sm);
}

.pb-form-actions[b-d446ht93tt] { display: flex; justify-content: flex-end; gap: 8px; }

/* PB-2: ingest panel, recent-ingests strip, source fieldset. */
.pb-ingest-panel[b-d446ht93tt] {
    display: grid;
    gap: 0.6rem;
    margin: 0 0 0.9rem;
    padding: 0.8rem 0.9rem;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--ks-signature) 25%, transparent);
    background: color-mix(in srgb, var(--ks-signature) 6%, transparent);
}

.pb-ingests[b-d446ht93tt] { margin: 0 0 0.9rem; min-width: 0; }

.pb-ingests-head[b-d446ht93tt] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }

.pb-ingests-title[b-d446ht93tt] { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--ks-text-dim); }

.pb-ingest-list[b-d446ht93tt] { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.4rem; }

.pb-ingest[b-d446ht93tt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    padding: 0.5rem 0.7rem;
    border-radius: 0.6rem;
    font-size: 0.88rem;
    background: color-mix(in srgb, var(--ks-text-dim) 7%, transparent);
    overflow-wrap: anywhere;
}

.pb-ingest-provenance[b-d446ht93tt] { color: var(--ks-text-dim); }

.pb-ingest-failure[b-d446ht93tt] { flex: 1 1 100%; color: var(--ks-danger, #c0392b); }

.pb-pill[b-d446ht93tt] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--ks-text-dim) 18%, transparent);
}

.pb-pill--done[b-d446ht93tt] { background: color-mix(in srgb, var(--ks-success, #2e8b57) 22%, transparent); }
.pb-pill--failed[b-d446ht93tt] { background: color-mix(in srgb, var(--ks-danger, #c0392b) 22%, transparent); }
.pb-pill--running[b-d446ht93tt], .pb-pill--queued[b-d446ht93tt] { background: color-mix(in srgb, var(--ks-signature) 22%, transparent); }

.pb-source[b-d446ht93tt] { margin: 0; padding: 0.6rem 0.7rem; border: 1px solid color-mix(in srgb, var(--ks-text-dim) 25%, transparent); border-radius: 0.6rem; display: grid; gap: 0.5rem; min-width: 0; }
.pb-source legend[b-d446ht93tt] { padding: 0 0.3rem; font-size: 0.9rem; }
.pb-source-range[b-d446ht93tt] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
/* /Components/Pages/SettingsSpokes/Billing.razor.rz.scp.css */
.bl-headline[b-98tphrac58] { display: flex; align-items: baseline; gap: 8px; }
.bl-available[b-98tphrac58] { font-size: 34px; font-weight: 700; line-height: 1; }
.bl-available-label[b-98tphrac58] { color: var(--ks-text-muted); }
.bl-bar[b-98tphrac58] { display: flex; height: 12px; margin: 14px 0 10px; border-radius: 6px; overflow: hidden; background: var(--ks-border); }
.bl-seg--used[b-98tphrac58] { background: var(--ks-accent, #6c8cff); }
.bl-seg--held[b-98tphrac58] { background: var(--ks-warning, #d9a441); }
.bl-legend[b-98tphrac58] { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; padding: 0; margin: 0 0 8px; font-size: 13.5px; }
.bl-dot[b-98tphrac58] { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; background: var(--ks-border); }
.bl-dot--used[b-98tphrac58] { background: var(--ks-accent, #6c8cff); }
.bl-dot--held[b-98tphrac58] { background: var(--ks-warning, #d9a441); }
.bl-reset[b-98tphrac58] { color: var(--ks-text-muted); margin: 0 0 14px; }
.bl-actions[b-98tphrac58] { display: flex; flex-direction: column; gap: 10px; }
.bl-btn[b-98tphrac58] { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 10px;
    border: 1px solid var(--ks-border-strong); color: var(--ks-text); text-decoration: none; text-align: center; }
.bl-btn--primary[b-98tphrac58] { background: var(--ks-accent); border-color: var(--ks-accent); color: #fff; }
.bl-note[b-98tphrac58] { padding: 10px 14px; margin-bottom: 14px; border: 1px solid var(--ks-border); border-radius: var(--ks-radius); color: var(--ks-text-muted); }
.bl-ledger-head[b-98tphrac58] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.bl-toggle[b-98tphrac58] { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.bl-num[b-98tphrac58] { text-align: right; }
.bl-who[b-98tphrac58] { color: var(--ks-text-muted); }
.bl-pager[b-98tphrac58] { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.bl-pager[b-98tphrac58]  .krome-btn { min-height: 44px; min-width: 88px; }
.bl-soon[b-98tphrac58], .bl-filtered[b-98tphrac58] { color: var(--ks-text-muted); margin: 0; }

@media (min-width: 640px) {
    .bl-actions[b-98tphrac58] { flex-direction: row; }
}
/* /Components/Pages/ShootDetail.razor.rz.scp.css */
/* GitLab #46 item 4: the shared KromeButton default (padding 10px 16px, 14px/1 line-height ≈ 34px tall)
   is below the owner's 44px minimum tap target. Raised only for this page's Reshoot button — other
   KromeButton consumers keep the shared default height. ::deep reaches into KromeButton's own markup
   since the button element is rendered by that child component, not by ShootDetail directly. */
[b-0hiljss9bi] .rd-reshoot-btn {
    min-height: 44px;
}
/* /Components/Personas/CaptureUploadButtons.razor.rz.scp.css */
/* capture-attr-everywhere §Task 1 — two-button capture affordance. Mirrors the app's .wz-drop button
   language (dashed border, muted text, accent on hover) so it drops into any existing upload section without
   a visual seam. */

.cap-buttons[b-bvnkx1zteg] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
}

.cap-camera-group[b-bvnkx1zteg] {
    display: none; /* desktop default: no camera on a mouse-driven device */
    align-items: stretch;
    gap: 4px;
}

/* The camera button is offered wherever the device has a coarse (touch) pointer — a real feature signal,
   never a user-agent sniff. Paired at runtime with a navigator.mediaDevices check (capture-affordance.js)
   that can only narrow this further, never widen it. */
@media (pointer: coarse) {
    .cap-camera-group[b-bvnkx1zteg] {
        display: flex;
    }
}

/* Belt-and-suspenders: a coarse-pointer device with no camera API at all still gets the button hidden,
   applied as a class toggle so there is no re-render/flash — see CaptureUploadButtons.OnAfterRenderAsync. */
.cap-no-media-devices .cap-camera-group[b-bvnkx1zteg] {
    display: none !important;
}

.cap-btn[b-bvnkx1zteg] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 44px; /* a comfortable touch target */
    padding: 10px 16px;
    border: 1.5px dashed var(--ks-border-strong);
    border-radius: var(--ks-radius-sm);
    color: var(--ks-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
    white-space: nowrap;
}

.cap-btn:hover[b-bvnkx1zteg] {
    border-color: var(--ks-accent);
    background: rgba(124, 92, 255, 0.05);
    color: var(--ks-text-muted);
}

/* ::deep is load-bearing here, not decoration: the <input> is rendered by the framework's <InputFile>
   CHILD component, not by this component's own markup, so Blazor CSS isolation never stamps it with this
   component's scope attribute — an unscoped ".cap-btn input[type=file]" silently never matches, the input
   stays position:static, and its native browser chrome (Chromium's "No file chosen" button, ~250px) inflates
   the whole flex row (the input becomes a real, wide flex CHILD instead of an invisible absolute overlay) —
   the 390px-overflow regression a real device screenshot caught. */
.cap-btn[b-bvnkx1zteg]  input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.cap-btn[b-bvnkx1zteg]  input[type=file]:disabled {
    cursor: not-allowed;
}

/* Visual parity with the neighboring Remove control (app.css .pd-shot-remove:disabled): a disabled button
   must LOOK disabled, or a tap in the pre-attach/IsBusy window looks live but is silently swallowed by the
   underlying disabled input — the same regression class this project has hit and fixed repeatedly. This
   replaced the old hand-rolled ".pd-shot-replace:has(input:disabled)" rule when Replace moved to this shared
   component. NO ::deep here, on purpose: Blazor's scoped-CSS preprocessor only recognizes ::deep as a plain
   top-level combinator token — it does NOT strip it from inside a :has(...) argument, so an earlier version
   of this rule shipped the literal, invalid text "::deep" to the browser (verified against the compiled
   .rz.scp.css output), which made the whole :has() argument list invalid and the rule permanently dead. The
   preprocessor also never stamps a scope attribute onto anything inside :has()'s parentheses, so a bare
   "input[type=file]" here already matches the InputFile child unscoped, exactly like the file-input overlay
   rule above needs ::deep to achieve via a normal descendant combinator — :has() just doesn't need the
   keyword to get there. */
.cap-btn:has(input[type=file]:disabled)[b-bvnkx1zteg] {
    opacity: 0.55;
    cursor: default;
}

.cap-btn-icon[b-bvnkx1zteg] {
    font-size: 1.1rem;
    line-height: 1;
}

.cap-facing-toggle[b-bvnkx1zteg] {
    flex: 0 0 auto;
    width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--ks-border-strong);
    border-radius: var(--ks-radius-sm);
    background: transparent;
    color: var(--ks-text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease;
}

.cap-facing-toggle:hover[b-bvnkx1zteg] {
    border-color: var(--ks-accent);
    color: var(--ks-accent);
}

.cap-facing-toggle:disabled[b-bvnkx1zteg] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Compact: icon-only, for a tight space like one gallery tile's per-photo Replace action. Touch targets stay
   at the app's 44px minimum (.cap-btn's own default) — compact removes the LABEL TEXT and side padding,
   never the tap-target size. */
.cap-buttons--compact .cap-btn[b-bvnkx1zteg] {
    padding: 6px 10px;
    flex: 1 1 0;
}

.cap-buttons--compact .cap-btn-icon[b-bvnkx1zteg] {
    font-size: 0.95rem;
}
/* /Components/Personas/KromeLiveCapture.razor.rz.scp.css */
/* KromeLiveCapture (lc-1). Mirrors the capture-affordance language; every control is at least 44x44 px (touch target). */

.klc[b-2pq86vx02d] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1.5px solid var(--ks-border-strong);
    border-radius: var(--ks-radius-sm);
}

.klc-status[b-2pq86vx02d] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ks-text-muted);
}

.klc-consent[b-2pq86vx02d] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ks-text-muted);
}

.klc-warn[b-2pq86vx02d] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ks-danger, #c0392b);
}

.klc-video[b-2pq86vx02d] {
    width: 100%;
    max-height: 60vh;
    border-radius: var(--ks-radius-sm);
    background: #000;
    object-fit: contain;
}

.klc-hidden[b-2pq86vx02d] {
    display: none;
}

.klc-prompt[b-2pq86vx02d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.klc-prompt-text[b-2pq86vx02d] {
    flex: 1 1 auto;
    text-align: center;
}

.klc-controls[b-2pq86vx02d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.klc-btn[b-2pq86vx02d] {
    min-width: 44px;
    min-height: 44px;
    padding: 10px 16px;
    border: 1.5px solid var(--ks-border-strong);
    border-radius: var(--ks-radius-sm);
    background: transparent;
    color: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}

.klc-btn:disabled[b-2pq86vx02d] {
    opacity: 0.5;
    cursor: default;
}

.klc-btn--primary[b-2pq86vx02d] {
    border-color: var(--ks-accent);
    background: rgba(124, 92, 255, 0.12);
}

.klc-btn--icon[b-2pq86vx02d] {
    padding: 10px 12px;
}

.klc-btn:focus-visible[b-2pq86vx02d],
.klc-record:focus-visible[b-2pq86vx02d] {
    outline: 3px solid var(--ks-accent);
    outline-offset: 2px;
}

/* The record / stop control: a 64px disc whose ring fills with elapsed / MaxSeconds while recording. */
.klc-record[b-2pq86vx02d] {
    position: relative;
    width: 64px;
    height: 64px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 3px solid var(--ks-border-strong);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.klc-record:disabled[b-2pq86vx02d] {
    opacity: 0.5;
    cursor: default;
}

.klc-record--on[b-2pq86vx02d] {
    border-color: transparent;
    background: conic-gradient(#e5484d var(--klc-p, 0%), var(--ks-border-strong) 0);
}

.klc-record--on[b-2pq86vx02d]::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--ks-bg, #fff);
}

.klc-dot[b-2pq86vx02d],
.klc-square[b-2pq86vx02d] {
    position: relative;
    z-index: 1;
    display: block;
    margin: auto;
    background: #e5484d;
}

.klc-dot[b-2pq86vx02d] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.klc-square[b-2pq86vx02d] {
    width: 22px;
    height: 22px;
    border-radius: 4px;
}

.klc-elapsed[b-2pq86vx02d] {
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
    color: var(--ks-text-muted);
}

.klc-fallback[b-2pq86vx02d] {
    margin-top: 4px;
}
/* /Components/Shared/ConnectingBanner.razor.rz.scp.css */
/* Subtle, unobtrusive connecting pill. Mobile-first: sits inline at the top of the page's action area,
   muted so it never competes with content, with a soft pulsing dot. Dark-studio theme aware. */
.connecting[b-xwzdx1852b] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.7rem;
    margin: 0 0 0.75rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--krome-text-secondary, #9aa0aa);
    background: color-mix(in srgb, var(--krome-text-secondary, #9aa0aa) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--krome-text-secondary, #9aa0aa) 18%, transparent);
}

.connecting-dot[b-xwzdx1852b] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--krome-primary, #f5b642);
    animation: connecting-pulse-b-xwzdx1852b 1s ease-in-out infinite;
}

@keyframes connecting-pulse-b-xwzdx1852b {
    0%, 100% { opacity: 0.35; transform: scale(0.85); }
    50%      { opacity: 1;    transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .connecting-dot[b-xwzdx1852b] { animation: none; opacity: 0.8; }
}
/* /Components/Shared/CreditsChip.razor.rz.scp.css */
.cc-chip[b-cmu1i2c9ej] { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 22px;
    border: 1px solid var(--ks-border); color: inherit; text-decoration: none; font-size: 13.5px; font-weight: 600; }
.cc-icon[b-cmu1i2c9ej] { width: 18px; height: 18px; }
.cc-long[b-cmu1i2c9ej] { display: none; }

@media (min-width: 640px) {
    .cc-short[b-cmu1i2c9ej] { display: none; }
    .cc-long[b-cmu1i2c9ej] { display: inline; }
}
/* /Components/Shared/DemoNotice.razor.rz.scp.css */
/* Mobile-first, low-alarm disclosure pill — informational (not an error), so it reads as "here's the
   situation" rather than "something is broken". Wraps naturally on a 390px viewport. */
.demo-notice[b-kqm9lic1b8] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    margin: 0 0 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--krome-text-secondary, #9aa0aa);
    background: color-mix(in srgb, var(--krome-primary, #f5b642) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--krome-primary, #f5b642) 25%, transparent);
}

.demo-notice-icon[b-kqm9lic1b8] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    font-style: italic;
    color: var(--krome-bg, #14161a);
    background: var(--krome-primary, #f5b642);
}

.demo-notice-text[b-kqm9lic1b8] {
    flex: 1 1 auto;
}

.demo-notice-link[b-kqm9lic1b8] {
    color: var(--krome-primary, #f5b642);
    font-weight: 600;
    text-decoration: underline;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
}
/* /Components/Shared/FailureReason.razor.rz.scp.css */
/* Mobile-first: the operator sentence must wrap rather than force horizontal scroll at 390 OR 1280 (GitLab
   #61). The raw provider text is read-only and folded behind a ≥44px disclosure toggle. */

.failure-reason-primary[b-rfvxk2ljxz] {
    margin: 0;
    color: var(--ks-text);
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}

.failure-reason-details[b-rfvxk2ljxz] {
    margin-top: 0.5rem;
    max-width: 100%;
}

.failure-reason-summary[b-rfvxk2ljxz] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0;
    cursor: pointer;
    color: var(--ks-text-faint);
    font-size: 0.8125rem;
    font-weight: 500;
}

.failure-reason-raw[b-rfvxk2ljxz] {
    margin: 0.25rem 0 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ks-border);
    border-radius: var(--ks-radius-sm, var(--ks-radius));
    background: var(--ks-surface);
    color: var(--ks-text-faint);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    white-space: pre-wrap;
}
/* /Components/Shared/OwnerBadge.razor.rz.scp.css */
/* Read-only company view owner pill (GitLab #39) — compact, never colour alone, truncates long names. */
.ks-owner-badge[b-6fjr1b5gz8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 2px 10px;
    border: 1px solid var(--ks-border);
    border-radius: 999px;
    background: var(--ks-surface-2, rgba(255, 255, 255, 0.06));
    color: var(--ks-text-faint);
    font-size: 12px;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ks-owner-badge-label[b-6fjr1b5gz8] {
    font-weight: 600;
    color: var(--ks-text, inherit);
}

.ks-owner-badge-name[b-6fjr1b5gz8] {
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Components/Shared/ReadOnlyOwnerNote.razor.rz.scp.css */
/* Read-only company view note (GitLab #39) — full-width on mobile, ≥44px tall, icon + text (never colour alone). */
.ks-readonly-note[b-10eo4ncqx9] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin: 12px 0;
    padding: 10px 14px;
    border: 1px solid var(--ks-border);
    border-left: 3px solid var(--ks-signature-2, currentColor);
    border-radius: var(--ks-radius, 8px);
    background: var(--ks-surface-2, rgba(255, 255, 255, 0.04));
    color: var(--ks-text, inherit);
    font-size: 14px;
    line-height: 1.4;
}

.ks-readonly-note-icon[b-10eo4ncqx9] {
    flex: none;
    font-size: 16px;
}
/* /Components/Shared/SettingsGroupView.razor.rz.scp.css */
/* Typed settings spoke — mobile-first (single column, ≥44px touch targets, sticky search).
   Each row leads with a plain title + one-sentence summary, then the typed control, with the raw key
   tucked into an "Advanced" disclosure. Reuses the app's design tokens so light/dark stay consistent. */

.sg-search[b-etalmwx3rx] {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px 0 12px;
    background: var(--ks-bg);
}

.sg-search-input[b-etalmwx3rx] {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 15px;
    color: var(--ks-text);
    background: var(--ks-inset);
    border: 1px solid var(--ks-border-strong);
    border-radius: var(--ks-radius-sm);
}

.sg-search-input:focus[b-etalmwx3rx] {
    outline: none;
    border-color: var(--ks-accent);
    box-shadow: 0 0 0 3px var(--ks-accent-ring);
}

.sg-group[b-etalmwx3rx] {
    margin-bottom: 26px;
}

.sg-category[b-etalmwx3rx] {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ks-signature-2);
    margin: 0 0 10px;
}

.sg-rows[b-etalmwx3rx] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ks-border);
    border-radius: var(--ks-radius);
    overflow: hidden;
}

.sg-row[b-etalmwx3rx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--ks-border);
    background: var(--ks-surface);
}

.sg-row:last-child[b-etalmwx3rx] {
    border-bottom: none;
}

.sg-row--inactive[b-etalmwx3rx] {
    opacity: 0.55;
}

.sg-row-head[b-etalmwx3rx] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.sg-title[b-etalmwx3rx] {
    font-size: 15px;
    font-weight: 600;
    color: var(--ks-text);
}

.sg-inactive-tag[b-etalmwx3rx] {
    font-size: 10.5px;
    text-transform: uppercase;
    color: var(--ks-warn-text);
}

/* Persistent "charges apply" badge on a live provider switch that is currently ON (settings-w1-personas). */
.sg-live-badge[b-etalmwx3rx] {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ks-danger-text, #c62828);
    white-space: nowrap;
}

/* The live-switch-on confirm step now renders through the shared ConfirmDialog (feature/media-delete-ux,
   #136) — its modal chrome lives in ConfirmDialog.razor/app.css, nothing page-local needed here. */

.sg-summary[b-etalmwx3rx] {
    margin: 0;
    color: var(--ks-text-muted);
    font-size: 13px;
    line-height: 1.5;
    max-width: 68ch;
}

.sg-help[b-etalmwx3rx] {
    margin: 2px 0 0;
    color: var(--ks-text-dim);
    font-size: 12.5px;
    line-height: 1.5;
    max-width: 68ch;
}

.sg-control[b-etalmwx3rx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.sg-current[b-etalmwx3rx] {
    font-size: 14px;
    color: var(--ks-text-dim);
    word-break: break-word;
    overflow-wrap: anywhere;
}

.sg-edit-btn[b-etalmwx3rx] {
    flex: none;
    min-height: 44px;
    min-width: 44px;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--ks-text-muted);
    background: transparent;
    border: 1px solid var(--ks-border-strong);
    border-radius: 8px;
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease;
}

.sg-edit-btn:hover[b-etalmwx3rx] {
    color: var(--ks-text);
    border-color: var(--ks-accent);
}

.sg-edit[b-etalmwx3rx] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.sg-edit-actions[b-etalmwx3rx] {
    display: flex;
    gap: 8px;
}

.sg-advanced[b-etalmwx3rx] {
    margin-top: 4px;
}

.sg-advanced > summary[b-etalmwx3rx] {
    cursor: pointer;
    font-size: 12px;
    color: var(--ks-text-faint);
    list-style: none;
    padding: 2px 0;
}

.sg-advanced > summary:hover[b-etalmwx3rx] {
    color: var(--ks-text-muted);
}

.sg-advanced-body[b-etalmwx3rx] {
    padding: 8px 0 2px;
}

.sg-key[b-etalmwx3rx] {
    font-family: "Cascadia Code", monospace;
    font-size: 12px;
    color: var(--ks-text-dim);
    word-break: break-all;
}

.sg-desc[b-etalmwx3rx] {
    display: block;
    margin: 6px 0 0;
    color: var(--ks-text-muted);
    font-size: 12px;
    line-height: 1.5;
    max-width: 72ch;
}

/* The control sits under the title/summary at every width; give it room to breathe on wider screens. */
@media (min-width: 640px) {
    .sg-row[b-etalmwx3rx] {
        padding: 18px 20px;
    }
}
/* /Components/Shared/UnassignedItemsCard.razor.rz.scp.css */
/* Operator-ownership backfill report card (design decision 5, task 0b) — mobile-first single-column
   stacked list, ≥44px touch targets, skeleton rows while loading (never "Loading…" text). */

.uic-card[b-neibccltcq] {
    margin-top: 26px;
}

.uic-heading[b-neibccltcq] {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ks-signature-2);
    margin: 0 0 6px;
}

.uic-blurb[b-neibccltcq] {
    font-size: 13px;
    color: var(--ks-text-faint);
    margin: 0 0 12px;
}

.uic-rows[b-neibccltcq] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ks-border);
    border-radius: var(--ks-radius);
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
}

.uic-row[b-neibccltcq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--ks-border);
    background: var(--ks-surface);
}

.uic-row:last-child[b-neibccltcq] {
    border-bottom: none;
}

.uic-aggregate[b-neibccltcq] {
    font-size: 14px;
    color: var(--ks-text);
}

.uic-count[b-neibccltcq] {
    font-size: 13px;
    color: var(--ks-text-faint);
    white-space: nowrap;
}

.uic-empty[b-neibccltcq] {
    font-size: 13px;
    color: var(--ks-text-faint);
    margin: 0;
}

.uic-skeleton[b-neibccltcq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.uic-skeleton-row[b-neibccltcq] {
    height: 44px;
    border-radius: var(--ks-radius-sm, var(--ks-radius));
    border: 1px solid var(--ks-border);
    background: var(--ks-surface);
    position: relative;
    overflow: hidden;
}

.uic-skeleton-row[b-neibccltcq]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
    transform: translateX(-100%);
    animation: uic-skeleton-shimmer-b-neibccltcq 1.4s ease-in-out infinite;
}

@keyframes uic-skeleton-shimmer-b-neibccltcq {
    100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .uic-skeleton-row[b-neibccltcq]::after { animation: none; }
}
/* /Components/Studio/LeadAnchorConfirmCard.razor.rz.scp.css */
/* Lead-anchor check card (GitLab #58 S5). Mobile-first: at 390 px the two photos stack full width; from 480 px
   they sit side by side. Both buttons are 44 px tall touch targets, full width under 480 px. Text is 16 px+. */

.lac[b-unljtlrzvh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 16px;
    padding: 16px;
    border: 1px solid var(--ks-accent);
    border-radius: var(--ks-radius);
    background: var(--ks-surface);
}

.lac-heading[b-unljtlrzvh] {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.3;
}

.lac-sub[b-unljtlrzvh] {
    margin: 0;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--ks-text-muted);
}

.lac-images[b-unljtlrzvh] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.lac-fig[b-unljtlrzvh] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lac-img-box[b-unljtlrzvh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: var(--shoot-aspect, 16 / 10); /* short on a phone so the buttons stay near the fold */
    overflow: hidden;
    border-radius: var(--ks-radius-sm);
    background: var(--ks-surface-2);
}

.lac-img-open[b-unljtlrzvh] {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.lac-img[b-unljtlrzvh] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The shared persona avatar renders at its own hero size - let it fill the box so it matches the new photo. */
.lac-persona[b-unljtlrzvh]  .lac-avatar,
.lac-persona[b-unljtlrzvh]  .krome-persona-avatar {
    width: 100%;
    height: 100%;
    max-width: none;
    border-radius: 0;
}

.lac-placeholder[b-unljtlrzvh] {
    padding: 12px;
    text-align: center;
    font-size: 1rem;
    color: var(--ks-text-muted);
}

.lac-cap[b-unljtlrzvh] {
    font-size: 1rem;
    color: var(--ks-text-muted);
    text-align: center;
}

.lac-actions[b-unljtlrzvh] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* On a phone the buttons ride the bottom of the viewport while the card is on screen. */
    position: sticky;
    bottom: 0;
    padding: 8px 0 0;
    border-top: 1px solid var(--ks-border);
    background: var(--ks-surface);
}

.lac[b-unljtlrzvh]  .lac-btn {
    min-height: 44px;
    width: 100%;
    font-size: 1rem;
}

.lac-reason[b-unljtlrzvh] {
    margin: 0;
    font-size: 1rem;
    color: var(--ks-text-muted);
}

.lac-auto[b-unljtlrzvh] {
    margin: 0 0 12px;
    font-size: 1rem;
    color: var(--ks-text-muted);
}

@media (min-width: 480px) {
    .lac-img-box[b-unljtlrzvh] {
        aspect-ratio: var(--shoot-aspect, 4 / 5);
    }

    .lac-actions[b-unljtlrzvh] {
        position: static;
        padding: 0;
        border-top: 0;
    }

    .lac-images[b-unljtlrzvh] {
        grid-template-columns: 1fr 1fr;
    }

    .lac-actions[b-unljtlrzvh] {
        flex-direction: row;
    }

    .lac[b-unljtlrzvh]  .lac-btn {
        width: auto;
        flex: 1 1 0;
    }
}

/* GitLab #102: the itemised "Photos $X + video clips $Y = about $Z" line above the buttons. */
.lac-spend[b-unljtlrzvh] {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
/* /Components/Studio/LibraryThumb.razor.rz.scp.css */
/* LibraryThumb — fixed-aspect preview/thumbnail tile for a Location or ShootConcept (library-previews-
   thumbnails). Scoped so it can't leak; falls back to plain values when a --krome-* token isn't defined. */

.lib-thumb[b-23vrhpcksi] {
    position: relative;
    width: 100%;
    border-radius: var(--krome-radius-md, 8px);
    overflow: hidden;
    background: var(--krome-primary-light, #e2e8f0);
}

.lib-thumb--card[b-23vrhpcksi],
.lib-thumb--hero[b-23vrhpcksi] {
    aspect-ratio: 4 / 3;
}

.lib-thumb--hero[b-23vrhpcksi] {
    max-width: 420px;
}

/* Mobile-first: a 2-column library grid keeps the card thumb well under 45vw at 390px (Law 12). */
.lib-thumb--chip[b-23vrhpcksi] {
    aspect-ratio: 1 / 1;
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
}

.lib-thumb-tap[b-23vrhpcksi] {
    position: absolute;
    inset: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: block;
    width: 100%;
    height: 100%;
}

.lib-thumb-img[b-23vrhpcksi] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lib-thumb-skeleton[b-23vrhpcksi] {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%),
        var(--krome-primary-light, #e2e8f0);
    background-size: 200% 100%, auto;
    animation: lib-thumb-shimmer-b-23vrhpcksi 1.2s ease-in-out infinite;
}

.lib-thumb-pending[b-23vrhpcksi],
.lib-thumb-empty[b-23vrhpcksi] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--krome-text-muted, #475569);
    text-align: center;
    padding: 8px;
}

.lib-thumb-shimmer[b-23vrhpcksi] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
    background-size: 200% 100%;
    animation: lib-thumb-shimmer-b-23vrhpcksi 1.2s ease-in-out infinite;
}

@keyframes lib-thumb-shimmer-b-23vrhpcksi {
    0% { background-position: 200% 0, 0 0; }
    100% { background-position: -200% 0, 0 0; }
}

.lib-thumb-label[b-23vrhpcksi] {
    font-size: 12px;
    font-weight: 600;
}

.lib-thumb-monogram[b-23vrhpcksi] {
    font-size: 22px;
    font-weight: 700;
    opacity: 0.55;
}

.lib-thumb-action[b-23vrhpcksi] {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--krome-border, #cbd5e1);
    background: var(--krome-surface, #fff);
    cursor: pointer;
}

.lib-thumb-action:disabled[b-23vrhpcksi] {
    opacity: 0.6;
    cursor: default;
}

/* Card size: keeps the tile centre free for the ancestor's own card-tap (PersonaCard/ConceptCard precedent) —
   a >=44x44 corner pill instead of the centred ghost. .lib-thumb-empty is already `position: absolute`, so it
   is this pill's containing block; taking it out of flex flow leaves the monogram alone, centred. */
.lib-thumb-action--corner[b-23vrhpcksi] {
    position: absolute;
    right: 6px;
    bottom: 6px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lib-thumb-empty--failed .lib-thumb-action[b-23vrhpcksi] {
    border-color: var(--krome-danger, #dc2626);
    color: var(--krome-danger, #dc2626);
}

/* Ready-state Card-size lightbox affordance (concept-form-lightbox-intercept): an icon-only corner pill,
   same size/position contract as the generate/retry pill above but never rendered at the same time (Ready is
   mutually exclusive with None/Failed) so the corner is never contested. */
.lib-thumb-expand[b-23vrhpcksi] {
    padding: 8px;
}

.lib-thumb-expand svg[b-23vrhpcksi] {
    width: 16px;
    height: 16px;
    display: block;
}

/* Chip stays presentational-only besides the lightbox tap — no room for a label/button on a 56px tile, and it
   sits inside a foreign interactive ancestor (the opt-card / shoot-card tap target) so it must not draw its
   own generate affordance. */
.lib-thumb--chip .lib-thumb-label[b-23vrhpcksi],
.lib-thumb--chip .lib-thumb-action[b-23vrhpcksi] {
    display: none;
}

.lib-thumb--chip .lib-thumb-monogram[b-23vrhpcksi] {
    font-size: 16px;
}

.lib-thumb-tools[b-23vrhpcksi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.lib-thumb-tool[b-23vrhpcksi] {
    position: relative;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--krome-border, #cbd5e1);
    background: var(--krome-surface, #fff);
    cursor: pointer;
    overflow: hidden;
    display: inline-block;
}

.lib-thumb-tool input[type="file"][b-23vrhpcksi] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.lib-thumb-tool--danger[b-23vrhpcksi] {
    color: var(--krome-danger, #dc2626);
    border-color: var(--krome-danger, #dc2626);
}

.lib-thumb-error[b-23vrhpcksi] {
    font-size: 12px;
    color: var(--krome-danger, #dc2626);
}

@media (prefers-reduced-motion: reduce) {
    .lib-thumb-skeleton[b-23vrhpcksi],
    .lib-thumb-shimmer[b-23vrhpcksi] {
        animation: none;
    }
}