:root{--primary-color: #3b82f6;--primary-hover: #2563eb;--text-color: #1f2937;--text-light: #6b7280;--background: #f9fafb;--card-background: #ffffff;--border-color: #e5e7eb;--shadow: 0 1px 3px 0 rgb(0 0 0 / .1);--radius: .5rem;--modal-background: rgba(0, 0, 0, .85)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,-apple-system,sans-serif;line-height:1.5;color:var(--text-color);background:var(--background)}.container{max-width:32rem;margin:0 auto;padding:2rem 1rem;min-height:100vh;display:flex;flex-direction:column}header{text-align:center;margin-bottom:2rem}.church-icon{width:3rem;height:3rem;color:var(--primary-color);margin-bottom:.5rem}h1{font-size:1.875rem;font-weight:800;margin-bottom:.5rem}header p{color:var(--text-light)}.card{background:var(--card-background);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem}.form-group{margin-bottom:1rem}.form-group-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.5rem}input{width:100%;padding:.5rem;border:1px solid var(--border-color);border-radius:var(--radius);font-size:1rem}input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #3b82f61a}.image-upload-area{border:2px dashed var(--border-color);border-radius:var(--radius);padding:1.5rem;text-align:center;cursor:pointer;position:relative;min-height:300px;display:flex;align-items:center;justify-content:center}.upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:.5rem}.upload-icon{width:2rem;height:2rem;color:var(--text-light)}.image-preview{position:relative}.image-preview img{max-width:100%;max-height:12rem;border-radius:var(--radius)}.remove-image{position:absolute;top:-.5rem;right:-.5rem;width:1.5rem;height:1.5rem;border-radius:50%;background:#fee2e2;color:#dc2626;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem}.gradient-options{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;margin-top:.5rem}.gradient-option{border:none;padding:0;cursor:pointer;position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:1}.gradient-option.active{outline:2px solid var(--primary-color);outline-offset:2px}.gradient-preview{display:block;width:100%;height:100%}.gradient-option[data-gradient=royal] .gradient-preview{background:linear-gradient(135deg,#1e3a8a,#3b82f6)}.gradient-option[data-gradient=sunset] .gradient-preview{background:linear-gradient(135deg,#7c2d12,#ea580c)}.gradient-option[data-gradient=ocean] .gradient-preview{background:linear-gradient(135deg,#164e63,#0891b2)}.gradient-option[data-gradient=forest] .gradient-preview{background:linear-gradient(135deg,#14532d,#16a34a)}.gradient-option[data-gradient=purple] .gradient-preview{background:linear-gradient(135deg,#581c87,#9333ea)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.5rem 1rem;border-radius:var(--radius);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;width:100%;margin-bottom:.5rem}.btn-primary{background:var(--primary-color);color:#fff;border:none}.btn-primary:hover{background:var(--primary-hover)}.btn-secondary{background:#fff;color:var(--text-color);border:1px solid var(--border-color)}.btn-secondary:hover{background:var(--background)}.btn-outline{background:transparent;border:1px solid var(--border-color);color:var(--text-color);margin-top:1rem}.icon{width:1rem;height:1rem;margin-right:.5rem}.hidden{display:none}.event-details{margin:1rem 0;padding-bottom:1rem;border-bottom:1px solid var(--border-color)}dl{display:grid;gap:.5rem}dt{font-size:.875rem;color:var(--text-light)}dd{font-size:.875rem}.share-options h3{display:flex;align-items:center;font-size:1rem;margin-bottom:1rem}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--modal-background);display:flex;align-items:center;justify-content:center;padding:1rem;z-index:50;opacity:0;pointer-events:none;transition:opacity .3s}.modal.active{opacity:1;pointer-events:auto}.modal-content{background:#fff;border-radius:var(--radius);width:100%;max-width:24rem;position:relative;transform:translateY(20px);transition:transform .3s;overflow:hidden}.modal.active .modal-content{transform:translateY(0)}.modal-header{position:absolute;top:.5rem;right:.5rem;z-index:10}.modal-close{background:#ffffffe6;border:none;color:var(--text-color);cursor:pointer;width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #0000001a}.modal-close svg{width:1.25rem;height:1.25rem}.modal-preview{position:relative;padding-top:177.77%}.modal-preview-content{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;padding:2rem;text-align:center}.modal-avatar{width:8rem;height:8rem;border-radius:50%;overflow:hidden;margin-bottom:2rem;border:4px solid rgba(255,255,255,.2)}.modal-avatar img{width:100%;height:100%;object-fit:cover}.modal-details{display:grid;gap:1.5rem;width:100%}.modal-title{font-size:2.5rem;font-weight:800;line-height:1.2;margin:0;padding:0}.modal-subtitle{font-size:1.5rem;font-weight:600;margin:0;padding:0;opacity:.9}.modal-info{display:grid;gap:.75rem;font-size:1.125rem}.modal-info p{text-shadow:0 2px 4px rgba(0,0,0,.2)}.modal-footer{padding:1rem;text-align:center;color:var(--text-light);font-size:.875rem;border-top:1px solid var(--border-color);background:var(--background)}.image-editor-container{width:100%;display:flex;flex-direction:column;gap:1rem}.image-editor-canvas-wrapper{width:300px;height:300px;margin:0 auto;border-radius:50%;overflow:hidden;background:#f3f4f6}.image-editor-canvas-wrapper canvas{width:100%;height:100%;display:block}.image-editor-controls{display:flex;flex-direction:column;gap:1rem;padding:1rem}.image-editor-controls input[type=range]{width:100%;margin:0}.image-editor-buttons{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.name-label{font-size:1rem;opacity:.8;margin-bottom:.5rem}main{flex:1}.footer{text-align:center;padding:2rem 0 1rem;color:var(--text-light);font-size:.875rem}.footer a{color:var(--primary-color);text-decoration:none}.footer a:hover{text-decoration:underline}.footer p{margin-bottom:.5rem}
