:root {
    --left-nav-width: 80px;
    --slide-title-bar-height: 40px;
    --bottom-bar-height: 175px;
    --right-sidebar-width: 320px;

    /* Core Palette Mapping */
    --primary-surface: #133A4A; /* Dark Blue */
    --secondary-surface: #EEF1F6; /* Light Gray/Blue */
    --action-accent: #CF4229; /* Burnt Orange */
    --secondary-accent: #21B3BC; /* Teal */
    --neutral-slate: #909EAC; /* Muted Slate */
    --white: #FFFFFF;
}

body {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--secondary-surface);
    color: var(--primary-surface);
}

.left-nav {
    width: var(--left-nav-width);
    height: 100%;
    z-index: 1000;
    flex-shrink: 0;
    background-color: var(--neutral-slate) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.main-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.content-area {
    display: flex;
    flex-direction: row;
    background-color: var(--secondary-surface);
    height: calc(100vh - var(--slide-title-bar-height));
    overflow: hidden;
    position: relative;
    gap: 0;
    padding: 0;
}

.right-sidebar {
    width: var(--right-sidebar-width);
    flex-shrink: 0;
    background-color: var(--neutral-slate) !important;
    color: var(--primary-surface);
    user-select: none;
}

.sidebar-header {
    background-color: var(--primary-surface);
    border-bottom: 1px solid var(--neutral-slate) !important;
}

.sidebar-header .btn {
    color: var(--white) !important;
}

.sidebar-header .btn.active {
    background-color: rgba(255, 255, 255, 0.1);
    border-bottom: 2px solid var(--secondary-accent) !important;
}

.sidebar-content {
    background-color: var(--neutral-slate);
    color: var(--primary-surface);
    overflow-y: scroll !important;
}

.sidebar-content h6 {
    color: var(--text-primary);
    font-weight: bold;
}

.sidebar-content .small-text {
    color:#FFFFFF !important;
}

.sidebar-content label.small-text {
    color: #FFFFFF !important;
}


.small-text {
    font-size: 0.75rem;
}

.tool-item {
    cursor: pointer;
    width: 100%;
    padding: 10px 0;
    color: var(--white);
    transition: background-color 0.2s, color 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.tool-item:hover {
    color: var(--secondary-accent);
}

.tool-item i {
    font-size: 1.25rem;
    margin-bottom: 4px;
}

.tool-icons {
    width: 100%;
}

.tool-group {
    width: 100%;
}

.tool-item.active {
    background-color: var(--secondary-accent);
    color: var(--white);
}

.slide-title-bar {
    height: var(--slide-title-bar-height);
    background-color: var(--primary-surface) !important;
    color: var(--white);
    border-bottom: 1px solid var(--neutral-slate) !important;
}

.slide-title,
.sequence-title {
    font-weight: bold;
    cursor: text;
    padding: 2px 5px;
    border-radius: 4px;
    color: var(--white);
}

.slide-title:hover,
.sequence-title:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.canvas-wrapper {
    background-color: var(--secondary-surface);
    overflow: visible !important;
    padding: 20px;
}

.zoom-select-container {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 2px 8px;
    color: var(--white);
    font-size: 0.85rem;
    cursor: pointer;
    min-width: 65px;
    user-select: none;
}

.zoom-display:hover {
    color: var(--secondary-accent);
}

.zoom-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--primary-surface);
    border: 1px solid var(--neutral-slate);
    border-radius: 0 0 4px 4px;
    z-index: 2000;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

.zoom-dropdown.show {
    display: block;
}

.zoom-option {
    padding: 6px 8px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.zoom-option:last-child {
    border-bottom: none;
}

.zoom-option:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--secondary-accent);
}

.slide-info-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--primary-surface);
    border: 1px solid var(--neutral-slate);
    border-radius: 4px;
    z-index: 2000;
    min-width: 100%;
    white-space: nowrap;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    max-height: 300px;
    overflow-y: auto;
}

.slide-info-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white);
}

.slide-info-item:last-child {
    border-bottom: none;
}

.slide-info-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.slide-info-item.active {
    background-color: var(--secondary-accent);
    color: var(--white) !important;
}

.slide-selector-container {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 2px 8px;
    transition: background-color 0.2s;
}

.slide-selector-container:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.right-segment {
    position: relative;
}

.right-segment .btn-link {
    color: var(--white) !important;
}

.left-segment .btn-link {
    color: var(--white) !important;
}


/* Reveal.js embedded fix */
/*.reveal-viewport {
    background: transparent !important;
}*/

.reveal {
    /* Reveal is sized by JS in editor.js */
    user-select: none;
    -webkit-user-select: none;
}

.sidebar-header .btn {
    border-radius: 0;
    padding: 10px;
}

.sidebar-header .btn.active {
    background-color: rgba(255, 255, 255, 0.1);
    border-bottom: 2px solid #0d6efd;
}

.slide-thumbnail {
    width: 150px;
    height: 100px;
    cursor: pointer;
    flex-shrink: 0;
    border: 1px solid var(--neutral-slate) !important;
}

.slide-thumbnail.active {
    border: 2px solid var(--secondary-accent) !important;
}

.thumb-preview {
    min-height: 50px;
}

.thumbnails-container::-webkit-scrollbar {
    height: 8px;
}

.thumbnails-container::-webkit-scrollbar-thumb {
    background: var(--neutral-slate);
    border-radius: 3px;
}

.btn-xs {
    padding: 0.1rem 0.3rem;
    font-size: 0.75rem;
    line-height: 1;
    border-radius: 0.2rem;
}

.canvas-item {
    cursor: move;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

.canvas-item.selected {
    outline: 2px solid var(--secondary-accent);
    z-index: 1001;
}

.canvas-item[data-locked="true"] {
    cursor: default;
    outline-color: var(--action-accent);
}

.base-shape {
    /* transition: all 0.1s ease; */
}

.resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: var(--secondary-accent);
    display: none;
}

.resize-handle-tl { top: -5px; left: -5px; cursor: nwse-resize; }
.resize-handle-tr { top: -5px; right: -5px; cursor: nesw-resize; }
.resize-handle-bl { bottom: -5px; left: -5px; cursor: nesw-resize; }
.resize-handle-br { bottom: -5px; right: -5px; cursor: nwse-resize; }
.resize-handle-mt { top: -5px; left: calc(50% - 5px); cursor: ns-resize; }
.resize-handle-mb { bottom: -5px; left: calc(50% - 5px); cursor: ns-resize; }
.resize-handle-ml { left: -5px; top: calc(50% - 5px); cursor: ew-resize; }
.resize-handle-mr { right: -5px; top: calc(50% - 5px); cursor: ew-resize; }

.canvas-item.selected .resize-handle {
    display: block;
}

.canvas-item[data-locked="true"] .resize-handle {
    display: none !important;
}

.resize-handle-width {
    position: absolute;
    width: 6px;
    height: 20px;
    background-color: var(--secondary-accent);
    right: -3px;
    top: calc(50% - 10px);
    cursor: ew-resize;
    display: none;
    border-radius: 3px;
}

.canvas-item.selected .resize-handle-width {
    display: block;
}

.canvas-item[data-locked="true"] .resize-handle-width {
    display: none !important;
}

.rotate-handle {
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: var(--secondary-accent);
    color: white;
    border-radius: 50%;
    top: -40px;
    left: calc(50% - 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    z-index: 1002;
    font-size: 12px;
    display: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.rotate-handle:active {
    cursor: grabbing;
}

.canvas-item.selected .rotate-handle {
    display: flex;
}

.canvas-item[data-locked="true"] .rotate-handle {
    display: none !important;
}

.text-item {
    display: flex;
    align-items: center;
}

.text-item .text-content {
    display: block;
    user-select: none;
    pointer-events: none;
    outline: none;
}

.text-item.editing .text-content {
    user-select: text;
    pointer-events: auto;
}

.tool-icons {
    overflow-x: auto;
    overflow-y: visible;
}

.tool-icons::-webkit-scrollbar {
    height: 4px;
}

.tool-icons::-webkit-scrollbar-thumb {
    background: var(--neutral-slate);
    border-radius: 2px;
}

.icon-picker-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--secondary-accent) !important;
}

.icon-item i {
    pointer-events: none;
}


.ratio-preview {
    width: 80px;
    height: 80px;
    background-color: var(--neutral-slate);
    position: relative;
    border: 1px solid var(--primary-surface);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ratio-box-demo {
    background-color: var(--primary-surface);
    border: 1px solid var(--neutral-slate);
}

.ratio-option {
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.ratio-option:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.ratio-option.active {
    border-color: var(--secondary-accent) !important;
    background-color: rgba(33, 179, 188, 0.1);
}

.cursor-pointer {
    cursor: pointer;
}

.image-item img,
.text-item .text-content {
    display: inline-block;
    width: 100%;
    outline: none;
    word-break: break-word;
    white-space: pre-wrap;
}

.text-item .text-content[contenteditable="true"] {
    cursor: text;
    background: rgba(255, 255, 255, 0.1);
}

.video-item video {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.additional-controls {
    background-color: var(--primary-surface) !important;
    border-left: 1px solid var(--neutral-slate);
}

.additional-controls .btn-primary {
    background-color: var(--action-accent);
    border-color: var(--action-accent);
}

.additional-controls .btn-primary:hover {
    background-color: #b53822; /* Slightly darker burnt orange */
    border-color: #b53822;
}

.additional-controls .btn-outline-light {
    color: var(--white);
    border-color: var(--neutral-slate);
}

.additional-controls .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Custom styles for property panel inputs */
.sidebar-content input, 
.sidebar-content select, 
.sidebar-content textarea {
    border: 1px solid var(--neutral-slate) !important;
    border-radius: 4px;
    padding: 4px 8px;
    background-color: var(--white);
    color: var(--primary-surface);
}

.sidebar-content .form-range::-webkit-slider-thumb {
    background: var(--secondary-accent);
}

.sidebar-content .form-range::-moz-range-thumb {
    background: var(--secondary-accent);
}

.sidebar-content .form-range::-ms-thumb {
    background: var(--secondary-accent);
}

.sidebar-content .btn-group .btn.active {
    background-color: var(--secondary-accent);
    border-color: var(--secondary-accent);
    color: var(--white);
}

/* Isolated styles for alignment visualizations only */
.align-viz-container {
    --av-size: 40px;
    --av-bg: #f0f0f0;
    --av-accent: #3b82f6;
}

.align-icon-viz {
    display: inline-block;
    width: var(--av-size);
    height: var(--av-size);
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
}

/* Specific Icons using unique variable names */
.av-top-left {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='8' fill='var(--av-bg, %23f0f0f0)'/%3E%3Crect x='10' y='10' width='30' height='30' rx='4' fill='var(--av-accent, %233b82f6)'/%3E%3C/svg%3E");
}

.av-top-right {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='8' fill='var(--av-bg, %23f0f0f0)'/%3E%3Crect x='60' y='10' width='30' height='30' rx='4' fill='var(--av-accent, %233b82f6)'/%3E%3C/svg%3E");
}

.av-center {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='8' fill='var(--av-bg, %23f0f0f0)'/%3E%3Crect x='35' y='35' width='30' height='30' rx='4' fill='var(--av-accent, %233b82f6)'/%3E%3C/svg%3E");
}

.av-bottom-left {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='8' fill='var(--av-bg, %23f0f0f0)'/%3E%3Crect x='10' y='60' width='30' height='30' rx='4' fill='var(--av-accent, %233b82f6)'/%3E%3C/svg%3E");
}

.av-bottom-right {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='8' fill='var(--av-bg, %23f0f0f0)'/%3E%3Crect x='60' y='60' width='30' height='30' rx='4' fill='var(--av-accent, %233b82f6)'/%3E%3C/svg%3E");
}

/* ===== 2026 UI Redesign Overrides ===== */
:root {
    --app-bg: #18212b;
    --panel-bg: #0F1923;
    --panel-bg-secondary: #1A242F;
    --accent-primary: #3B82F6;
    --accent-primary-hover: #2563EB;
    --text-primary: #E5E7EB;
    --text-secondary: #9CA3AF;
    --text-disabled: #6B7280;
    --border-subtle: #374151;
    --canvas-bg: #0B0F19;
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 24px;
    --spacing-6: 32px;

    /* Override legacy tokens still referenced by existing selectors */
    --primary-surface: #111827;
    --secondary-surface: #18212b;
    --action-accent: #3B82F6;
    --secondary-accent: #3B82F6;
    --neutral-slate: #374151;
    --white: #E5E7EB;
}

body,
.main-container {
    background: var(--app-bg) !important;
    color: var(--text-primary);
    font-family: Inter, Roboto, "SF Pro Text", "Segoe UI", sans-serif;
}

.small-text {
    font-size: 12px;
    color: var(--text-secondary);
}


.slide-title-bar {
    min-height: 52px;
    border: 0 !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    background: var(--panel-bg) !important;
    box-shadow: none;
}

.project-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--panel-bg-secondary);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.slide-title,
.sequence-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}

.slide-title:focus,
.sequence-title:focus {
    outline: 0;
    box-shadow: inset 0 -1px 0 var(--accent-primary);
}

.topbar-icon-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary) !important;
    border-radius: 6px;
    border: 0;
    text-decoration: none;
}

.topbar-icon-btn:hover,
.topbar-icon-btn:focus {
    color: var(--text-primary) !important;
    background: var(--panel-bg-secondary);
}

.slide-info {
    background: var(--panel-bg-secondary);
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(55, 65, 81, 0.65);
    color: var(--text-primary);
}

.topbar-action-btn {
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
}

.topbar-action-btn:hover,
.topbar-action-btn:focus {
    background: var(--panel-bg-secondary);
    color: var(--text-primary);
}

.topbar-action-primary {
    background: var(--accent-primary);
    color: var(--text-primary);
}

.topbar-action-primary:hover,
.topbar-action-primary:focus {
    background: var(--accent-primary-hover);
}

.left-nav {
    width: 76px;
    height: 100%;
    border: 0 !important;
    border-right: 1px solid var(--border-subtle) !important;
    background: var(--panel-bg) !important;
    border-radius: 0; 
    padding-inline: var(--spacing-2);
    margin-bottom: 0;
}

.tool-icons {
    gap: var(--spacing-5);
}

.tool-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-3);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid rgba(55, 65, 81, 0.7);
}

.tool-group:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.tool-item {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--text-secondary);
    position: relative;
}

.tool-item i {
    font-size: 16px;
}

.tool-item:hover {
    background: var(--panel-bg-secondary);
    color: var(--text-primary);
}

.tool-item.active,
.tool-item.active i {
    background: var(--panel-bg-secondary);
    color: var(--accent-primary);
}

.tool-item.active::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 999px;
    background: var(--accent-primary);
}

.editor-area {
    background: transparent !important;
    min-width: 0 !important;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.canvas-wrapper {
    border: 0 !important;
    border-radius: 0;
    background: transparent;
    padding: var(--spacing-4); /* Increased padding for better visuals */
    overflow: visible !important;
}

.reveal {
    background: var(--canvas-bg) !important;
    border: 1px solid rgba(55, 65, 81, 0.55) !important;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.right-sidebar {
    width: 340px;
    height: 100%;
    border: 0 !important;
    border-left: 1px solid var(--border-subtle) !important;
    background: var(--panel-bg-secondary);
    border-radius: 0; 
    overflow: hidden;
    margin-bottom: 0;
    flex-shrink: 0;
}

.sidebar-header {
    border: 0 !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--panel-bg-secondary);
}

.sidebar-header .btn {
    border: 0;
    color: var(--text-secondary);
    background: transparent;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 8px 10px;
}

.sidebar-header .btn:hover,
.sidebar-header .btn:focus {
    background: var(--panel-bg-secondary);
    color: var(--text-primary);
}

.sidebar-header .btn.active {
    color: var(--text-primary);
    background: var(--panel-bg-secondary);
    box-shadow: inset 0 -2px 0 var(--accent-primary);
}

.sidebar-content {
    padding: var(--spacing-4) var(--spacing-4) var(--spacing-5) !important;
    background: var(--panel-bg-secondary);
}

.sidebar-panel-title {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: var(--spacing-3);
}

.editor-panel-group {
    margin-top: var(--spacing-5);
}

.editor-panel-group:first-child {
    margin-top: 0;
}

.editor-panel-group-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-bottom: 0;
    font-weight: 500;
}

.editor-panel-group-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--text-secondary);
}

.editor-panel-group-toggle i {
    font-size: 11px;
    transition: transform 180ms ease;
}

.editor-panel-group.collapsed .editor-panel-group-toggle i {
    transform: rotate(-90deg);
}

.editor-panel-items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    margin-top: var(--spacing-3);
}

.editor-panel-group.collapsed .editor-panel-items {
    display: none;
}

.editor-panel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
}

.editor-panel-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
}

.editor-panel-input,
.editor-panel-select,
.editor-panel-row .form-control,
.editor-panel-row select {
    /*background: var(--panel-bg-secondary) !important;*/
    background: #0C141B;
    color: var(--text-primary) !important;
    border: 0 !important;
    border-radius: 6px !important;
    min-height: 36px;
    padding-inline: 10px;
    font-size: 13px;
}

.editor-panel-input:focus,
.editor-panel-select:focus,
.editor-panel-row .form-control:focus,
.editor-panel-row select:focus {
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.45) !important;
}

.editor-panel-row .form-check-input {
    border: 0;
    background-color: var(--border-subtle);
}

.editor-panel-row .form-check-input:checked {
    background-color: var(--accent-primary);
}

.editor-panel-slider {
    flex: 1;
}

.editor-panel-row .form-range {
    height: 1.25rem;
}

.editor-panel-row .form-range::-webkit-slider-runnable-track {
    background: var(--border-subtle);
    border-radius: 999px;
    height: 8px;
}

.editor-panel-row .form-range::-webkit-slider-thumb {
    background: var(--accent-primary);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 0;
    margin-top: -3px;
}

.editor-panel-row .form-range::-moz-range-track {
    background: var(--border-subtle);
    border-radius: 999px;
    height: 8px;
}

.editor-panel-row .form-range::-moz-range-progress {
    background: var(--accent-primary);
    border-radius: 999px;
    height: 8px;
}

.editor-panel-row .form-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 50%;
    background: var(--accent-primary);
}

.editor-panel-value {
    min-width: 32px;
    text-align: right;
    font-size: 13px;
    color: var(--text-primary);
}

/* Duration Picker Component */
.duration-picker-container {
    background: var(--panel-bg-secondary);
    border-radius: 12px;
    padding: 12px;
    margin-top: 8px;
    width: 100%;
}

.duration-picker-inputs {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.duration-time-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.duration-time-box {
    background: var(--panel-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    width: 80px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    position: relative;
    transition: all 0.2s ease;
}

.duration-time-box:focus-within {
    border-color: var(--accent-primary);
}

.duration-time-box input[type="number"] {
    background: transparent !important;
    border: none !important;
    color: var(--text-primary) !important;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.25rem;
    text-align: center;
    width: 100%;
    outline: none;
    -moz-appearance: textfield;
    padding: 0;
    min-height: auto;
}

.duration-time-box input[type="number"]::-webkit-outer-spin-button,
.duration-time-box input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.duration-stepper-btn {
    background: var(--panel-bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    width: 18px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.6rem;
    transition: all 0.15s ease;
    border-radius: 4px;
    z-index: 2;
}

.duration-time-box:hover .duration-stepper-btn,
.duration-time-box:focus-within .duration-stepper-btn {
    opacity: 1;
}

.duration-stepper-btn:hover {
    background: var(--accent-primary);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

.duration-separator {
    font-size: 1.25rem;
    color: var(--text-disabled);
    font-family: 'JetBrains Mono', monospace;
    padding-bottom: 24px;
}

.duration-unit-label {
    font-size: 9px;
    color: var(--text-disabled);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.duration-slider-area {
    width: 100%;
    padding: 0 4px;
}

.duration-slider-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.duration-slider-btn {
    background: var(--panel-bg);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.duration-slider-btn:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.duration-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-disabled);
    text-transform: uppercase;
}

.duration-current-status {
    color: var(--accent-primary);
}

.duration-forever-display {
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--panel-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    width: 100%;
}

.duration-forever-label {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    color: var(--accent-primary);
    letter-spacing: 0.1em;
    font-size: 1.25rem;
}

.hidden {
    display: none !important;
}

.editor-panel-btn,
.sidebar-content .btn {
    border: 0;
    border-radius: 8px;
    font-size: 13px;
}

.editor-panel-btn-secondary {
    background: var(--panel-bg-secondary);
    color: var(--text-primary);
}

.editor-panel-btn-secondary:hover {
    background: var(--panel-bg-secondary);
}

.editor-panel-btn-primary,
.sidebar-content .btn-primary {
    background: var(--accent-primary);
    color: var(--text-primary);
}

.editor-panel-btn-primary:hover,
.sidebar-content .btn-primary:hover {
    background: var(--accent-primary-hover);
}

.bottom-bar {
    margin: 0;
    background: var(--panel-bg);
    border: 0 !important;
    border-top: 1px solid var(--border-subtle) !important;
    border-radius: 0;
    min-height: 175px;
    max-width: 100%;
    width: 100%;
    z-index: 10002;
    overflow: hidden !important;
    display: flex;
    flex-shrink: 0;
}

.thumbnails-container {
    padding: var(--spacing-4) var(--spacing-5) !important;
    gap: var(--spacing-4) !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    display: flex;
    flex: 1 1 0 !important; /* Grow, shrink, and start from 0 for reliable overflow */
    min-width: 0 !important; /* Important for flex-grow to work with overflow */
}

.slide-thumbnail {
    min-width: 168px;
    max-width: 184px;
    min-height: 140px; /* Added min-height to ensure it doesn't shrink when labels are added */
    background: var(--panel-bg-secondary) !important;
    border: 1px solid var(--border-subtle) !important;
    padding: var(--spacing-2) !important;
    border-radius: 8px !important;
    gap: var(--spacing-2);
}

.slide-thumbnail.active {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transform: scale(1.02);
}

.slide-thumbnail .thumb-preview {
    background: var(--canvas-bg) !important;
    border: 1px solid rgba(55, 65, 81, 0.65);
    border-radius: 6px;
    min-height: 88px;
    position: relative; /* Ensure it is the positioning parent */
}

.slide-thumbnail .thumb-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.slide-thumbnail-index {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s ease;
}

/* Unselected slide badges */
.slide-thumbnail:not(.active) .slide-thumbnail-index {
    background: rgba(42, 58, 76, 0.72);
    border: 1px solid rgba(150, 170, 195, 0.35);
    color: rgba(230, 238, 250, 0.85);
    backdrop-filter: blur(4px);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Selected slide badge */
.slide-thumbnail.active .slide-thumbnail-index {
    background: #1E73FF;
    border: 1px solid rgba(120, 180, 255, 0.9);
    color: #EAF2FF;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 12px rgba(30, 115, 255, 0.5),
        0 2px 6px rgba(0, 0, 0, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.slide-thumbnail .delete-slide-btn,
.slide-thumbnail .clone-slide-btn {
    position: absolute;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: rgba(17, 24, 39, 0.8);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    z-index: 10;
    cursor: pointer;
}

.slide-thumbnail .delete-slide-btn {
    top: 6px;
}

.slide-thumbnail .clone-slide-btn {
    top: 30px;
}

.slide-thumbnail .delete-slide-btn:hover,
.slide-thumbnail .clone-slide-btn:hover {
    color: var(--text-primary);
    background: rgba(31, 41, 55, 0.95);
}

.slide-thumbnail-title {
    font-size: 13px;
    line-height: 1.25;
    color: var(--text-primary);
}

.slide-thumbnail-duration {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    gap: 2px;
}

.duration-segment {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.duration-segment:hover {
    color: var(--accent-primary);
}

.duration-segment .segment-value {
    line-height: 1;
}

.duration-segment .segment-chevron {
    font-size: 8px;
    margin-top: -2px;
}

.duration-dropdown {
    position: absolute;
    bottom: calc(100% + 5px); /* Add a small gap to avoid overlap with border */
    left: 50%;
    transform: translateX(-50%);
    background: var(--panel-bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    max-height: 115px;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    z-index: 10005; /* Higher than any other UI element */
    display: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    min-width: 60px; /* Ensure dropdown has a decent width */
}

.duration-dropdown::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

.duration-dropdown.show {
    display: block;
}

.duration-dropdown div {
    padding: 4px 12px;
    cursor: pointer;
    color: var(--text-primary);
}

.duration-dropdown div:hover {
    background: var(--accent-primary);
}

.slide-thumbnail-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

/* Asset Download Modal Styles */
#assetDownloadList .list-group-item {
    background-color: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0.5rem;
}

#assetDownloadList .status-v {
    color: #28a745;
    font-weight: bold;
}

#assetDownloadList .status-x {
    color: #dc3545;
    font-weight: bold;
}

#assetDownloadList .error-msg {
    font-size: 0.8em;
    color: #dc3545;
    display: block;
    margin-top: 2px;
}

#assetDownloadList .item-name {
    flex-grow: 1;
    margin-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layer-row {
    background: var(--panel-bg-secondary);
    border: 1px solid transparent;
}

.layer-row:hover {
    border-color: var(--border-subtle);
}

.layer-row.border-primary {
    border-color: var(--accent-primary) !important;
}

.add-slide-card {
    min-width: 168px;
    max-width: 184px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    border-radius: 8px;
    background: transparent;
    border: 1px dashed rgba(156, 163, 175, 0.45);
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--spacing-3);
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.add-slide-card:hover {
    border-color: var(--text-secondary);
    background: rgba(31, 41, 55, 0.35);
    color: var(--text-primary);
    box-shadow: none;
}

.additional-controls {
    min-width: 96px;
    border-left: 0px solid var(--border-subtle);
    #background: var(--panel-bg) !important;
    flex-shrink: 0; /* Prevent controls from being squeezed */
}

.additional-controls .btn-link {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.additional-controls .btn-link:hover {
    background: var(--panel-bg-secondary);
    color: var(--text-primary);
}

.modal-content,
.shape-item,
.text-item,
.image-item,
.video-item,
.web-item,
.icon-item {
    border-radius: 10px;
}

.ratio-option,
.sidebar-content .btn,
.tool-item,
.slide-thumbnail,
.topbar-icon-btn,
.topbar-action-btn,
.add-slide-card,
.sidebar-header .btn,
.editor-panel-row .form-control,
.editor-panel-row .form-check-input {
    transition: all 180ms ease;
}