:root {
    --primary-color: #6c757d; /* Darker gray for primary elements */
    --primary-hover: #5a6268;
    --secondary-color: #343a40; /* Even darker gray for secondary elements */
    --secondary-hover: #23272b;
    --info-color: #17a2b8; /* Bootstrap info blue */
    --info-hover: #138496;
    --success-color: #28a745; /* Bootstrap success green */
    --success-hover: #218838;
    --danger-color: #dc3545; /* Bootstrap danger red */
    --danger-hover: #c82333;
    --warning-color: #ffc107; /* Bootstrap warning yellow */
    --warning-hover: #e0a800;

    --dark-bg: #1a1a1a; /* Very dark background for the page */
    --dark-bg-alt: #2c2c2c; /* Slightly lighter dark background for cards/sections */
    --dark-bg-light: #3a3a3a; /* Even lighter dark background for inputs/dynamic items */

    --light-text: #e0e0e0; /* Light text for dark backgrounds */
    --dark-text: #b0b0b0; /* Slightly darker light text for labels/secondary info */

    --border-color: #4a4a4a; /* Darker border for elements */
    --border-dashed: #6a6a6a; /* Darker dashed border */

    --code-bg: #121212; /* Even darker background for code blocks */
    --code-color: #ffeb3b; /* Yellowish text for code */

    --font-family: 'Inter', sans-serif;
}

body {
    font-family: var(--font-family);
    background-color: var(--dark-bg) !important;
    color: var(--light-text);
    line-height: 1.6;
    padding: 20px;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 25px; /* Increased padding for more breathing room */
}

/* Custom styles for collapsible headers to match the original design intent */
.card-header {
    background-color: var(--primary-color) !important;
    color: var(--light-text) !important;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    padding: 18px 25px; /* Increased padding */
}

.card-header h3, .card-header h5 {
    color: var(--light-text) !important;
    font-weight: 600; /* Make headings bolder */
}

/* Adjust card backgrounds for dark theme */
.card.bg-dark {
    background-color: var(--dark-bg-alt) !important;
}

.card.bg-secondary {
    background-color: var(--secondary-color) !important;
}

.card-body {
    background-color: var(--dark-bg-alt);
    padding: 25px; /* Increased padding */
}

/* Form control adjustments */
.form-control,
.form-select {
    background-color: var(--dark-bg-light);
    color: var(--light-text);
    border: 1px solid var(--border-color);
    border-radius: .3rem; /* Slightly more rounded */
    padding: 10px 15px; /* Adjusted padding */
}

.form-control::placeholder {
    color: var(--dark-text);
    opacity: 0.7;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--dark-bg-light);
    color: var(--light-text);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5); /* More prominent shadow */
}

/* Labels */
.form-label {
    font-weight: 500; /* Slightly lighter font weight for labels */
    margin-bottom: 8px; /* Consistent margin */
}

/* Buttons */
.btn {
    border-radius: .3rem; /* Consistent rounded corners for all buttons */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    transition: all 0.2s ease-in-out; /* Smooth transitions */
    padding: 10px 20px; /* Adjusted padding */
}

.btn:hover {
    transform: translateY(-1px); /* Subtle lift effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* More pronounced shadow on hover */
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

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

.btn-success {
    background-color: var(--success-color);
    border-color: var(--success-color);
}

.btn-success:hover {
    background-color: var(--success-hover);
    border-color: var(--success-hover);
}

.btn-info {
    background-color: var(--info-color);
    border-color: var(--info-color);
}

.btn-info:hover {
    background-color: var(--info-hover);
    border-color: var(--info-hover);
}

.btn-danger {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
}

.btn-danger:hover {
    background-color: var(--danger-hover);
    border-color: var(--danger-hover);
}

.btn-warning {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
    color: var(--dark-bg);
}

.btn-warning:hover {
    background-color: var(--warning-hover);
    border-color: var(--warning-hover);
}

/* Output container */
.output-container {
    background-color: var(--dark-bg-alt);
    padding: 30px; /* Increased padding */
    border-radius: .5rem; /* More rounded corners */
}

.output-container h2 {
    font-size: 1.8em; /* Slightly larger heading */
    margin-bottom: 20px; /* More space below heading */
}

/* Dynamic items (character, timeline) */
.dynamic-item {
    background-color: var(--dark-bg-light) !important;
    border: 1px solid var(--border-color) !important;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 0.5s ease-out forwards;
    padding: 20px; /* Increased padding */
    margin-bottom: 20px; /* Consistent margin */
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dynamic-item .remove-btn {
    color: var(--light-text) !important; /* Ensure 'x' is visible */
    opacity: 0.7;
}

.dynamic-item .remove-btn:hover {
    opacity: 1;
}

/* Canvas and drawing tools */
.canvas-wrapper {
    position: relative;
    width: 100%;
    height: 400px; /* Set a fixed height for the wrapper */
    margin-bottom: 15px;
}

#drawing-canvas {
    border: 1px solid var(--border-color);
    background-color: var(--dark-bg-light); /* Dark background for drawing */
    display: block;
    width: 100%;
    height: 100%; /* Make canvas fill the wrapper */
}

.canvas-bottom-actions {
    margin-top: 20px; /* Add margin to separate buttons from canvas */
}

.drawing-tools-section,
.text-tools-section,
.canvas-actions-section {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px; /* Increased padding */
    margin-bottom: 25px; /* Increased margin */
}

.canvas-actions-section {
    border-bottom: none;
    padding-bottom: 0;
}

.form-control-color {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    cursor: pointer;
}

/* Scrollbar styles */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--dark-bg-light);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-hover);
}

/* Specific adjustments for the list-item template */
.list-item {
    background-color: var(--dark-bg-light) !important;
    border: 1px solid var(--border-color) !important;
    padding: 10px 15px; /* Adjusted padding */
    margin-bottom: 10px; /* Adjusted margin */
}

.list-item .editable-text {
    color: var(--light-text) !important;
}

.list-item .remove-btn {
    color: var(--light-text) !important;
}

.list-item .remove-btn:hover {
    color: var(--danger-color) !important;
}