* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background: #111;
    color: #f2f2f2;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    overflow: hidden;
}

main {
    width: 100%;
    height: 100vh;
}

.subtitle-editor {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    background: #111;
}

/* Main menu */

.editor-menu {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 10px;
    background: #25272b;
    border-bottom: 1px solid #3d3f43;
}

.editor-menu button {
    height: 100%;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: #f5f5f5;
    font-size: 14px;
    cursor: pointer;
}

.editor-menu button:hover {
    background: #3b3e43;
}

/* Toolbar */

.editor-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 54px;
    padding: 7px 10px;
    background: #050505;
    border-bottom: 1px solid #353535;
}

.editor-toolbar button {
    min-width: 60px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #555;
    border-radius: 3px;
    background: #252525;
    color: #eee;
    cursor: pointer;
}

.editor-toolbar button:hover {
    background: #383838;
}

.format-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.format-selector label {
    color: #ddd;
}

.format-selector select {
    width: 180px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #555;
    border-radius: 3px;
    background: #1d1d1d;
    color: white;
}

/* Subtitle list */

.subtitle-list {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: #080808;
}

.subtitle-list table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.subtitle-list th {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 30px;
    padding: 5px 7px;
    background: #171717;
    color: #ddd;
    border-right: 1px solid #444;
    border-bottom: 1px solid #444;
    text-align: left;
    font-weight: 600;
}

.subtitle-list td {
    height: 30px;
    padding: 5px 7px;
    border-right: 1px solid #333;
    border-bottom: 1px solid #252525;
    color: #eee;
    white-space: pre-wrap;
    vertical-align: middle;
}

.subtitle-list tbody tr:nth-child(even) {
    background: #303030;
}

.subtitle-list tbody tr:nth-child(odd) {
    background: #080808;
}

.subtitle-list tbody tr:hover {
    background: #414141;
}

.subtitle-list tbody tr.selected {
    background: #075ca8;
}

/* Column widths */

.subtitle-list th:nth-child(1),
.subtitle-list td:nth-child(1) {
    width: 50px;
    text-align: right;
}

.subtitle-list th:nth-child(2),
.subtitle-list td:nth-child(2) {
    width: 125px;
}

.subtitle-list th:nth-child(3),
.subtitle-list td:nth-child(3) {
    width: 125px;
}

.subtitle-list th:nth-child(4),
.subtitle-list td:nth-child(4) {
    width: 90px;
}

.subtitle-list th:nth-child(5),
.subtitle-list td:nth-child(5) {
    width: 70px;
    text-align: center;
}

.subtitle-list th:nth-child(6),
.subtitle-list td:nth-child(6) {
    width: auto;
}

/* Bottom editor */

.subtitle-edit-area {
    display: flex;
    flex: 0 0 190px;
    min-height: 190px;
    padding: 10px;
    gap: 14px;
    background: #090909;
    border-top: 1px solid #444;
}

.timing-panel {
    display: grid;
    grid-template-columns: 80px 145px;
    align-content: start;
    gap: 8px;
    width: 240px;
}

.timing-panel label {
    display: flex;
    align-items: center;
    color: #ddd;
}

.timing-panel input {
    width: 145px;
    height: 31px;
    padding: 4px 7px;
    border: 1px solid #555;
    border-radius: 2px;
    background: #181818;
    color: white;
    font-family: monospace;
}

.text-panel {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
}

.text-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.text-panel textarea {
    flex: 1;
    width: 100%;
    min-height: 85px;
    padding: 8px;
    resize: none;
    border: 1px solid #555;
    border-radius: 2px;
    outline: none;
    background: #080808;
    color: #f5f5f5;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
}

.text-panel textarea:focus {
    border-color: #888;
}

.text-info {
    display: flex;
    justify-content: space-between;
    padding-top: 5px;
    color: #ccc;
    font-size: 13px;
}

.validation {
    margin-top: 5px;
    color: #9ad39a;
    font-size: 13px;
}
/* Toolbar icons */

.editor-toolbar .toolbar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    min-width: 46px;
    height: 42px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.editor-toolbar .toolbar-icon:hover {
    background: #303030;
}

.toolbar-icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: #f2f2f2;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.toolbar-separator {
    width: 1px;
    height: 32px;
    margin: 0 5px;
    background: #444;
}
/* Web Flow / ARTE extension: the original dark table and text editor remain. */
button, input, select, textarea { font: inherit; }
button, select { color: #eee; background: #25292e; border: 1px solid #53616e; border-radius: 4px; padding: 6px 10px; }
button { cursor: pointer; }
button:disabled { opacity: .4; cursor: default; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid #83c5ff; outline-offset: 2px; }
button[aria-pressed="true"] { border-color: #7fc1ff; background: #164978; }
input:not([type="checkbox"]), select { background: #14191f; color: #fff; border: 1px solid #53616e; border-radius: 4px; padding: 6px; }
input[type="checkbox"] { accent-color: #6cb8fa; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.editor-controls { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.editor-toolbar { flex-wrap: wrap; flex-shrink: 0; }
.app-name { margin-right: 10px; font-size: 16px; white-space: nowrap; }
.document-bar, .edit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px; background: #1b2026; }
.document-bar #fileName { margin-right: auto; }
.working-rules { display: flex; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid #53616e; border-radius: 4px; background: #14191f; color: #cbd9e8; white-space: nowrap; }
.working-rule-separator { color: #71808f; }
.working-arte-preset { padding: 5px 9px; font-weight: 700; white-space: nowrap; }
#workingArtePresetButton:disabled { color: #777; background: #202327; border-color: #444b52; opacity: 1; }
#workingArtePresetButton:not(:disabled) { color: #eee; background: #25292e; border-color: #7fc1ff; }
#goToNumber { width: 70px; }
.editor-workspace { display: flex; flex: 1; min-height: 180px; }
.subtitle-list { flex: 1; }
.subtitle-list table { min-width: 640px; }
.editor-pane-tabs, .header-tabs { display: flex; gap: 2px; padding: 7px 12px 0; background: #111820; border-top: 1px solid #44515e; }
.editor-pane-tabs button[aria-selected="true"], .header-tabs button[aria-selected="true"] { background: #164978; border-color: #7fc1ff; }
.lower-editors { display: flex; height: 320px; flex: 0 0 auto; min-height: 220px; max-height: calc(100vh - 190px); overflow: hidden; border-top: 1px solid #44515e; }
.flow-height-handle { height: 9px; flex: 0 0 9px; cursor: row-resize; background: #1b2026; border-top: 1px solid #53616e; border-bottom: 1px solid #070a0d; position: relative; }
.flow-height-handle::after { content: ""; position: absolute; left: 50%; top: 3px; width: 44px; height: 2px; transform: translateX(-50%); border-radius: 2px; background: #8fa5b8; }
.flow-height-handle:hover, .flow-height-handle.dragging { background: #214c71; }
.lower-editor { flex: 1 1 auto; min-width: 0; min-height: 250px; background: #090909; }
#textPanel { flex: 0 0 255px; min-width: 180px; max-width: 70%; overflow: auto; border-right: 1px solid #44515e; }
#flowPanel { flex: 1 1 auto; }
.lower-editors .flow-panel { border-top: 0; }
.flow-panel { display: flex; flex-direction: column; border-top: 1px solid #44515e; background: #151a21; }
.flow-heading { display: flex; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid #44515e; }
.flow-heading strong { margin-right: auto; }
.flow-heading span, .muted { color: #aab8c6; font-size: 10px; }
.flow-items { overflow-y: auto; padding: 12px; }
.flow-card { border: 1px solid #3b4856; border-radius: 6px; padding: 10px; margin-bottom: 10px; background: #10151c; }
.flow-card.selected { border-color: #77bdff; box-shadow: inset 3px 0 #77bdff; }
.flow-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: #b0c4d7; font-size: 12px; margin-bottom: 7px; }
.flow-editor-wrap { position: relative; min-height: 68px; font: 15px/1.6 monospace; }
.flow-render { position: absolute; inset: 0; z-index: 0; margin: 0; padding: 8px; white-space: pre-wrap; overflow-wrap: anywhere; pointer-events: none; color: #f0f5fc; }
.flow-render span { text-shadow: 0 0 1px #aaa; }
.flow-card textarea.flow-input { position: relative; z-index: 1; display: block; width: 100%; min-height: 68px; resize: vertical; background: transparent; color: transparent; caret-color: #fff; border: 1px solid #354352; padding: 8px; font-family: monospace; line-height: 1.6; }
.flow-card textarea.flow-input::selection { background: #3c81c6aa; color: #fff; }
.flow-card.invalid .flow-meta { color: #ffd38e; }
.empty-state { padding: 35px; color: #aab8c6; line-height: 1.7; }
.status-bar { padding: 8px 12px; color: #b4c8dc; border-top: 1px solid #44515e; font-size: 12px; flex-shrink: 0; }
.status-bar.error, #arteSummary.error { color: #ffba9f; }
.subtitle-edit-area { flex: 1; flex-basis: auto; min-height: 210px; }
.time-spinner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20px 20px;
    width: 145px;
}
.time-spinner input {
    width: 100%;
    min-width: 0;
    border-radius: 2px 0 0 2px;
}
.time-spinner .timing-step-button {
    width: 20px;
    min-width: 20px;
    height: 31px;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    line-height: 1;
}
.time-spinner .timing-step-button:last-child {
    border-radius: 0 2px 2px 0;
}
#gapBefore, #gapAfter { font-weight: 700; color: #f0f5fc; }
[hidden] { display: none !important; }
dialog { color: #f0f5fc; background: #151a21; border: 1px solid #586d82; border-radius: 10px; width: min(1200px, 95vw); max-height: 92vh; padding: 20px; }
dialog::backdrop { background: #000b; }
.dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.dialog-heading h2 { font-size: 20px; margin: 0; }
.arte-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 12px 0; }
.arte-settings label { display: flex; gap: 6px; align-items: center; }
.arte-settings input[type="number"] { width: 85px; }
#arteStart, #headerTargetStart { width: 140px; }
.arte-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; padding: 12px 0; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 15px 0; }
.arte-results { max-height: 48vh; overflow: auto; }
.arte-group { margin: 8px 0; border: 1px solid #394959; border-radius: 5px; padding: 10px; }
.arte-group summary { cursor: pointer; font-weight: bold; }
.fix { padding: 12px 0; border-top: 1px solid #394959; margin-top: 10px; }
.fix-title { display: flex; align-items: flex-start; gap: 8px; }
.fix-title label { flex: 1; }
.fix-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0; }
.fix-comparison pre { margin: 4px 0; padding: 10px; white-space: pre-wrap; overflow-wrap: anywhere; background: #0b1016; color: #cbd9e8; font: 13px/1.5 monospace; }
.timing-note { color: #ffd38e; }
.subtitle-context-menu { position: fixed; z-index: 20; display: grid; gap: 2px; min-width: 255px; margin: 0; padding: 6px; overflow: visible; background: #202831; border: 1px solid #63788c; box-shadow: 0 7px 24px #0009; }
.subtitle-context-menu button { text-align: left; border: 0; border-radius: 2px; background: transparent; }
.subtitle-context-menu button:hover:not(:disabled), .subtitle-context-menu button:focus-visible:not(:disabled) { background: #285982; }
.subtitle-context-menu button:disabled { color: #71808f; cursor: default; }
#previewContextMenu [data-action="fit-range"]:disabled { color: #aebdca; opacity: .72; }
.subtitle-context-menu .context-label { padding: 5px 8px 2px; color: #b9c8d7; font-size: 12px; }
.context-submenu { position: relative; display: grid; }
.context-submenu-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.context-submenu-panel { position: absolute; left: calc(100% + 5px); top: -7px; z-index: 21; display: none; min-width: 245px; padding: 6px; background: #202831; border: 1px solid #63788c; box-shadow: 0 7px 24px #0009; }
.context-submenu:hover > .context-submenu-panel, .context-submenu:focus-within > .context-submenu-panel { display: grid; gap: 2px; }
.context-submenu-panel-up { top: auto; bottom: -7px; max-height: calc(100vh - 24px); overflow-y: auto; }
.subtitle-context-menu .color-choice { display: flex; align-items: center; gap: 9px; }
.subtitle-context-menu .color-choice i { width: 16px; height: 16px; border: 1px solid #a7b5c4; border-radius: 2px; background: currentColor; }
.subtitle-context-menu .color-white { color: #ffffff; }.subtitle-context-menu .color-yellow { color: #ffff00; }.subtitle-context-menu .color-cyan { color: #00ffff; }.subtitle-context-menu .color-red { color: #ff5555; }.subtitle-context-menu .color-green { color: #00ff00; }.subtitle-context-menu .color-blue { color: #7c9aff; }.subtitle-context-menu .color-magenta { color: #ff66ff; }.subtitle-context-menu .color-black { color: #222; }.subtitle-context-menu .color-none { color: #d5dee8; }
.subtitle-context-menu .color-none i { background: repeating-linear-gradient(45deg, #d5dee8 0 3px, #394656 3px 6px); }
.subtitle-context-menu hr { width: 100%; border: 0; border-top: 1px solid #4b5a68; }
.header-grid { display: grid; grid-template-columns: repeat(2, minmax(240px, 1fr)); gap: 12px; padding: 16px 0; }
.header-grid label { display: grid; gap: 5px; color: #cbd9e8; }
#ebuHeaderDialog { width: min(980px, 96vw); padding: 18px; }
#ebuHeaderDialog .header-tabs { gap: 18px; padding: 16px 0 4px; background: transparent; border-top: 0; border-bottom: 1px solid #59636d; }
#ebuHeaderDialog .header-tabs button { padding: 8px 0 7px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: #aaa; font-size: 18px; }
#ebuHeaderDialog .header-tabs button[aria-selected="true"] { background: transparent; border-color: #4da7ff; color: #fff; }
.header-panel { min-height: 420px; padding: 12px 8px 4px; border: 1px solid #59636d; border-top: 0; }
.header-general-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.header-field-column { display: grid; align-content: start; gap: 9px; }
.header-field-column label, .header-text-timing-grid label { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(190px, 1.25fr); align-items: center; gap: 12px; color: #e3e8ed; }
.header-field-column input, .header-field-column select, .header-text-timing-grid input { width: 100%; min-width: 0; }
.header-additional-fields { margin-top: 14px; border-top: 1px solid #394959; padding-top: 10px; }
.header-additional-fields summary { cursor: pointer; color: #b9c8d7; }
.header-text-timing-grid { display: grid; align-content: start; gap: 12px; max-width: 620px; }
.header-section-title { margin-top: 5px; padding: 5px 0 2px; color: #fff; font-size: 15px; }
.header-errors-panel { min-height: 420px; }
.header-errors-empty { padding: 18px 8px; color: #aab8c6; }
.header-dialog-actions { justify-content: flex-end; margin-bottom: 0; }

.plain-text-form { display: grid; gap: 10px; }
#plainTextInput { min-height: 320px; width: 100%; resize: vertical; padding: 10px; color: #f0f5fc; background: #0b1016; border: 1px solid #53616e; }
.header-note { grid-column: 1 / -1; margin: 6px 0; color: #b8cce0; line-height: 1.5; }
.alignment-form { display: grid; gap: 14px; padding-top: 15px; }
.alignment-form label { display: flex; align-items: center; gap: 8px; }
.alignment-form input[type="number"] { width: 70px; }
#alignmentDialog { width: min(520px, 95vw); }
@media (max-width: 900px) { .editor-workspace { flex-direction: column; } .flow-panel { min-height: 160px; border-left: 0; border-top: 1px solid #44515e; } .subtitle-list { min-height: 130px; } .app-name { width: 100%; } .subtitle-edit-area { min-height: 215px; } }
@media (max-width: 600px) { body { overflow: auto; } .subtitle-editor, main { height: auto; min-height: 100vh; } .editor-workspace { min-height: 500px; } .subtitle-list, .flow-items { max-height: 320px; } .subtitle-edit-area { flex-direction: column; flex-basis: auto; } .timing-panel { width: 100%; grid-template-columns: 100px 1fr; } .time-spinner { width: 100%; } .fix-comparison { grid-template-columns: 1fr; } }

.header-errors-toolbar { display: flex; justify-content: flex-end; padding: 4px 0 12px; border-bottom: 1px solid #394959; }
.header-errors-content { max-height: 52vh; overflow: auto; padding-top: 8px; }
.header-error-group { margin: 8px 0 14px; border: 1px solid #394959; border-radius: 5px; overflow: hidden; }
.header-error-group h3 { margin: 0; padding: 9px 11px; background: #1b2026; font-size: 14px; }
.header-error-item { padding: 10px 12px; border-top: 1px solid #394959; }
.header-error-item:first-of-type { border-top: 0; }
.header-error-time { margin-top: 4px; color: #aab8c6; font-size: 12px; }
.header-error-detail { margin-top: 7px; }
.header-error-detail > span { display: block; margin-bottom: 3px; color: #b9c8d7; font-size: 12px; }
.header-error-detail pre { margin: 0; padding: 7px 9px; white-space: pre-wrap; overflow-wrap: anywhere; background: #0b1016; color: #cbd9e8; font: 12px/1.45 monospace; }