@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root { --bg-color: #1a1d21; --card-bg: #2c313a; --border-color: #404754; --text-primary: #e0e2e5; --text-secondary: #949ca9; --accent-color: #00a98f; --accent-hover: #00c2a5; --accent-text: #ffffff; --error-bg: #4d2a2a; --error-text: #ffb8b8; --button-inactive-bg: #404754; --toggle-bg: #3a4049; }
body.light-theme { --bg-color: #f4f6f8; --card-bg: #ffffff; --border-color: #e1e5ea; --text-primary: #1a1d21; --text-secondary: #5f6b7a; --error-bg: #ffebee; --error-text: #c62828; --button-inactive-bg: #e1e5ea; --toggle-bg: #e9ecef; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background-color: var(--bg-color); color: var(--text-primary); line-height: 1.6; font-size: 16px; transition: background-color 0.3s ease, color 0.3s ease; }
.container { max-width: 800px; margin: 40px auto; padding: 20px; display: flex; flex-direction: column; gap: 24px; }
header h1 { font-size: 2rem; font-weight: 700; color: var(--text-primary); display: inline-flex; align-items: center; gap: 12px; transition: color 0.3s ease; }
header h1 svg { stroke: var(--text-primary); transition: stroke 0.3s ease; }
.pro-badge { font-size: 0.8rem; font-weight: 600; background-color: var(--accent-color); color: var(--accent-text); padding: 4px 8px; border-radius: 6px; vertical-align: middle; transition: background-color 0.3s ease; }
.card { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 20px; transition: background-color 0.3s ease, border-color 0.3s ease; }
.card h2 { font-size: 1.25rem; font-weight: 600; border-bottom: 1px solid var(--border-color); padding-bottom: 12px; margin-bottom: 8px; transition: border-color 0.3s ease; }
#drop-area { border: 2px dashed var(--border-color); border-radius: 8px; padding: 30px; text-align: center; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; position: relative; }
#drop-area.highlight { border-color: var(--accent-color); background-color: var(--card-bg); }
#drop-area input[type="file"] { display: none; }
#drop-label { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
#drop-label p { font-size: 1.1rem; font-weight: 500; }
#drop-label span { font-size: 0.9rem; color: var(--text-secondary); transition: color 0.3s ease; }
#drop-label .browse-files { color: var(--accent-hover); font-weight: 600; transition: color 0.3s ease; }
#drop-label svg { color: var(--text-secondary); transition: color 0.3s ease; margin-bottom: 8px; }
#preview-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px; margin-top: 16px; }
.preview-item { position: relative; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; aspect-ratio: 1 / 1; cursor: grab; transition: border-color 0.3s ease; }
.preview-item.sortable-ghost { opacity: 0.4; background: #404754; }
.preview-item:active { cursor: grabbing; }
.preview-item img { width: 100%; height: 100%; object-fit: cover; }
.preview-item .remove-btn { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; background-color: rgba(0, 0, 0, 0.6); color: white; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px; line-height: 1; }
.preview-item .remove-btn:hover { background-color: #e53935; }
.option-group, .sub-option-group { display: flex; flex-direction: column; gap: 8px; }
.option-group label { font-weight: 500; }
.option-group small, .sub-option-group small { font-size: 0.85rem; color: var(--text-secondary); transition: color 0.3s ease; }
#pro-options { overflow: hidden; max-height: 0; opacity: 0; transition: all 0.4s ease-in-out; }
#pro-options.visible { max-height: 120px; opacity: 1; margin-top: 20px; }
.sub-option-group { margin-top: 0; }
.toggle-switch { display: flex; background-color: var(--toggle-bg); border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color); transition: background-color 0.3s ease, border-color 0.3s ease; }
.toggle-option { flex: 1; padding: 10px 16px; border: none; background-color: transparent; color: var(--text-secondary); font-weight: 500; cursor: pointer; transition: all 0.3s ease; font-size: 1rem; }
.toggle-option:hover { background-color: var(--border-color); }
.toggle-option.active { background-color: var(--accent-color); color: var(--accent-text); box-shadow: 0 0 10px rgba(0, 169, 143, 0.5); }
.stitch-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px; font-size: 1.1rem; font-weight: 600; color: var(--accent-text); background-color: var(--accent-color); border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.3s ease; margin-top: 20px; }
.stitch-button:hover { background-color: var(--accent-hover); }
.stitch-button:disabled { background-color: var(--button-inactive-bg); color: var(--text-secondary); cursor: not-allowed; }
#result-area { min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--border-color); border-radius: 8px; padding: 20px; transition: border-color 0.3s ease; }
#result-area .placeholder { color: var(--text-secondary); text-align: center; transition: color 0.3s ease; }
#result-area img { max-width: 100%; height: auto; border-radius: 4px; margin-bottom: 20px; }
.result-actions { display: flex; gap: 12px; }
.download-button, .refine-button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; font-size: 1rem; font-weight: 600; color: var(--accent-text); border: none; border-radius: 8px; cursor: pointer; text-decoration: none; transition: background-color 0.2s; }
.download-button { background-color: var(--accent-color); } .download-button:hover { background-color: var(--accent-hover); }
.refine-button { background-color: var(--text-secondary); } .refine-button:hover { background-color: #aab3c3; }
.hidden { display: none !important; }
#spinner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 20px; color: var(--text-secondary); }
.lds-ring { display: inline-block; position: relative; width: 60px; height: 60px; }
.lds-ring div { box-sizing: border-box; display: block; position: absolute; width: 48px; height: 48px; margin: 6px; border: 5px solid var(--accent-color); border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: var(--accent-color) transparent transparent transparent; }
.lds-ring div:nth-child(1) { animation-delay: -0.45s; } .lds-ring div:nth-child(2) { animation-delay: -0.3s; } .lds-ring div:nth-child(3) { animation-delay: -0.15s; }
@keyframes lds-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
#error-box { background-color: var(--error-bg); color: var(--error-text); padding: 16px; border-radius: 8px; border: 1px solid var(--error-text); text-align: center; font-weight: 500; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-content { background: var(--card-bg); padding: 24px; border-radius: 12px; max-width: 90%; max-height: 90vh; display: flex; flex-direction: column; gap: 16px; border: 1px solid var(--border-color); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.modal-content h3 { margin: 0; }
.modal-content p { color: var(--text-secondary); margin: 0 0 10px; font-size: 0.9rem;}
#canvas-container { border: 1px solid var(--border-color); overflow: hidden; flex-shrink: 1; position: relative; }
#refine-canvas { display: block; max-width: 100%; height: auto; max-height: 60vh; cursor: default; }
#refine-canvas.is-grabbing { cursor: ns-resize; } /* FIX: Cursor changes on drag */
.modal-actions { display: flex; justify-content: flex-end; gap: 12px; }
.modal-button { padding: 10px 20px; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s; }
.modal-button.primary { background-color: var(--accent-color); color: var(--accent-text); }
.modal-button.primary:hover { background-color: var(--accent-hover); }
.modal-button.secondary { background-color: var(--toggle-bg); color: var(--text-primary); }