:root{--background-color: #121212;--panel-background: #1e1e1e;--border-color: #333;--text-color: #e0e0e0;--text-color-secondary: #a0a0a0;--accent-color: #4a90e2;--accent-color-hover: #5a9eee;--error-color: #e57373;--font-family: "Inter", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--background-color);color:var(--text-color);line-height:1.6}#root{display:flex;flex-direction:column;align-items:center;padding:2rem;min-height:100vh}.app-container{width:100%;max-width:1400px;display:grid;grid-template-columns:1fr;gap:2rem}@media(min-width:1024px){.app-container{grid-template-columns:450px 1fr}}.main-title{text-align:center;margin-bottom:2rem;font-size:2.5rem;font-weight:700;color:#fff;grid-column:1 / -1}.panel{background-color:var(--panel-background);border-radius:12px;border:1px solid var(--border-color);padding:1.5rem;height:fit-content;max-height:calc(100vh - 8rem);display:flex;flex-direction:column}.input-panel{gap:1.5rem;overflow-y:auto}.output-panel{overflow-y:auto}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-weight:500;font-size:.9rem;color:var(--text-color-secondary)}.input,.textarea{background-color:var(--background-color);border:1px solid var(--border-color);border-radius:8px;padding:.75rem;color:var(--text-color);font-family:var(--font-family);font-size:1rem;width:100%}.textarea{min-height:150px;resize:vertical}.input:focus,.textarea:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 2px #4a90e24d}.photo-uploader{border:2px dashed var(--border-color);border-radius:8px;padding:2rem;text-align:center;cursor:pointer;transition:border-color .2s,background-color .2s;color:var(--text-color-secondary)}.photo-uploader:hover{border-color:var(--accent-color);background-color:#4a90e21a}.photo-preview{position:relative;max-width:100%}.photo-preview img{width:100%;height:auto;border-radius:8px;object-fit:cover}.remove-photo-btn{position:absolute;top:8px;right:8px;background-color:#000000b3;color:#fff;border:none;border-radius:50%;width:28px;height:28px;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}.context-options{display:flex;flex-wrap:wrap;gap:.5rem}.context-options label{flex-grow:1}.context-options input[type=radio]{display:none}.context-options span{display:block;padding:.75rem 1rem;border:1px solid var(--border-color);border-radius:8px;text-align:center;cursor:pointer;transition:all .2s}.context-options input[type=radio]:checked+span{background-color:var(--accent-color);color:#fff;border-color:var(--accent-color)}.generate-btn{background-color:var(--accent-color);color:#fff;border:none;border-radius:8px;padding:1rem;font-size:1.1rem;font-weight:600;cursor:pointer;transition:background-color .2s;display:flex;align-items:center;justify-content:center;gap:.5rem}.generate-btn:hover:not(:disabled){background-color:var(--accent-color-hover)}.generate-btn:disabled{opacity:.6;cursor:not-allowed}.spinner{width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}.output-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--text-color-secondary);height:100%;min-height:300px}.output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;border-bottom:1px solid var(--border-color);padding-bottom:1rem}.output-title{font-size:1.5rem;font-weight:600}.copy-btn{background-color:var(--border-color);color:var(--text-color);border:none;padding:.5rem 1rem;border-radius:6px;cursor:pointer;transition:background-color .2s}.copy-btn:hover{background-color:#444}.generated-plan-content h2{font-size:1.3rem;font-weight:600;margin-top:1.5rem;margin-bottom:.75rem;color:var(--accent-color);padding-bottom:.25rem;border-bottom:1px solid var(--border-color)}.generated-plan-content p{margin-bottom:1rem;white-space:pre-wrap;word-wrap:break-word;font-size:1rem;line-height:1.7}.error-message{color:var(--error-color);background-color:#e573731a;border:1px solid var(--error-color);padding:1rem;border-radius:8px;text-align:center}
