/* General Styles */
body {
    margin: 0;
    padding: 0;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
    overflow: hidden;
}

.material-btn,
.material-input,
input.material-input,
textarea.material-input,
select.material-input {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

#canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

#graph-canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* Toolbar Styles */
.toolbar {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 100;
    background-color: #544;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    min-width: 185px;
    max-width: 185px;
    opacity: 90%;
    color: #fff;
}

.toolbar-toggle {
    padding: 8px 12px;
    padding-left: 7px;
    cursor: pointer;
    font-size: 20px;
    text-align: center;
}

.toolbar-content {
    padding: 10px;
    display: none;
}

.toolbar.expanded .toolbar-content {
    display: block;
}

.toolbar button {
    display: block;
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 5px;
    background-color: #2C2F50;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
}

.toolbar button:hover {
    background-color: #45a049;
}

.toolbar button:last-child {
    margin-bottom: 0;
}

.toolbar-section {
    margin: 10px 0;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
}

.toolbar-section-header {
    padding: 10px 15px;
    background: rgba(102, 126, 234, 0.2);
    font-weight: normal;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.toolbar-section-header:hover {
    background: rgba(102, 126, 234, 0.3);
}

.toolbar-section-content {
    padding: 5px 0;
    display: none; /* Hidden by default */
    flex-direction: column;
    gap: 5px;
}

.toolbar-section-content button {
    margin: 0 5px;
    border-radius: 4px;
    max-width: 155px;
}

/* Show content when expanded */
.toolbar-section.expanded .toolbar-section-content {
    display: flex;
}

/* Arrow indicator - points right when collapsed, down when expanded */
.toolbar-section-header::before {
    content: '▶ ';
    font-size: 10px;
    margin-right: 8px;
    display: inline-block;
    transition: transform 0.2s ease;
}

.toolbar-section.expanded .toolbar-section-header::before {
    transform: rotate(90deg);
}

/* Prevent text selection in context menu */
#context-menu,
#context-menu *,
#link-context-menu,
#link-context-menu *,
#group-context-menu,
#group-context-menu * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: default;
}

/* Ensure context menu items remain clickable */
#context-menu li,
#link-context-menu li,
#group-context-menu li {
    cursor: pointer;
}

/* Prevent text selection in submenus */
#context-menu .submenu,
#context-menu .submenu * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Context Menu Styles */
.context-menu {
    display: none;
    position: absolute;
    z-index: 20000;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    padding: 5px 0;
    list-style: none;
    margin: 0;
    min-width: 180px;
    outline: 50px solid transparent;
}

.context-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.context-menu li {
    padding: 8px 15px;
    cursor: pointer;
    position: relative;
    background: #fff;
    color: #222;
    white-space: nowrap;
}

.context-menu li:hover {
    background-color: #f5f5f5;
}

#context-menu .submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background: #222;
    min-width: 160px;
    z-index: 1001;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    margin-left: 2px;
    color: #fff;
    outline: 50px solid transparent;
}

#context-menu li:hover > .submenu {
    display: block;
}

#context-menu .submenu li {
    background: #222;
    color: #fff;
}

#context-menu .submenu li:hover {
    background: #444;
}

#context-menu li {
    position: relative;
}

/* Horizontal Primary Context Menu */
.context-menu.horizontal-primary {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    min-width: auto;
    max-width: 1280px;
    padding: 5px;
    gap: 5px;
    z-index: 20000;
}

.context-menu.horizontal-primary > li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    max-width: 100px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
}

.context-menu.horizontal-primary > li .menu-label {
    font-size: 10px;           /* Reduced from 11px */
    text-align: center;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-weight: 600;          /* Increased from 500 for better readability */
    color: #222;               /* Lighter color */
    text-transform: uppercase; /* Modern style */
    letter-spacing: 0.5px;     /* Better spacing */
    margin-top: 2px;           /* Tighter spacing from icon */
    pointer-events: none;
}

.context-menu.horizontal-primary > li:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 2;
}

.context-menu.horizontal-primary > li::before {
    content: attr(data-icon);
    font-size: 32px;
    margin-bottom: 6px;
    display: block;
}

.context-menu.horizontal-primary > li::after {
    content: attr(data-label);
    font-size: 11px;
    text-align: center;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-weight: 500;
    color: #333;
}

/* Add invisible bridge as a separate pseudo-element using a child span */
.context-menu.horizontal-primary > li > .hover-bridge {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 5px;
    background: transparent;
    pointer-events: auto;
}

/* Keep submenus vertical */
.context-menu.horizontal-primary .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    flex-direction: column;
    background: #fff;
    min-width: 180px;
    max-width: none;
    z-index: 20002;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    margin-top: 5px;
    padding: 5px 0;
    outline: 50px solid transparent;
}

/* Show submenu when hovering parent OR when hovering the submenu itself */
.context-menu.horizontal-primary > li:hover > .submenu,
.context-menu.horizontal-primary > li > .submenu:hover {
    display: flex;
    z-index: 20002;
}

/* Add a small invisible bridge between icon and submenu to prevent flickering */
.context-menu.horizontal-primary > li::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 5px;
    background: transparent;
    pointer-events: auto;
}

.context-menu.horizontal-primary .submenu li {
    flex-direction: row;
    padding: 8px 15px;
    min-width: auto;
    max-width: none;
    white-space: nowrap;
}

.context-menu.horizontal-primary .submenu li::before,
.context-menu.horizontal-primary .submenu li::after {
    content: none;
}

.context-menu.horizontal-primary .submenu li:hover {
    background-color: #f5f5f5;
    transform: none;
    box-shadow: none;
}

/* Hide help icons in horizontal primary menu items */
.context-menu.horizontal-primary > li > .help-icon {
    display: none;
}

/* Make modal labels and static text non-selectable */
.modal label,
.modal .modal-header h2,
.modal .modal-header h3,
.modal .form-group label,
.modal .form-row label,
.modal .modal-content p,
.modal .modal-content span,
.modal .modal-content div:not(.form-group):not(.form-row),
.modal .btn {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: default;
}

.modal button,
.modal .checkbox-label,
.modal .radio-label,
.modal select {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: pointer;
}

.modal input[type="text"],
.modal input[type="email"], 
.modal input[type="password"],
.modal input[type="number"],
.modal input[type="url"],
.modal input[type="search"],
.modal textarea {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    cursor: text;
}

/* Make sure button text is non-selectable but buttons remain interactive */
.modal button,
.modal .btn {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: pointer;
}

/* Specific override for areas that should be selectable in modals */
.modal .selectable-text,
.modal .copy-btn,
.modal .more-info-1,
.modal .more-info-2,
.modal .more-info-3,
.modal .more-info-4,
.modal .more-info-5,
.modal .more-info-6 {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
}

/* Modal Styles - Material Theme */
.modal {
    display: none;
    position: fixed;
    z-index: 32000;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(33, 33, 33, 0.45);
    backdrop-filter: blur(2px);
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 1.5px 4px rgba(0,0,0,0.12);
    width: 620px;
    max-width: 80vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalFadeIn 0.25s cubic-bezier(0.4,0,0.2,1);
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes fadeOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: translate(-50%, -60%) scale(0.98); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.modal-header {
    padding: 20px 24px 12px 24px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fafafa;
}

.modal-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    color: #222;
    letter-spacing: 0.01em;
}

.modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
}

.close {
    color: #888;
    font-size: 28px;
    font-weight: 400;
    cursor: pointer !important;
    border-radius: 50%;
    transition: background 0.2s;
    padding: 2px 8px;
}
.close:hover {
    background: #f0f0f0;
    color: #222;
}

/* === Modal Dock Feature === */
.modal-header-actions {
    display: flex;
    align-items: center;
    gap: 0;
}

.modal-dock-btn {
    color: #888;
    font-size: 16px;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s, color 0.2s;
    padding: 4px 8px;
    background: none;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    user-select: none;
    margin-left: 0;
}

.modal-dock-btn:hover {
    background: #f0f0f0;
    color: #222;
}

/* ── Modal history clock button ─────────────────────────────── */
.modal-history-btn {
    color: #888;
    font-size: 16px;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s, color 0.2s;
    padding: 4px 8px;
    background: none;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    user-select: none;
    margin-left: 0;
}

.modal-history-btn:hover {
    background: #eef2ff;
    color: #4f5fef;
}

/* ── Modal history panel ─────────────────────────────────────── */
.modal-history-panel {
    position: fixed;
    display: none;
    z-index: 50000;
    width: 380px;
    max-height: 460px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    overflow: hidden;
    flex-direction: column;
    font-family: inherit;
}


.mhp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 8px;
    border-bottom: 1px solid #eee;
    background: #f8f9ff;
    flex-shrink: 0;
}

.mhp-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mhp-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
    flex-shrink: 0;
}

.mhp-close-btn:hover {
    color: #333;
    background: #eee;
}

.mhp-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.mhp-search {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

.mhp-search:focus {
    border-color: #667eea;
}

.mhp-list {
    overflow-y: auto;
    flex: 1;
    padding: 6px 0;
}

.mhp-empty {
    padding: 18px 14px;
    font-size: 13px;
    color: #aaa;
    text-align: center;
}

.mhp-entry {
    padding: 8px 14px;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.15s;
}

.mhp-entry:last-child {
    border-bottom: none;
}

.mhp-entry:hover {
    background: #f8f9ff;
}

.mhp-entry-ts {
    font-size: 11px;
    color: #888;
    margin-bottom: 2px;
}

.mhp-entry-snippet {
    font-size: 12px;
    color: #444;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 6px;
}

.mhp-entry-actions {
    display: flex;
    gap: 6px;
}

.mhp-btn {
    padding: 3px 12px;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid #ddd;
    background: #f5f5f5;
    color: #444;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.mhp-btn:hover {
    background: #e8e8e8;
}

.mhp-reload-btn {
    background: #eef2ff;
    border-color: #c5caef;
    color: #4f5fef;
}

.mhp-reload-btn:hover {
    background: #dde3ff;
}

.mhp-delete-btn {
    background: #fff5f5;
    border-color: #f5c0c0;
    color: #c0392b;
}

.mhp-delete-btn:hover {
    background: #ffe8e8;
}

.mhp-delete-all-btn {
    background: #fff5f5;
    border-color: #f5c0c0;
    color: #c0392b;
    white-space: nowrap;
    flex-shrink: 0;
}

.mhp-delete-all-btn:hover {
    background: #ffe8e8;
}
/* ── End modal history panel ─────────────────────────────────── */

#modal-dock-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    padding: 0 8px;
    pointer-events: none;
}

.modal-docked-item {
    pointer-events: all;
    height: 34px;
    background: #fafafa;
    border: 1px solid #d0d0d0;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0 8px;
    gap: 5px;
    transition: height 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    flex-shrink: 0;
}

.modal-docked-item:hover {
    height: 40px;
    background: #eef2ff;
    box-shadow: 0 5px 14px rgba(0,0,0,0.22);
}

.modal-docked-item .docked-icon {
    font-size: 13px;
    color: #667eea;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-docked-item .docked-title {
    font-size: 11px;
    font-weight: 500;
    color: #444;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
    flex: 1;
    min-width: 0;
}

.modal-dock-close-all {
    pointer-events: all;
    height: 26px;
    align-self: flex-start;
    margin-top: 0px;
    padding: 0 10px;
    border: 1px solid #e0a0a0;
    border-radius: 0 0 6px 6px;
    background: #fff5f5;
    color: #c0392b;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    display: none;
    align-items: center;
    gap: 4px;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}

.modal-dock-close-all:hover {
    background: #ffe8e8;
    box-shadow: 0 3px 10px rgba(0,0,0,0.18);
}

.modal-dock-close-all.visible {
    display: inline-flex;
}

.form-group-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 50px;
}

@media (max-width: 768px) {
    .form-group-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* Form Styles - Material Theme */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin: 6px;
    font-weight: 500;
    color: #333;
    letter-spacing: 0.01em;
}

.form-group hint {
    display: block;
    margin-bottom: 7px;
    margin-top: 10px;
    font-weight: 200;
    font-size: 13px;
    color: #333;
    letter-spacing: 0.01em;
}

.form-group select {
    font-weight: 200;
    font-size: 14px;
    color: #fff;
    background-color: #666;
    height: 30px;
    margin-left: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

.form-group input[type="text"],
.form-group input[type="file"],
.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 15px;
    background: #fafbfc;
    color: #222;
    transition: border 0.2s;
    outline: none;
}
.form-group input[type="text"]:focus,
.form-group input[type="file"]:focus,
.form-group textarea:focus {
    border-color: #4CAF50;
    background: #fff;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

.image-preview {
    max-width: 100%;
    max-height: 220px;
    margin-top: 12px;
    display: none;
    border-radius: 8px;
    box-shadow: 0 1.5px 6px rgba(0,0,0,0.08);
}

.btn-submit {
    background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%);
    color: #333;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(67,233,123,0.08);
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    margin-right: 10px;
}
.btn-submit:hover {
    background: linear-gradient(90deg, #38f9d7 0%, #43e97b 100%);
    box-shadow: 0 4px 16px rgba(67,233,123,0.13);
}

.btn-cancel {
    background: #fff;
    color: #4CAF50;
    padding: 12px 24px;
    border: 1.5px solid #4CAF50;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.btn-cancel:hover {
    background: #4CAF50;
    color: #fff;
}

.modal-buttons {
    display: flex;
    justify-content: flex-end;
    padding: 18px 24px 20px 24px;
    background: #fafafa;
    border-top: 1px solid #eee;
}

/* Toast Styles */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 15px 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 99999 !important;
    pointer-events: none;
    max-width: 80%;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: default;
}

.toast.show {
    opacity: 1;
}

.toast.error {
    background-color: #f44336;
}

.toast.success {
    background-color: #4CAF50;
}

.toast.warning {
    background-color: #ff9800;
}

.queue-history-panel,
.queue-panel {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: default;
}

/* Queue Panel Styles */
.queue-panel {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 400px;
    background-color: #333;
    color:#fff;
    border-radius: 5px 0 0 0;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
    z-index: 100;
    transition: all 0.3s ease;
    opacity: 90%;
}

.queue-header {
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.queue-header h3 {
    margin: 0;
    font-size: 16px;
}

.queue-position-indicator {
    font-size: 16px;
    line-height: 1;
    transition: opacity 0.3s, filter 0.3s;
}

.queue-position-indicator:hover {
    transform: scale(1.1);
}

.queue-toggle {
    transition: transform 0.3s ease;
    position: absolute;
    right: 20px;
}

.queue-content {
    max-height: 200px;
    overflow-y: auto;
    padding: 10px;
    transition: max-height 0.3s ease;
    scrollbar-width: thin;           /* Firefox */
    scrollbar-color: var(--dark-border) transparent; /* Firefox */
}

.queue-panel.closed {
    display: none;
}

.queue-panel.collapsed .queue-content {
    max-height: 0;
    padding: 0;
}

.queue-panel.collapsed .queue-toggle {
    transform: rotate(180deg);
}

#queue-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

#queue-list li {
    padding: 10px 5px;
    border-bottom: 1px solid #eee;
}

#queue-list li:last-child {
    border-bottom: none;
}

/* Video Preview */
#preview-player {
    width: 100%;
    max-height: 60vh;
}

/* NodeStyles */
.node-selected {
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.7) !important;
}

.node-islanded {
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.7) !important;
}

.litegraph-editor-sidebar {
    width: 300px !important;
}

.queue-cancel-btn {
    vertical-align: top;
}

.queue-pause-btn {
    vertical-align: top;
}

.queue-rerun-btn {
    vertical-align: middle;
}

.queue-job-btn {
    vertical-align: middle;
}

.timestamp {
    display: block;
    font-size: 11px;
    padding-top: 5px;
}

/* Fix scaling issues */
canvas {
    image-rendering: optimizeQuality;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

#toggle-deleted-nodes-btn,
#server-heart-indicator,
#save-disk-indicator,
.canvas-loading-overlay,
.loading-text,
.spinner,
.toolbar-toggle,
.toolbar-content,
.toolbar {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Ensure toolbar buttons are visible */
.toolbar.expanded .toolbar-content {
    display: block;
    min-width: 120px;
}

/* Add clear button styles to prevent default browser styles */
button {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

/* Make sure canvas fills space */
#graph-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Fix node appearance */
.litegraph .graphnode {
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Fix selection indicator */
.litegraph .graphnode.selected {
    box-shadow: 0 0 10px rgba(0,255,0,0.5);
}

#context-menu .submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background: #222;
    min-width: 160px;
    z-index: 1001;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    margin-left: 2px;
    color: #fff;
}

#context-menu li:hover > .submenu {
    display: block;
    margin-left: 0px;
}

#context-menu .submenu li {
    background: #444;
    color: #fff;
}

#context-menu .submenu li:hover {
    background: #666;
}

#context-menu li {
    position: relative;
}

#group-context-menu .submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background: #222;
    min-width: 160px;
    z-index: 1001;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    margin-left: 2px;
    color: #fff;
    outline: 50px solid transparent;
}

#group-context-menu li:hover > .submenu {
    display: block;
    margin-left: 0px;
}

#group-context-menu .submenu li {
    background: #444;
    color: #fff;
}

#group-context-menu .submenu li:hover {
    background: #666;
}

#group-context-menu li {
    position: relative;
}

.more-info-1 {
    display: none;
}

.more-info-2 {
    display: none;
}

.more-info-3 {
    display: none;
}

.more-info-4 {
    display: none;
}

.more-info-5 {
    display: none;
}

.more-info-6 {
    display: none;
}

/* More Info Modal - Text formatting improvements */
#more-info-modal .modal-body {
    max-height: 70vh;
    overflow-y: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

#more-info-modal .modal-body label {
    display: block;
    margin-bottom: 15px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

#more-info-modal .modal-body pre,
#more-info-modal .modal-body code {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
}

/* Ensure expandable request details section also wraps */
#more-info-modal .request-details-content {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    font-size: 12px;
    line-height: 1.5;
}

.copy-btn {
    transition: transform 0.15s;
}

.copy-btn:hover {
    transform: scale(1.2);
}

.queue-history-panel {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 400px;
    background-color: #333;
    color: #fff;
    border-radius: 5px 0 0 0;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
    z-index: 100;
    transition: all 0.3s ease;
    opacity: 90%;
    max-height: 350px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;           /* Firefox */
    scrollbar-color: var(--dark-border) transparent; /* Firefox */
}

.queue-history-btn {
    cursor: pointer;
    font-size: 20px;
    vertical-align: middle;
    position: relative;
    right: 15px;
    margin-bottom: 5px;
}

.queue-history-header-text {
    position: absolute;
    left: 50px;
}

.queue-history-header {
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.queue-history-header h3 {
    margin: 0;
    font-size: 16px;
}

.queue-history-close {
    margin-bottom: 2px;
    cursor:pointer;
    padding: 5px;
}

.queue-history-content {
    max-height: 200px;
    overflow-y: auto;
    padding: 10px;
    transition: max-height 0.3s ease;
    scrollbar-width: thin;           /* Firefox */
    scrollbar-color: var(--dark-border) transparent; /* Firefox */
}

.queue-history-panel.closed {
    display: none;
}

.queue-history-panel.collapsed .queue-content {
    max-height: 0;
    padding: 0;
}

.queue-history-panel.collapsed .queue-toggle {
    transform: rotate(180deg);
}

#queue-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

#queue-history-list li {
    padding: 10px 5px;
    border-bottom: 1px solid #eee;
}

#queue-history-list li:last-child {
    border-bottom: none;
}

.status {
    padding-right: 10px;
}

.queue-history-item {
    left: 15px;
    position: relative;
}

.queue-history-timestamp {
    margin-left: 12px;
    display: block;
    font-size: 13px;
    padding-top: 5px;
}

.litegraph .node_properties_panel { display: none !important; }

#canvas-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(34, 34, 34, 1.0);
    display: none; /* Hidden by default */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    color: white;
}

#canvas-loading-overlay .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#canvas-loading-overlay .loading-text {
    font-size: 18px;
    margin-bottom: 10px;
}

#canvas-loading-overlay .loading-subtext {
    font-size: 14px;
    opacity: 0.7;
    margin-bottom: 16px;
}

.progress-bar-container {
    width: 300px;
    height: 12px;
    background: #444;
    border-radius: 6px;
    overflow: hidden;
    margin-top: 16px;
}

.progress-bar {
    background: #90caf9;
    height: 100%;
    width: 0%;
    transition: width 0.2s;
}

body.fullscreen-mode .header {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

body.fullscreen-mode .footer-controls {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}

body.fullscreen-mode #flipbook {
    width: 95vw;
    height: 95vh;
    box-shadow: none;
    border-radius: 0;
}

.link-type-fields {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid #eee;
}

.link-type-fields .form-group {
    margin-bottom: 15px;
}

#link-modal .modal-content {
    max-width: 500px;
}

#link-modal .form-group label {
    font-weight: 500;
    margin-bottom: 5px;
    display: block;
    color: #333;
}

#link-modal .material-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

#link-modal .material-input:focus {
    outline: none;
    border-color: #2196F3;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

#link-modal select.material-input {
    background-color: white;
    cursor: pointer;
    color: black;
    height: 40px;
}

#link-modal textarea.material-input {
    resize: vertical;
}

#link-modal .btn-submit {
    background-color: #2196F3;
    color: black;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 10px;
}

#link-modal .btn-submit:hover {
    background-color: #1976D2;
}

.material-checkbox {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #667eea;
    border-radius: 3px;
    background: white;
    cursor: pointer;
    position: relative;
    margin-right: 8px;
    vertical-align: middle;
}

.material-checkbox:checked {
    background: #667eea;
    border-color: #667eea;
}

.material-checkbox:checked::after {
    content: '✓';
    position: absolute;
    top: -2px;
    left: 2px;
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.material-checkbox:hover {
    border-color: #5a67d8;
}

#flipbook-modal .form-group label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 500;
    margin-bottom: 5px;
    color: #333;
}

#flipbook-modal .form-group label input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}

#flipbook-modal #flipbook-time-estimate {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 12px;
    margin-top: 8px;
}

#flipbook-custom-range {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 15px;
    border: 1px solid #e9ecef;
}

#flipbook-custom-range label {
    display: block !important;
    margin-bottom: 5px;
    font-weight: 500;
}

.page-link {
    color: #667eea;
    cursor: pointer;
    text-decoration: underline;
    font-weight: 600;
    transition: all 0.2s ease;
}

#export-password {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    letter-spacing: 0.05em;
}

/* Make password dots more visible */
#export-password::-webkit-input-placeholder {
    letter-spacing: normal;
}

#export-password::-moz-placeholder {
    letter-spacing: normal;
}

#decrypt-password {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    letter-spacing: 0.05em;
}

/* Make password dots more visible */
#decrypt-password::-webkit-input-placeholder {
    letter-spacing: normal;
}

#decrypt-password::-moz-placeholder {
    letter-spacing: normal;
}

#encrypt-image-password {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    letter-spacing: 0.05em;
}

/* Make password dots more visible */
#encrypt-image-password::-webkit-input-placeholder {
    letter-spacing: normal;
}

#encrypt-image-password::-moz-placeholder {
    letter-spacing: normal;
}

#decrypt-image-password {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    letter-spacing: 0.05em;
}

/* Make password dots more visible */
#decrypt-image-password::-webkit-input-placeholder {
    letter-spacing: normal;
}

#decrypt-image-password::-moz-placeholder {
    letter-spacing: normal;
}

#encrypt-image-password {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    letter-spacing: 0.05em;
}

/* Make password dots more visible */
#encrypt-image-password::-webkit-input-placeholder {
    letter-spacing: normal;
}

#encrypt-image-password::-moz-placeholder {
    letter-spacing: normal;
}

[contenteditable][data-placeholder]:empty:before {
    content: attr(data-placeholder);
    color: #888;
    pointer-events: none;
}

#canvas-lock-overlay {
    animation: fadeIn 0.5s ease;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    z-index: 20000;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#lock-modal {
    z-index: 20001; /* Higher than lock overlay */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

#lock-modal .modal-content {
    max-width: 400px;
    margin: 100px auto;
}

#lock-modal .form-group {
    margin-bottom: 20px;
}

#lock-modal .material-input {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

#lock-modal .form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

#lock-modal .material-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

#lock-password-hint {
    margin-left: 5px;
}

#lock-modal .btn-cancel {
    background: #666;
    color: white;
}

#lock-modal .btn-cancel:hover {
    background: #555;
}

#lock-modal .btn-submit {
    background: #4caf50;
    color: white;
}

#lock-modal .btn-submit:hover {
    background: #45a049;
}

#lock-password {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    letter-spacing: 0.05em;
}

/* Make password dots more visible */
#lock-password::-webkit-input-placeholder {
    letter-spacing: normal;
}

#lock-password::-moz-placeholder {
    letter-spacing: normal;
}

.recent-action-section li[data-action]:hover {
    background: rgba(76, 175, 80, 0.2) !important;
}

.recent-action-section li[data-action] {
    position: relative;
}

.recent-action-section li[data-action]::after {
    position: absolute;
    right: 8px;
    font-size: 16px;
    color: #4CAF50;
    opacity: 0.6;
}

#compare-slider {
    opacity: 0;
}

/* Slider styling for compare modal */
#compare-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 4px;
    height: 100vh;
    background: transparent;
    cursor: ew-resize;
}

#compare-slider::-moz-range-thumb {
    width: 4px;
    height: 100vh;
    background: transparent;
    border: none;
    cursor: ew-resize;
}

#compare-container {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

#compare-container img {
    pointer-events: none;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.8;
    }
}

#server-heart-indicator {
    filter: drop-shadow(0 0 2px rgba(67, 160, 71, 0.5));
}

/* Chatbot Help Icon */
.chatbot-help-icon {
    position: fixed;
    right: 20px;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 101; /* Above queue panel (z-index: 100) */
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    transition: bottom 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.chatbot-help-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.6);
}

.chatbot-help-icon::before {
    content: '🤖';
    font-size: 24px;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
}

.chatbot-help-tooltip {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.chatbot-help-icon:hover .chatbot-help-tooltip {
    opacity: 1;
}

#share-link-modal .modal-content {
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#share-link-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(76, 175, 80, 0.3);
}

#copy-share-link-btn {
    background: linear-gradient(45deg, #4CAF50, #45a049);
    white-space: nowrap;
}

#copy-share-link-btn:hover {
    background: linear-gradient(45deg, #45a049, #4CAF50);
}

#copy-share-link-btn.copied {
    background: linear-gradient(45deg, #2196F3, #1976D2);
}

#create-visualiser-modal .material-input {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    outline: none;
    background: #fafafa;
    color: #333;
}

#preview-seek {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: #333;
    outline: none;
}

#preview-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #667eea;
    cursor: pointer;
    transition: all 0.2s ease;
}

#preview-seek::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    background: #7c8ef5;
}

#preview-seek::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #667eea;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

#preview-seek::-moz-range-thumb:hover {
    transform: scale(1.2);
    background: #7c8ef5;
}

#create-visualiser-modal .material-input {
    padding: 12px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    outline: none;
    background: #fafafa;
    color: #333;
}

#create-visualiser-modal select.visualiser-select {
    cursor: pointer;
    background-color: #fafafa;
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    color: #333;
    font-weight: 600;
    /* Add visible selected value styling */
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    background-size: 20px;
    min-height: 40px;
    line-height: 40px;
    font-size: 10px;
}
#create-visualiser-modal .material-input {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    outline: none;
    background: #fafafa;
    color: #333;
}

#create-visualiser-modal select.visualiser-select:focus {
    outline: none;
    border-color: #667eea;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

#create-visualiser-modal select.visualiser-select:hover:not(:focus) {
    border-color: #b0b0b0;
}

#create-visualiser-modal select.visualiser-select option {
    background-color: #fff;
    color: #333;
    padding: 8px;
}

.mtv-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #FF9800;
    cursor: ew-resize;
    z-index: 5;
    transition: background 0.2s;
}

.mtv-marker:hover {
    background: #FFC107;
    width: 5px;
}

.mtv-marker::before {
    content: attr(data-time);
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: #FF9800;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.mtv-marker:hover::before {
    opacity: 1;
}

.mtv-marker.dragging {
    background: #F44336;
    width: 5px;
}

.mtv-chunk-region {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(76, 175, 80, 0.1);
    border-left: 1px solid rgba(76, 175, 80, 0.3);
    border-right: 1px solid rgba(76, 175, 80, 0.3);
    pointer-events: none;
}

.mtv-chunk-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #4CAF50;
    font-size: 8px;
    font-weight: bold;
    text-shadow: 0 0 3px rgba(0,0,0,0.8);
    pointer-events: none;
}

.audio2video-marker {
    position: absolute;
    top: 0;
    height: 100%;
    width: 3px;
    background: #f44336;
    cursor: ew-resize;
    z-index: 5;
    transition: background 0.2s;
}

.audio2video-marker:hover {
    background: #ff5722;
    width: 4px;
}

.audio2video-marker.dragging {
    background: #ff9800;
    width: 5px;
    z-index: 6;
}

.audio2video-marker::after {
    content: attr(data-time);
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: #f44336;
    white-space: nowrap;
    pointer-events: none;
}

.audio2video-chunk-region {
    position: absolute;
    top: 0;
    height: 100%;
    background: rgba(76, 175, 80, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    pointer-events: none;
}

.audio2video-chunk-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    color: #fff;
    font-weight: bold;
    pointer-events: none;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

#app-inputs-canvas [data-var-name]:hover {
    background: rgba(255,255,255,0.1) !important;
}

#app-inputs-canvas [data-var-name][data-side="source"] {
    cursor: pointer;
}

#app-inputs-canvas [data-var-name][data-side="target"] {
    cursor: pointer;
}

.browse-node-tab {
    padding: 10px 20px;
    border: none;
    background: #e0e0e0;
    color: #333;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
    white-space: nowrap;
}

.browse-node-tab:hover {
    background: #d0d0d0;
}

.browse-node-tab.active {
    background: #4CAF50;
    color: white;
}

.node-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.node-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.node-card-preview {
    width: 100%;
    height: 200px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.node-card-preview img,
.node-card-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.node-card-preview audio {
    width: 100%;
    position: absolute;
    bottom: 0;
}

.node-card-body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.node-card-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.node-card-description {
    font-size: 14px;
    color: #666;
    margin: 0 0 12px 0;
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.node-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #999;
    border-top: 1px solid #eee;
    padding-top: 12px;
}

.node-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.node-card-actions button {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

.node-install-btn {
    background: #4CAF50;
    color: white;
}

.node-install-btn:hover {
    background: #45a049;
}

.node-view-btn {
    background: #2196F3;
    color: white;
}

.node-view-btn:hover {
    background: #1976D2;
}

.language-dropdown {
    scrollbar-width: thin;
    scrollbar-color: #555 #2a2a2a;
}

.language-dropdown::-webkit-scrollbar {
    width: 8px;
}

.language-dropdown::-webkit-scrollbar-track {
    background: #2a2a2a;
}

.language-dropdown::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

.language-dropdown::-webkit-scrollbar-thumb:hover {
    background: #666;
}

.language-option {
    padding: 10px 12px;
    cursor: pointer;
    color: #fff;
    transition: background 0.2s;
}

.language-option:hover {
    background: #3a3a3a;
}

.language-option.selected {
    background: #4a4a4a;
}

/* ═══════════════════════════════════════════
   Queue Footer — Legal Links
   ═══════════════════════════════════════════ */
.queue-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 8px 12px;
    border-top: 1px solid #444;
    background: rgba(0, 0, 0, 0.2);
    font-size: 12px;
}

.queue-footer-link {
    cursor: pointer;
    transition: color 0.2s, opacity 0.2s;
    opacity: 0.6;
    user-select: none;
    -webkit-user-select: none;
    text-decoration: none;
}

.queue-footer-link:hover {
    opacity: 1;
}

/* ═══════════════════════════════════════════
   Legal Acceptance Modal (Blocking)
   ═══════════════════════════════════════════ */
.legal-acceptance-modal-content {
    max-width: 640px;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.legal-acceptance-header {
    background: linear-gradient(135deg, #667eea, #764ba2);
    padding: 20px 24px;
    border-bottom: none;
}

.legal-acceptance-header h2 {
    color: #fff;
    margin: 0;
    font-size: 20px;
}

.legal-acceptance-body {
    padding: 24px;
}

.legal-acceptance-intro {
    color: #c9d1d9;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 16px;
}

.legal-acceptance-docs-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.legal-acceptance-doc-item {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 8px;
    overflow: hidden;
}

.legal-acceptance-doc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s;
}

.legal-acceptance-doc-header:hover {
    background: rgba(56, 139, 253, 0.06);
}

.legal-acceptance-doc-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.legal-acceptance-doc-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.legal-acceptance-doc-name {
    color: #f0f6fc;
    font-weight: 600;
    font-size: 14px;
}

.legal-acceptance-doc-date {
    color: #8b949e;
    font-size: 12px;
}

.legal-acceptance-doc-preview {
    color: #58a6ff;
    font-size: 12px;
    flex-shrink: 0;
}

.legal-acceptance-footer {
    padding: 0 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.legal-acceptance-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    color: #c9d1d9;
    font-size: 14px;
    line-height: 1.5;
}

.legal-acceptance-checkbox input[type="checkbox"] {
    margin-top: 2px;
    accent-color: #667eea;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.legal-acceptance-actions {
    display: flex;
    justify-content: center;
}

.legal-acceptance-actions .auth-btn {
    max-width: 280px;
    opacity: 1;
}

.legal-acceptance-actions .auth-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.legal-acceptance-status {
    text-align: center;
    font-size: 13px;
    margin: 0;
}

/* ═══════════════════════════════════════════
   Legal Preview Modal
   ═══════════════════════════════════════════ */
.legal-preview-modal-content {
    max-width: 720px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 12px;
    overflow: hidden;
}

.legal-preview-body {
    padding: 20px 24px;
    overflow-y: auto;
    font-size: 13px;
    color: #c9d1d9;
    line-height: 1.7;
    white-space: pre-wrap;
    flex: 1;
}

.legal-preview-body h1,
.legal-preview-body h2,
.legal-preview-body h3 {
    color: #f0f6fc;
    margin-top: 16px;
    margin-bottom: 8px;
}

.legal-preview-body strong {
    color: #f0f6fc;
}

.legal-preview-footer {
    padding: 12px 24px;
    border-top: 1px solid #30363d;
    background: #0d1117;
}

/* ═══════════════════════════════════════════
   Legal Acceptance Modal — Tabs & Document Body
   ═══════════════════════════════════════════ */

/* Tab bar */
.legal-acceptance-tabs {
    display: flex;
    border-bottom: 1px solid #30363d;
    background: #0d1117;
}

.legal-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #8b949e;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    user-select: none;
}

.legal-tab:hover {
    background: rgba(56, 139, 253, 0.06);
    color: #c9d1d9;
}

.legal-tab.active {
    color: #58a6ff;
    border-bottom-color: #58a6ff;
    background: rgba(56, 139, 253, 0.08);
}

.legal-tab-icon {
    font-size: 16px;
}

.legal-tab-label {
    flex: 1;
    text-align: center;
}

.legal-tab-version {
    font-size: 11px;
    font-weight: 400;
    color: #8b949e;
    background: rgba(139, 148, 158, 0.15);
    padding: 1px 6px;
    border-radius: 8px;
}

.legal-tab.active .legal-tab-version {
    color: #58a6ff;
    background: rgba(56, 139, 253, 0.15);
}

/* Tab content panels */
.legal-acceptance-body {
    position: relative;
    min-height: 300px;
    max-height: 55vh;
    overflow: hidden;
}

.legal-tab-content {
    display: none;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    overflow-y: auto;
    padding: 20px 24px;
}

.legal-tab-content.active {
    display: block;
}

/* Effective date banner */
.legal-doc-effective-date {
    font-size: 12px;
    color: #8b949e;
    padding: 6px 12px;
    margin: 0 0 16px;
    background: rgba(56, 139, 253, 0.06);
    border: 1px solid rgba(56, 139, 253, 0.15);
    border-radius: 6px;
    text-align: center;
}

/* Markdown-rendered document body */
.legal-doc-body {
    color: #c9d1d9;
    font-size: 13px;
    line-height: 1.75;
}

.legal-doc-body h1 {
    color: #f0f6fc;
    font-size: 20px;
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #30363d;
}

.legal-doc-body h2 {
    color: #f0f6fc;
    font-size: 16px;
    margin: 20px 0 10px;
}

.legal-doc-body h3 {
    color: #f0f6fc;
    font-size: 14px;
    margin: 16px 0 8px;
}

.legal-doc-body p {
    margin: 0 0 12px;
}

.legal-doc-body ul, .legal-doc-body ol {
    margin: 0 0 12px;
    padding-left: 24px;
}

.legal-doc-body li {
    margin-bottom: 4px;
}

.legal-doc-body strong {
    color: #f0f6fc;
}

.legal-doc-body em {
    color: #c9d1d9;
    font-style: italic;
}

.legal-doc-body a {
    color: #58a6ff;
    text-decoration: none;
}

.legal-doc-body a:hover {
    text-decoration: underline;
}

.legal-doc-body code {
    background: rgba(110, 118, 129, 0.2);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

.legal-doc-body blockquote {
    border-left: 3px solid #388bfd;
    margin: 12px 0;
    padding: 8px 16px;
    background: rgba(56, 139, 253, 0.06);
    color: #8b949e;
}

.legal-doc-body hr {
    border: none;
    border-top: 1px solid #30363d;
    margin: 16px 0;
}

/* Scrollbar styling for legal doc body */
.legal-tab-content::-webkit-scrollbar {
    width: 6px;
}

.legal-tab-content::-webkit-scrollbar-track {
    background: transparent;
}

.legal-tab-content::-webkit-scrollbar-thumb {
    background: #30363d;
    border-radius: 3px;
}

.legal-tab-content::-webkit-scrollbar-thumb:hover {
    background: #484f58;
}

/* Subtitle in header */
.legal-acceptance-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    margin: 6px 0 0;
    line-height: 1.5;
}

/* Acceptance footer */
.legal-acceptance-footer {
    padding: 16px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Modal overlay — prevent backdrop click from closing */
#legal-acceptance-modal {
    align-items: flex-start;
    justify-content: center;
    padding-top: 5vh;
}

#legal-acceptance-modal .modal-content {
    margin: 0 auto;
    width: 100%;
    max-width: 680px;
}
/* ============================ SRT editor (.srt-editor-*) ============================ */
.srt-editor-root {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
    color: #2c3e50;
    font-size: 13px;
}
.srt-editor-header {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.srt-editor-btn {
    border: none;
    padding: 5px 10px;
    border-radius: 6px;
    background: #607D8B;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s;
}
.srt-editor-btn:hover { background: #455A64; }
.srt-editor-btn:disabled { opacity: 0.5; cursor: default; }
.srt-editor-btn-blue { background: #2196F3; }
.srt-editor-btn-blue:hover { background: #1976D2; }
.srt-editor-btn-bulk { padding: 4px 8px; font-size: 11px; }
.srt-editor-status {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    color: #34495e;
}
.srt-editor-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}
.srt-editor-tab {
    border: none;
    background: transparent;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #7f8c8d;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}
.srt-editor-tab:hover { color: #2c3e50; }
.srt-editor-tab.active {
    color: #2196F3;
    border-bottom-color: #2196F3;
}
.srt-editor-workspace { flex: 1; min-height: 0; }
.srt-editor-pane { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.srt-editor-muted { color: #7f8c8d; font-size: 12px; }
.srt-editor-bulkbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    padding: 6px 8px;
}
.srt-editor-bulkbar input[type="checkbox"] { margin: 0 2px; }
.srt-editor-tablewrap {
    overflow: auto;
    max-height: 46vh;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.6);
}
.srt-editor-table {
    width: 100%;
    border-collapse: collapse;
    font-family: monospace;
    font-size: 12px;
}
.srt-editor-table thead th {
    position: sticky;
    top: 0;
    background: #ecf0f1;
    color: #2c3e50;
    text-align: left;
    padding: 6px 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.srt-editor-table td {
    padding: 5px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    vertical-align: middle;
}
.srt-editor-table .srt-editor-col-sel { width: 30px; }
.srt-editor-row { cursor: pointer; }
.srt-editor-row:hover { background: rgba(33, 150, 243, 0.06); }
.srt-editor-row.selected { background: rgba(33, 150, 243, 0.12); }
.srt-editor-row.active { background: rgba(76, 175, 80, 0.14); }
.srt-editor-row.active td:first-child { box-shadow: inset 3px 0 0 #4CAF50; }
.srt-editor-row td:nth-child(6) {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.srt-editor-tbl-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    padding: 2px 3px;
    border-radius: 4px;
}
.srt-editor-tbl-btn:hover { background: rgba(0, 0, 0, 0.08); }
.srt-editor-cue-editor {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 10px;
}
.srt-editor-times {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.srt-editor-times label { font-size: 12px; color: #34495e; }
.srt-editor-time-input {
    width: 120px;
    padding: 4px 6px;
    border: 1px solid #cfd8dc;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    background: #fff;
}
.srt-editor-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid #cfd8dc;
    border-radius: 6px;
    font-family: monospace;
    font-size: 13px;
    resize: vertical;
    background: #fff;
}
.srt-editor-caretbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.srt-editor-caretbar button {
    border: none;
    background: #2196F3;
    color: #fff;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
}
.srt-editor-caretbar button:hover { background: #1976D2; }
.srt-editor-caretbar button:disabled { opacity: 0.45; cursor: default; }
.srt-editor-caretbar select {
    padding: 4px 6px;
    border-radius: 4px;
    border: 1px solid #cfd8dc;
    font-size: 12px;
    background: #fff;
}
/* Second toolbar row: Start / Tail boundary nudges + split timing */
.srt-editor-boundarybar {
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.srt-editor-overlay .srt-editor-boundarybar { border-top-color: rgba(255, 255, 255, 0.15); }
.srt-editor-timeline {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 8px;
}
.srt-editor-timeline-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    margin-bottom: 6px;
}
.srt-editor-timeline-body {
    position: relative;
    height: 54px;
    background: #eceff1;
    border-radius: 6px;
    overflow: hidden;
}
.srt-editor-timeline-mini .srt-editor-timeline-body { height: 40px; }
.srt-editor-timeline-ruler {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 14px;
    font-size: 9px;
    color: #90a4ae;
    pointer-events: none;
}
.srt-editor-tick {
    position: absolute;
    top: 2px;
    transform: translateX(-50%);
    white-space: nowrap;
}
.srt-editor-timeline-bars {
    position: absolute;
    left: 0;
    right: 0;
    top: 16px;
    bottom: 4px;
}
.srt-editor-cuebar {
    position: absolute;
    top: 2px;
    bottom: 2px;
    background: #2196F3;
    border-radius: 4px;
    cursor: grab;
    opacity: 0.85;
    min-width: 3px;
}
.srt-editor-cuebar:hover { opacity: 1; }
.srt-editor-cuebar.selected { background: #1565C0; opacity: 1; }
.srt-editor-cuebar.active { outline: 2px solid #4CAF50; outline-offset: 1px; }
.srt-editor-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #f44336;
    left: 0;
    pointer-events: none;
    z-index: 2;
}
.srt-editor-issues-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.srt-editor-issues {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: auto;
    max-height: 40vh;
}
.srt-editor-issue {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    border-left: 4px solid #FF9800;
    background: rgba(255, 255, 255, 0.7);
    font-size: 12px;
}
.srt-editor-issue.error { border-left-color: #f44336; }
.srt-editor-issue-msg { flex: 1; min-width: 200px; color: #34495e; }
.srt-editor-issue button {
    border: none;
    background: #607D8B;
    color: #fff;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
    cursor: pointer;
}
.srt-editor-issue button:hover { background: #455A64; }
.srt-editor-raw {
    width: 100%;
    flex: 1;
    min-height: 260px;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid #cfd8dc;
    border-radius: 6px;
    font-family: monospace;
    font-size: 12px;
    resize: vertical;
    background: #fff;
}

/* ── SRT editor: fullscreen overlay, transport & layout (fullscreen mode) ── */
.srt-editor-overlay {
    position: fixed;
    inset: 0;
    /* Above the .modal backdrop (z-index 32000, which dims + blurs whatever is
       below it), below toasts (50000) and confirm dialogs (35001+). */
    z-index: 32001;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 20px 18px;
    box-sizing: border-box;
    background: linear-gradient(135deg, #1f2d3d 0%, #2c3e50 55%, #34495e 100%);
    backdrop-filter: none;
    color: #ecf0f1;
}
.srt-editor-overlay-header {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
}
.srt-editor-title {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}
.srt-editor-transport {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-width: 340px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 6px 10px;
}
.srt-editor-timecode {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    color: #dfe6e9;
    white-space: nowrap;
}
.srt-editor-seek {
    flex: 1;
    min-width: 140px;
    accent-color: #2196F3;
    cursor: pointer;
}
.srt-editor-overlay-actions { display: flex; gap: 6px; }
.srt-editor-overlay .srt-editor-root { flex: 1; min-height: 0; overflow: hidden; }
.srt-editor-overlay .srt-editor-workspace { flex: 1; min-height: 0; overflow: hidden; }
.srt-editor-overlay .srt-editor-pane { height: 100%; overflow-y: auto; }
.srt-editor-overlay .srt-editor-status {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: #dfe6e9;
}
/* Cues pane: two columns — table + timeline on the left, cue editor on the right */
.srt-editor-pane-cues { overflow: hidden; }
.srt-editor-cues-cols {
    display: flex;
    gap: 12px;
    flex: 1;
    min-height: 0;
}
.srt-editor-cues-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
}
.srt-editor-cues-col-left { flex: 1.25; }
.srt-editor-cues-col-right { flex: 1; }
.srt-editor-overlay .srt-editor-tablewrap {
    flex: 1;
    max-height: none;
    overflow: auto;
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
}
.srt-editor-overlay .srt-editor-cue-editor {
    flex: 1;
    min-height: 0;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
}
.srt-editor-overlay .srt-editor-textarea {
    flex: 1;
    min-height: 140px;
    resize: none;
}
.srt-editor-overlay .srt-editor-timeline-full .srt-editor-timeline-bars { height: 96px; }
.srt-editor-overlay .srt-editor-issues { flex: 1; overflow-y: auto; }
@media (max-width: 980px) {
    .srt-editor-cues-cols { flex-direction: column; overflow-y: auto; }
    .srt-editor-cues-col-left, .srt-editor-cues-col-right { flex: none; overflow-y: visible; }
}

/* ── SRT editor (fullscreen): contrast fixes for the dark overlay theme ── */
.srt-editor-overlay .srt-editor-root { color: #e9eef2; }
.srt-editor-overlay .srt-editor-muted { color: #a9bac7; }
.srt-editor-overlay .srt-editor-tab { color: #b0bec5; }
.srt-editor-overlay .srt-editor-tab:hover { color: #e9eef2; }
.srt-editor-overlay .srt-editor-tab.active { color: #64b5f6; border-bottom-color: #64b5f6; }
.srt-editor-overlay .srt-editor-table thead th {
    /* Opaque: rows must not show through the sticky header while scrolling */
    background: #33455a;
    color: #cfd8dc;
    border-bottom-color: rgba(255, 255, 255, 0.2);
}
.srt-editor-overlay .srt-editor-table td { color: #e9eef2; border-bottom-color: rgba(255, 255, 255, 0.08); }
.srt-editor-overlay .srt-editor-row:hover { background: rgba(255, 255, 255, 0.1); }
.srt-editor-overlay .srt-editor-row.selected { background: rgba(33, 150, 243, 0.22); }
.srt-editor-overlay .srt-editor-row.active { background: rgba(76, 175, 80, 0.2); }
.srt-editor-overlay .srt-editor-tbl-btn { color: #e9eef2; }
.srt-editor-overlay .srt-editor-bulkbar { background: rgba(255, 255, 255, 0.06); }
.srt-editor-overlay .srt-editor-cue-editor .srt-editor-times label { color: #cfd8dc; }
.srt-editor-overlay .srt-editor-textarea { background: #ffffff; color: #263238; }
.srt-editor-overlay .srt-editor-raw { background: #ffffff; color: #263238; }
.srt-editor-overlay .srt-editor-timeline { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.15); }
.srt-editor-overlay .srt-editor-timeline-body { background: rgba(0, 0, 0, 0.35); }
.srt-editor-overlay .srt-editor-timeline-ruler { color: #9fb3c8; }
.srt-editor-overlay .srt-editor-playhead-label { color: #cfd8dc; }
.srt-editor-overlay .srt-editor-issue { background: rgba(255, 255, 255, 0.08); }
.srt-editor-overlay .srt-editor-issue-msg { color: #e9eef2; }
.srt-editor-overlay .srt-editor-issues-head { color: #cfd8dc; }