.abroll-studio-view {
    --abs-bg: #07111e;
    --abs-panel: #0c1a2a;
    --abs-panel-2: #101f31;
    --abs-line: #25384c;
    --abs-text: #edf4fb;
    --abs-muted: #91a3b7;
    --abs-blue: #3b82f6;
    --abs-green: #21c58b;
    --abs-coral: #f06f5f;
    --abs-amber: #f0b44d;
    --abs-violet: #a78bfa;
    color: var(--abs-text);
    min-height: calc(100vh - 88px);
}

.abs-shell {
    background: var(--abs-bg);
    border: 1px solid var(--abs-line);
    min-width: 0;
    overflow: hidden;
}

.abroll-studio-view [hidden] {
    display: none !important;
}

.abs-toolbar,
.abs-panel-heading,
.abs-timeline-toolbar,
.abs-transport {
    display: flex;
    align-items: center;
}

.abs-toolbar {
    min-height: 68px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--abs-line);
    gap: 14px;
}

.abs-project-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
}

.abs-project-mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid #3b526a;
    background: #162a3e;
    color: #72e4bb;
    font-weight: 800;
}

.abs-project-identity strong,
.abs-project-identity span {
    display: block;
}

.abs-project-identity span,
.abs-panel-heading span,
.abs-timeline-toolbar span {
    margin-top: 2px;
    color: var(--abs-muted);
    font-size: 12px;
}

.abs-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.abs-btn,
.abs-icon-btn,
.abs-dropzone {
    border: 1px solid transparent;
    color: var(--abs-text);
    cursor: pointer;
    font: inherit;
}

.abs-btn {
    min-height: 38px;
    padding: 8px 13px;
    border-radius: 6px;
    font-weight: 700;
    white-space: nowrap;
}

.abs-btn:disabled,
.abs-icon-btn:disabled {
    cursor: not-allowed;
    opacity: .42;
}

.abs-btn-primary { background: var(--abs-blue); }
.abs-btn-export { background: var(--abs-green); color: #04150f; }
.abs-btn-subtitle { background: #5b3fa4; border-color: #8064c5; }
.abs-btn-secondary { background: #1d3852; border-color: #36536f; }
.abs-btn-muted { background: transparent; border-color: #36506a; }
.abs-btn-danger { background: #50272b; border-color: #8e3e43; color: #ffc6c2; }

.abs-icon-btn {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 4px;
    background: #102237;
    border-color: #31475d;
    font-size: 17px;
}

.abs-save-state {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--abs-muted);
    font-size: 12px;
    white-space: nowrap;
}

.abs-state-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #73859a;
}

.abs-save-state[data-state="busy"] .abs-state-dot { background: var(--abs-amber); }
.abs-save-state[data-state="done"] .abs-state-dot { background: var(--abs-green); }
.abs-save-state[data-state="error"] .abs-state-dot { background: var(--abs-coral); }

.abs-workspace {
    display: grid;
    grid-template-columns: minmax(230px, 290px) minmax(320px, 1fr) minmax(240px, 300px);
    height: min(570px, calc(100vh - 330px));
    min-height: 430px;
}

.abs-media-panel,
.abs-preview-panel,
.abs-inspector-panel {
    min-width: 0;
    overflow: auto;
}

.abs-media-panel,
.abs-preview-panel {
    border-right: 1px solid var(--abs-line);
}

.abs-panel-heading {
    min-height: 58px;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--abs-line);
}

.abs-panel-heading strong,
.abs-panel-heading span {
    display: block;
}

.abs-lane {
    border-bottom: 1px solid var(--abs-line);
    padding: 8px;
}

.abs-dropzone {
    width: 100%;
    min-height: 54px;
    display: grid;
    grid-template-columns: 34px 1fr 30px;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    text-align: left;
    background: #0d1d2e;
    border-color: #2c4156;
    border-radius: 6px;
}

.abs-dropzone:hover,
.abs-dropzone.is-dragover {
    border-color: #69a9ec;
    background: #132a40;
}

.abs-dropzone strong,
.abs-dropzone small {
    display: block;
}

.abs-dropzone small {
    margin-top: 2px;
    color: var(--abs-muted);
}

.abs-lane-badge {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid currentColor;
    font-weight: 800;
}

.abs-lane-a .abs-lane-badge { color: #73a9ff; }
.abs-lane-b .abs-lane-badge { color: #ff907f; }
.abs-lane-audio .abs-lane-badge { color: #6de0b7; }

.abs-lane-count {
    justify-self: end;
    color: var(--abs-muted);
    font-variant-numeric: tabular-nums;
}

.abs-source-list {
    display: grid;
    gap: 5px;
    margin-top: 6px;
    max-height: 142px;
    overflow: auto;
}

.abs-source-item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 5px 7px;
    background: #091725;
    border-left: 3px solid #3f5a75;
}

.abs-source-item[data-role="a"] { border-left-color: var(--abs-blue); cursor: pointer; }
.abs-source-item[data-role="b"] { border-left-color: var(--abs-coral); cursor: copy; }
.abs-source-item[data-role="audio"] { border-left-color: var(--abs-green); }
.abs-source-item.is-selected-a {
    background: #102a49;
    box-shadow: inset 0 0 0 1px #4d91ed;
}
.abs-source-item.is-mapped-b {
    background: #2b1b1c;
    box-shadow: inset 0 0 0 1px #8a4b45;
}
.abs-source-item.is-unmapped-b { opacity: .38; }

.abs-source-thumb {
    width: 32px;
    height: 28px;
    display: grid;
    place-items: center;
    background: #15283a;
    color: #9eb4ca;
    font-size: 11px;
}

.abs-source-copy {
    min-width: 0;
}

.abs-source-copy strong,
.abs-source-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.abs-source-copy strong { font-size: 12px; }
.abs-source-copy small { color: var(--abs-muted); font-size: 11px; }
.abs-source-size { color: var(--abs-muted); font-size: 10px; }
.abs-source-side {
    display: grid;
    justify-items: end;
    gap: 3px;
}
.abs-source-map {
    color: #bcd5ee;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}
.abs-source-item.is-mapped-b .abs-source-map { color: #ffb2a8; }

.abs-upload-status,
.abs-render-status {
    margin: 8px;
    padding: 9px;
    border: 1px solid #34506b;
    background: #0d2134;
}

.abs-upload-status > div,
.abs-render-status > div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12px;
}

.abs-upload-status progress,
.abs-render-status progress {
    width: 100%;
    height: 7px;
    accent-color: var(--abs-green);
}

.abs-preview-panel {
    display: flex;
    flex-direction: column;
    background: #050b12;
}

.abs-stage {
    position: relative;
    display: grid;
    place-items: center;
    flex: 1;
    min-height: 300px;
    padding: 14px;
    overflow: hidden;
}

.abs-stage video {
    display: none;
    max-width: 100%;
    height: 100%;
    max-height: 430px;
    aspect-ratio: 9 / 16;
    background: #000;
    object-fit: contain;
}

.abs-stage video.has-media { display: block; }

.abs-subtitle-overlay {
    position: absolute;
    z-index: 4;
    left: 50%;
    width: min(82%, 430px);
    padding: 4px 10px;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-shadow:
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    pointer-events: none;
}

.abs-subtitle-overlay[data-template="outline"] { text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000; }
.abs-subtitle-overlay[data-template="yellow_pop"],
.abs-subtitle-overlay[data-template="karaoke_highlight"] { color: #ffe84d; }
.abs-subtitle-overlay[data-template="neon"] { color: #7df9ff; text-shadow: 0 0 7px #0057ff, 0 0 14px #0057ff; }
.abs-subtitle-overlay[data-template="blue_glow"] { text-shadow: 0 0 7px #1597ff, 0 0 14px #1597ff; }
.abs-subtitle-overlay[data-template="box"],
.abs-subtitle-overlay[data-template="black_label"] { background: rgba(0, 0, 0, .78); text-shadow: none; }
.abs-subtitle-overlay[data-template="sticker"] { text-shadow: -3px -3px 0 #ff2e8a, 3px -3px 0 #ff2e8a, -3px 3px 0 #ff2e8a, 3px 3px 0 #ff2e8a; }
.abs-subtitle-overlay[data-template="green_pop"],
.abs-subtitle-overlay[data-template="lime_pop"] { color: #b8ff65; text-shadow: -2px -2px 0 #173b12, 2px 2px 0 #173b12; }
.abs-subtitle-overlay[data-template="luxury_gold"] { color: #ffd166; text-shadow: 0 2px 0 #3a2500, 0 4px 12px #000; }
.abs-subtitle-overlay[data-template="comic_burst"] { font-size: 42px; text-shadow: -4px -4px 0 #ff3d00, 4px 4px 0 #ff3d00; }
.abs-subtitle-overlay[data-template="red_alert"] { text-shadow: -3px -3px 0 #e11d48, 3px 3px 0 #e11d48; }
.abs-subtitle-overlay[data-template="purple_punch"] { color: #f5d0fe; text-shadow: -3px -3px 0 #7e22ce, 3px 3px 0 #7e22ce; }
.abs-subtitle-overlay[data-template="cyan_ice"] { color: #e0fbff; text-shadow: 0 0 8px #0891b2; }
.abs-subtitle-overlay[data-template="orange_sale"] { color: #ffb703; text-shadow: -3px -3px 0 #7c2d12, 3px 3px 0 #7c2d12; }
.abs-subtitle-overlay[data-template="white_shadow"] { text-shadow: 0 4px 8px #111827; }
.abs-subtitle-overlay[data-template="retro_pixel"] { color: #fde047; font-family: Consolas, monospace; text-shadow: 3px 3px 0 #581c87; }
.abs-subtitle-overlay[data-template="soft_pastel"] { color: #fce7f3; text-shadow: 0 0 8px #be185d; }

.abs-stage-placeholder {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    width: min(260px, 80%);
    aspect-ratio: 9 / 16;
    border: 1px dashed #33475c;
    color: var(--abs-muted);
    text-align: center;
    padding: 20px;
}

.abs-stage-placeholder strong { color: var(--abs-text); }
.abs-stage-icon { font-size: 34px; color: #56718c; }

.abs-active-layers {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.35fr) minmax(92px, .5fr);
    gap: 1px;
    border-top: 1px solid var(--abs-line);
    border-bottom: 1px solid var(--abs-line);
    background: var(--abs-line);
}

.abs-active-layer,
.abs-active-window {
    min-width: 0;
    padding: 8px 10px;
    background: #0a1623;
}

.abs-active-layer span,
.abs-active-window span,
.abs-active-layer strong,
.abs-active-window strong {
    display: block;
}

.abs-active-layer span,
.abs-active-window span {
    color: var(--abs-muted);
    font-size: 9px;
    text-transform: uppercase;
}

.abs-active-layer strong,
.abs-active-window strong {
    margin-top: 3px;
    overflow: hidden;
    color: #dceaf7;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.abs-active-layer[data-role="a"] { box-shadow: inset 3px 0 0 var(--abs-blue); }
.abs-active-layer[data-role="b"] { box-shadow: inset 3px 0 0 var(--abs-coral); }
.abs-active-layer[data-role="b"] strong { color: #ffb9b2; }
.abs-active-audio-layer { box-shadow: inset 3px 0 0 var(--abs-green); }
.abs-active-audio-layer strong { color: #a7f3d0; }
.abs-active-window strong {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

.abs-transport {
    min-height: 52px;
    padding: 8px 12px;
    border-top: 1px solid var(--abs-line);
    gap: 9px;
}

.abs-play-btn { width: 42px; color: #e6fff6; }

.abs-zoom {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--abs-muted);
    font-size: 11px;
}

.abs-zoom input { width: 100px; }
.abs-hash {
    margin-left: auto;
    color: var(--abs-muted);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 10px;
}

.abs-timecode {
    color: #cae1f7;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
}

.abs-inspector-panel {
    background: var(--abs-panel);
}

.abs-subtitle-panel {
    padding: 12px;
    border-bottom: 1px solid var(--abs-line);
    background: #0d1728;
}

.abs-subtitle-heading,
.abs-subtitle-toggle,
.abs-subtitle-actions,
.abs-cue-item {
    display: flex;
    align-items: center;
}

.abs-subtitle-heading {
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.abs-subtitle-heading strong,
.abs-subtitle-eyebrow {
    display: block;
}

.abs-subtitle-eyebrow {
    margin-bottom: 3px;
    color: #bba8f5;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.abs-subtitle-status {
    padding: 4px 7px;
    border: 1px solid #405168;
    background: #142236;
    color: var(--abs-muted);
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.abs-subtitle-status[data-state="busy"],
.abs-subtitle-status[data-state="dirty"] { border-color: #8c6fc9; color: #d7c9ff; }
.abs-subtitle-status[data-state="done"] { border-color: #267b61; color: #71e0b8; }
.abs-subtitle-status[data-state="error"] { border-color: #8e3e43; color: #ffc6c2; }

.abs-subtitle-toggle {
    gap: 8px;
    min-height: 32px;
    color: #dce8f4;
    font-size: 11px;
}

.abs-subtitle-toggle input {
    width: 16px;
    height: 16px;
    accent-color: var(--abs-violet);
}

.abs-subtitle-actions {
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.abs-subtitle-actions .abs-btn {
    min-height: 32px;
    padding: 6px 8px;
    font-size: 10px;
}

.abs-subtitle-summary {
    margin: 8px 0 0;
    color: var(--abs-muted);
    font-size: 10px;
    line-height: 1.4;
}

.abs-cue-list {
    display: grid;
    gap: 5px;
    max-height: 205px;
    margin-top: 9px;
    overflow: auto;
}

.abs-cue-item {
    align-items: stretch;
    gap: 5px;
    padding: 5px;
    border-left: 3px solid #6046a0;
    background: #091421;
}

.abs-cue-item.is-selected {
    background: #1c1833;
    box-shadow: inset 0 0 0 1px #7259b7;
}

.abs-cue-time {
    width: 70px;
    border: 0;
    background: #18273a;
    color: #b9cbe0;
    cursor: pointer;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 9px;
}

.abs-cue-text {
    min-width: 0;
    flex: 1;
    resize: vertical;
    border: 1px solid #354a61;
    border-radius: 3px;
    background: #07111e;
    color: var(--abs-text);
    padding: 5px 6px;
    font: inherit;
    font-size: 11px;
    line-height: 1.35;
}

.abs-cue-text:focus {
    border-color: #9078cc;
    outline: 1px solid #9078cc;
}

.abs-cue-empty {
    padding: 10px;
    border: 1px dashed #3d4c61;
    color: var(--abs-muted);
    font-size: 10px;
    line-height: 1.45;
}

.abs-mapping-panel {
    padding: 12px;
    border-bottom: 1px solid var(--abs-line);
    background: #0a1725;
}

.abs-mapping-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.abs-mapping-heading strong,
.abs-mapping-heading small,
.abs-mapping-eyebrow {
    display: block;
}

.abs-mapping-eyebrow {
    color: #78aef7;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.abs-mapping-heading strong {
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.abs-mapping-heading small {
    margin-top: 3px;
    color: var(--abs-muted);
    font-size: 10px;
}

.abs-mapping-count {
    min-width: 42px;
    padding: 5px 7px;
    border: 1px solid #355978;
    background: #102b43;
    color: #d7ebff;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
}

.abs-mapping-list {
    display: grid;
    gap: 5px;
    max-height: 154px;
    margin-top: 10px;
    overflow: auto;
}

.abs-mapping-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    width: 100%;
    min-height: 43px;
    padding: 5px 7px;
    border: 1px solid #32485c;
    border-radius: 4px;
    background: #0d1d2c;
    color: var(--abs-text);
    cursor: pointer;
    text-align: left;
}

.abs-mapping-item:hover,
.abs-mapping-item.is-selected {
    border-color: #e37869;
    background: #2a1b1d;
}

.abs-mapping-index {
    display: grid;
    place-items: center;
    width: 30px;
    height: 28px;
    background: #8d3f39;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

.abs-mapping-copy {
    min-width: 0;
}

.abs-mapping-copy strong,
.abs-mapping-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.abs-mapping-copy strong { font-size: 11px; }
.abs-mapping-copy small { margin-top: 3px; color: var(--abs-muted); font-size: 9px; }
.abs-mapping-empty { color: var(--abs-muted); font-size: 11px; }

.abs-empty-inspector {
    margin: 12px;
    padding: 12px;
    border: 1px dashed #334b62;
    color: var(--abs-muted);
    font-size: 12px;
    line-height: 1.55;
}

.abs-inspector-form {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid var(--abs-line);
}

.abs-inspector-parent {
    display: grid;
    gap: 3px;
    padding: 8px;
    border-left: 3px solid var(--abs-blue);
    background: #10243a;
}

.abs-inspector-parent span {
    color: var(--abs-muted);
    font-size: 10px;
}

.abs-inspector-parent strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.abs-control {
    display: grid;
    gap: 5px;
    color: var(--abs-muted);
    font-size: 11px;
}

.abs-control input,
.abs-control select {
    width: 100%;
    min-height: 35px;
    border: 1px solid #344b61;
    border-radius: 4px;
    background: #081522;
    color: var(--abs-text);
    padding: 6px 8px;
    font: inherit;
}

.abs-control-compact {
    display: grid;
    grid-template-columns: auto 58px;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.abs-control-compact input { min-height: 38px; }

.abs-control-strategy {
    min-width: 214px;
    white-space: nowrap;
}

.abs-control-strategy select {
    min-height: 38px;
    font-size: 11px;
}

.abs-control-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.abs-inspector-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.abs-inspector-swap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.abs-inspector-swap .abs-btn {
    min-width: 0;
    padding-inline: 8px;
    font-size: 10px;
}

.abs-inspector-hint {
    margin: -3px 0 0;
    color: var(--abs-muted);
    font-size: 10px;
    line-height: 1.45;
}

.abs-project-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin: 12px;
    background: var(--abs-line);
    border: 1px solid var(--abs-line);
}

.abs-project-facts > div {
    min-height: 56px;
    padding: 9px;
    background: #0b1928;
}

.abs-project-facts span,
.abs-project-facts strong { display: block; }
.abs-project-facts span { color: var(--abs-muted); font-size: 10px; }
.abs-project-facts strong { margin-top: 5px; font-size: 13px; }

.abs-render-status p {
    margin: 7px 0 0;
    color: var(--abs-muted);
    font-size: 11px;
}

.abs-render-file {
    overflow: hidden;
    color: #d9e8f6 !important;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.abs-render-download {
    display: flex;
    width: 100%;
    margin-top: 9px;
    text-decoration: none;
}

.abs-bseq-panel {
    border-top: 1px solid var(--abs-line);
    background: #091827;
}

.abs-bseq-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 58px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--abs-line);
}

.abs-bseq-heading strong,
.abs-bseq-heading span {
    display: block;
}

.abs-bseq-heading span {
    margin-top: 3px;
    color: var(--abs-muted);
    font-size: 11px;
}

.abs-bseq-status {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid #3b526a;
    background: #102237;
    color: #cbd8e6 !important;
    font-size: 11px !important;
    font-weight: 800;
    white-space: nowrap;
}

.abs-bseq-panel[data-verdict="pass"] .abs-bseq-status {
    border-color: #267b5f;
    background: #103d31;
    color: #7af0c4 !important;
}

.abs-bseq-panel[data-verdict="warning"] .abs-bseq-status {
    border-color: #846128;
    background: #3a2d16;
    color: #ffd47b !important;
}

.abs-bseq-panel[data-verdict="fail"] .abs-bseq-status {
    border-color: #984b50;
    background: #43252a;
    color: #ffc0c2 !important;
}

.abs-bseq-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(100px, 1fr));
    border-bottom: 1px solid var(--abs-line);
}

.abs-bseq-metrics > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 9px 14px;
    border-right: 1px solid var(--abs-line);
}

.abs-bseq-metrics > div:last-child {
    border-right: 0;
}

.abs-bseq-metrics span {
    color: var(--abs-muted);
    font-size: 10px;
}

.abs-bseq-metrics strong {
    font-size: 18px;
}

.abs-bseq-table-wrap {
    max-height: 280px;
    overflow: auto;
}

.abs-bseq-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 11px;
}

.abs-bseq-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px 10px;
    background: #102033;
    color: #a9bacb;
    font-weight: 700;
    text-align: left;
}

.abs-bseq-table th:nth-child(1) { width: 105px; }
.abs-bseq-table th:nth-child(2) { width: 28%; }
.abs-bseq-table th:nth-child(3) { width: 28%; }
.abs-bseq-table th:nth-child(4) { width: 190px; }
.abs-bseq-table th:nth-child(5) { width: 90px; }

.abs-bseq-table td {
    min-width: 0;
    padding: 8px 10px;
    border-top: 1px solid #1e3246;
    vertical-align: middle;
}

.abs-bseq-table tbody tr {
    cursor: pointer;
}

.abs-bseq-table tbody tr:hover,
.abs-bseq-table tbody tr:focus,
.abs-bseq-table tbody tr.is-selected {
    outline: 0;
    background: #132a40;
}

.abs-bseq-table tr[data-duplicate="true"] {
    background: #40242a;
}

.abs-bseq-table td strong,
.abs-bseq-table td small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.abs-bseq-table td small {
    margin-top: 3px;
    color: var(--abs-muted);
    font-size: 9px;
}

.abs-bseq-verdict {
    display: inline-block;
    padding: 4px 7px;
    border: 1px solid #267b5f;
    background: #103d31;
    color: #7af0c4;
    font-size: 10px;
    font-weight: 800;
}

.abs-bseq-table tr[data-duplicate="true"] .abs-bseq-verdict {
    border-color: #984b50;
    background: #43252a;
    color: #ffc0c2;
}

.abs-bseq-empty {
    padding: 18px !important;
    color: var(--abs-muted);
    text-align: center;
}

.abs-timeline-panel {
    min-height: 230px;
    border-top: 1px solid var(--abs-line);
    background: #081522;
}

.abs-timeline-toolbar {
    min-height: 48px;
    justify-content: space-between;
    padding: 7px 12px;
    border-bottom: 1px solid var(--abs-line);
}

.abs-legend {
    display: flex;
    align-items: center;
    gap: 12px;
}

.abs-legend span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.abs-key {
    width: 9px;
    height: 9px;
}

.abs-key-a { background: var(--abs-blue); }
.abs-key-b { background: var(--abs-coral); }
.abs-key-audio { background: var(--abs-green); }
.abs-key-subtitle { background: var(--abs-violet); }

.abs-timeline-scroll {
    overflow-x: auto;
    overflow-y: hidden;
}

.abs-timeline-canvas {
    position: relative;
    min-width: 100%;
    width: 100%;
    padding-top: 28px;
}

.abs-ruler {
    position: absolute;
    top: 0;
    left: 112px;
    right: 0;
    height: 28px;
    border-bottom: 1px solid #34495e;
    cursor: crosshair;
    overflow: hidden;
}

.abs-tick {
    position: absolute;
    bottom: 0;
    height: 9px;
    border-left: 1px solid #607488;
    color: #879caf;
    font-size: 9px;
    padding-left: 3px;
}

.abs-track-row {
    display: grid;
    grid-template-columns: 112px 1fr;
    min-height: 58px;
    border-bottom: 1px solid #1d3043;
}

.abs-track-label {
    display: grid;
    align-content: center;
    padding: 7px 10px;
    border-right: 1px solid #304458;
    background: #0d1c2b;
}

.abs-track-label strong,
.abs-track-label span { display: block; }
.abs-track-label strong { font-size: 12px; }
.abs-track-label span { color: var(--abs-muted); font-size: 10px; }

.abs-track-content {
    position: relative;
    min-width: 0;
    background-image: linear-gradient(to right, rgba(111, 138, 164, .12) 1px, transparent 1px);
    background-size: 56px 100%;
}

.abs-timeline-clip {
    position: absolute;
    top: 7px;
    height: 43px;
    min-width: 6px;
    padding: 6px 8px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 4px;
    color: #fff;
    font-size: 10px;
    user-select: none;
}

.abs-timeline-clip strong,
.abs-timeline-clip span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.abs-timeline-clip span { opacity: .78; margin-top: 2px; }
.abs-clip-a { background: #245fb8; cursor: pointer; }
.abs-clip-b { background: #a5463f; cursor: grab; }
.abs-clip-b:active { cursor: grabbing; }
.abs-clip-audio { background: #167857; }
.abs-clip-subtitle {
    background: #6246a8;
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.abs-clip-subtitle.is-selected {
    outline: 2px solid #e2d7ff;
    outline-offset: 1px;
}
.abs-clip-b.is-selected { outline: 2px solid #ffd278; outline-offset: 1px; }
.abs-clip-a.is-selected-a {
    outline: 2px solid #91c1ff;
    outline-offset: 1px;
    filter: brightness(1.2);
}
.abs-clip-b.is-mapped-b { filter: brightness(1.18); }
.abs-clip-b.is-unmapped-b { opacity: .28; }

.abs-playhead {
    position: absolute;
    z-index: 8;
    top: 0;
    bottom: 0;
    left: 112px;
    width: 1px;
    background: #ffe06f;
    pointer-events: none;
}

.abs-playhead span {
    position: absolute;
    top: 0;
    left: -5px;
    width: 11px;
    height: 9px;
    background: #ffe06f;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

@media (max-width: 1180px) {
    .abs-toolbar {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .abs-toolbar-actions {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
    }
    .abs-save-state { margin-left: auto; }
    .abs-workspace {
        grid-template-columns: 240px minmax(300px, 1fr);
        height: auto;
    }
    .abs-inspector-panel {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-top: 1px solid var(--abs-line);
    }
    .abs-bseq-metrics {
        grid-template-columns: repeat(3, minmax(100px, 1fr));
    }
    .abs-bseq-metrics > div {
        border-bottom: 1px solid var(--abs-line);
    }
}

@media (max-width: 760px) {
    .abroll-studio-view { min-height: auto; }
    .abs-toolbar-actions { padding-bottom: 4px; }
    .abs-project-identity { min-width: 170px; }
    .abs-workspace { display: block; }
    .abs-media-panel,
    .abs-preview-panel { border-right: 0; border-bottom: 1px solid var(--abs-line); }
    .abs-stage { min-height: 430px; }
    .abs-active-layers { grid-template-columns: 1fr 1fr; }
    .abs-active-window { grid-column: 1 / -1; }
    .abs-inspector-panel { display: block; }
    .abs-timeline-panel { min-height: 220px; }
    .abs-timeline-toolbar { align-items: flex-start; gap: 8px; flex-direction: column; }
    .abs-timeline-canvas { min-width: 760px; }
    .abs-hash { display: none; }
    .abs-bseq-heading { align-items: flex-start; flex-direction: column; }
    .abs-bseq-metrics { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
    .abs-bseq-table { min-width: 820px; }
}