body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
    background-color: #f0f0f0; /* Lighter gray background for the whole page */
    color: #333; /* Darker gray for text */
    font-family: "Inter", sans-serif;
}

/* Styles for simple content pages like about.html */
.simple-page-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    padding: 20px;
    background-color: #f4f4f4; /* Ensuring a light background for the page */
    box-sizing: border-box;
    height: 100vh;
    width: 100vw;
    position: relative; /* Added for positioning the back button */
    overflow-y: auto;
}

.simple-page-content {
    background-color: transparent; /* Changed from #fff to transparent */
    padding: 20px;
    border-radius: 8px;
    width: 80%; /* Or your preferred width */
    box-sizing: border-box; /* Ensure padding is included in width calculation */
    text-align: left; /* Align text to the left within the content box */
}

.simple-page-content h1 {
    color: #333;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 28px;
    font-weight: 600;
}

.simple-page-content p {
    line-height: 1.8; /* Adjusted line height for better readability */
    margin-bottom: 1em;
    color: #333;
    font-size: 22px; /* Increased font size */
}

.simple-page-content a {
    color: #007bff;
    text-decoration: none;
}

.simple-page-content a:hover {
    text-decoration: underline;
}

/* Specific styling for the Back to Editor button on simple pages */
.simple-page-content .button-link.back-to-editor {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: transparent;
    border: 1px solid #ced4da; /* Style similar to toolbar buttons */
    color: #495057; /* Style similar to toolbar buttons */
    padding: 0 10px; /* Adjusted padding for a smaller button */
    height: 30px; /* Standard toolbar button height */
    font-size: 14px; /* Standard toolbar button font size */
    line-height: 28px; /* Align text vertically */
    min-width: auto; /* Allow button to be as small as its content */
    font-weight: normal; /* Override general .button-link font-weight */
    text-decoration: none;
}

.simple-page-content .button-link.back-to-editor:hover {
    background-color: #e9ecef; /* Light hover, similar to toolbar buttons */
    border-color: #ced4da;
    color: #495057;
    text-decoration: none;
}

.simple-page-content .button-link.back-to-editor i.fas {
    margin-right: 6px; /* Space between icon and text */
}

.button-link {
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.15s ease-in-out;
    border: none;
    cursor: pointer;
}

.button-link:hover {
    background-color: #0056b3;
    text-decoration: none;
}

.button-link i.fas {
    margin-right: 8px;
}

/* Toolbar button styling for <a> tags */
.top-toolbar a.tool-button {
    background-color: transparent;
    border: 1px solid transparent; /* Add transparent border for consistent size */
    border-radius: 4px;
    margin: 0 2px;
    padding: 0 8px; /* Adjusted padding */
    cursor: pointer;
    height: 30px;
    min-width: 30px; /* Ensure icon buttons have some width */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #495057; /* Default button text/icon color */
    transition:
        background-color 0.15s,
        color 0.15s,
        border-color 0.15s;
    font-size: 14px;
    text-decoration: none; /* Remove underline from link */
    font-family: "Inter", sans-serif; /* Ensure Inter font for link/button text */
}

.top-toolbar a.tool-button:hover {
    background-color: #e9ecef; /* Light hover */
    border-color: #ced4da;
    color: #495057;
}

.top-toolbar a.tool-button i.fas {
    margin-right: 6px; /* Space between icon and text if text exists */
}

.app-container {
    display: flex;
    width: 100vw;
    height: 100vh;
}

.main-content-area {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative; /* For absolute positioning of SVG if needed later, though direct child is fine */
}

.canvas-area {
    flex-grow: 1;
    background-color: #ffffff; /* White canvas background */
    position: relative; /* For SVG positioning if needed, or just direct child */
    overflow: hidden; /* In case SVG is larger than area */
    display: flex; /* To center SVG if smaller, or just let SVG fill */
    justify-content: center;
    align-items: center;
}

#svgCanvas {
    /* SVG will take width/height from its attributes */
    background-color: #fff; /* Ensure SVG background is white if it doesn't fill canvas-area */
    /* cursor is handled by Vue binding now */
}

/* Grid and Path Lines inside SVG */
.grid-line {
    stroke: #ddd;
    stroke-width: 1;
}

.curve-path {
    /* stroke and stroke-width are bound via Vue */
    fill: none;
    transition: stroke 0.1s ease-out; /* Smooth transition for selection highlight */
}

.curve-path.selected-curve-highlight {
    stroke: #4f80ff !important; /* Blue highlight for selected curves */
    filter: drop-shadow(0px 0px 3px rgba(79, 128, 255, 0.8));
}

.control-point {
    /* fill, stroke, r are bound via Vue */
    cursor: grab;
}
.control-point:active {
    cursor: grabbing;
}

.selection-rect {
    fill: rgba(79, 128, 255, 0.2);
    stroke: rgba(79, 128, 255, 0.8);
    stroke-width: 1;
    pointer-events: none; /* So it doesn't interfere with clicks on elements underneath */
}

/* Toolbar styling */
.top-toolbar {
    /* Changed from #toolbar to class for better specificity if needed */
    height: 40px;
    background-color: #f8f9fa; /* Lighter toolbar background */
    border-bottom: 1px solid #dee2e6; /* Softer border */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    flex-shrink: 0; /* Prevent toolbar from shrinking */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.toolbar-left,
.toolbar-right {
    display: flex;
    align-items: center;
    height: 100%;
}

.tool-group,
.control-group {
    display: flex;
    margin-right: 10px; /* Slightly reduced margin */
    height: 30px;
    align-items: center;
}

/* Vertical separator lines in toolbar */
.tool-group:not(:last-child):after,
.control-group:not(:last-child):after {
    content: "";
    height: 20px; /* Shorter separator */
    border-right: 1px solid #ced4da; /* Softer separator color */
    margin-left: 10px;
    margin-right: -2px; /* Pull next button slightly closer */
}

.top-toolbar button {
    background-color: transparent;
    border: 1px solid transparent; /* Add transparent border for consistent size */
    border-radius: 4px;
    margin: 0 2px;
    padding: 0 8px; /* Adjusted padding */
    cursor: pointer;
    height: 30px;
    min-width: 30px; /* Ensure icon buttons have some width */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #495057; /* Default button text/icon color */
    transition:
        background-color 0.15s,
        color 0.15s,
        border-color 0.15s;
    font-size: 14px;
    font-family: "Inter", sans-serif; /* Ensure Inter font for button text */
}

.top-toolbar button:hover:not(:disabled) {
    background-color: #e9ecef; /* Light hover */
    border-color: #ced4da;
}

.top-toolbar button:active:not(:disabled) {
    background-color: #d1d6db; /* Slightly darker active */
}

.tool-button.active-tool {
    background-color: #007bff !important; /* Primary blue for active tool */
    color: white !important;
    border-color: #007bff !important;
}

#downloadButton {
    /* Specific styling for download if needed */
    font-weight: 500;
}
#downloadButton:hover:not(:disabled) {
    background-color: #0069d9 !important;
    color: white !important;
    border-color: #0062cc !important;
}

#clearButton {
    color: #dc3545; /* Red for clear button */
}
#clearButton:hover:not(:disabled) {
    background-color: #f8d7da; /* Light red hover */
    color: #721c24;
    border-color: #f5c6cb;
}

.top-toolbar button:disabled {
    color: #adb5bd; /* Disabled color */
    cursor: not-allowed;
    background-color: transparent !important;
}

.active-button {
    /* For cycle button etc. */
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}
.active-button:hover:not(:disabled) {
    background-color: #0069d9 !important;
    border-color: #0062cc !important;
}

/* --- Property Editor Sidebar --- */
.property-editor-sidebar {
    width: 280px; /* Figma-like width */
    height: 100vh; /* Full height */
    background-color: #ffffff; /* White background for the sidebar */
    border-left: 1px solid #e0e0e0; /* Softer border */
    padding: 0; /* Remove padding if sections handle it */
    overflow-y: auto; /* Scroll if content exceeds height */
    flex-shrink: 0; /* Prevent sidebar from shrinking */
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
}

.sidebar-section {
    padding: 0px 16px; /* Horizontal padding for section content */
    margin-bottom: 8px; /* Small space below each section before divider */
}
.sidebar-section:first-child .sidebar-section-header {
    margin-top: 16px; /* Add some top margin to the first header */
}

.sidebar-section-header {
    font-size: 11px; /* Figma-like small header text */
    font-weight: 600; /* Semi-bold */
    color: #555; /* Dark gray for header */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 16px; /* Space above header */
    margin-bottom: 12px; /* Space below header before content */
}

.sidebar-divider {
    border: none;
    border-top: 1px solid #ebebeb; /* Very light divider */
    margin: 8px 0; /* Remove default margin, use padding on sections */
}

.input-group {
    display: flex;
    flex-direction: column; /* Stack label/input and range slider */
    margin-bottom: 12px; /* Space between input groups */
}

.input-group label,
.input-label label {
    /* Target both for consistency */
    font-size: 12px; /* Standard label size */
    color: #333;
    margin-bottom: 6px; /* Space between label and input field(s) */
    display: block; /* Ensure label takes full width before input */
}

/* For side-by-side label and number input */
.input-group .input-label-inline,
.input-label {
    /* Retain for existing structure if needed */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.input-group .input-label-inline label,
.input-label label {
    flex-grow: 1;
    margin-bottom: 0; /* Remove bottom margin if inline */
}

.input-group input[type="number"],
.input-label input[type="number"] {
    width: 65px; /* Slightly wider number input */
    padding: 6px 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 12px;
    background-color: #fff;
    box-sizing: border-box;
}
.input-group input[type="number"]:focus,
.input-label input[type="number"]:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.input-group input[type="range"] {
    width: 100%;
    margin-top: 4px; /* Small space if there's a number input above */
    cursor: pointer;
}

/* Line Cap Selector Styles */
.line-cap-selector {
    display: flex;
    justify-content: flex-start; /* Added */
    gap: 4px; /* Added */
    align-items: center;
    border-radius: 4px;
}

.line-cap-option {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px; 
    height: 28px; 
    background-color: #f8f9fa; /* Added default background */
    border: 1px solid #ced4da; /* Changed from transparent to default border */
    border-radius: 3px; 
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    padding: 2px; 
}

.line-cap-option:hover {
    background-color: #e9ecef; 
    border-color: #adb5bd; /* Slightly darker border on hover for better definition */
}

.line-cap-option.active {
    background-color: #007bff; 
    border-color: #007bff; 
    color: white; 
}

.line-cap-option.active svg {
    stroke: white; 
}

.line-cap-option svg {
    width: 20px; 
    height: 20px;
    /* stroke is set by default or by .active class */
}

/* Color Picker Styles */
.color-controls {
    display: flex;
    align-items: center;
}

.color-picker-swatch {
    width: 28px; /* Match height of line cap options */
    height: 28px;
    border: 1px solid #ced4da;
    border-radius: 3px; /* Match line cap options */
    cursor: pointer;
    position: relative;
    display: inline-block; /* To wrap the input correctly */
    padding: 0; /* Remove padding if any */
    background-clip: padding-box; /* Ensures background doesn't go under border */
}

.color-picker-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Make the actual input invisible */
    cursor: pointer;
    border: none; /* Remove default border of color input */
    padding: 0; /* Remove default padding of color input */
}

/* Remove old styles if they exist and are no longer needed */
.color-swatch.black-color-swatch {
    display: none; /* Assuming it's no longer needed */
}


/* Help Popup Styles */
.help-popups-container-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    z-index: 1000; /* Ensure it's on top */
    /* pointer-events: none; */ /* Allow clicks to pass through the overlay */ /* <<< COMMENT OUT OR REMOVE THIS LINE */
    pointer-events: auto; /* <<< ADD THIS LINE (or ensure it's the default) */
}

.help-popups-wrapper {
    /* This wrapper is no longer used for centering, but can be kept for structure if needed */
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    /* gap: 20px; */
    /* padding: 20px; */
    /* height: 100%; */
    position: relative; /* Needed for absolute positioning of children */
    width: 100%;
    height: 100%;
}

.help-popup-instance {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    width: 250px; /* Adjust width as needed */
    position: absolute; /* Enable absolute positioning */
    pointer-events: auto; /* Capture clicks on the popups themselves */
}

.help-popup-instance h2 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.help-popup-instance p {
    font-size: 13px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 0;
}

.help-popup-instance p i {
    color: #007bff; /* Icon color */
}

/* Positioning for each popup */
.help-popup-instance:nth-child(1) { /* Draw and edit */
    top: 50px; /* Below toolbar */
    left: 20px;
}

.help-popup-instance:nth-child(2) { /* Parameters */
    top: 50%; /* Middle of the screen */
    right: 300px; /* Next to sidebar (approx 280px width + 20px gap) */
    transform: translateY(-50%); /* Adjust for element's own height */
}

.help-popup-instance:nth-child(3) { /* Export */
    top: 50px; /* Below toolbar */
    right: 300px; /* Align with parameters pop-up, next to sidebar */
}


.help-close-all-button {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    pointer-events: auto; /* Capture clicks on the button */
}

/* Styles for hover images on about.html */
.hover-image-container {
    position: relative;
    display: inline-block; /* Or inline, depending on desired layout with text */
    margin-left: 4px; /* Space it out from the preceding text */
}

.hover-image-trigger {
    display: inline-block;
    width: 12px; /* Size of the blue square */
    height: 12px;
    background-color: #007bff; /* Blue color for the trigger */
    border-radius: 2px;
    cursor: pointer;
    vertical-align: super; /* Align with the top of the text */
    font-size: 8px; /* Make it smaller if using text/icon inside */
    line-height: 12px; /* Center content if any */
    text-align: center; /* Center content if any */
    color: white; /* For any potential icon/text inside */
}

.enlarged-image {
    display: none; /* Hidden by default */
    position: fixed; /* Changed from absolute to fixed for viewport centering */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for element's own size */
    max-width: 80vw; /* Max width relative to viewport width */
    max-height: 80vh; /* Max height relative to viewport height */
    border: 2px solid #ccc;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 1001; /* Ensure it's on top of other content, including help popup */
    padding: 10px; /* Increased padding */
    border-radius: 4px;
    object-fit: contain; /* Ensure image content is scaled within bounds */
}

.hover-image-container:hover .enlarged-image {
    display: block; /* Show on hover */
}

/* Adjustments for links that are also hover image containers */
a.hover-image-container {
    text-decoration: none; /* Remove underline from the container if it's a link */
}

/* Ensure the trigger doesn't get an underline from the parent 'a' tag if any */
.simple-page-content p a .hover-image-trigger {
    text-decoration: none !important; 
}

/* Visually Hidden Class for Accessibility */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Toolbar Select Dropdown Styling */
.toolbar-select {
    background-color: #fff; /* Match other inputs or stand out slightly */
    border: 1px solid #ced4da;
    border-radius: 4px;
    margin: 0 2px; /* Consistent with buttons */
    padding: 0 8px; /* Adjust padding as needed, ensure text is not cut off */
    height: 30px; /* Match button height */
    color: #495057;
    font-family: "Inter", sans-serif;
    font-size: 13px; /* Slightly smaller or match button text */
    cursor: pointer;
    line-height: 28px; /* Align text vertically */
    -webkit-appearance: none; /* Remove default OS styling */
    -moz-appearance: none;
    appearance: none;
    /* Add custom dropdown arrow or use default */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23495057%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px 10px;
    padding-right: 28px; /* Make space for the arrow */
}

.toolbar-select:hover {
    border-color: #adb5bd;
}

.toolbar-select:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.top-toolbar .control-group { /* Ensure control group aligns items */
    display: flex;
    align-items: center;
    /* margin-right: 10px; (already there) */
    /* height: 30px; (already there) */
}