/* --- Reused/embedded CSS from your provided template (keeps pixel-perfect style) --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Georgia', serif; line-height: 1.6; color: #333; background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); min-height: 100vh; padding: 20px; }
.app { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 360px 1fr; gap: 20px; }
.panel { background: #fff; padding: 18px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); max-height: 85vh; overflow: auto; }
h2 { font-size: 1.15rem; margin-bottom: 12px; color: #1a1a1a; }
label { display:block; margin:8px 0 6px; font-weight:600; color:#333; }
input[type="text"], textarea, select { width:100%; padding:8px 10px; border-radius:6px; border:1px solid #ddd; font-family:inherit; }
textarea { min-height:80px; resize:vertical; }
.small { font-size:0.9rem; color:#666; }
.btn { display:inline-block; padding:10px 14px; border-radius:8px; border:none; cursor:pointer; margin-right:8px; }
.btn-primary { background:#1a1a1a; color:#F4D03F; }
.btn-ghost { background:#f4f4f4; color:#333; }
.btn-danger { background:#dc3545; color:white; }
.preview-area { background: #fff; padding: 20px; border-radius: 12px; }
.controls-row { display:flex; gap:8px; align-items:center; margin-top:12px; flex-wrap:wrap; }

/* --- The report HTML (kept identical to your original styling) --- */
.report-wrap { background: white; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); overflow: hidden; padding-bottom:20px; }
.header { background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); color: #F4D03F; text-align: center; padding: 40px 20px; position: relative; border-bottom: 3px solid #F4D03F; }
.header h1 { font-size: 2.5em; margin-bottom: 10px; position: relative; z-index: 1; }
.header p { font-size: 1.2em; opacity: 0.9; position: relative; z-index: 1; }
.client-info { background: #2d2d2d; padding: 30px; border-bottom: 3px solid #F4D03F; color: white; }
.client-info h2 { color: #F4D03F; margin-bottom: 15px; font-size: 1.8em; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.info-item { display: flex; align-items: center; padding: 15px; background: #3d3d3d; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); color: white; }
.info-label { font-weight: bold; color: #F4D03F; margin-right: 10px; min-width: 120px; }
.section { padding: 40px 30px; border-bottom: 2px solid #F4D03F; background: white; }
.section-title { font-size: 2em; color: #1a1a1a; margin-bottom: 25px; text-align: center; position: relative; padding-bottom: 15px; }
.section-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: linear-gradient(135deg, #F4D03F, #E67E22); border-radius: 2px; }
.signature-box { background: #f8f9fa; border: 3px dashed #dee2e6; border-radius: 15px; padding: 30px; text-align: center; margin: 20px 0; min-height: 120px; display: flex; align-items: center; justify-content: center; font-style: italic; font-size: 1.1em; color: #6c757d; }
.current-signature { border-color: #dc3545; background: #fff5f5; }
.corrected-signature { border-color: #28a745; background: #f8fff8; }
.mistakes-list { list-style: none; padding: 0; }
.mistake-item { background: #fff3cd; border-left: 5px solid #ffc107; padding: 20px; margin: 15px 0; border-radius: 5px; position: relative; }
.mistake-title { font-weight: bold; color: #856404; margin-bottom: 10px; font-size: 1.1em; }
.personality-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; margin: 25px 0; }
.personality-card { background: linear-gradient(135deg, #8E44AD 0%, #9B59B6 100%); color: white; padding: 25px; border-radius: 15px; box-shadow: 0 10px 25px rgba(142, 68, 173, 0.3); }
.personality-card h3 { margin-bottom: 15px; font-size: 1.3em; }
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 25px 0; }
.benefit-card { background: white; border: 2px solid #e9ecef; border-radius: 15px; padding: 25px; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.benefit-card h3 { margin-bottom: 10px; }
.about-section { background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); color: #F4D03F; text-align: center; }
.practice-table { width: 100%; border-collapse: collapse; margin: 25px 0; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.practice-table th, .practice-table td { padding: 15px; text-align: left; border-bottom: 1px solid #dee2e6; }
.practice-table th { background: #1a1a1a; color: #F4D03F; font-weight: bold; }
.footer { background: #1a1a1a; color: #F4D03F; text-align: center; padding: 30px; }
img.report-img { max-width: 100%; height: auto; display:block; margin: 0 auto; }
/* small helpers */
.muted { color:#666; font-size:0.9rem; }
.form-section { margin-bottom: 18px; }
.chip { display:inline-block; padding:6px 10px; background:#f1f1f1; border-radius:999px; margin:4px 6px 4px 0; }

@media (max-width: 900px) { .app { grid-template-columns: 1fr; } }