BODY {
    font-family: 'Verdana', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; /* Modernized font stack */
    font-size: 14px; /* Slightly larger base font size */
    background: #f4f7f6; /* Very light green-tinted gray background */
    margin:0;
    padding:0;
    color: #333; /* Default text color */
}

/* --- Page Structure --- */
.page-container {
    width: 1000px;
    margin: 0 auto; /* Centering the page container */
    background: #fff;
    border: 0px solid #ccc; /* Changed from 1px to 0px as per cul.html example */
    box-shadow: 0 0 15px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

/* --- Header --- */
#toptable {
    border: 0;
    background-color: #FFFFFF;
    margin: 0 auto;
}
#toptable td {
    font-size: 32px; /* Slightly larger */
    font-weight: bold;
    text-align:center;
    height:100px;
    color: #218838; /* Darker green for main title */
    padding: 10px 0;
}

/* --- Navigation --- */
.nav-container {
    padding: 10px 0;
    margin: 0;
    background: #f8fcf8; /* Added very light green background */
}

#navCircle {
    margin: 0;
    padding: 10px 0 15px 0; /* Adjusted padding */
    border-bottom: 1px solid #d0e0d0; /* Lighter green-tinted border */
    text-align: center;
}

#navCircle li {
    margin: 0 2px; /* Small spacing between items */
    padding: 0;
    display: inline-block;
    list-style-type: none;
}

#navCircle a:link, #navCircle a:visited {
    display: inline-block;
    font-size: 14px; /* Consistent font size */
    line-height: 1.5;
    font-weight: normal;
    padding: 8px 15px; /* More modern padding */
    text-decoration: none;
    color: #495057; /* Softer text color for nav links */
    border-bottom: 3px solid transparent; /* For active/hover effect */
    border-radius: 4px; /* Slightly rounded corners for links */
    transition: all 0.3s ease; /* Smooth transition */
}

#navCircle a:hover, #navCircle a:focus { /* Added focus state */
    color: #ffffff;
    background-color: #28a745; /* Green background on hover/focus */
    border-bottom-color: #218838; /* Darker green border */
}

#navCircle a.active:link, #navCircle a.active:visited {
    color: #ffffff;
    background-color: #218838; /* Darker green for active */
    font-weight: bold;
    border-bottom-color: #1e7e34; /* Even darker for active border */
}

/* Special highlighted nav item (e.g., Online Message) */
#navCircle a.nav-highlight:link, #navCircle a.nav-highlight:visited {
    color: #155724; /* Dark green text */
    background-color: #d4edda; /* Light green background */
    font-weight: bold;
}
#navCircle a.nav-highlight:hover, #navCircle a.nav-highlight:focus {
    color: #ffffff;
    background-color: #28a745;
}


/* --- Content Area Common Styles (for cul.html & hanzi.html) --- */
.cul-content-container { /* This class is used by both cul.html and hanzi.html main content divs */
    padding: 20px;
    /* font-family and base text color inherited from BODY */
    /* max-width, specific margins, complex backgrounds removed to simplify and inherit from page-container */
}

.cul-content-container h1 { 
    color: #218838; 
    text-align: center;
    margin-bottom: 25px;
    font-size: 28px; /* Consistent H1 size */
}

.cul-content-container h3.section-title { /* Used in hanzi.html */
    margin:20px 0 10px; 
    font-size: 1.2em;
    color: #218838; /* Dark green */
    border-bottom: 1px solid #c8e6c9; /* Green border */
    padding-bottom: 5px;
}

/* --- Search Form Common Styles --- */
.cul-content-container .search-form-container { 
    margin-bottom: 25px;
    padding: 20px;
    background-color: #e9f5e9; /* Light green background */
    border: 1px solid #c8e6c9; /* Green border */
    border-radius: 8px; 
}
/* cul.html specific flex layout for its simpler search form */
.cul-content-container .search-form-container.cul-search-flex {
    display: flex; 
    align-items: center;
    justify-content: center;
}


.cul-content-container .search-label {
    font-weight: bold;
    margin-right: 12px;
    color: #1e7e34; /* Darker green text for labels */
}

.cul-content-container input[type="text"] {
    padding: 10px;
    border: 1px solid #a5d6a7; /* Greenish border */
    border-radius: 4px;
    font-size: 14px;
    /* width: 350px; /* Removed specific width, hanzi.html uses flex-grow, cul.html can set width if needed */
}
.cul-content-container input[type="text"]:focus {
    border-color: #28a745; /* Green focus */
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); /* Green shadow */
    outline: none;
}

.cul-content-container input[type="submit"],
.cul-content-container .action-button { /* .action-button is from hanzi.html */
    padding: 10px 18px;
    background-color: #28a745; /* Green */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-left: 10px; /* Common margin for primary action buttons */
    transition: background-color 0.3s ease;
}
.cul-content-container input[type="submit"]:hover,
.cul-content-container .action-button:hover {
    background-color: #218838; /* Darker green on hover */
}
.cul-content-container .action-button:disabled {
    background-color: #a5d6a7;
    cursor: not-allowed;
}


/* Secondary buttons / Options toggle for hanzi.html */
.cul-content-container .secondary-action,
.cul-content-container .options-toggle {
    padding: 8px 12px;
    background-color: #fff;
    color: #28a745; /* Green text */
    border: 1px solid #28a745; /* Green border */
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin-left: 5px; /* Spacing for secondary buttons */
}
.cul-content-container .secondary-action:hover,
.cul-content-container .options-toggle:hover {
    background-color: #e9f5e9; /* Light green background on hover */
    color: #218838; /* Darker green text */
}
.cul-content-container .options-toggle.active { /* "隐藏选项" state */
    background-color: #218838; /* Dark green */
    color: white;
    border-color: #218838;
}


/* --- Messages (Error, No Results, Initial) --- */
.cul-content-container .error-message { 
    color: #721c24;
    background-color: #f8d7da;
    padding: 12px;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    margin-bottom: 20px;
}

.cul-content-container .no-results-message,
.cul-content-container .initial-message {
    text-align: center;
    padding: 25px;
    font-style: italic;
    color: #555;
    background-color: #f8f9fa; /* Light gray background */
    border: 1px solid #dee2e6; /* Gray border */
    border-radius: 4px;
    margin-bottom: 20px; /* Added for consistency */
}


/* --- Results Table (for cul.html and adaptable for hanzi.html) --- */
.results-table, /* From cul.html */
.cul-content-container .keyword-content-table /* From hanzi.html & Qry_ZC.html */ { 
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 25px;
    font-size: 14px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
    border: 1px solid #c8e6c9; /* Green border for the whole table */
}

.results-table th, .cul-content-container .keyword-content-table th,
.results-table td, .cul-content-container .keyword-content-table td {
    border: 1px solid #c8e6c9; /* Green border for cells */
    padding: 12px;
    text-align: left;
    vertical-align: top;
}

.results-table th, .cul-content-container .keyword-content-table th { /* General TH style */
    background-color: #d4edda; /* Light green background for headers */
    font-weight: bold;
    color: #155724; /* Dark green text */
}

.results-table .hanzi-cell { /* Specific to cul.html table */
    font-size: 1.0em; 
    text-align: center;
    vertical-align: middle;
    color: #218838; /* Dark green text */
}

.ftext-cell-container { /* Used by cul.html */
    max-height: 150px; 
    overflow-y: auto;  
    line-height: 1.6;
    padding-right: 5px; 
}

.results-table .image-cell { /* Specific to cul.html table */
    text-align: center;
    vertical-align: middle;
}
.results-table .image-cell img {
    max-width: 100px;
    max-height: 100px;
    height: auto;
    border: 1px solid #a5d6a7; /* Greenish border */
    padding: 3px;
    border-radius: 4px;
    background-color: #fff;
}

.results-table a, .cul-content-container .keyword-content-table a { /* Links within these tables */
    color: #28a745; /* Green links */
    text-decoration: none;
}
.results-table a:hover, .cul-content-container .keyword-content-table a:hover {
    color: #1e7e34; /* Darker green on hover */
    text-decoration: underline;
}

/* --- Pagination (for cul.html) --- */
.pagination { 
    text-align: center;
    margin-top: 25px;
    margin-bottom: 25px;
}
.pagination a, .pagination span {
    margin: 0 5px;
    padding: 8px 14px;
    text-decoration: none;
    border: 1px solid #a5d6a7; /* Greenish border */
    border-radius: 4px;
}
.pagination a {
    color: #28a745; /* Green text */
    background-color: #fff;
    transition: all 0.3s ease;
}
.pagination a:hover {
    background-color: #e9f5e9; /* Light green background */
    color: #1e7e34; /* Darker green text */
    border-color: #28a745; /* Green border */
}
.pagination a.disabled {
    color: #aaa;
    pointer-events: none;
    background-color: #f8f9fa;
    border-color: #dee2e6;
}
.pagination span {
    color: #333;
    background-color: #f0f0f0; 
}
.pagination span strong {
    color: #1e7e34; /* Darker green for current page number */
}

/* --- Footer --- */
.app-footer-container {
    width: 989px; 
    margin: 0 auto;
    padding: 20px 10px; /* Adjusted padding for side spacing */
    border-top: 1px solid #c8e6c9; /* Green border */
    background-color: #e9f5e9; /* Added light green background */
}

.app-footer-container table {
    width: 100%;
    border: 0;
    padding: 0;
    margin: 0;
}

.app-footer-container td {
    padding: 10px; /* Default padding for footer table cells */
}

.app-footer-container hr {
    border: 0;
    border-top: 1px solid #c8e6c9; /* Green border */
    margin: 15px 0; /* Consistent margin */
}

.app-footer-container .STYLE3 { /* Existing style */
    font-size: 13px; 
    line-height: 1.8; 
    color: #495057; 
}
.app-footer-container .STYLE3 a { /* Existing style */
    color: #28a745; /* Green links */
    text-decoration: none;
}
.app-footer-container .STYLE3 a:hover { /* Existing style */
    color: #1e7e34; /* Darker green on hover */
    text-decoration: underline;
}

.app-footer-container .footer-main-address { /* New class for specific paragraph */
    padding-top: 10px;
    text-align: center;
    font-size: 16px; /* Slightly larger than default .STYLE3 */
    line-height: 1.6;
    color: #333; /* Slightly darker text for better readability on light green bg */
}


/* --- Original STYLE classes (kept for compatibility if used elsewhere) --- */
.STYLE1 {font-size: 16px} 
.STYLE2 {font-size: 24px; font-weight: bold; }

/* Floating ads styles (from header.txt) - generally kept as is */
#floatAdvDiv, #advleft, #advright {
    position:absolute;
    top:0;left:0;
    display:none;
    padding-left:10px;
    text-align:center;
}

/* --- Hanzi Page Specific Styles (Adapted to cul.html green theme) --- */
/* Base .cul-content-container styles are now above and shared */
/* Font styles inherited from BODY global */
/* Max-width, margins, etc., inherited from .page-container and .cul-content-container */

.cul-content-container .options-table { /* This is the div with id optTable in hanzi.html */
    background-color: #fafdff; /* Very light, almost white, slight blue/green tint for variety */
    margin-top:15px; padding:15px;
    border: 1px solid #d0e0d0; /* Lighter green-tinted border */
    border-radius: 4px;
}
.cul-content-container .options-table td { padding: 8px; vertical-align: top; }
.cul-content-container .options-table-label { 
    font-weight: 600; 
    color: #218838; /* Dark green */
}

.cul-content-container .checkbox-area { margin-top: 5px; }
.cul-content-container .checkbox-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px 15px; padding: 10px; border: 1px solid #e0f0e0; /* Lighter green border */
    border-radius: 3px; background-color: #fbfefb; /* Very light green */
}
.cul-content-container .checkbox-item { display: flex; align-items: center; padding: 4px 0; }
.cul-content-container .checkbox-item input[type="checkbox"],
.cul-content-container .checkbox-item input[type="radio"] { /* Included radio buttons */
    margin-right: 8px; cursor: pointer; transform: scale(1.1); 
}
.cul-content-container .checkbox-item label { cursor: pointer; font-size: 0.95em; color: #555; } /* Standard light text color */
.cul-content-container .checkbox-item label:hover { color: #28a745; /* Green on hover */ }

.cul-content-container .selection-controls { margin-bottom: 10px; }
.cul-content-container .selection-controls button { /* For 全选/取消/反选 */
    font-size: 0.85em; padding: 5px 10px; margin-right: 6px;
    background-color: #6c757d; /* Kept gray for utility, or change to light green bordered */
    color: white; border: 1px solid #6c757d; /* Added border for consistency */
    border-radius: 3px; cursor: pointer;
}
.cul-content-container .selection-controls button:hover { 
    background-color: #5a6268; border-color: #545b62;
}

.cul-content-container .keyword-tab-buttons { margin-bottom: 10px; padding-top: 10px; }
.cul-content-container .keyword-tab-buttons input[type="button"].keyword-tab {
    margin-right: 5px; margin-bottom: 5px; 
    padding: 7px 14px; cursor: pointer;
    background-color: #f0f0f0; /* Light gray for inactive tabs */
    border: 1px solid #c8e6c9; /* Green border */
    color: #333;
    transition: background-color 0.2s, color 0.2s;
    border-radius: 4px 4px 0 0;
}
.cul-content-container .keyword-tab-buttons input[type="button"].keyword-tab.active-tab {
    background-color: #28a745; /* Green for active tab */
    color: white; 
    border-color: #28a745;
}
.cul-content-container .keyword-tab-buttons input[type="button"].keyword-tab:hover:not(.active-tab) { 
    background-color: #e9f5e9; /* Light green hover */
    color: #1e7e34;
}

/* .keyword-content-table styles are now merged with .results-table general styles */
.cul-content-container .titletdchar { /* Header cell for the character itself in hanzi.html */
    font-size: 20px; /* Slightly larger for emphasis */
    text-align: center; 
    background-color: #218838; /* Dark green background */
    color: white;
    font-weight: bolder; 
    padding: 10px; /* More padding */
    font-family: "宋体", serif;
    /* Inherits border from .keyword-content-table td */
}
.cul-content-container .char-info-header { /* Cell for BuShou, Stroke etc. */
    text-align: left !important; 
    font-size: 0.95em; /* Slightly smaller than main text */
    font-weight: normal;
    background-color: #e9f5e9; /* Light green background */
    color: #155724; /* Dark green text */
    /* Inherits border from .keyword-content-table td */
}
.cul-content-container .char-info-header a font { /* For 动画 link */
    color: #c00; /* Keep red for emphasis as in original */
}


.cul-content-container .ziti-yanbian-table-wrapper, 
.cul-content-container .tupian-table-wrapper {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px; 
    table-layout: fixed; 
    border: 1px solid #a5d6a7; /* Greenish border, less prominent than main table */
    background-color: #f8fff8; /* Very very light green */
}

.cul-content-container .pictd { /* Picture cell in ziti/tupian tables */
    text-align: center; font-family: "宋体", serif; padding: 8px;
    border: 1px solid #dceddc; /* Lighter green border for inner cells */
    vertical-align: middle; 
    word-break: break-all; 
}
.cul-content-container .ftexttd { /* Text cell in ziti/tupian tables or for other_info_items */
    font-size: 1em; text-align: left; font-family: "宋体", serif;
    padding: 10px; 
    border: 1px solid #dceddc; /* Lighter green border */
    line-height: 1.6;
    vertical-align: top;
}
/* Specific styling for other_info_items div (was ftexttd class, but it's a div) */
.cul-content-container div.ftexttd { 
     margin-bottom: 10px; background-color: #fdfdff; border:1px solid #e0f0e0; padding: 10px;
}


.cul-content-container .ziti-yanbian-table-wrapper .pictd img {
    width: 62px;
    height: 100px;
    object-fit: contain;
    border: 1px solid #ccc; 
    display: block; 
    margin: 5px auto; 
    background-color: #fff; /* Ensure transparent images have white bg */
}
.cul-content-container .tupian-table-wrapper .pictd img {
    max-width: 100px; 
    width: auto; 
    height: auto; 
    object-fit: contain;
    border: 1px solid #ccc;
    display: block;
    margin: 5px auto;
    background-color: #fff;
}

.cul-content-container div.ftexttd hr, /* HR within the .ftexttd divs for other_info_items */
.cul-content-container .options-table hr { /* HR within options table */
    border: 0; 
    border-top: 1px dashed #a5d6a7; /* Dashed greenish border */
    margin: 10px 0; 
}
.cul-content-container hr.separator { /* Main separator hr in the form */
    margin: 15px 0; /* Consistent margin */
    border: 0; 
    border-top: 1px solid #c8e6c9; /* Solid green border */
}


.cul-content-container .highlight { 
    background-color: #d4edda; /* Light green highlight */
    padding: 0.5px 2px; border-radius: 2px; font-weight: bold;
    color: #155724; /* Dark green text for highlighted part */
}
.cul-content-container .marker-source-info { 
    font-size:0.9em; color: #495057; /* Softer text color */
    margin-top:5px; display: block; 
}

/* --- Zuci Page (Qry_ZC.html) Specific Styles --- */
.cul-content-container .related-words-container {
    display: flex; /* Use flexbox for layout */
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    gap: 10px; /* Spacing between word items */
    padding: 15px;
    border: 1px solid #a5d6a7;
    background-color: #f0fff0;
    border-radius: 4px;
    /* line-height: 2; removed as items manage their own */
    /* text-align: left; removed as items manage their own or flex handles alignment */
}

.cul-content-container .individual-word-item {
    padding: 8px 12px;
    font-size: 1.1em;
    background-color: #ffffff; /* White background for each item */
    border: 1px solid #c8e6c9; /* Light green border */
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: all 0.2s ease-in-out; /* Smooth transition for hover effects */
    cursor: default; /* Default cursor as they are not (yet) interactive links */
}

.cul-content-container .individual-word-item:hover {
    background-color: #e9f5e9; /* Lighter green background on hover */
    border-color: #28a745; /* Stronger green border on hover */
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* Highlighting of the keyword within the word item */
.cul-content-container .individual-word-item strong {
    color: #d32f2f; /* Red color for keyword, as in the original span */
    /* font-weight: bold; is default for strong */
}


/* General link styles within .cul-content-container if not overridden by table etc. */
.cul-content-container a { 
    color: #28a745; /* Green */
    text-decoration: none; 
}
.cul-content-container a:hover { 
    color: #218838; /* Darker green */
    text-decoration: underline; 
}
.cul-content-container .definition-block,
.cul-content-container .shuowen-item { /* Grouping similar blocks */
    padding: 15px;
    font-size: 1.0em; /* Relative to base font-size */
    line-height: 1.7;
    border: 1px solid #c8e6c9; /* Light green border */
    background-color: #f8fff8; /* Very light green background */
    margin-bottom: 20px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.cul-content-container .definition-text {
    margin-bottom: 10px;
    color: #333; /* Standard text color */
}
.cul-content-container .definition-text p { /* Ensure paragraphs within definition text have good spacing */
    margin-top: 0;
    margin-bottom: 0.8em;
}
.cul-content-container .definition-text p:last-child {
    margin-bottom: 0;
}

.cul-content-container .source-attribution {
    text-align: right;
    font-size: 0.85em;
    color: #6c757d; /* Muted gray for source */
    margin-top: 12px;
    font-style: italic;
}

/* --- Qry_SW.html (Shuowen) Specific Styles --- */
.cul-content-container .shuowen-meta-info {
    padding: 10px 15px;
    margin-bottom: 20px;
    border: 1px solid #c8e6c9; /* Light green border */
    background-color: #e9f5e9; /* Light green background */
    color: #1e7e34; /* Darker green text */
    border-radius: 4px;
    font-size: 0.9em;
    line-height: 1.6;
}
.cul-content-container .shuowen-meta-info strong {
    font-size: 1.2em;
    color: #218838;
}

/* --- Chengyu Page (Qry_CY.html) Specific Styles --- */
.cul-content-container .chengyu-item {
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #c8e6c9; /* Light green border */
    border-radius: 4px;
    background-color: #f8fff8; /* Very light green background */
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.cul-content-container .chengyu-title strong {
    font-size: 1.2em;
    color: #1e7e34; /* Darker green */
}

.cul-content-container .chengyu-title {
    margin-bottom: 8px;
    font-size: 1.1em;
}

.cul-content-container .chengyu-detail {
    margin-bottom: 5px;
    line-height: 1.7;
    color: #333;
    white-space: pre-line; /* Handles newlines in data */
    font-size: 0.95em;
}

.cul-content-container .chengyu-detail strong { /* For bold text like "典故：" */
    color: #218838; /* Dark green */
}

/* --- Duyin/Bushou Page Specific Styles --- */
.similar-pronunciations-results { /* Also used for Bushou results box */
    border: 1px solid #c8e6c9; 
    padding: 15px;
    margin-top: 20px;
    background-color: #f8fcf8; /* Very light green background */
    border-radius: 4px;
}

.pronunciation-category-title { /* Also used for Bushou title */
    font-weight: bold;
    color: #1e7e34; /* Darker green for emphasis */
    padding: 10px;
    font-size: 1.1em;
    border-top: 1px solid #eee; /* Lighter separator */
    margin-top: 20px;
    margin-bottom: 5px;
}
.pronunciation-category-title:first-child { /* Prevent double-margin/border at top */
    margin-top: 5px;
    border-top: none;
}

.pronunciation-chars-container { /* Also used for Bushou container */
    padding: 10px 5px; 
    line-height: 60px; /* To accommodate char height + margins */
    text-align: left; 
}
/* The <a> tag for characters is styled inline by Python helper */

/* --- DrawStroke (Canvas) Page Specific Styles --- */
/* --- DrawStroke (Canvas) Page Specific Styles --- */
.cul-content-container .animation-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 15px 0;
    flex-wrap: wrap;
}
.cul-content-container .control-btn {
    padding: 8px 15px;
    font-size: 1em;
    cursor: pointer;
    border: 1px solid #a5d6a7;
    background-color: #fff;
    color: #28a745;
    border-radius: 4px;
    transition: all 0.2s ease;
}
.cul-content-container .control-btn:hover {
    background-color: #e9f5e9;
    border-color: #28a745;
}
.cul-content-container .control-btn:disabled {
    cursor: not-allowed;
    background-color: #f0f0f0;
    color: #999;
    border-color: #ccc;
}
.cul-content-container .control-btn.active {
    background-color: #218838;
    color: white;
    border-color: #1e7e34;
}
.cul-content-container .canvas-animation-container {
    padding: 20px;
    background-color: #f8fcf8;
    border: 1px solid #d0e0d0;
    border-radius: 8px;
    text-align: center;
    margin-top: 20px;
}
.cul-content-container .canvas-wrapper {
    display: inline-block;
    border: 1px solid #a5d6a7;
    padding: 5px;
    background-color: #ffffff;
    border-radius: 4px;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.cul-content-container #animationCanvas {
    display: block;
    width: 512px;
    height: 512px;
    background-color: #fff;
}
.cul-content-container #stepByStepContainer {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    background-color: #f0f8f0;
    border: 1px solid #c8e6c9;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) inset;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    min-height: 110px;
    border-radius: 4px;
    overflow-y: auto;
}
.cul-content-container .step-canvas-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cul-content-container .step-canvas {
    width: 80px;
    height: 80px;
    border: 1px solid #ddd;
    background-color: #fff;
}
.cul-content-container .step-label {
    font-size: 12px;
    margin-top: 4px;
    color: #555;
}