/* Force-update comment: 2024-05-24 12:06:00 UTC */
/* General Styles */
body { font-family: 'Lato', 'Roboto', sans-serif; background-color: #f7f8fa; color: #333; margin: 0; padding: 1rem 0; }
.container { width: 100%; max-width: 1500px; padding: 0 2rem; box-sizing: border-box; margin: 0 auto; }
header { text-align: center; margin-bottom: 2rem; padding-bottom: 1rem; }
header h1 { font-family: 'Roboto', sans-serif; font-size: 2.8rem; margin: 0; color: #2c3e50; }
header p { font-size: 1.2rem; color: #5f6368; }

/* Main Layout */
.main-content { display: grid; grid-template-columns: 320px 1fr; gap: 2rem; align-items: start; }

/* Controls Container */
.controls-container { background-color: #fff; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); position: sticky; top: 2rem; }
.accordion-item .accordion-header { width: 100%; padding: 1rem 1.5rem; background-color: #fdfdfd; border: none; border-bottom: 1px solid #e0e0e0; text-align: left; font-size: 1.2rem; font-weight: 700; cursor: pointer; transition: background-color 0.3s; position: relative; }
.accordion-item:first-child .accordion-header { border-radius: 8px 8px 0 0; }
.accordion-item .accordion-header::after { content: '\25B8'; position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%) rotate(0deg); transition: transform 0.3s; font-size: 0.8em; }
.accordion-item.is-open .accordion-header::after { transform: translateY(-50%) rotate(90deg); }
.accordion-item:hover .accordion-header { background-color: #f5f5f5; }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out, padding 0.3s ease-out; padding: 0 1.5rem; }
.accordion-item.is-open .accordion-content { max-height: 800px; padding: 1.5rem; border-bottom: 1px solid #e0e0e0; }
.accordion-item:last-child.is-open .accordion-content, .accordion-item:last-child .accordion-header { border-bottom: none; }

/* Form Control Styles */
.control-group { margin-bottom: 1.25rem; }
.control-group:last-child { margin-bottom: 0; }
.control-group label { display: block; margin-bottom: 0.6rem; font-weight: bold; color: #3c4043; }
.control-group.inline { display: flex; align-items: center; }
.control-group.inline label { margin-bottom: 0; }
select, input[type="number"], input[type="text"] { width: 100%; padding: 0.6rem; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; box-sizing: border-box; }
input[type="range"] { width: 100%; }
input[type="checkbox"] { transform: scale(1.2); margin-right: 0.5rem; }
.control-group-label { font-weight: bold; color: #3c4043; margin: 1rem 0 0.5rem 0; display: block; }
hr { border: 0; height: 1px; background-color: #e0e0e0; margin: 1.5rem 0; }
.control-group-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.control-group-sticky { padding: 1.5rem; border-top: 1px solid #e0e0e0; background-color: #fff; border-radius: 0 0 8px 8px; }
button#generate-btn { width: 100%; padding: 0.8rem; border: none; border-radius: 4px; background-color: #1a73e8; color: #fff; font-size: 1.1rem; font-weight: bold; cursor: pointer; transition: background-color 0.3s; }
button#generate-btn:hover { background-color: #1558b3; }

/* Preview Container */
.preview-container, .preview-header, .pagination-controls, #download-pdf-btn, .worksheet-preview, .worksheet-page-container, .worksheet-page, .no-preview, .settings-container-placeholder {
    /* NO CHANGES TO THESE GENERIC LAYOUTS */
}
.preview-container { background-color: #fff; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; }
.preview-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid #eee; flex-wrap: wrap; }
.preview-header h2 { margin: 0; padding: 0; color: #2c3e50; font-size: 1.5rem; }
.pagination-controls { display: flex; align-items: center; gap: 0.5rem; }
.pagination-controls button, #download-pdf-btn { padding: 0.5rem 1rem; border: 1px solid #ccc; background-color: #f8f9fa; border-radius: 4px; cursor: pointer; }
.pagination-controls button:disabled, #download-pdf-btn:disabled { background-color: #e9ecef; cursor: not-allowed; opacity: 0.7; }
#page-info { font-weight: bold; }
.worksheet-preview { padding: 2rem; background-color: #f0f2f5; }
.worksheet-page-container { background-color: #fff; aspect-ratio: 8.5 / 11; width: 100%; margin: 0 auto; box-shadow: 0 2px 8px rgba(0,0,0,0.1); overflow: hidden; }
.worksheet-page { padding: 2.5rem; box-sizing: border-box; height: 100%; width: 100%; }
.no-preview { display: flex; justify-content: center; align-items: center; height: 100%; color: #999; font-style: italic; }
.settings-container-placeholder { display: none; }

/* --- WORKSHEET CONTENT STYLES --- */
.worksheet-header-content { text-align: center; margin-bottom: 2rem; border-bottom: 2px solid #ccc; padding-bottom: 1rem; }
.worksheet-header-content h1 { font-size: 24px; margin: 0 0 1rem 0; }
.worksheet-header-content .meta { display: flex; justify-content: space-between; font-size: 16px; }
.problem-list { list-style-type: none; padding: 0; height: 100%; }
.problem-item { break-inside: avoid-column; padding-bottom: 1px; }
.problem-item .problem-content { display: flex; align-items: center; /* vertical alignment */ }
.problem-item .problem-number { min-width: 30px; font-weight: bold; }
.worksheet-page.hide-numbering .problem-number { display: none; }
.problem-item .problem-text { display: flex; align-items: center; gap: 0.5em; }
.problem-item .solving-space { width: 100%; border-bottom: 1px dashed #e0e0e0; margin-top: 5px; }

/* --- NEW BLANK BOX STYLE --- */
.blank-box {
    display: inline-block;
    vertical-align: middle;
    width: 4em; /* Relative to font size */
    height: 1.5em;
    background-color: #f0f2f5;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .main-content { grid-template-columns: 1fr; }
    .controls-container { order: 1; position: static; }
    .preview-container { order: 0; margin-bottom: 2rem; }
}

/* --- FOOTER STYLES --- */
footer {
    text-align: center;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid #e0e0e0;
    color: #7f8c8d;
    font-size: 0.9rem;
}

footer p { margin: 0.5rem 0; }

footer a {
    color: #1a73e8; /* Use a consistent link color */
    text-decoration: none;
    transition: text-decoration 0.2s;
}

footer a:hover {
    text-decoration: underline;
}

.copyright {
    margin-top: 1.5rem;
    font-size: 0.8rem;
    color: #999;
}