:root{--image-box-size:200px;--gap-size:10px;--border-radius:8px;--box-shadow:0 1px 3px rgba(0, 0, 0, 0.1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Arial,sans-serif;line-height:1.6;color:#333;background-color:#f5f5f5;padding:20px}h1,h2{margin-bottom:15px}.container{max-width:1400px;margin:0 auto;background-color:#fff;border-radius:var(--border-radius);box-shadow:0 2px 10px rgba(0,0,0,.1);padding:20px;display:flex;flex-direction:column;gap:var(--gap-size);min-height:95vh}.group{padding:15px;border-radius:var(--border-radius);background-color:#fafafa;box-shadow:var(--box-shadow);width:calc(var(----image-box-size) * 2 + var(--gap-size))}.controls-group{display:flex;justify-content:space-between;align-items:center}.collection-selector select{padding:8px 12px;border-radius:4px;border:1px solid #ccc;font-size:16px;min-width:200px}#status-icon{width:2em;vertical-align:middle}#optimize-button{display:none}.html-button button{padding:8px 16px;background-color:#4caf50;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:16px;transition:background-color .3s}.html-button button:hover{background-color:#45a049}.collection-title input{padding:10px 15px;border-radius:4px;border:1px solid #ccc;font-size:20px;width:100%;text-align:center;font-weight:700}.main-content{display:flex;flex-wrap:wrap;gap:var(--gap-size)}.collection-group{flex:0 0 auto}.collection-grid{display:grid;grid-template-columns:repeat(2,var(--image-box-size));gap:var(--gap-size);margin-top:10px;justify-content:start}.available-group{flex:1 1 auto;min-width:300px;width:50%}.available-images-container{display:flex;flex-wrap:wrap;gap:var(--gap-size);margin-top:10px}.image-details{width:40em;padding:15px;background-color:#f9f9f9;border-radius:var(--border-radius);border:1px solid #eee;display:flex;flex-direction:column;gap:10px}.image-details input,.image-details textarea{width:100%;padding:8px;border:1px solid #ddd;border-radius:4px}.image-details textarea{min-height:100px;resize:vertical}.image-details-buttons{max-width:40em}.index-button-bar{max-width:433px}#index-thumbnail{width:430px;height:430px}.metadata-field{display:flex;flex-direction:column;gap:5px;max-width:40em}.metadata-field label{font-weight:700}.metadata-field input,.metadata-field textarea{padding:8px;border:1px solid #ddd;border-radius:4px;width:100%}.metadata-field textarea{min-height:80px;resize:vertical}.image-box{width:var(--image-box-size);height:var(--image-box-size);background-color:#f9f9f9;border:2px dashed #ccc;border-radius:4px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;cursor:pointer;transition:all .3s ease}.image-box:hover{border-color:#999;transform:scale(1.02)}.collection-box.required:hover{border:2px dashed red;transform:scale(1.02)}.image-box img{max-width:100%;max-height:100%;object-fit:cover}.collection-box{background-color:#e8f4fc;border-color:#a8d1f0}.available-box{background-color:#f0f0f0;border-color:#ccc}.collection-box.required{border:2px dashed red}span.required{color:red}span.good{display:none}