Hindu Marriage Bio Data Builder | srabons.de<\/title>\n\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@500;600;700;800&family=Noto+Serif+Devanagari:wght@500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600&family=Outfit:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2pdf.js\/0.10.1\/html2pdf.bundle.min.js\"><\/script>\n\n <script>\n tailwind.config = {\n theme: {\n extend: {\n fontFamily: {\n cinzel: ['Cinzel', 'serif'],\n devanagari: ['Noto Serif Devanagari', 'serif'],\n playfair: ['Playfair Display', 'serif'],\n sans: ['Outfit', 'sans-serif'],\n }\n }\n }\n }\n <\/script>\n\n <style>\n \/* ========================================================\n 1. CRITICAL HIGH-CONTRAST FORM INPUT STYLES\n Prevents text from appearing invisible, white, or faded\n across iOS Safari, Chrome Android, and system dark modes.\n ======================================================== *\/\n input[type=\"text\"],\n input[type=\"email\"],\n input[type=\"tel\"],\n textarea,\n select {\n color: #111827 !important; \/* Deep charcoal black *\/\n background-color: #ffffff !important;\n -webkit-text-fill-color: #111827 !important;\n caret-color: #780B1E !important; \/* Auspicious deep maroon caret *\/\n opacity: 1 !important;\n font-weight: 500;\n -webkit-appearance: none;\n appearance: none;\n }\n\n input::placeholder,\n textarea::placeholder {\n color: #9ca3af !important;\n -webkit-text-fill-color: #9ca3af !important;\n opacity: 1 !important;\n font-weight: 400;\n }\n\n select option {\n color: #111827 !important;\n background-color: #ffffff !important;\n }\n\n \/* WebKit Autofill Overrides *\/\n input:-webkit-autofill,\n input:-webkit-autofill:hover,\n input:-webkit-autofill:focus,\n textarea:-webkit-autofill,\n select:-webkit-autofill {\n -webkit-text-fill-color: #111827 !important;\n -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;\n transition: background-color 5000s ease-in-out 0s;\n }\n\n \/* ========================================================\n 2. TRADITIONAL SACRED THEMES FOR BIODATA SHEET\n ======================================================== *\/\n .theme-royal-maroon {\n --primary: #780B1E;\n --primary-dark: #4F0613;\n --accent: #B8860B;\n --accent-soft: #FCF8F2;\n --border: #C59A3F;\n --heading: #780B1E;\n --subtext: #664E3F;\n --sheet-bg: #FFFDF9;\n --badge-bg: #F8EFE4;\n --badge-border: #E8D3B9;\n }\n\n .theme-sandalwood-gold {\n --primary: #8E4A28;\n --primary-dark: #582C15;\n --accent: #CF7A22;\n --accent-soft: #FBF4ED;\n --border: #D98938;\n --heading: #8E4A28;\n --subtext: #6A4B3A;\n --sheet-bg: #FDFBF8;\n --badge-bg: #F7EBDF;\n --badge-border: #E8CFB8;\n }\n\n .theme-peacock-emerald {\n --primary: #154E43;\n --primary-dark: #0A2E27;\n --accent: #B79247;\n --accent-soft: #F3F8F6;\n --border: #A38440;\n --heading: #154E43;\n --subtext: #415A53;\n --sheet-bg: #FDFEFD;\n --badge-bg: #E8F2EF;\n --badge-border: #C4DFD6;\n }\n\n .theme-royal-navy {\n --primary: #1A365D;\n --primary-dark: #0D1E35;\n --accent: #C5A059;\n --accent-soft: #F4F7FB;\n --border: #C5A059;\n --heading: #1A365D;\n --subtext: #4A5B73;\n --sheet-bg: #FCFDFF;\n --badge-bg: #EBF1F9;\n --badge-border: #CBD8EA;\n }\n\n \/* ========================================================\n 3. A4 SHEET DIMENSIONING & DISPLAY\n ======================================================== *\/\n .a4-page {\n width: 100%;\n max-width: 210mm;\n min-height: 297mm;\n background-color: var(--sheet-bg);\n color: #2D2622;\n box-sizing: border-box;\n transition: background-color 0.2s ease, border-color 0.2s ease;\n }\n\n \/* Traditional Indian Arch Framing *\/\n .arch-frame {\n border-top-left-radius: 9999px;\n border-top-right-radius: 9999px;\n border-bottom-left-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n\n \/* Custom Scrollbars *\/\n ::-webkit-scrollbar {\n width: 5px;\n height: 5px;\n }\n ::-webkit-scrollbar-track {\n background: #f1eee7;\n }\n ::-webkit-scrollbar-thumb {\n background: #cfc2b0;\n border-radius: 4px;\n }\n\n \/* ========================================================\n 4. BROWSER PRINT FALLBACK (@media print)\n ======================================================== *\/\n @media print {\n @page {\n size: A4 portrait;\n margin: 8mm;\n }\n body {\n background: #ffffff !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n header, #form-panel, #mobile-nav-bar, #mobile-bottom-bar, #reset-modal, #loading-modal, #toast, .no-print {\n display: none !important;\n }\n #preview-panel {\n display: block !important;\n width: 100% !important;\n max-width: 100% !important;\n padding: 0 !important;\n margin: 0 !important;\n }\n #preview-container {\n overflow: visible !important;\n padding: 0 !important;\n margin: 0 auto !important;\n width: 100% !important;\n }\n #biodata-sheet {\n box-shadow: none !important;\n border: none !important;\n width: 100% !important;\n max-width: 100% !important;\n margin: 0 auto !important;\n -webkit-print-color-adjust: exact !important;\n print-color-adjust: exact !important;\n }\n }\n <\/style>\n<\/head>\n\n<body class=\"bg-[#F4F1EA] text-stone-800 font-sans min-h-screen flex flex-col antialiased selection:bg-amber-200 selection:text-amber-900 pb-20 lg:pb-6\">\n\n \n <header class=\"no-print bg-white\/95 backdrop-blur-md border-b border-stone-200 sticky top-0 z-40 px-3 sm:px-6 py-2.5 shadow-xs\">\n <div class=\"max-w-7xl mx-auto flex items-center justify-between\">\n\n \n <div class=\"flex items-center space-x-2.5\">\n <div class=\"w-9 h-9 sm:w-10 sm:h-10 rounded-full bg-gradient-to-br from-red-800 to-amber-700 flex items-center justify-center text-white shadow-sm ring-2 ring-amber-300 shrink-0\">\n \n <svg class=\"w-5 h-5 sm:w-6 sm:h-6 fill-current\" viewBox=\"0 0 24 24\">\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 14.5h-2V13H8v-2h3V8h2v3h3v2h-3v3.5z\"\/>\n <\/svg>\n <\/div>\n <div>\n <div class=\"flex items-center space-x-1.5\">\n <span class=\"font-cinzel font-bold text-base sm:text-lg text-stone-900 tracking-wider\">srabons<span class=\"text-amber-700\">.de<\/span><\/span>\n <span class=\"text-[9px] sm:text-[10px] font-semibold uppercase tracking-wider px-2 py-0.5 rounded-full bg-amber-100 text-amber-800 border border-amber-200\">Matrimonial<\/span>\n <\/div>\n <p class=\"text-[10px] sm:text-[11px] text-stone-500 font-medium leading-none\">Hindu Marriage Bio Data Builder<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"flex items-center space-x-1.5 sm:space-x-2\">\n <button onclick=\"fillSampleData()\" type=\"button\" class=\"inline-flex items-center space-x-1 px-2.5 py-1.5 text-xs font-semibold text-stone-700 bg-stone-100 hover:bg-stone-200 rounded-lg transition-colors border border-stone-300\">\n <svg class=\"w-3.5 h-3.5 text-amber-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"\/><\/svg>\n <span class=\"hidden sm:inline\">Sample Data<\/span>\n <span class=\"sm:hidden\">Sample<\/span>\n <\/button>\n\n <button onclick=\"openResetModal()\" type=\"button\" class=\"inline-flex items-center space-x-1 px-2.5 py-1.5 text-xs font-semibold text-stone-600 hover:text-red-700 bg-white hover:bg-red-50 rounded-lg transition-colors border border-stone-200\">\n <svg class=\"w-3.5 h-3.5 text-stone-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\/><\/svg>\n <span class=\"hidden sm:inline\">Clear<\/span>\n <\/button>\n\n \n <button onclick=\"downloadAsImage()\" type=\"button\" class=\"hidden sm:inline-flex items-center space-x-1.5 px-3 py-1.5 text-xs font-semibold text-emerald-800 bg-emerald-50 hover:bg-emerald-100 border border-emerald-300 rounded-lg transition-colors shadow-2xs\">\n <svg class=\"w-3.5 h-3.5 text-emerald-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\/><\/svg>\n <span>Share PNG<\/span>\n <\/button>\n\n \n <button onclick=\"downloadAsPDF()\" type=\"button\" class=\"inline-flex items-center space-x-1.5 px-3.5 py-1.5 text-xs sm:text-sm font-semibold text-white bg-gradient-to-r from-red-800 to-amber-700 hover:from-red-900 hover:to-amber-800 rounded-lg shadow-sm hover:shadow transition-all\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\/><\/svg>\n <span class=\"font-medium\">Download PDF<\/span>\n <\/button>\n <\/div>\n\n <\/div>\n <\/header>\n\n \n <div id=\"mobile-nav-bar\" class=\"no-print lg:hidden sticky top-[53px] z-30 bg-stone-100\/95 backdrop-blur-sm border-b border-stone-200 px-4 py-2 flex items-center justify-between\">\n <div class=\"flex items-center space-x-1.5\">\n <span class=\"w-2 h-2 rounded-full bg-emerald-500 animate-pulse\"><\/span>\n <span class=\"text-xs font-semibold text-stone-700\">Studio View:<\/span>\n <\/div>\n <div class=\"flex bg-stone-200\/80 p-0.5 rounded-lg text-xs font-semibold\">\n <button id=\"tab-btn-form\" onclick=\"switchMobileTab('form')\" class=\"px-3 py-1 rounded-md bg-white text-stone-900 shadow-xs transition-all\">Edit Form<\/button>\n <button id=\"tab-btn-preview\" onclick=\"switchMobileTab('preview')\" class=\"px-3 py-1 rounded-md text-stone-600 hover:text-stone-900 transition-all\">Live Preview<\/button>\n <\/div>\n <\/div>\n\n \n <main class=\"max-w-7xl mx-auto w-full px-3 sm:px-6 py-4 sm:py-6 flex-1 flex flex-col lg:flex-row gap-6\">\n\n \n <section id=\"form-panel\" class=\"w-full lg:w-1\/2 flex flex-col space-y-3.5 no-print\">\n\n \n <div class=\"bg-white rounded-2xl border border-stone-200 p-3.5 shadow-xs\">\n <label class=\"block text-xs font-bold text-stone-700 uppercase tracking-wider mb-2\">Sacred Aesthetic Theme<\/label>\n <div class=\"grid grid-cols-2 sm:grid-cols-4 gap-2\">\n\n <button onclick=\"applyTheme('theme-royal-maroon', this)\" class=\"theme-choice-btn border-2 border-red-800 rounded-xl p-2 flex items-center space-x-2 bg-red-50 text-left transition-all\">\n <span class=\"w-4 h-4 rounded-full bg-[#780B1E] ring-1 ring-amber-500 shrink-0\"><\/span>\n <div class=\"text-[11px] leading-tight font-medium text-stone-800\">\n <span class=\"block font-semibold\">Royal Maroon<\/span>\n <span class=\"text-stone-500 text-[10px]\">Gold & Sindoor<\/span>\n <\/div>\n <\/button>\n\n <button onclick=\"applyTheme('theme-sandalwood-gold', this)\" class=\"theme-choice-btn border border-stone-200 rounded-xl p-2 flex items-center space-x-2 hover:bg-stone-50 text-left transition-all\">\n <span class=\"w-4 h-4 rounded-full bg-[#8E4A28] ring-1 ring-amber-400 shrink-0\"><\/span>\n <div class=\"text-[11px] leading-tight font-medium text-stone-800\">\n <span class=\"block font-semibold\">Sandalwood<\/span>\n <span class=\"text-stone-500 text-[10px]\">Warm Ochre<\/span>\n <\/div>\n <\/button>\n\n <button onclick=\"applyTheme('theme-peacock-emerald', this)\" class=\"theme-choice-btn border border-stone-200 rounded-xl p-2 flex items-center space-x-2 hover:bg-stone-50 text-left transition-all\">\n <span class=\"w-4 h-4 rounded-full bg-[#154E43] ring-1 ring-amber-400 shrink-0\"><\/span>\n <div class=\"text-[11px] leading-tight font-medium text-stone-800\">\n <span class=\"block font-semibold\">Peacock Green<\/span>\n <span class=\"text-stone-500 text-[10px]\">Sacred Emerald<\/span>\n <\/div>\n <\/button>\n\n <button onclick=\"applyTheme('theme-royal-navy', this)\" class=\"theme-choice-btn border border-stone-200 rounded-xl p-2 flex items-center space-x-2 hover:bg-stone-50 text-left transition-all\">\n <span class=\"w-4 h-4 rounded-full bg-[#1A365D] ring-1 ring-amber-400 shrink-0\"><\/span>\n <div class=\"text-[11px] leading-tight font-medium text-stone-800\">\n <span class=\"block font-semibold\">Royal Navy<\/span>\n <span class=\"text-stone-500 text-[10px]\">Ivory & Brass<\/span>\n <\/div>\n <\/button>\n\n <\/div>\n <\/div>\n\n \n <form id=\"biodata-form\" onsubmit=\"event.preventDefault();\" class=\"space-y-3\">\n\n \n <div class=\"bg-white rounded-2xl border border-stone-200 shadow-xs overflow-hidden\">\n <button type=\"button\" onclick=\"toggleSection('sec-header')\" class=\"w-full px-4 py-3 bg-stone-50 hover:bg-stone-100 flex items-center justify-between text-left transition-colors\">\n <div class=\"flex items-center space-x-3\">\n <span class=\"w-6 h-6 rounded-md bg-amber-100 text-amber-800 font-bold text-xs flex items-center justify-center\">1<\/span>\n <div>\n <h3 class=\"text-xs sm:text-sm font-bold text-stone-800 font-cinzel\">Header & Profile Photo<\/h3>\n <p class=\"text-[11px] text-stone-500\">Lord Ganesha Inscription and Candidate Photo<\/p>\n <\/div>\n <\/div>\n <svg id=\"arr-sec-header\" class=\"w-4 h-4 text-stone-400 transform transition-transform duration-200 rotate-180\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"\/><\/svg>\n <\/button>\n\n <div id=\"sec-header\" class=\"p-4 space-y-3\">\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-1\">Auspicious Sanskrit \/ English Invocations<\/label>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2\">\n <input type=\"text\" id=\"in-shloka-sanskrit\" value=\"|| \u0936\u094d\u0930\u0940 \u0917\u0923\u0947\u0936\u093e\u092f \u0928\u092e\u0903 ||\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 font-devanagari focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <input type=\"text\" id=\"in-shloka-english\" value=\"|| Om Sri Ganeshaya Namaha ||\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n <\/div>\n\n \n <div class=\"p-3 bg-stone-50 rounded-xl border border-stone-200 flex flex-col sm:flex-row items-center gap-3\">\n <div id=\"photo-thumb-container\" class=\"w-16 h-20 rounded-md border-2 border-dashed border-stone-300 bg-white flex items-center justify-center text-stone-400 overflow-hidden shrink-0\">\n <svg class=\"w-6 h-6 text-stone-300\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\/><\/svg>\n <\/div>\n <div class=\"flex-1 text-center sm:text-left space-y-1.5\">\n <span class=\"text-xs font-semibold text-stone-700 block\">Candidate Formal Photograph<\/span>\n <div class=\"flex flex-wrap items-center justify-center sm:justify-start gap-2\">\n <label class=\"cursor-pointer inline-flex items-center space-x-1.5 px-3 py-1.5 text-xs font-medium text-stone-700 bg-white border border-stone-300 rounded-lg hover:border-amber-600 shadow-2xs\">\n <svg class=\"w-3.5 h-3.5 text-stone-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12\"\/><\/svg>\n <span>Upload Image<\/span>\n <input type=\"file\" id=\"in-photo-file\" accept=\"image\/*\" onchange=\"processPhotoUpload(event)\" class=\"hidden\">\n <\/label>\n <button type=\"button\" id=\"btn-photo-remove\" onclick=\"removePhoto()\" class=\"hidden text-xs text-red-600 hover:text-red-700 font-medium px-2 py-1\">Remove<\/button>\n <label class=\"inline-flex items-center space-x-1.5 text-xs text-stone-600 ml-1\">\n <input type=\"checkbox\" id=\"in-photo-toggle\" checked onchange=\"updateLive()\" class=\"rounded text-amber-600 focus:ring-amber-500\">\n <span>Show in Bio Data<\/span>\n <\/label>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl border border-stone-200 shadow-xs overflow-hidden\">\n <button type=\"button\" onclick=\"toggleSection('sec-personal')\" class=\"w-full px-4 py-3 bg-stone-50 hover:bg-stone-100 flex items-center justify-between text-left transition-colors\">\n <div class=\"flex items-center space-x-3\">\n <span class=\"w-6 h-6 rounded-md bg-amber-100 text-amber-800 font-bold text-xs flex items-center justify-center\">2<\/span>\n <div>\n <h3 class=\"text-xs sm:text-sm font-bold text-stone-800 font-cinzel\">Personal Profile<\/h3>\n <p class=\"text-[11px] text-stone-500\">Name, Birth details, Physical traits & Religion<\/p>\n <\/div>\n <\/div>\n <svg id=\"arr-sec-personal\" class=\"w-4 h-4 text-stone-400 transform transition-transform duration-200 rotate-180\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"\/><\/svg>\n <\/button>\n\n <div id=\"sec-personal\" class=\"p-4 space-y-3\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2.5\">\n\n <div class=\"sm:col-span-2\">\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Candidate Full Name *<\/label>\n <input type=\"text\" id=\"in-name\" placeholder=\"e.g. Aarav Sharma\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Date of Birth<\/label>\n <input type=\"text\" id=\"in-dob\" placeholder=\"e.g. 14th October 1996\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Time of Birth<\/label>\n <input type=\"text\" id=\"in-tob\" placeholder=\"e.g. 09:25 AM\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Place of Birth<\/label>\n <input type=\"text\" id=\"in-pob\" placeholder=\"e.g. Pune, Maharashtra\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Height<\/label>\n <input type=\"text\" id=\"in-height\" placeholder=\"e.g. 5' 10" (178 cm)\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Complexion \/ Physique<\/label>\n <input type=\"text\" id=\"in-complexion\" placeholder=\"e.g. Fair & Athletic\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Blood Group<\/label>\n <input type=\"text\" id=\"in-blood-group\" placeholder=\"e.g. B+ Positive\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Mother Tongue<\/label>\n <input type=\"text\" id=\"in-mother-tongue\" placeholder=\"e.g. Hindi \/ Marathi \/ Bengali\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Marital Status<\/label>\n <select id=\"in-marital-status\" onchange=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <option value=\"Never Married\">Never Married<\/option>\n <option value=\"Awaiting Divorce\">Awaiting Divorce<\/option>\n <option value=\"Divorced\">Divorced<\/option>\n <option value=\"Widowed\">Widowed<\/option>\n <\/select>\n <\/div>\n\n <div class=\"sm:col-span-2\">\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Religion, Caste & Sub-Caste<\/label>\n <input type=\"text\" id=\"in-caste\" placeholder=\"e.g. Hindu - Brahmin (Kanyakubja)\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl border border-stone-200 shadow-xs overflow-hidden\">\n <button type=\"button\" onclick=\"toggleSection('sec-astro')\" class=\"w-full px-4 py-3 bg-stone-50 hover:bg-stone-100 flex items-center justify-between text-left transition-colors\">\n <div class=\"flex items-center space-x-3\">\n <span class=\"w-6 h-6 rounded-md bg-amber-100 text-amber-800 font-bold text-xs flex items-center justify-center\">3<\/span>\n <div>\n <h3 class=\"text-xs sm:text-sm font-bold text-stone-800 font-cinzel\">Kundali \/ Horoscope<\/h3>\n <p class=\"text-[11px] text-stone-500\">Rashi, Nakshatra, Gotra & Manglik Status<\/p>\n <\/div>\n <\/div>\n <svg id=\"arr-sec-astro\" class=\"w-4 h-4 text-stone-400 transform transition-transform duration-200\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"\/><\/svg>\n <\/button>\n\n <div id=\"sec-astro\" class=\"p-4 space-y-3 hidden\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2.5\">\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Rashi (Moon Sign)<\/label>\n <input type=\"text\" id=\"in-rashi\" placeholder=\"e.g. Tula (Libra)\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Nakshatra & Charan<\/label>\n <input type=\"text\" id=\"in-nakshatra\" placeholder=\"e.g. Swati (Charan 2)\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Gotra<\/label>\n <input type=\"text\" id=\"in-gotra\" placeholder=\"e.g. Kashyap\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Manglik Status<\/label>\n <select id=\"in-manglik\" onchange=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <option value=\"Non-Manglik\">Non-Manglik<\/option>\n <option value=\"Manglik\">Manglik<\/option>\n <option value=\"Anshik \/ Partial Manglik\">Anshik \/ Partial Manglik<\/option>\n <option value=\"Don't Know \/ Kundali match needed\">Don’t Know \/ Kundali match needed<\/option>\n <\/select>\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Lagna (Ascendant)<\/label>\n <input type=\"text\" id=\"in-lagna\" placeholder=\"e.g. Vrishabh (Taurus)\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Gana & Nadi<\/label>\n <input type=\"text\" id=\"in-gana\" placeholder=\"e.g. Dev Gana, Antya Nadi\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl border border-stone-200 shadow-xs overflow-hidden\">\n <button type=\"button\" onclick=\"toggleSection('sec-edu')\" class=\"w-full px-4 py-3 bg-stone-50 hover:bg-stone-100 flex items-center justify-between text-left transition-colors\">\n <div class=\"flex items-center space-x-3\">\n <span class=\"w-6 h-6 rounded-md bg-amber-100 text-amber-800 font-bold text-xs flex items-center justify-center\">4<\/span>\n <div>\n <h3 class=\"text-xs sm:text-sm font-bold text-stone-800 font-cinzel\">Education & Career<\/h3>\n <p class=\"text-[11px] text-stone-500\">Degree, College, Job title, Company & Location<\/p>\n <\/div>\n <\/div>\n <svg id=\"arr-sec-edu\" class=\"w-4 h-4 text-stone-400 transform transition-transform duration-200\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"\/><\/svg>\n <\/button>\n\n <div id=\"sec-edu\" class=\"p-4 space-y-3 hidden\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2.5\">\n\n <div class=\"sm:col-span-2\">\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Highest Qualification *<\/label>\n <input type=\"text\" id=\"in-education\" placeholder=\"e.g. B.Tech (Computer Science) & M.S.\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div class=\"sm:col-span-2\">\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">University \/ Alma Mater<\/label>\n <input type=\"text\" id=\"in-college\" placeholder=\"e.g. IIT Bombay & RWTH Aachen University\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Current Role \/ Designation<\/label>\n <input type=\"text\" id=\"in-occupation\" placeholder=\"e.g. Senior Software Architect\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Organization \/ Employer<\/label>\n <input type=\"text\" id=\"in-company\" placeholder=\"e.g. Global Tech Solutions GmbH\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Annual Income \/ CTC<\/label>\n <input type=\"text\" id=\"in-income\" placeholder=\"e.g. \u20ac 88,000 p.a. (\u20b9 78 LPA)\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Work Location<\/label>\n <input type=\"text\" id=\"in-work-location\" placeholder=\"e.g. Frankfurt, Germany\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl border border-stone-200 shadow-xs overflow-hidden\">\n <button type=\"button\" onclick=\"toggleSection('sec-family')\" class=\"w-full px-4 py-3 bg-stone-50 hover:bg-stone-100 flex items-center justify-between text-left transition-colors\">\n <div class=\"flex items-center space-x-3\">\n <span class=\"w-6 h-6 rounded-md bg-amber-100 text-amber-800 font-bold text-xs flex items-center justify-center\">5<\/span>\n <div>\n <h3 class=\"text-xs sm:text-sm font-bold text-stone-800 font-cinzel\">Family Background<\/h3>\n <p class=\"text-[11px] text-stone-500\">Parents, Siblings, Family Type & Native Roots<\/p>\n <\/div>\n <\/div>\n <svg id=\"arr-sec-family\" class=\"w-4 h-4 text-stone-400 transform transition-transform duration-200\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"\/><\/svg>\n <\/button>\n\n <div id=\"sec-family\" class=\"p-4 space-y-3 hidden\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2.5\">\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Father’s Name & Profession<\/label>\n <input type=\"text\" id=\"in-father\" placeholder=\"e.g. Mr. Rajesh Sharma (Retd. Chief Engineer)\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Mother’s Name & Profession<\/label>\n <input type=\"text\" id=\"in-mother\" placeholder=\"e.g. Mrs. Sunita Sharma (Senior Educator)\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div class=\"sm:col-span-2\">\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Brothers & Sisters Details<\/label>\n <input type=\"text\" id=\"in-siblings\" placeholder=\"e.g. 1 Younger Sister (Married, Architect in London)\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Family Values & Type<\/label>\n <input type=\"text\" id=\"in-family-values\" placeholder=\"e.g. Nuclear Family \/ Moderate Traditional\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Native Place \/ Ancestral Roots<\/label>\n <input type=\"text\" id=\"in-native\" placeholder=\"e.g. Jaipur, Rajasthan \/ Pune\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl border border-stone-200 shadow-xs overflow-hidden\">\n <button type=\"button\" onclick=\"toggleSection('sec-lifestyle')\" class=\"w-full px-4 py-3 bg-stone-50 hover:bg-stone-100 flex items-center justify-between text-left transition-colors\">\n <div class=\"flex items-center space-x-3\">\n <span class=\"w-6 h-6 rounded-md bg-amber-100 text-amber-800 font-bold text-xs flex items-center justify-center\">6<\/span>\n <div>\n <h3 class=\"text-xs sm:text-sm font-bold text-stone-800 font-cinzel\">Hobbies, Likes & Future Plans<\/h3>\n <p class=\"text-[11px] text-stone-500\">Interests, Quirks, Preferences & Life Goals<\/p>\n <\/div>\n <\/div>\n <svg id=\"arr-sec-lifestyle\" class=\"w-4 h-4 text-stone-400 transform transition-transform duration-200 rotate-180\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"\/><\/svg>\n <\/button>\n\n <div id=\"sec-lifestyle\" class=\"p-4 space-y-3\">\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Hobbies & Interests<\/label>\n <input type=\"text\" id=\"in-hobbies\" placeholder=\"e.g. Classical flute, Alpine hiking, Vedic philosophy, Cooking\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2.5\">\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Likes<\/label>\n <textarea id=\"in-likes\" rows=\"2\" placeholder=\"e.g. Nature trails, peaceful mornings, acoustic concerts, artisanal tea\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none resize-none\"><\/textarea>\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Dislikes<\/label>\n <textarea id=\"in-dislikes\" rows=\"2\" placeholder=\"e.g. Smoking, dishonesty, unpunctuality & arrogance\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none resize-none\"><\/textarea>\n <\/div>\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Future Plans & Aspirations<\/label>\n <textarea id=\"in-future-plans\" rows=\"2\" placeholder=\"e.g. Planning to continue working in Europe for the next 4-5 years before establishing an eco-friendly tech venture in India. Value spiritual living and shared family growth.\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none resize-none\"><\/textarea>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl border border-stone-200 shadow-xs overflow-hidden\">\n <button type=\"button\" onclick=\"toggleSection('sec-partner')\" class=\"w-full px-4 py-3 bg-stone-50 hover:bg-stone-100 flex items-center justify-between text-left transition-colors\">\n <div class=\"flex items-center space-x-3\">\n <span class=\"w-6 h-6 rounded-md bg-amber-100 text-amber-800 font-bold text-xs flex items-center justify-center\">7<\/span>\n <div>\n <h3 class=\"text-xs sm:text-sm font-bold text-stone-800 font-cinzel\">Partner Preferences & Expectations<\/h3>\n <p class=\"text-[11px] text-stone-500\">Bride \/ Groom criteria, Diet, Age, Height & Values<\/p>\n <\/div>\n <\/div>\n <svg id=\"arr-sec-partner\" class=\"w-4 h-4 text-stone-400 transform transition-transform duration-200 rotate-180\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"\/><\/svg>\n <\/button>\n\n <div id=\"sec-partner\" class=\"p-4 space-y-3\">\n <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-2.5\">\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Looking For<\/label>\n <select id=\"in-partner-seeking\" onchange=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <option value=\"Bride\">Seeking Bride<\/option>\n <option value=\"Groom\">Seeking Groom<\/option>\n <\/select>\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Preferred Age Range<\/label>\n <input type=\"text\" id=\"in-partner-age\" placeholder=\"e.g. 24 - 28 Years\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Preferred Height<\/label>\n <input type=\"text\" id=\"in-partner-height\" placeholder=\"e.g. 5' 2" to 5' 7"\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <\/div>\n\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2.5\">\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Dietary \/ Food Habits<\/label>\n <input type=\"text\" id=\"in-partner-diet\" placeholder=\"e.g. Vegetarian \/ Flexible \/ Teetotaler\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Education \/ Profession<\/label>\n <input type=\"text\" id=\"in-partner-edu\" placeholder=\"e.g. Postgraduate \/ Professional (Engineer, Doctor, CA)\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Location \/ Relocation Preferences<\/label>\n <input type=\"text\" id=\"in-partner-location\" placeholder=\"e.g. Open to relocate to Germany \/ Europe or India\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Core Expectations & Compatibility Values<\/label>\n <textarea id=\"in-partner-expectations\" rows=\"2\" placeholder=\"e.g. Seeking a cheerful, warm, and broad-minded partner who respects cultural roots and values mutual support in life, career, and household.\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none resize-none\"><\/textarea>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl border border-stone-200 shadow-xs overflow-hidden\">\n <button type=\"button\" onclick=\"toggleSection('sec-contact')\" class=\"w-full px-4 py-3 bg-stone-50 hover:bg-stone-100 flex items-center justify-between text-left transition-colors\">\n <div class=\"flex items-center space-x-3\">\n <span class=\"w-6 h-6 rounded-md bg-amber-100 text-amber-800 font-bold text-xs flex items-center justify-center\">8<\/span>\n <div>\n <h3 class=\"text-xs sm:text-sm font-bold text-stone-800 font-cinzel\">Contact Details<\/h3>\n <p class=\"text-[11px] text-stone-500\">Contact person, Phone, WhatsApp, Email & Address<\/p>\n <\/div>\n <\/div>\n <svg id=\"arr-sec-contact\" class=\"w-4 h-4 text-stone-400 transform transition-transform duration-200\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"\/><\/svg>\n <\/button>\n\n <div id=\"sec-contact\" class=\"p-4 space-y-3 hidden\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2.5\">\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Primary Contact Person<\/label>\n <input type=\"text\" id=\"in-contact-person\" placeholder=\"e.g. Mr. Rajesh Sharma (Father)\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Phone \/ WhatsApp Number<\/label>\n <input type=\"tel\" id=\"in-phone\" placeholder=\"e.g. +49 176 12345678 \/ +91 98765 43210\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div class=\"sm:col-span-2\">\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Email Address<\/label>\n <input type=\"email\" id=\"in-email\" placeholder=\"e.g. family.sharma96@example.com\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div class=\"sm:col-span-2\">\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Current \/ Permanent Residence<\/label>\n <textarea id=\"in-address\" rows=\"2\" placeholder=\"e.g. Flat 402, Shivam Residency, Baner, Pune - 411045\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none resize-none\"><\/textarea>\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n\n <\/form>\n\n <\/section>\n\n \n <section id=\"preview-panel\" class=\"w-full lg:w-1\/2 flex flex-col items-center\">\n\n \n <div class=\"no-print w-full flex items-center justify-between pb-3 px-1 text-xs text-stone-600\">\n <div class=\"flex items-center space-x-2\">\n <span class=\"inline-block w-2.5 h-2.5 rounded-full bg-emerald-500 animate-pulse\"><\/span>\n <span class=\"font-semibold text-stone-700\">Real-Time A4 Live Preview<\/span>\n <\/div>\n <div class=\"flex items-center space-x-3\">\n <button onclick=\"downloadAsImage()\" class=\"text-emerald-700 hover:text-emerald-800 font-semibold flex items-center space-x-1 transition-colors\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\/><\/svg>\n <span>Save Image<\/span>\n <\/button>\n <button onclick=\"downloadAsPDF()\" class=\"text-amber-800 hover:text-amber-900 font-semibold flex items-center space-x-1 transition-colors\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\/><\/svg>\n <span>Save PDF<\/span>\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"preview-container\" class=\"w-full flex justify-center overflow-x-auto pb-8\">\n\n <div id=\"biodata-sheet\" class=\"a4-page theme-royal-maroon shadow-2xl rounded-sm border border-stone-200 relative p-5 sm:p-8 flex flex-col justify-between\">\n\n \n <div class=\"absolute inset-2 sm:inset-3 pointer-events-none border-2 border-[var(--border)] opacity-80\"><\/div>\n <div class=\"absolute inset-3 sm:inset-4 pointer-events-none border border-[var(--border)] opacity-40\"><\/div>\n\n \n <div class=\"absolute top-3 left-3 w-7 h-7 text-[var(--accent)] opacity-85 pointer-events-none\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M2 2h6v2H4v4H2V2zm2 6h2v2H4V8zm4-4h2v2H8V4z\"\/><\/svg>\n <\/div>\n <div class=\"absolute top-3 right-3 w-7 h-7 text-[var(--accent)] opacity-85 pointer-events-none\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M22 2h-6v2h4v4h2V2zm-2 6h-2v2h2V8zm-4-4h-2v2h2V4z\"\/><\/svg>\n <\/div>\n <div class=\"absolute bottom-3 left-3 w-7 h-7 text-[var(--accent)] opacity-85 pointer-events-none\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M2 22h6v-2H4v-4H2v6zm2-6h2v-2H4v2zm4 4h2v-2H8v2z\"\/><\/svg>\n <\/div>\n <div class=\"absolute bottom-3 right-3 w-7 h-7 text-[var(--accent)] opacity-85 pointer-events-none\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M22 22h-6v-2h4v-4h2v6zm-2-6h-2v-2h2v2zm-4 4h-2v-2h2v2z\"\/><\/svg>\n <\/div>\n\n \n <div class=\"relative z-10 flex-1 flex flex-col justify-between\">\n\n \n <div class=\"text-center pt-0.5 pb-2\">\n\n \n <div class=\"mx-auto w-13 h-13 sm:w-16 sm:h-16 mb-1 flex items-center justify-center\">\n <svg class=\"w-full h-full text-[var(--primary)] drop-shadow-xs\" viewBox=\"0 0 100 100\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n \n <path d=\"M42 22 L50 10 L58 22 Z\" fill=\"currentColor\" fill-opacity=\"0.12\" \/>\n <path d=\"M44 19 Q50 14 56 19\" stroke=\"var(--accent)\" stroke-width=\"2\" \/>\n\n \n <path d=\"M50 21 L50 28\" stroke=\"var(--accent)\" stroke-width=\"2.5\" \/>\n <circle cx=\"50\" cy=\"30\" r=\"1.5\" fill=\"var(--accent)\" \/>\n <path d=\"M46 25 Q50 27 54 25\" stroke=\"var(--accent)\" stroke-width=\"1.8\" \/>\n\n \n <path d=\"M40 28 C26 24 22 40 33 46 C37 48 39 45 42 43\" \/>\n <path d=\"M60 28 C74 24 78 40 67 46 C63 48 61 45 58 43\" \/>\n\n \n <path d=\"M44 34 C44 46 45 56 50 63 C53 67 58 68 61 65 C64 61 63 54 57 53 C52 52 50 56 50 57\" stroke-width=\"2.6\" \/>\n\n \n <circle cx=\"61\" cy=\"62\" r=\"3.2\" fill=\"var(--accent)\" stroke=\"var(--accent)\" \/>\n\n \n <path d=\"M41 44 L37 46\" stroke-width=\"2\" \/>\n <path d=\"M59 44 L61 45\" stroke-width=\"2\" \/>\n\n \n <circle cx=\"43\" cy=\"32\" r=\"1.2\" fill=\"currentColor\" \/>\n <circle cx=\"57\" cy=\"32\" r=\"1.2\" fill=\"currentColor\" \/>\n\n \n <path d=\"M37 77 Q50 72 63 77\" stroke=\"var(--accent)\" stroke-width=\"1.5\" stroke-dasharray=\"1 3\" \/>\n <\/svg>\n <\/div>\n\n \n <h2 id=\"out-shloka-sanskrit\" class=\"font-devanagari text-base sm:text-lg font-bold tracking-widest text-[var(--primary)] leading-tight\">\n || \u0936\u094d\u0930\u0940 \u0917\u0923\u0947\u0936\u093e\u092f \u0928\u092e\u0903 ||\n <\/h2>\n <p id=\"out-shloka-english\" class=\"font-cinzel text-[10px] tracking-widest text-[var(--accent)] font-semibold uppercase mt-0.5\">\n || Om Sri Ganeshaya Namaha ||\n <\/p>\n\n \n <div class=\"mt-2 pb-1.5 border-b-2 border-[var(--border)] flex items-center justify-center\">\n <div class=\"text-center px-4\">\n <h1 id=\"out-name\" class=\"font-cinzel text-xl sm:text-2xl font-bold text-[var(--heading)] tracking-wide\">\n Aarav Sharma\n <\/h1>\n <p class=\"font-sans text-[10.5px] font-medium text-stone-500 tracking-widest uppercase mt-0.5\">\n Marriage Bio Data\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"flex-1 space-y-2.5 text-[11.5px] sm:text-[12px] leading-relaxed pt-0.5\">\n\n \n <div class=\"flex flex-col-reverse sm:flex-row items-center sm:items-start justify-between gap-3 bg-[var(--accent-soft)] p-2.5 sm:p-3 rounded-xl border border-[var(--border)] border-opacity-40\">\n <div class=\"w-full space-y-1\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-3 gap-y-1\">\n <div class=\"flex items-baseline\"><span class=\"w-24 text-[var(--subtext)] font-medium shrink-0\">Date of Birth:<\/span> <span id=\"out-dob\" class=\"font-semibold text-stone-800\">14 October 1996<\/span><\/div>\n <div class=\"flex items-baseline\"><span class=\"w-24 text-[var(--subtext)] font-medium shrink-0\">Time of Birth:<\/span> <span id=\"out-tob\" class=\"font-semibold text-stone-800\">09:25 AM<\/span><\/div>\n <div class=\"flex items-baseline\"><span class=\"w-24 text-[var(--subtext)] font-medium shrink-0\">Place of Birth:<\/span> <span id=\"out-pob\" class=\"font-semibold text-stone-800\">Pune, Maharashtra<\/span><\/div>\n <div class=\"flex items-baseline\"><span class=\"w-24 text-[var(--subtext)] font-medium shrink-0\">Height:<\/span> <span id=\"out-height\" class=\"font-semibold text-stone-800\">5′ 10″ (178 cm)<\/span><\/div>\n <div class=\"flex items-baseline\"><span class=\"w-24 text-[var(--subtext)] font-medium shrink-0\">Complexion:<\/span> <span id=\"out-complexion\" class=\"font-semibold text-stone-800\">Fair & Athletic<\/span><\/div>\n <div class=\"flex items-baseline\"><span class=\"w-24 text-[var(--subtext)] font-medium shrink-0\">Blood Group:<\/span> <span id=\"out-blood-group\" class=\"font-semibold text-stone-800\">B+ Positive<\/span><\/div>\n <div class=\"flex items-baseline\"><span class=\"w-24 text-[var(--subtext)] font-medium shrink-0\">Mother Tongue:<\/span> <span id=\"out-mother-tongue\" class=\"font-semibold text-stone-800\">Hindi<\/span><\/div>\n <div class=\"flex items-baseline\"><span class=\"w-24 text-[var(--subtext)] font-medium shrink-0\">Marital Status:<\/span> <span id=\"out-marital-status\" class=\"font-semibold text-stone-800\">Never Married<\/span><\/div>\n <\/div>\n <div class=\"pt-1 border-t border-[var(--border)] border-opacity-30 flex items-baseline\">\n <span class=\"w-24 text-[var(--subtext)] font-medium shrink-0\">Religion \/ Caste:<\/span>\n <span id=\"out-caste\" class=\"font-semibold text-stone-800\">Hindu – Brahmin (Kanyakubja)<\/span>\n <\/div>\n <\/div>\n\n \n <div id=\"out-photo-wrap\" class=\"shrink-0 flex flex-col items-center\">\n <div class=\"w-20 h-26 sm:w-24 sm:h-30 arch-frame overflow-hidden border-2 border-[var(--accent)] shadow-xs bg-white p-0.5\">\n <img decoding=\"async\" id=\"out-photo-img\" src=\"https:\/\/images.unsplash.com\/photo-1507003211169-0a1dd7228f2d?w=300&auto=format&fit=crop&q=80\" alt=\"Candidate Portrait\" class=\"w-full h-full object-cover arch-frame\" crossorigin=\"anonymous\">\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"space-y-1\">\n <div class=\"flex items-center space-x-1.5 border-b border-[var(--border)] border-opacity-40 pb-0.5\">\n <span class=\"text-[var(--accent)] text-xs font-bold\">\u2756<\/span>\n <h4 class=\"font-cinzel font-bold text-xs tracking-wider text-[var(--heading)] uppercase\">Horoscope & Kundali Details<\/h4>\n <\/div>\n <div class=\"grid grid-cols-2 sm:grid-cols-3 gap-x-3 gap-y-1 pt-0.5 text-[11px] sm:text-[11.5px]\">\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">Rashi (Moon Sign)<\/span><span id=\"out-rashi\" class=\"font-semibold text-stone-800\">Tula (Libra)<\/span><\/div>\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">Nakshatra & Charan<\/span><span id=\"out-nakshatra\" class=\"font-semibold text-stone-800\">Swati (Charan 2)<\/span><\/div>\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">Gotra<\/span><span id=\"out-gotra\" class=\"font-semibold text-stone-800\">Kashyap<\/span><\/div>\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">Manglik Status<\/span><span id=\"out-manglik\" class=\"font-semibold text-stone-800\">Non-Manglik<\/span><\/div>\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">Lagna (Ascendant)<\/span><span id=\"out-lagna\" class=\"font-semibold text-stone-800\">Vrishabh (Taurus)<\/span><\/div>\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">Gana & Nadi<\/span><span id=\"out-gana\" class=\"font-semibold text-stone-800\">Dev Gana, Antya Nadi<\/span><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"space-y-1\">\n <div class=\"flex items-center space-x-1.5 border-b border-[var(--border)] border-opacity-40 pb-0.5\">\n <span class=\"text-[var(--accent)] text-xs font-bold\">\u2756<\/span>\n <h4 class=\"font-cinzel font-bold text-xs tracking-wider text-[var(--heading)] uppercase\">Education & Profession<\/h4>\n <\/div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-3 gap-y-1 pt-0.5 text-[11px] sm:text-[11.5px]\">\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">Highest Qualification<\/span><span id=\"out-education\" class=\"font-semibold text-stone-800\">B.Tech (Computer Science) & M.S.<\/span><\/div>\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">University \/ Alma Mater<\/span><span id=\"out-college\" class=\"font-semibold text-stone-800\">IIT Bombay & RWTH Aachen University<\/span><\/div>\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">Designation & Role<\/span><span id=\"out-occupation\" class=\"font-semibold text-stone-800\">Senior Software Architect<\/span><\/div>\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">Organization \/ Employer<\/span><span id=\"out-company\" class=\"font-semibold text-stone-800\">Global Tech Solutions GmbH<\/span><\/div>\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">Annual Income<\/span><span id=\"out-income\" class=\"font-semibold text-stone-800\">\u20ac 88,000 p.a. (Approx. \u20b9 78 LPA)<\/span><\/div>\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">Work Location<\/span><span id=\"out-work-location\" class=\"font-semibold text-stone-800\">Frankfurt, Germany<\/span><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"space-y-1\">\n <div class=\"flex items-center space-x-1.5 border-b border-[var(--border)] border-opacity-40 pb-0.5\">\n <span class=\"text-[var(--accent)] text-xs font-bold\">\u2756<\/span>\n <h4 class=\"font-cinzel font-bold text-xs tracking-wider text-[var(--heading)] uppercase\">Family Details<\/h4>\n <\/div>\n <div class=\"space-y-1 pt-0.5 text-[11px] sm:text-[11.5px]\">\n <div class=\"flex flex-col sm:flex-row sm:items-baseline\"><span class=\"w-32 text-[var(--subtext)] font-medium shrink-0\">Father’s Details:<\/span> <span id=\"out-father\" class=\"font-semibold text-stone-800\">Mr. Rajesh Sharma (Retd. Chief Engineer, Railways)<\/span><\/div>\n <div class=\"flex flex-col sm:flex-row sm:items-baseline\"><span class=\"w-32 text-[var(--subtext)] font-medium shrink-0\">Mother’s Details:<\/span> <span id=\"out-mother\" class=\"font-semibold text-stone-800\">Mrs. Sunita Sharma (Senior High School Educator)<\/span><\/div>\n <div class=\"flex flex-col sm:flex-row sm:items-baseline\"><span class=\"w-32 text-[var(--subtext)] font-medium shrink-0\">Brothers & Sisters:<\/span> <span id=\"out-siblings\" class=\"font-semibold text-stone-800\">1 Younger Sister (Married, Architect in London)<\/span><\/div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2 pt-0.5\">\n <div class=\"flex items-baseline\"><span class=\"w-32 text-[var(--subtext)] font-medium shrink-0\">Family Values:<\/span> <span id=\"out-family-values\" class=\"font-semibold text-stone-800\">Nuclear Family \/ Cultured Moderate<\/span><\/div>\n <div class=\"flex items-baseline\"><span class=\"w-24 text-[var(--subtext)] font-medium shrink-0\">Native Roots:<\/span> <span id=\"out-native\" class=\"font-semibold text-stone-800\">Jaipur, Rajasthan<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"space-y-1\">\n <div class=\"flex items-center space-x-1.5 border-b border-[var(--border)] border-opacity-40 pb-0.5\">\n <span class=\"text-[var(--accent)] text-xs font-bold\">\u2756<\/span>\n <h4 class=\"font-cinzel font-bold text-xs tracking-wider text-[var(--heading)] uppercase\">Hobbies, Likes & Future Aspirations<\/h4>\n <\/div>\n <div class=\"space-y-1 pt-0.5 text-[11px] sm:text-[11.5px]\">\n <div class=\"flex flex-col sm:flex-row sm:items-baseline\">\n <span class=\"w-32 text-[var(--subtext)] font-medium shrink-0\">Hobbies & Interests:<\/span>\n <span id=\"out-hobbies\" class=\"font-semibold text-stone-800\">Classical Indian flute, Alpine hiking, Vedic philosophy, Cooking<\/span>\n <\/div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2\">\n <div class=\"flex flex-col sm:flex-row sm:items-baseline\">\n <span class=\"w-16 text-[var(--subtext)] font-medium shrink-0\">Likes:<\/span>\n <span id=\"out-likes\" class=\"font-semibold text-stone-800\">Nature trails, peaceful mornings, acoustic concerts<\/span>\n <\/div>\n <div class=\"flex flex-col sm:flex-row sm:items-baseline\">\n <span class=\"w-16 text-[var(--subtext)] font-medium shrink-0\">Dislikes:<\/span>\n <span id=\"out-dislikes\" class=\"font-semibold text-stone-800\">Smoking, dishonesty, clutter & unpunctuality<\/span>\n <\/div>\n <\/div>\n <div class=\"flex flex-col sm:flex-row sm:items-baseline pt-0.5\">\n <span class=\"w-32 text-[var(--subtext)] font-medium shrink-0\">Future Plans:<\/span>\n <span id=\"out-future-plans\" class=\"text-stone-800 leading-snug\">Planning to establish sustainable tech solutions in Europe and subsequently in India. Values spiritual living and mindful career growth.<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-[var(--accent-soft)] p-2.5 sm:p-3 rounded-xl border border-[var(--border)] border-opacity-40 space-y-1\">\n <div class=\"flex items-center justify-between border-b border-[var(--border)] border-opacity-40 pb-1\">\n <div class=\"flex items-center space-x-1.5\">\n <span class=\"text-[var(--accent)] text-xs font-bold\">\u2756<\/span>\n <h4 class=\"font-cinzel font-bold text-xs tracking-wider text-[var(--heading)] uppercase\">Partner Preferences & Expectations<\/h4>\n <\/div>\n <span id=\"out-partner-badge\" class=\"px-2 py-0.5 rounded-full text-[9.5px] font-bold uppercase tracking-wider bg-[var(--badge-bg)] border border-[var(--badge-border)] text-[var(--primary)]\">\n Seeking Bride\n <\/span>\n <\/div>\n\n <div class=\"grid grid-cols-2 sm:grid-cols-4 gap-2 text-[10.5px] pt-0.5\">\n <div>\n <span class=\"text-[var(--subtext)] block text-[9px]\">Age Range<\/span>\n <span id=\"out-partner-age\" class=\"font-semibold text-stone-800\">24 – 28 Years<\/span>\n <\/div>\n <div>\n <span class=\"text-[var(--subtext)] block text-[9px]\">Height<\/span>\n <span id=\"out-partner-height\" class=\"font-semibold text-stone-800\">5′ 2″ to 5′ 7″<\/span>\n <\/div>\n <div>\n <span class=\"text-[var(--subtext)] block text-[9px]\">Diet Habits<\/span>\n <span id=\"out-partner-diet\" class=\"font-semibold text-stone-800\">Vegetarian \/ Flexible<\/span>\n <\/div>\n <div>\n <span class=\"text-[var(--subtext)] block text-[9px]\">Location<\/span>\n <span id=\"out-partner-location\" class=\"font-semibold text-stone-800\">Open to Europe \/ India<\/span>\n <\/div>\n <\/div>\n\n <div class=\"pt-1 border-t border-[var(--border)] border-opacity-25 text-[10.5px] space-y-0.5\">\n <div class=\"flex flex-col sm:flex-row sm:items-baseline\">\n <span class=\"w-32 text-[var(--subtext)] font-medium shrink-0\">Education & Work:<\/span>\n <span id=\"out-partner-edu\" class=\"font-semibold text-stone-800\">Graduate\/Postgraduate working professionally (IT, Medicine, Finance, Architecture).<\/span>\n <\/div>\n <div class=\"flex flex-col sm:flex-row sm:items-baseline\">\n <span class=\"w-32 text-[var(--subtext)] font-medium shrink-0\">Expectations:<\/span>\n <span id=\"out-partner-expectations\" class=\"text-stone-800 leading-snug\">Looking for a warm, educated, and cheerful life partner who values shared cultural heritage, mutual respect, open communication, and individual personal growth.<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"space-y-1\">\n <div class=\"flex items-center space-x-1.5 border-b border-[var(--border)] border-opacity-40 pb-0.5\">\n <span class=\"text-[var(--accent)] text-xs font-bold\">\u2756<\/span>\n <h4 class=\"font-cinzel font-bold text-xs tracking-wider text-[var(--heading)] uppercase\">Contact Details<\/h4>\n <\/div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-3 gap-y-1 pt-0.5 text-[11px] sm:text-[11.5px]\">\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">Contact Person<\/span><span id=\"out-contact-person\" class=\"font-semibold text-stone-800\">Mr. Rajesh Sharma (Father)<\/span><\/div>\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">Phone \/ WhatsApp<\/span><span id=\"out-phone\" class=\"font-semibold text-stone-800\">+49 176 12345678 \/ +91 98765 43210<\/span><\/div>\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">Email Address<\/span><span id=\"out-email\" class=\"font-semibold text-stone-800\">family.sharma96@example.com<\/span><\/div>\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">Residence<\/span><span id=\"out-address\" class=\"font-semibold text-stone-800\">Flat 402, Shivam Residency, Baner, Pune – 411045<\/span><\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"pt-3 pb-0.5 text-center border-t border-[var(--border)] border-opacity-40 mt-2 flex items-center justify-between text-[10.5px] text-stone-500\">\n <span class=\"italic text-[var(--accent)] font-cinzel tracking-wider\">|| \u0936\u0941\u092d \u0935\u093f\u0935\u093e\u0939 \u0938\u0902\u0927\u093e\u0928\u092e\u094d ||<\/span>\n <span class=\"text-stone-400 font-medium\">Created via <strong class=\"text-stone-700 font-semibold\">srabons.de<\/strong><\/span>\n <\/div>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n\n <\/section>\n\n <\/main>\n\n \n <div id=\"mobile-bottom-bar\" class=\"no-print lg:hidden fixed bottom-0 left-0 right-0 z-40 bg-white\/95 backdrop-blur-md border-t border-stone-200 px-3 py-2 flex items-center justify-between shadow-lg\">\n <div class=\"flex items-center space-x-1.5 w-full\">\n <button onclick=\"downloadAsPDF()\" class=\"flex-1 py-2 px-2 bg-gradient-to-r from-red-800 to-amber-700 text-white rounded-xl font-semibold text-xs flex items-center justify-center space-x-1 shadow-sm active:scale-95 transition-transform\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\/><\/svg>\n <span>Download PDF<\/span>\n <\/button>\n\n <button onclick=\"downloadAsImage()\" class=\"flex-1 py-2 px-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-semibold text-xs flex items-center justify-center space-x-1 shadow-sm active:scale-95 transition-transform\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\/><\/svg>\n <span>Share Image<\/span>\n <\/button>\n\n <button onclick=\"toggleMobileViewQuick()\" id=\"btn-quick-toggle\" class=\"p-2 border border-stone-300 rounded-xl bg-stone-100 text-stone-700 shrink-0\">\n <svg id=\"icon-quick-preview\" class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"\/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"loading-modal\" class=\"fixed inset-0 bg-stone-900\/60 backdrop-blur-xs z-50 hidden flex items-center justify-center p-4\">\n <div class=\"bg-white rounded-2xl max-w-xs w-full p-6 shadow-2xl border border-stone-200 text-center space-y-3.5\">\n <div class=\"relative w-14 h-14 mx-auto\">\n <div class=\"w-14 h-14 rounded-full border-4 border-amber-200 border-t-amber-700 animate-spin\"><\/div>\n <div class=\"absolute inset-0 flex items-center justify-center text-amber-800 font-cinzel text-xs font-bold\">\u5350<\/div>\n <\/div>\n <div>\n <h4 id=\"loading-title\" class=\"text-sm font-bold text-stone-900\">Preparing Bio Data…<\/h4>\n <p id=\"loading-desc\" class=\"text-xs text-stone-500 mt-1\">Generating high-resolution document for mobile download.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"reset-modal\" class=\"fixed inset-0 bg-stone-900\/50 backdrop-blur-xs z-50 hidden flex items-center justify-center p-4\">\n <div class=\"bg-white rounded-2xl max-w-sm w-full p-6 shadow-xl border border-stone-200 text-center space-y-4\">\n <div class=\"w-12 h-12 rounded-full bg-red-100 text-red-700 flex items-center justify-center mx-auto\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\/><\/svg>\n <\/div>\n <div>\n <h3 class=\"text-base font-bold text-stone-900\">Reset Bio Data Form?<\/h3>\n <p class=\"text-xs text-stone-500 mt-1\">This will clear all details. You can easily click ‘Sample Data’ anytime to reload the prefilled layout.<\/p>\n <\/div>\n <div class=\"flex items-center space-x-2 pt-1\">\n <button type=\"button\" onclick=\"closeResetModal()\" class=\"w-1\/2 py-2 px-3 rounded-lg border border-stone-300 text-xs font-semibold text-stone-700 hover:bg-stone-50\">Cancel<\/button>\n <button type=\"button\" onclick=\"confirmReset()\" class=\"w-1\/2 py-2 px-3 rounded-lg bg-red-700 hover:bg-red-800 text-xs font-semibold text-white shadow-xs\">Yes, Clear All<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"toast\" class=\"fixed bottom-16 sm:bottom-6 right-4 sm:right-6 bg-stone-900 text-white text-xs px-4 py-2.5 rounded-xl shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center space-x-2 pointer-events-none\">\n <svg class=\"w-4 h-4 text-emerald-400 shrink-0\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"\/><\/svg>\n <span id=\"toast-text\">Action completed successfully<\/span>\n <\/div>\n\n \n <script>\n let uploadedPhotoBase64 = \"https:\/\/images.unsplash.com\/photo-1507003211169-0a1dd7228f2d?w=300&auto=format&fit=crop&q=80\";\n let activeTheme = \"theme-royal-maroon\";\n let currentMobileView = \"form\";\n\n \/\/ Synchronize Form Inputs with Live A4 Preview\n function updateLive() {\n \/\/ 1. Shlokas & Invocations\n syncText('out-shloka-sanskrit', 'in-shloka-sanskrit', '|| \u0936\u094d\u0930\u0940 \u0917\u0923\u0947\u0936\u093e\u092f \u0928\u092e\u0903 ||');\n syncText('out-shloka-english', 'in-shloka-english', '|| Om Sri Ganeshaya Namaha ||');\n\n \/\/ 2. Personal Information\n syncText('out-name', 'in-name', 'Candidate Full Name');\n syncText('out-dob', 'in-dob', '-');\n syncText('out-tob', 'in-tob', '-');\n syncText('out-pob', 'in-pob', '-');\n syncText('out-height', 'in-height', '-');\n syncText('out-complexion', 'in-complexion', '-');\n syncText('out-blood-group', 'in-blood-group', '-');\n syncText('out-mother-tongue', 'in-mother-tongue', '-');\n syncText('out-marital-status', 'in-marital-status', 'Never Married');\n syncText('out-caste', 'in-caste', '-');\n\n \/\/ 3. Kundali \/ Astro Details\n syncText('out-rashi', 'in-rashi', '-');\n syncText('out-nakshatra', 'in-nakshatra', '-');\n syncText('out-gotra', 'in-gotra', '-');\n syncText('out-manglik', 'in-manglik', 'Non-Manglik');\n syncText('out-lagna', 'in-lagna', '-');\n syncText('out-gana', 'in-gana', '-');\n\n \/\/ 4. Education & Profession\n syncText('out-education', 'in-education', '-');\n syncText('out-college', 'in-college', '-');\n syncText('out-occupation', 'in-occupation', '-');\n syncText('out-company', 'in-company', '-');\n syncText('out-income', 'in-income', '-');\n syncText('out-work-location', 'in-work-location', '-');\n\n \/\/ 5. Family Details\n syncText('out-father', 'in-father', '-');\n syncText('out-mother', 'in-mother', '-');\n syncText('out-siblings', 'in-siblings', '-');\n syncText('out-family-values', 'in-family-values', '-');\n syncText('out-native', 'in-native', '-');\n\n \/\/ 6. Lifestyle, Hobbies & Future Plans\n syncText('out-hobbies', 'in-hobbies', '-');\n syncText('out-likes', 'in-likes', '-');\n syncText('out-dislikes', 'in-dislikes', '-');\n syncText('out-future-plans', 'in-future-plans', '-');\n\n \/\/ 7. Partner Preferences & Expectations\n const seekingVal = document.getElementById('in-partner-seeking').value;\n const partnerBadge = document.getElementById('out-partner-badge');\n if (partnerBadge) {\n partnerBadge.textContent = seekingVal === 'Groom' ? 'Seeking Groom' : 'Seeking Bride';\n }\n syncText('out-partner-age', 'in-partner-age', '-');\n syncText('out-partner-height', 'in-partner-height', '-');\n syncText('out-partner-diet', 'in-partner-diet', '-');\n syncText('out-partner-location', 'in-partner-location', '-');\n syncText('out-partner-edu', 'in-partner-edu', '-');\n syncText('out-partner-expectations', 'in-partner-expectations', '-');\n\n \/\/ 8. Contact Information\n syncText('out-contact-person', 'in-contact-person', '-');\n syncText('out-phone', 'in-phone', '-');\n syncText('out-email', 'in-email', '-');\n syncText('out-address', 'in-address', '-');\n\n \/\/ Candidate Photo Toggle\n const photoToggle = document.getElementById('in-photo-toggle').checked;\n const photoWrap = document.getElementById('out-photo-wrap');\n if (photoToggle && uploadedPhotoBase64) {\n photoWrap.classList.remove('hidden');\n document.getElementById('out-photo-img').src = uploadedPhotoBase64;\n } else {\n photoWrap.classList.add('hidden');\n }\n }\n\n function syncText(targetId, sourceId, placeholder) {\n const src = document.getElementById(sourceId);\n const tgt = document.getElementById(targetId);\n if (src && tgt) {\n const val = src.value.trim();\n tgt.textContent = val !== \"\" ? val : placeholder;\n }\n }\n\n \/\/ Photo Upload Handler\n function processPhotoUpload(e) {\n const file = e.target.files[0];\n if (!file) return;\n\n if (!file.type.startsWith('image\/')) {\n showToast('Please select a valid image file');\n return;\n }\n\n const reader = new FileReader();\n reader.onload = function(event) {\n uploadedPhotoBase64 = event.target.result;\n document.getElementById('out-photo-img').src = uploadedPhotoBase64;\n\n const thumb = document.getElementById('photo-thumb-container');\n thumb.innerHTML = `<img decoding=\"async\" src=\"${uploadedPhotoBase64}\" class=\"w-full h-full object-cover\">`;\n\n document.getElementById('btn-photo-remove').classList.remove('hidden');\n document.getElementById('in-photo-toggle').checked = true;\n updateLive();\n showToast('Candidate photo loaded');\n };\n reader.readAsDataURL(file);\n }\n\n function removePhoto() {\n uploadedPhotoBase64 = \"\";\n document.getElementById('in-photo-file').value = \"\";\n document.getElementById('photo-thumb-container').innerHTML = `\n <svg class=\"w-6 h-6 text-stone-300\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\/><\/svg>\n `;\n document.getElementById('btn-photo-remove').classList.add('hidden');\n updateLive();\n showToast('Candidate photo removed');\n }\n\n \/\/ Sacred Theme Swapping\n function applyTheme(themeClass, el) {\n activeTheme = themeClass;\n const sheet = document.getElementById('biodata-sheet');\n sheet.className = `a4-page ${themeClass} shadow-2xl rounded-sm border border-stone-200 relative p-5 sm:p-8 flex flex-col justify-between`;\n\n document.querySelectorAll('.theme-choice-btn').forEach(btn => {\n btn.classList.remove('border-2', 'border-red-800', 'bg-red-50', 'border-amber-700', 'bg-amber-50');\n btn.classList.add('border-stone-200');\n });\n\n if (el) {\n el.classList.add('border-2', 'border-red-800', 'bg-red-50');\n }\n showToast('Theme updated');\n }\n\n \/\/ Accordion Toggle\n function toggleSection(id) {\n const sec = document.getElementById(id);\n const arr = document.getElementById('arr-' + id);\n if (sec.classList.contains('hidden')) {\n sec.classList.remove('hidden');\n if (arr) arr.classList.add('rotate-180');\n } else {\n sec.classList.add('hidden');\n if (arr) arr.classList.remove('rotate-180');\n }\n }\n\n \/\/ Mobile View Tab Switcher\n function switchMobileTab(view) {\n currentMobileView = view;\n const formPanel = document.getElementById('form-panel');\n const previewPanel = document.getElementById('preview-panel');\n const tabForm = document.getElementById('tab-btn-form');\n const tabPrev = document.getElementById('tab-btn-preview');\n\n if (view === 'form') {\n formPanel.classList.remove('hidden');\n previewPanel.classList.add('hidden');\n tabForm.classList.add('bg-white', 'text-stone-900', 'shadow-xs');\n tabForm.classList.remove('text-stone-600');\n tabPrev.classList.remove('bg-white', 'text-stone-900', 'shadow-xs');\n tabPrev.classList.add('text-stone-600');\n } else {\n formPanel.classList.add('hidden');\n previewPanel.classList.remove('hidden');\n tabPrev.classList.add('bg-white', 'text-stone-900', 'shadow-xs');\n tabPrev.classList.remove('text-stone-600');\n tabForm.classList.remove('bg-white', 'text-stone-900', 'shadow-xs');\n tabForm.classList.add('text-stone-600');\n }\n }\n\n function toggleMobileViewQuick() {\n switchMobileTab(currentMobileView === 'form' ? 'preview' : 'form');\n }\n\n \/\/ ========================================================\n \/\/ CRITICAL ENGINE: MOBILE OFF-SCREEN STAGING EXPORT\n \/\/ Overcomes hidden elements, mobile viewports & blank canvas\n \/\/ ========================================================\n function createStagedBiodataElement() {\n \/\/ 1. Ensure live preview data is 100% current\n updateLive();\n\n const originalSheet = document.getElementById('biodata-sheet');\n const clone = originalSheet.cloneNode(true);\n clone.id = 'biodata-staged-clone';\n\n \/\/ 2. Set strict pixel dimensions corresponding to 794px A4 standard width (96-150 DPI)\n clone.style.width = '794px';\n clone.style.maxWidth = '794px';\n clone.style.minHeight = '1123px';\n clone.style.margin = '0 auto';\n clone.style.boxShadow = 'none';\n clone.style.transform = 'none';\n\n \/\/ 3. Staging container positioned offscreen but fully visible to html2canvas\n const stagingContainer = document.createElement('div');\n stagingContainer.id = 'pdf-staging-wrapper';\n stagingContainer.style.position = 'fixed';\n stagingContainer.style.left = '-9999px';\n stagingContainer.style.top = '0';\n stagingContainer.style.width = '820px';\n stagingContainer.style.zIndex = '-9999';\n stagingContainer.style.background = '#ffffff';\n stagingContainer.style.overflow = 'visible';\n\n stagingContainer.appendChild(clone);\n document.body.appendChild(stagingContainer);\n\n return { stagingContainer, clone };\n }\n\n function cleanupStaging(stagingContainer) {\n if (stagingContainer && stagingContainer.parentNode) {\n stagingContainer.parentNode.removeChild(stagingContainer);\n }\n }\n\n \/\/ ========================================================\n \/\/ DOWNLOAD AS HIGH-RESOLUTION PDF (html2pdf.js)\n \/\/ ========================================================\n async function downloadAsPDF() {\n showLoading('Generating Auspicious PDF...', 'Rendering high-resolution A4 document for your phone...');\n\n const candidateName = (document.getElementById('in-name').value.trim() || 'Candidate').replace(\/[^a-zA-Z0-9_-]\/g, '_');\n const fileName = `Hindu_Marriage_Biodata_${candidateName}.pdf`;\n\n const { stagingContainer, clone } = createStagedBiodataElement();\n\n \/\/ Ensure clone portrait image is ready\n const cloneImg = clone.querySelector('#out-photo-img');\n if (cloneImg && !cloneImg.complete) {\n await new Promise((resolve) => {\n cloneImg.onload = resolve;\n cloneImg.onerror = resolve;\n setTimeout(resolve, 600);\n });\n }\n\n \/\/ Small pause to allow styles and fonts to paint in staging\n await new Promise(r => setTimeout(r, 200));\n\n const opt = {\n margin: [4, 4, 4, 4], \/\/ mm margin\n filename: fileName,\n image: { type: 'jpeg', quality: 0.98 },\n html2canvas: {\n scale: 2.2, \/\/ Crisp retina scaling\n useCORS: true,\n allowTaint: true,\n logging: false,\n scrollY: 0,\n scrollX: 0\n },\n jsPDF: {\n unit: 'mm',\n format: 'a4',\n orientation: 'portrait'\n }\n };\n\n try {\n await html2pdf().set(opt).from(clone).save();\n showToast('PDF downloaded successfully');\n } catch (err) {\n console.error('html2pdf generation error:', err);\n showToast('Direct PDF failed, opening system print...');\n window.print();\n } finally {\n cleanupStaging(stagingContainer);\n hideLoading();\n }\n }\n\n \/\/ ========================================================\n \/\/ DOWNLOAD AS HIGH-RESOLUTION PNG (html2canvas)\n \/\/ Ideal for WhatsApp & Social Sharing\n \/\/ ========================================================\n async function downloadAsImage() {\n showLoading('Generating HD Image...', 'Rendering WhatsApp-friendly portrait image...');\n\n const candidateName = (document.getElementById('in-name').value.trim() || 'Candidate').replace(\/[^a-zA-Z0-9_-]\/g, '_');\n const fileName = `Hindu_Marriage_Biodata_${candidateName}.png`;\n\n const { stagingContainer, clone } = createStagedBiodataElement();\n\n const cloneImg = clone.querySelector('#out-photo-img');\n if (cloneImg && !cloneImg.complete) {\n await new Promise((resolve) => {\n cloneImg.onload = resolve;\n cloneImg.onerror = resolve;\n setTimeout(resolve, 600);\n });\n }\n\n await new Promise(r => setTimeout(r, 200));\n\n try {\n const canvas = await html2canvas(clone, {\n scale: 2.2,\n useCORS: true,\n allowTaint: true,\n backgroundColor: '#FFFDF9',\n width: 794,\n windowWidth: 794\n });\n\n const imageUri = canvas.toDataURL('image\/png');\n const link = document.createElement('a');\n link.download = fileName;\n link.href = imageUri;\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n\n showToast('High-res image downloaded');\n } catch (err) {\n console.error('Image generation error:', err);\n showToast('Could not generate image');\n } finally {\n cleanupStaging(stagingContainer);\n hideLoading();\n }\n }\n\n \/\/ Modal & Toast Helpers\n function showLoading(title, desc) {\n document.getElementById('loading-title').textContent = title;\n document.getElementById('loading-desc').textContent = desc;\n document.getElementById('loading-modal').classList.remove('hidden');\n }\n\n function hideLoading() {\n document.getElementById('loading-modal').classList.add('hidden');\n }\n\n function openResetModal() {\n document.getElementById('reset-modal').classList.remove('hidden');\n }\n\n function closeResetModal() {\n document.getElementById('reset-modal').classList.add('hidden');\n }\n\n function confirmReset() {\n document.getElementById('biodata-form').reset();\n removePhoto();\n updateLive();\n closeResetModal();\n showToast('All form fields cleared');\n }\n\n function showToast(msg) {\n const toast = document.getElementById('toast');\n const text = document.getElementById('toast-text');\n text.textContent = msg;\n toast.classList.remove('translate-y-20', 'opacity-0');\n toast.classList.add('translate-y-0', 'opacity-100');\n setTimeout(() => {\n toast.classList.add('translate-y-20', 'opacity-0');\n toast.classList.remove('translate-y-0', 'opacity-100');\n }, 3200);\n }\n\n \/\/ Rich Sample Profile Loader\n function fillSampleData() {\n document.getElementById('in-shloka-sanskrit').value = \"|| \u0936\u094d\u0930\u0940 \u0917\u0923\u0947\u0936\u093e\u092f \u0928\u092e\u0903 ||\";\n document.getElementById('in-shloka-english').value = \"|| Om Sri Ganeshaya Namaha ||\";\n\n document.getElementById('in-name').value = \"Aarav Sharma\";\n document.getElementById('in-dob').value = \"14th October 1996\";\n document.getElementById('in-tob').value = \"09:25 AM\";\n document.getElementById('in-pob').value = \"Pune, Maharashtra\";\n document.getElementById('in-height').value = \"5' 10\\\" (178 cm)\";\n document.getElementById('in-complexion').value = \"Fair & Athletic\";\n document.getElementById('in-blood-group').value = \"B+ Positive\";\n document.getElementById('in-mother-tongue').value = \"Hindi\";\n document.getElementById('in-marital-status').value = \"Never Married\";\n document.getElementById('in-caste').value = \"Hindu - Brahmin (Kanyakubja)\";\n\n document.getElementById('in-rashi').value = \"Tula (Libra)\";\n document.getElementById('in-nakshatra').value = \"Swati (Charan 2)\";\n document.getElementById('in-gotra').value = \"Kashyap\";\n document.getElementById('in-manglik').value = \"Non-Manglik\";\n document.getElementById('in-lagna').value = \"Vrishabh (Taurus)\";\n document.getElementById('in-gana').value = \"Dev Gana, Antya Nadi\";\n\n document.getElementById('in-education').value = \"B.Tech (Computer Science) & M.S.\";\n document.getElementById('in-college').value = \"IIT Bombay & RWTH Aachen University\";\n document.getElementById('in-occupation').value = \"Senior Software Architect\";\n document.getElementById('in-company').value = \"Global Tech Solutions GmbH\";\n document.getElementById('in-income').value = \"\u20ac 88,000 p.a. (Approx. \u20b9 78 LPA)\";\n document.getElementById('in-work-location').value = \"Frankfurt, Germany\";\n\n document.getElementById('in-father').value = \"Mr. Rajesh Sharma (Retd. Chief Engineer, Railways)\";\n document.getElementById('in-mother').value = \"Mrs. Sunita Sharma (Senior High School Educator)\";\n document.getElementById('in-siblings').value = \"1 Younger Sister (Married, Architect in London)\";\n document.getElementById('in-family-values').value = \"Nuclear Family \/ Cultured Moderate\";\n document.getElementById('in-native').value = \"Jaipur, Rajasthan\";\n\n document.getElementById('in-hobbies').value = \"Classical Indian flute, Alpine hiking, Vedic philosophy, Cooking\";\n document.getElementById('in-likes').value = \"Nature trails, peaceful mornings, acoustic concerts, artisanal tea\";\n document.getElementById('in-dislikes').value = \"Smoking, dishonesty, clutter & unpunctuality\";\n document.getElementById('in-future-plans').value = \"Planning to continue working in Europe for the next 4-5 years before establishing an eco-friendly tech venture in India. Values spiritual living and mindful career growth.\";\n\n document.getElementById('in-partner-seeking').value = \"Bride\";\n document.getElementById('in-partner-age').value = \"24 - 28 Years\";\n document.getElementById('in-partner-height').value = \"5' 2\\\" to 5' 7\\\"\";\n document.getElementById('in-partner-diet').value = \"Vegetarian \/ Flexible\";\n document.getElementById('in-partner-location').value = \"Open to Europe \/ India\";\n document.getElementById('in-partner-edu').value = \"Graduate\/Postgraduate working professionally (IT, Medicine, Finance, Architecture).\";\n document.getElementById('in-partner-expectations').value = \"Looking for a warm, educated, and cheerful life partner who values shared cultural heritage, mutual respect, open communication, and individual personal growth.\";\n\n document.getElementById('in-contact-person').value = \"Mr. Rajesh Sharma (Father)\";\n document.getElementById('in-phone').value = \"+49 176 12345678 \/ +91 98765 43210\";\n document.getElementById('in-email').value = \"family.sharma96@example.com\";\n document.getElementById('in-address').value = \"Flat 402, Shivam Residency, Baner, Pune - 411045\";\n\n uploadedPhotoBase64 = \"https:\/\/images.unsplash.com\/photo-1507003211169-0a1dd7228f2d?w=300&auto=format&fit=crop&q=80\";\n document.getElementById('photo-thumb-container').innerHTML = `<img decoding=\"async\" src=\"${uploadedPhotoBase64}\" class=\"w-full h-full object-cover\">`;\n document.getElementById('btn-photo-remove').classList.remove('hidden');\n document.getElementById('in-photo-toggle').checked = true;\n\n updateLive();\n showToast('Sample matrimonial profile loaded');\n }\n\n \/\/ App Initialization\n window.onload = function() {\n updateLive();\n if (window.innerWidth < 1024) {\n switchMobileTab('form');\n }\n };\n <\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Hindu Marriage Bio Data Builder | srabons.de srabons.de Matrimonial Hindu Marriage Bio Data Builder Sample Data Sample Clear Share PNG Download PDF Studio View: Edit Form Live Preview Sacred Aesthetic Theme Royal Maroon Gold & Sindoor Sandalwood Warm Ochre Peacock Green Sacred Emerald Royal Navy Ivory & Brass 1 Header & Profile Photo Lord Ganesha […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kb_optimizer_status":1,"footnotes":""},"class_list":["post-1006","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages\/1006","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/comments?post=1006"}],"version-history":[{"count":6,"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages\/1006\/revisions"}],"predecessor-version":[{"id":1013,"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages\/1006\/revisions\/1013"}],"wp:attachment":[{"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/media?parent=1006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1006,"date":"2026-10-25T13:51:59","date_gmt":"2026-10-25T13:51:59","guid":{"rendered":"https:\/\/srabons.de\/?page_id=1006"},"modified":"2026-10-25T14:31:18","modified_gmt":"2026-10-25T14:31:18","slug":"hindu-marriage-bio-data","status":"publish","type":"page","link":"https:\/\/srabons.de\/en\/hindu-marriage-bio-data\/","title":{"rendered":"Hindu Marriage Bio Data"},"content":{"rendered":"\n\n\n\n \n \n Hindu Marriage Bio Data Builder | srabons.de<\/title>\n\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@500;600;700;800&family=Noto+Serif+Devanagari:wght@500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600&family=Outfit:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2pdf.js\/0.10.1\/html2pdf.bundle.min.js\"><\/script>\n\n <script>\n tailwind.config = {\n theme: {\n extend: {\n fontFamily: {\n cinzel: ['Cinzel', 'serif'],\n devanagari: ['Noto Serif Devanagari', 'serif'],\n playfair: ['Playfair Display', 'serif'],\n sans: ['Outfit', 'sans-serif'],\n }\n }\n }\n }\n <\/script>\n\n <style>\n \/* ========================================================\n 1. CRITICAL HIGH-CONTRAST FORM INPUT STYLES\n Prevents text from appearing invisible, white, or faded\n across iOS Safari, Chrome Android, and system dark modes.\n ======================================================== *\/\n input[type=\"text\"],\n input[type=\"email\"],\n input[type=\"tel\"],\n textarea,\n select {\n color: #111827 !important; \/* Deep charcoal black *\/\n background-color: #ffffff !important;\n -webkit-text-fill-color: #111827 !important;\n caret-color: #780B1E !important; \/* Auspicious deep maroon caret *\/\n opacity: 1 !important;\n font-weight: 500;\n -webkit-appearance: none;\n appearance: none;\n }\n\n input::placeholder,\n textarea::placeholder {\n color: #9ca3af !important;\n -webkit-text-fill-color: #9ca3af !important;\n opacity: 1 !important;\n font-weight: 400;\n }\n\n select option {\n color: #111827 !important;\n background-color: #ffffff !important;\n }\n\n \/* WebKit Autofill Overrides *\/\n input:-webkit-autofill,\n input:-webkit-autofill:hover,\n input:-webkit-autofill:focus,\n textarea:-webkit-autofill,\n select:-webkit-autofill {\n -webkit-text-fill-color: #111827 !important;\n -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;\n transition: background-color 5000s ease-in-out 0s;\n }\n\n \/* ========================================================\n 2. TRADITIONAL SACRED THEMES FOR BIODATA SHEET\n ======================================================== *\/\n .theme-royal-maroon {\n --primary: #780B1E;\n --primary-dark: #4F0613;\n --accent: #B8860B;\n --accent-soft: #FCF8F2;\n --border: #C59A3F;\n --heading: #780B1E;\n --subtext: #664E3F;\n --sheet-bg: #FFFDF9;\n --badge-bg: #F8EFE4;\n --badge-border: #E8D3B9;\n }\n\n .theme-sandalwood-gold {\n --primary: #8E4A28;\n --primary-dark: #582C15;\n --accent: #CF7A22;\n --accent-soft: #FBF4ED;\n --border: #D98938;\n --heading: #8E4A28;\n --subtext: #6A4B3A;\n --sheet-bg: #FDFBF8;\n --badge-bg: #F7EBDF;\n --badge-border: #E8CFB8;\n }\n\n .theme-peacock-emerald {\n --primary: #154E43;\n --primary-dark: #0A2E27;\n --accent: #B79247;\n --accent-soft: #F3F8F6;\n --border: #A38440;\n --heading: #154E43;\n --subtext: #415A53;\n --sheet-bg: #FDFEFD;\n --badge-bg: #E8F2EF;\n --badge-border: #C4DFD6;\n }\n\n .theme-royal-navy {\n --primary: #1A365D;\n --primary-dark: #0D1E35;\n --accent: #C5A059;\n --accent-soft: #F4F7FB;\n --border: #C5A059;\n --heading: #1A365D;\n --subtext: #4A5B73;\n --sheet-bg: #FCFDFF;\n --badge-bg: #EBF1F9;\n --badge-border: #CBD8EA;\n }\n\n \/* ========================================================\n 3. A4 SHEET DIMENSIONING & DISPLAY\n ======================================================== *\/\n .a4-page {\n width: 100%;\n max-width: 210mm;\n min-height: 297mm;\n background-color: var(--sheet-bg);\n color: #2D2622;\n box-sizing: border-box;\n transition: background-color 0.2s ease, border-color 0.2s ease;\n }\n\n \/* Traditional Indian Arch Framing *\/\n .arch-frame {\n border-top-left-radius: 9999px;\n border-top-right-radius: 9999px;\n border-bottom-left-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n\n \/* Custom Scrollbars *\/\n ::-webkit-scrollbar {\n width: 5px;\n height: 5px;\n }\n ::-webkit-scrollbar-track {\n background: #f1eee7;\n }\n ::-webkit-scrollbar-thumb {\n background: #cfc2b0;\n border-radius: 4px;\n }\n\n \/* ========================================================\n 4. BROWSER PRINT FALLBACK (@media print)\n ======================================================== *\/\n @media print {\n @page {\n size: A4 portrait;\n margin: 8mm;\n }\n body {\n background: #ffffff !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n header, #form-panel, #mobile-nav-bar, #mobile-bottom-bar, #reset-modal, #loading-modal, #toast, .no-print {\n display: none !important;\n }\n #preview-panel {\n display: block !important;\n width: 100% !important;\n max-width: 100% !important;\n padding: 0 !important;\n margin: 0 !important;\n }\n #preview-container {\n overflow: visible !important;\n padding: 0 !important;\n margin: 0 auto !important;\n width: 100% !important;\n }\n #biodata-sheet {\n box-shadow: none !important;\n border: none !important;\n width: 100% !important;\n max-width: 100% !important;\n margin: 0 auto !important;\n -webkit-print-color-adjust: exact !important;\n print-color-adjust: exact !important;\n }\n }\n <\/style>\n<\/head>\n\n<body class=\"bg-[#F4F1EA] text-stone-800 font-sans min-h-screen flex flex-col antialiased selection:bg-amber-200 selection:text-amber-900 pb-20 lg:pb-6\">\n\n \n <header class=\"no-print bg-white\/95 backdrop-blur-md border-b border-stone-200 sticky top-0 z-40 px-3 sm:px-6 py-2.5 shadow-xs\">\n <div class=\"max-w-7xl mx-auto flex items-center justify-between\">\n\n \n <div class=\"flex items-center space-x-2.5\">\n <div class=\"w-9 h-9 sm:w-10 sm:h-10 rounded-full bg-gradient-to-br from-red-800 to-amber-700 flex items-center justify-center text-white shadow-sm ring-2 ring-amber-300 shrink-0\">\n \n <svg class=\"w-5 h-5 sm:w-6 sm:h-6 fill-current\" viewBox=\"0 0 24 24\">\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 14.5h-2V13H8v-2h3V8h2v3h3v2h-3v3.5z\"\/>\n <\/svg>\n <\/div>\n <div>\n <div class=\"flex items-center space-x-1.5\">\n <span class=\"font-cinzel font-bold text-base sm:text-lg text-stone-900 tracking-wider\">srabons<span class=\"text-amber-700\">.de<\/span><\/span>\n <span class=\"text-[9px] sm:text-[10px] font-semibold uppercase tracking-wider px-2 py-0.5 rounded-full bg-amber-100 text-amber-800 border border-amber-200\">Matrimonial<\/span>\n <\/div>\n <p class=\"text-[10px] sm:text-[11px] text-stone-500 font-medium leading-none\">Hindu Marriage Bio Data Builder<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"flex items-center space-x-1.5 sm:space-x-2\">\n <button onclick=\"fillSampleData()\" type=\"button\" class=\"inline-flex items-center space-x-1 px-2.5 py-1.5 text-xs font-semibold text-stone-700 bg-stone-100 hover:bg-stone-200 rounded-lg transition-colors border border-stone-300\">\n <svg class=\"w-3.5 h-3.5 text-amber-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"\/><\/svg>\n <span class=\"hidden sm:inline\">Sample Data<\/span>\n <span class=\"sm:hidden\">Sample<\/span>\n <\/button>\n\n <button onclick=\"openResetModal()\" type=\"button\" class=\"inline-flex items-center space-x-1 px-2.5 py-1.5 text-xs font-semibold text-stone-600 hover:text-red-700 bg-white hover:bg-red-50 rounded-lg transition-colors border border-stone-200\">\n <svg class=\"w-3.5 h-3.5 text-stone-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\/><\/svg>\n <span class=\"hidden sm:inline\">Clear<\/span>\n <\/button>\n\n \n <button onclick=\"downloadAsImage()\" type=\"button\" class=\"hidden sm:inline-flex items-center space-x-1.5 px-3 py-1.5 text-xs font-semibold text-emerald-800 bg-emerald-50 hover:bg-emerald-100 border border-emerald-300 rounded-lg transition-colors shadow-2xs\">\n <svg class=\"w-3.5 h-3.5 text-emerald-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\/><\/svg>\n <span>Share PNG<\/span>\n <\/button>\n\n \n <button onclick=\"downloadAsPDF()\" type=\"button\" class=\"inline-flex items-center space-x-1.5 px-3.5 py-1.5 text-xs sm:text-sm font-semibold text-white bg-gradient-to-r from-red-800 to-amber-700 hover:from-red-900 hover:to-amber-800 rounded-lg shadow-sm hover:shadow transition-all\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\/><\/svg>\n <span class=\"font-medium\">Download PDF<\/span>\n <\/button>\n <\/div>\n\n <\/div>\n <\/header>\n\n \n <div id=\"mobile-nav-bar\" class=\"no-print lg:hidden sticky top-[53px] z-30 bg-stone-100\/95 backdrop-blur-sm border-b border-stone-200 px-4 py-2 flex items-center justify-between\">\n <div class=\"flex items-center space-x-1.5\">\n <span class=\"w-2 h-2 rounded-full bg-emerald-500 animate-pulse\"><\/span>\n <span class=\"text-xs font-semibold text-stone-700\">Studio View:<\/span>\n <\/div>\n <div class=\"flex bg-stone-200\/80 p-0.5 rounded-lg text-xs font-semibold\">\n <button id=\"tab-btn-form\" onclick=\"switchMobileTab('form')\" class=\"px-3 py-1 rounded-md bg-white text-stone-900 shadow-xs transition-all\">Edit Form<\/button>\n <button id=\"tab-btn-preview\" onclick=\"switchMobileTab('preview')\" class=\"px-3 py-1 rounded-md text-stone-600 hover:text-stone-900 transition-all\">Live Preview<\/button>\n <\/div>\n <\/div>\n\n \n <main class=\"max-w-7xl mx-auto w-full px-3 sm:px-6 py-4 sm:py-6 flex-1 flex flex-col lg:flex-row gap-6\">\n\n \n <section id=\"form-panel\" class=\"w-full lg:w-1\/2 flex flex-col space-y-3.5 no-print\">\n\n \n <div class=\"bg-white rounded-2xl border border-stone-200 p-3.5 shadow-xs\">\n <label class=\"block text-xs font-bold text-stone-700 uppercase tracking-wider mb-2\">Sacred Aesthetic Theme<\/label>\n <div class=\"grid grid-cols-2 sm:grid-cols-4 gap-2\">\n\n <button onclick=\"applyTheme('theme-royal-maroon', this)\" class=\"theme-choice-btn border-2 border-red-800 rounded-xl p-2 flex items-center space-x-2 bg-red-50 text-left transition-all\">\n <span class=\"w-4 h-4 rounded-full bg-[#780B1E] ring-1 ring-amber-500 shrink-0\"><\/span>\n <div class=\"text-[11px] leading-tight font-medium text-stone-800\">\n <span class=\"block font-semibold\">Royal Maroon<\/span>\n <span class=\"text-stone-500 text-[10px]\">Gold & Sindoor<\/span>\n <\/div>\n <\/button>\n\n <button onclick=\"applyTheme('theme-sandalwood-gold', this)\" class=\"theme-choice-btn border border-stone-200 rounded-xl p-2 flex items-center space-x-2 hover:bg-stone-50 text-left transition-all\">\n <span class=\"w-4 h-4 rounded-full bg-[#8E4A28] ring-1 ring-amber-400 shrink-0\"><\/span>\n <div class=\"text-[11px] leading-tight font-medium text-stone-800\">\n <span class=\"block font-semibold\">Sandalwood<\/span>\n <span class=\"text-stone-500 text-[10px]\">Warm Ochre<\/span>\n <\/div>\n <\/button>\n\n <button onclick=\"applyTheme('theme-peacock-emerald', this)\" class=\"theme-choice-btn border border-stone-200 rounded-xl p-2 flex items-center space-x-2 hover:bg-stone-50 text-left transition-all\">\n <span class=\"w-4 h-4 rounded-full bg-[#154E43] ring-1 ring-amber-400 shrink-0\"><\/span>\n <div class=\"text-[11px] leading-tight font-medium text-stone-800\">\n <span class=\"block font-semibold\">Peacock Green<\/span>\n <span class=\"text-stone-500 text-[10px]\">Sacred Emerald<\/span>\n <\/div>\n <\/button>\n\n <button onclick=\"applyTheme('theme-royal-navy', this)\" class=\"theme-choice-btn border border-stone-200 rounded-xl p-2 flex items-center space-x-2 hover:bg-stone-50 text-left transition-all\">\n <span class=\"w-4 h-4 rounded-full bg-[#1A365D] ring-1 ring-amber-400 shrink-0\"><\/span>\n <div class=\"text-[11px] leading-tight font-medium text-stone-800\">\n <span class=\"block font-semibold\">Royal Navy<\/span>\n <span class=\"text-stone-500 text-[10px]\">Ivory & Brass<\/span>\n <\/div>\n <\/button>\n\n <\/div>\n <\/div>\n\n \n <form id=\"biodata-form\" onsubmit=\"event.preventDefault();\" class=\"space-y-3\">\n\n \n <div class=\"bg-white rounded-2xl border border-stone-200 shadow-xs overflow-hidden\">\n <button type=\"button\" onclick=\"toggleSection('sec-header')\" class=\"w-full px-4 py-3 bg-stone-50 hover:bg-stone-100 flex items-center justify-between text-left transition-colors\">\n <div class=\"flex items-center space-x-3\">\n <span class=\"w-6 h-6 rounded-md bg-amber-100 text-amber-800 font-bold text-xs flex items-center justify-center\">1<\/span>\n <div>\n <h3 class=\"text-xs sm:text-sm font-bold text-stone-800 font-cinzel\">Header & Profile Photo<\/h3>\n <p class=\"text-[11px] text-stone-500\">Lord Ganesha Inscription and Candidate Photo<\/p>\n <\/div>\n <\/div>\n <svg id=\"arr-sec-header\" class=\"w-4 h-4 text-stone-400 transform transition-transform duration-200 rotate-180\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"\/><\/svg>\n <\/button>\n\n <div id=\"sec-header\" class=\"p-4 space-y-3\">\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-1\">Auspicious Sanskrit \/ English Invocations<\/label>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2\">\n <input type=\"text\" id=\"in-shloka-sanskrit\" value=\"|| \u0936\u094d\u0930\u0940 \u0917\u0923\u0947\u0936\u093e\u092f \u0928\u092e\u0903 ||\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 font-devanagari focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <input type=\"text\" id=\"in-shloka-english\" value=\"|| Om Sri Ganeshaya Namaha ||\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n <\/div>\n\n \n <div class=\"p-3 bg-stone-50 rounded-xl border border-stone-200 flex flex-col sm:flex-row items-center gap-3\">\n <div id=\"photo-thumb-container\" class=\"w-16 h-20 rounded-md border-2 border-dashed border-stone-300 bg-white flex items-center justify-center text-stone-400 overflow-hidden shrink-0\">\n <svg class=\"w-6 h-6 text-stone-300\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\/><\/svg>\n <\/div>\n <div class=\"flex-1 text-center sm:text-left space-y-1.5\">\n <span class=\"text-xs font-semibold text-stone-700 block\">Candidate Formal Photograph<\/span>\n <div class=\"flex flex-wrap items-center justify-center sm:justify-start gap-2\">\n <label class=\"cursor-pointer inline-flex items-center space-x-1.5 px-3 py-1.5 text-xs font-medium text-stone-700 bg-white border border-stone-300 rounded-lg hover:border-amber-600 shadow-2xs\">\n <svg class=\"w-3.5 h-3.5 text-stone-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12\"\/><\/svg>\n <span>Upload Image<\/span>\n <input type=\"file\" id=\"in-photo-file\" accept=\"image\/*\" onchange=\"processPhotoUpload(event)\" class=\"hidden\">\n <\/label>\n <button type=\"button\" id=\"btn-photo-remove\" onclick=\"removePhoto()\" class=\"hidden text-xs text-red-600 hover:text-red-700 font-medium px-2 py-1\">Remove<\/button>\n <label class=\"inline-flex items-center space-x-1.5 text-xs text-stone-600 ml-1\">\n <input type=\"checkbox\" id=\"in-photo-toggle\" checked onchange=\"updateLive()\" class=\"rounded text-amber-600 focus:ring-amber-500\">\n <span>Show in Bio Data<\/span>\n <\/label>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl border border-stone-200 shadow-xs overflow-hidden\">\n <button type=\"button\" onclick=\"toggleSection('sec-personal')\" class=\"w-full px-4 py-3 bg-stone-50 hover:bg-stone-100 flex items-center justify-between text-left transition-colors\">\n <div class=\"flex items-center space-x-3\">\n <span class=\"w-6 h-6 rounded-md bg-amber-100 text-amber-800 font-bold text-xs flex items-center justify-center\">2<\/span>\n <div>\n <h3 class=\"text-xs sm:text-sm font-bold text-stone-800 font-cinzel\">Personal Profile<\/h3>\n <p class=\"text-[11px] text-stone-500\">Name, Birth details, Physical traits & Religion<\/p>\n <\/div>\n <\/div>\n <svg id=\"arr-sec-personal\" class=\"w-4 h-4 text-stone-400 transform transition-transform duration-200 rotate-180\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"\/><\/svg>\n <\/button>\n\n <div id=\"sec-personal\" class=\"p-4 space-y-3\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2.5\">\n\n <div class=\"sm:col-span-2\">\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Candidate Full Name *<\/label>\n <input type=\"text\" id=\"in-name\" placeholder=\"e.g. Aarav Sharma\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Date of Birth<\/label>\n <input type=\"text\" id=\"in-dob\" placeholder=\"e.g. 14th October 1996\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Time of Birth<\/label>\n <input type=\"text\" id=\"in-tob\" placeholder=\"e.g. 09:25 AM\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Place of Birth<\/label>\n <input type=\"text\" id=\"in-pob\" placeholder=\"e.g. Pune, Maharashtra\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Height<\/label>\n <input type=\"text\" id=\"in-height\" placeholder=\"e.g. 5' 10" (178 cm)\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Complexion \/ Physique<\/label>\n <input type=\"text\" id=\"in-complexion\" placeholder=\"e.g. Fair & Athletic\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Blood Group<\/label>\n <input type=\"text\" id=\"in-blood-group\" placeholder=\"e.g. B+ Positive\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Mother Tongue<\/label>\n <input type=\"text\" id=\"in-mother-tongue\" placeholder=\"e.g. Hindi \/ Marathi \/ Bengali\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Marital Status<\/label>\n <select id=\"in-marital-status\" onchange=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <option value=\"Never Married\">Never Married<\/option>\n <option value=\"Awaiting Divorce\">Awaiting Divorce<\/option>\n <option value=\"Divorced\">Divorced<\/option>\n <option value=\"Widowed\">Widowed<\/option>\n <\/select>\n <\/div>\n\n <div class=\"sm:col-span-2\">\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Religion, Caste & Sub-Caste<\/label>\n <input type=\"text\" id=\"in-caste\" placeholder=\"e.g. Hindu - Brahmin (Kanyakubja)\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl border border-stone-200 shadow-xs overflow-hidden\">\n <button type=\"button\" onclick=\"toggleSection('sec-astro')\" class=\"w-full px-4 py-3 bg-stone-50 hover:bg-stone-100 flex items-center justify-between text-left transition-colors\">\n <div class=\"flex items-center space-x-3\">\n <span class=\"w-6 h-6 rounded-md bg-amber-100 text-amber-800 font-bold text-xs flex items-center justify-center\">3<\/span>\n <div>\n <h3 class=\"text-xs sm:text-sm font-bold text-stone-800 font-cinzel\">Kundali \/ Horoscope<\/h3>\n <p class=\"text-[11px] text-stone-500\">Rashi, Nakshatra, Gotra & Manglik Status<\/p>\n <\/div>\n <\/div>\n <svg id=\"arr-sec-astro\" class=\"w-4 h-4 text-stone-400 transform transition-transform duration-200\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"\/><\/svg>\n <\/button>\n\n <div id=\"sec-astro\" class=\"p-4 space-y-3 hidden\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2.5\">\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Rashi (Moon Sign)<\/label>\n <input type=\"text\" id=\"in-rashi\" placeholder=\"e.g. Tula (Libra)\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Nakshatra & Charan<\/label>\n <input type=\"text\" id=\"in-nakshatra\" placeholder=\"e.g. Swati (Charan 2)\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Gotra<\/label>\n <input type=\"text\" id=\"in-gotra\" placeholder=\"e.g. Kashyap\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Manglik Status<\/label>\n <select id=\"in-manglik\" onchange=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <option value=\"Non-Manglik\">Non-Manglik<\/option>\n <option value=\"Manglik\">Manglik<\/option>\n <option value=\"Anshik \/ Partial Manglik\">Anshik \/ Partial Manglik<\/option>\n <option value=\"Don't Know \/ Kundali match needed\">Don’t Know \/ Kundali match needed<\/option>\n <\/select>\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Lagna (Ascendant)<\/label>\n <input type=\"text\" id=\"in-lagna\" placeholder=\"e.g. Vrishabh (Taurus)\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Gana & Nadi<\/label>\n <input type=\"text\" id=\"in-gana\" placeholder=\"e.g. Dev Gana, Antya Nadi\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl border border-stone-200 shadow-xs overflow-hidden\">\n <button type=\"button\" onclick=\"toggleSection('sec-edu')\" class=\"w-full px-4 py-3 bg-stone-50 hover:bg-stone-100 flex items-center justify-between text-left transition-colors\">\n <div class=\"flex items-center space-x-3\">\n <span class=\"w-6 h-6 rounded-md bg-amber-100 text-amber-800 font-bold text-xs flex items-center justify-center\">4<\/span>\n <div>\n <h3 class=\"text-xs sm:text-sm font-bold text-stone-800 font-cinzel\">Education & Career<\/h3>\n <p class=\"text-[11px] text-stone-500\">Degree, College, Job title, Company & Location<\/p>\n <\/div>\n <\/div>\n <svg id=\"arr-sec-edu\" class=\"w-4 h-4 text-stone-400 transform transition-transform duration-200\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"\/><\/svg>\n <\/button>\n\n <div id=\"sec-edu\" class=\"p-4 space-y-3 hidden\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2.5\">\n\n <div class=\"sm:col-span-2\">\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Highest Qualification *<\/label>\n <input type=\"text\" id=\"in-education\" placeholder=\"e.g. B.Tech (Computer Science) & M.S.\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div class=\"sm:col-span-2\">\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">University \/ Alma Mater<\/label>\n <input type=\"text\" id=\"in-college\" placeholder=\"e.g. IIT Bombay & RWTH Aachen University\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Current Role \/ Designation<\/label>\n <input type=\"text\" id=\"in-occupation\" placeholder=\"e.g. Senior Software Architect\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Organization \/ Employer<\/label>\n <input type=\"text\" id=\"in-company\" placeholder=\"e.g. Global Tech Solutions GmbH\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Annual Income \/ CTC<\/label>\n <input type=\"text\" id=\"in-income\" placeholder=\"e.g. \u20ac 88,000 p.a. (\u20b9 78 LPA)\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Work Location<\/label>\n <input type=\"text\" id=\"in-work-location\" placeholder=\"e.g. Frankfurt, Germany\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl border border-stone-200 shadow-xs overflow-hidden\">\n <button type=\"button\" onclick=\"toggleSection('sec-family')\" class=\"w-full px-4 py-3 bg-stone-50 hover:bg-stone-100 flex items-center justify-between text-left transition-colors\">\n <div class=\"flex items-center space-x-3\">\n <span class=\"w-6 h-6 rounded-md bg-amber-100 text-amber-800 font-bold text-xs flex items-center justify-center\">5<\/span>\n <div>\n <h3 class=\"text-xs sm:text-sm font-bold text-stone-800 font-cinzel\">Family Background<\/h3>\n <p class=\"text-[11px] text-stone-500\">Parents, Siblings, Family Type & Native Roots<\/p>\n <\/div>\n <\/div>\n <svg id=\"arr-sec-family\" class=\"w-4 h-4 text-stone-400 transform transition-transform duration-200\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"\/><\/svg>\n <\/button>\n\n <div id=\"sec-family\" class=\"p-4 space-y-3 hidden\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2.5\">\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Father’s Name & Profession<\/label>\n <input type=\"text\" id=\"in-father\" placeholder=\"e.g. Mr. Rajesh Sharma (Retd. Chief Engineer)\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Mother’s Name & Profession<\/label>\n <input type=\"text\" id=\"in-mother\" placeholder=\"e.g. Mrs. Sunita Sharma (Senior Educator)\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div class=\"sm:col-span-2\">\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Brothers & Sisters Details<\/label>\n <input type=\"text\" id=\"in-siblings\" placeholder=\"e.g. 1 Younger Sister (Married, Architect in London)\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Family Values & Type<\/label>\n <input type=\"text\" id=\"in-family-values\" placeholder=\"e.g. Nuclear Family \/ Moderate Traditional\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Native Place \/ Ancestral Roots<\/label>\n <input type=\"text\" id=\"in-native\" placeholder=\"e.g. Jaipur, Rajasthan \/ Pune\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl border border-stone-200 shadow-xs overflow-hidden\">\n <button type=\"button\" onclick=\"toggleSection('sec-lifestyle')\" class=\"w-full px-4 py-3 bg-stone-50 hover:bg-stone-100 flex items-center justify-between text-left transition-colors\">\n <div class=\"flex items-center space-x-3\">\n <span class=\"w-6 h-6 rounded-md bg-amber-100 text-amber-800 font-bold text-xs flex items-center justify-center\">6<\/span>\n <div>\n <h3 class=\"text-xs sm:text-sm font-bold text-stone-800 font-cinzel\">Hobbies, Likes & Future Plans<\/h3>\n <p class=\"text-[11px] text-stone-500\">Interests, Quirks, Preferences & Life Goals<\/p>\n <\/div>\n <\/div>\n <svg id=\"arr-sec-lifestyle\" class=\"w-4 h-4 text-stone-400 transform transition-transform duration-200 rotate-180\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"\/><\/svg>\n <\/button>\n\n <div id=\"sec-lifestyle\" class=\"p-4 space-y-3\">\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Hobbies & Interests<\/label>\n <input type=\"text\" id=\"in-hobbies\" placeholder=\"e.g. Classical flute, Alpine hiking, Vedic philosophy, Cooking\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2.5\">\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Likes<\/label>\n <textarea id=\"in-likes\" rows=\"2\" placeholder=\"e.g. Nature trails, peaceful mornings, acoustic concerts, artisanal tea\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none resize-none\"><\/textarea>\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Dislikes<\/label>\n <textarea id=\"in-dislikes\" rows=\"2\" placeholder=\"e.g. Smoking, dishonesty, unpunctuality & arrogance\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none resize-none\"><\/textarea>\n <\/div>\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Future Plans & Aspirations<\/label>\n <textarea id=\"in-future-plans\" rows=\"2\" placeholder=\"e.g. Planning to continue working in Europe for the next 4-5 years before establishing an eco-friendly tech venture in India. Value spiritual living and shared family growth.\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none resize-none\"><\/textarea>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl border border-stone-200 shadow-xs overflow-hidden\">\n <button type=\"button\" onclick=\"toggleSection('sec-partner')\" class=\"w-full px-4 py-3 bg-stone-50 hover:bg-stone-100 flex items-center justify-between text-left transition-colors\">\n <div class=\"flex items-center space-x-3\">\n <span class=\"w-6 h-6 rounded-md bg-amber-100 text-amber-800 font-bold text-xs flex items-center justify-center\">7<\/span>\n <div>\n <h3 class=\"text-xs sm:text-sm font-bold text-stone-800 font-cinzel\">Partner Preferences & Expectations<\/h3>\n <p class=\"text-[11px] text-stone-500\">Bride \/ Groom criteria, Diet, Age, Height & Values<\/p>\n <\/div>\n <\/div>\n <svg id=\"arr-sec-partner\" class=\"w-4 h-4 text-stone-400 transform transition-transform duration-200 rotate-180\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"\/><\/svg>\n <\/button>\n\n <div id=\"sec-partner\" class=\"p-4 space-y-3\">\n <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-2.5\">\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Looking For<\/label>\n <select id=\"in-partner-seeking\" onchange=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <option value=\"Bride\">Seeking Bride<\/option>\n <option value=\"Groom\">Seeking Groom<\/option>\n <\/select>\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Preferred Age Range<\/label>\n <input type=\"text\" id=\"in-partner-age\" placeholder=\"e.g. 24 - 28 Years\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Preferred Height<\/label>\n <input type=\"text\" id=\"in-partner-height\" placeholder=\"e.g. 5' 2" to 5' 7"\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <\/div>\n\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2.5\">\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Dietary \/ Food Habits<\/label>\n <input type=\"text\" id=\"in-partner-diet\" placeholder=\"e.g. Vegetarian \/ Flexible \/ Teetotaler\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Education \/ Profession<\/label>\n <input type=\"text\" id=\"in-partner-edu\" placeholder=\"e.g. Postgraduate \/ Professional (Engineer, Doctor, CA)\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Location \/ Relocation Preferences<\/label>\n <input type=\"text\" id=\"in-partner-location\" placeholder=\"e.g. Open to relocate to Germany \/ Europe or India\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Core Expectations & Compatibility Values<\/label>\n <textarea id=\"in-partner-expectations\" rows=\"2\" placeholder=\"e.g. Seeking a cheerful, warm, and broad-minded partner who respects cultural roots and values mutual support in life, career, and household.\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none resize-none\"><\/textarea>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl border border-stone-200 shadow-xs overflow-hidden\">\n <button type=\"button\" onclick=\"toggleSection('sec-contact')\" class=\"w-full px-4 py-3 bg-stone-50 hover:bg-stone-100 flex items-center justify-between text-left transition-colors\">\n <div class=\"flex items-center space-x-3\">\n <span class=\"w-6 h-6 rounded-md bg-amber-100 text-amber-800 font-bold text-xs flex items-center justify-center\">8<\/span>\n <div>\n <h3 class=\"text-xs sm:text-sm font-bold text-stone-800 font-cinzel\">Contact Details<\/h3>\n <p class=\"text-[11px] text-stone-500\">Contact person, Phone, WhatsApp, Email & Address<\/p>\n <\/div>\n <\/div>\n <svg id=\"arr-sec-contact\" class=\"w-4 h-4 text-stone-400 transform transition-transform duration-200\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"\/><\/svg>\n <\/button>\n\n <div id=\"sec-contact\" class=\"p-4 space-y-3 hidden\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2.5\">\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Primary Contact Person<\/label>\n <input type=\"text\" id=\"in-contact-person\" placeholder=\"e.g. Mr. Rajesh Sharma (Father)\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div>\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Phone \/ WhatsApp Number<\/label>\n <input type=\"tel\" id=\"in-phone\" placeholder=\"e.g. +49 176 12345678 \/ +91 98765 43210\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div class=\"sm:col-span-2\">\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Email Address<\/label>\n <input type=\"email\" id=\"in-email\" placeholder=\"e.g. family.sharma96@example.com\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none\">\n <\/div>\n\n <div class=\"sm:col-span-2\">\n <label class=\"block text-xs font-semibold text-stone-700 mb-0.5\">Current \/ Permanent Residence<\/label>\n <textarea id=\"in-address\" rows=\"2\" placeholder=\"e.g. Flat 402, Shivam Residency, Baner, Pune - 411045\" oninput=\"updateLive()\" class=\"w-full px-3 py-1.5 text-xs sm:text-sm rounded-lg border border-stone-300 focus:border-amber-600 focus:ring-1 focus:ring-amber-500 outline-none resize-none\"><\/textarea>\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n\n <\/form>\n\n <\/section>\n\n \n <section id=\"preview-panel\" class=\"w-full lg:w-1\/2 flex flex-col items-center\">\n\n \n <div class=\"no-print w-full flex items-center justify-between pb-3 px-1 text-xs text-stone-600\">\n <div class=\"flex items-center space-x-2\">\n <span class=\"inline-block w-2.5 h-2.5 rounded-full bg-emerald-500 animate-pulse\"><\/span>\n <span class=\"font-semibold text-stone-700\">Real-Time A4 Live Preview<\/span>\n <\/div>\n <div class=\"flex items-center space-x-3\">\n <button onclick=\"downloadAsImage()\" class=\"text-emerald-700 hover:text-emerald-800 font-semibold flex items-center space-x-1 transition-colors\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\/><\/svg>\n <span>Save Image<\/span>\n <\/button>\n <button onclick=\"downloadAsPDF()\" class=\"text-amber-800 hover:text-amber-900 font-semibold flex items-center space-x-1 transition-colors\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\/><\/svg>\n <span>Save PDF<\/span>\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"preview-container\" class=\"w-full flex justify-center overflow-x-auto pb-8\">\n\n <div id=\"biodata-sheet\" class=\"a4-page theme-royal-maroon shadow-2xl rounded-sm border border-stone-200 relative p-5 sm:p-8 flex flex-col justify-between\">\n\n \n <div class=\"absolute inset-2 sm:inset-3 pointer-events-none border-2 border-[var(--border)] opacity-80\"><\/div>\n <div class=\"absolute inset-3 sm:inset-4 pointer-events-none border border-[var(--border)] opacity-40\"><\/div>\n\n \n <div class=\"absolute top-3 left-3 w-7 h-7 text-[var(--accent)] opacity-85 pointer-events-none\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M2 2h6v2H4v4H2V2zm2 6h2v2H4V8zm4-4h2v2H8V4z\"\/><\/svg>\n <\/div>\n <div class=\"absolute top-3 right-3 w-7 h-7 text-[var(--accent)] opacity-85 pointer-events-none\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M22 2h-6v2h4v4h2V2zm-2 6h-2v2h2V8zm-4-4h-2v2h2V4z\"\/><\/svg>\n <\/div>\n <div class=\"absolute bottom-3 left-3 w-7 h-7 text-[var(--accent)] opacity-85 pointer-events-none\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M2 22h6v-2H4v-4H2v6zm2-6h2v-2H4v2zm4 4h2v-2H8v2z\"\/><\/svg>\n <\/div>\n <div class=\"absolute bottom-3 right-3 w-7 h-7 text-[var(--accent)] opacity-85 pointer-events-none\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M22 22h-6v-2h4v-4h2v6zm-2-6h-2v-2h2v2zm-4 4h-2v-2h2v2z\"\/><\/svg>\n <\/div>\n\n \n <div class=\"relative z-10 flex-1 flex flex-col justify-between\">\n\n \n <div class=\"text-center pt-0.5 pb-2\">\n\n \n <div class=\"mx-auto w-13 h-13 sm:w-16 sm:h-16 mb-1 flex items-center justify-center\">\n <svg class=\"w-full h-full text-[var(--primary)] drop-shadow-xs\" viewBox=\"0 0 100 100\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n \n <path d=\"M42 22 L50 10 L58 22 Z\" fill=\"currentColor\" fill-opacity=\"0.12\" \/>\n <path d=\"M44 19 Q50 14 56 19\" stroke=\"var(--accent)\" stroke-width=\"2\" \/>\n\n \n <path d=\"M50 21 L50 28\" stroke=\"var(--accent)\" stroke-width=\"2.5\" \/>\n <circle cx=\"50\" cy=\"30\" r=\"1.5\" fill=\"var(--accent)\" \/>\n <path d=\"M46 25 Q50 27 54 25\" stroke=\"var(--accent)\" stroke-width=\"1.8\" \/>\n\n \n <path d=\"M40 28 C26 24 22 40 33 46 C37 48 39 45 42 43\" \/>\n <path d=\"M60 28 C74 24 78 40 67 46 C63 48 61 45 58 43\" \/>\n\n \n <path d=\"M44 34 C44 46 45 56 50 63 C53 67 58 68 61 65 C64 61 63 54 57 53 C52 52 50 56 50 57\" stroke-width=\"2.6\" \/>\n\n \n <circle cx=\"61\" cy=\"62\" r=\"3.2\" fill=\"var(--accent)\" stroke=\"var(--accent)\" \/>\n\n \n <path d=\"M41 44 L37 46\" stroke-width=\"2\" \/>\n <path d=\"M59 44 L61 45\" stroke-width=\"2\" \/>\n\n \n <circle cx=\"43\" cy=\"32\" r=\"1.2\" fill=\"currentColor\" \/>\n <circle cx=\"57\" cy=\"32\" r=\"1.2\" fill=\"currentColor\" \/>\n\n \n <path d=\"M37 77 Q50 72 63 77\" stroke=\"var(--accent)\" stroke-width=\"1.5\" stroke-dasharray=\"1 3\" \/>\n <\/svg>\n <\/div>\n\n \n <h2 id=\"out-shloka-sanskrit\" class=\"font-devanagari text-base sm:text-lg font-bold tracking-widest text-[var(--primary)] leading-tight\">\n || \u0936\u094d\u0930\u0940 \u0917\u0923\u0947\u0936\u093e\u092f \u0928\u092e\u0903 ||\n <\/h2>\n <p id=\"out-shloka-english\" class=\"font-cinzel text-[10px] tracking-widest text-[var(--accent)] font-semibold uppercase mt-0.5\">\n || Om Sri Ganeshaya Namaha ||\n <\/p>\n\n \n <div class=\"mt-2 pb-1.5 border-b-2 border-[var(--border)] flex items-center justify-center\">\n <div class=\"text-center px-4\">\n <h1 id=\"out-name\" class=\"font-cinzel text-xl sm:text-2xl font-bold text-[var(--heading)] tracking-wide\">\n Aarav Sharma\n <\/h1>\n <p class=\"font-sans text-[10.5px] font-medium text-stone-500 tracking-widest uppercase mt-0.5\">\n Marriage Bio Data\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"flex-1 space-y-2.5 text-[11.5px] sm:text-[12px] leading-relaxed pt-0.5\">\n\n \n <div class=\"flex flex-col-reverse sm:flex-row items-center sm:items-start justify-between gap-3 bg-[var(--accent-soft)] p-2.5 sm:p-3 rounded-xl border border-[var(--border)] border-opacity-40\">\n <div class=\"w-full space-y-1\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-3 gap-y-1\">\n <div class=\"flex items-baseline\"><span class=\"w-24 text-[var(--subtext)] font-medium shrink-0\">Date of Birth:<\/span> <span id=\"out-dob\" class=\"font-semibold text-stone-800\">14 October 1996<\/span><\/div>\n <div class=\"flex items-baseline\"><span class=\"w-24 text-[var(--subtext)] font-medium shrink-0\">Time of Birth:<\/span> <span id=\"out-tob\" class=\"font-semibold text-stone-800\">09:25 AM<\/span><\/div>\n <div class=\"flex items-baseline\"><span class=\"w-24 text-[var(--subtext)] font-medium shrink-0\">Place of Birth:<\/span> <span id=\"out-pob\" class=\"font-semibold text-stone-800\">Pune, Maharashtra<\/span><\/div>\n <div class=\"flex items-baseline\"><span class=\"w-24 text-[var(--subtext)] font-medium shrink-0\">Height:<\/span> <span id=\"out-height\" class=\"font-semibold text-stone-800\">5′ 10″ (178 cm)<\/span><\/div>\n <div class=\"flex items-baseline\"><span class=\"w-24 text-[var(--subtext)] font-medium shrink-0\">Complexion:<\/span> <span id=\"out-complexion\" class=\"font-semibold text-stone-800\">Fair & Athletic<\/span><\/div>\n <div class=\"flex items-baseline\"><span class=\"w-24 text-[var(--subtext)] font-medium shrink-0\">Blood Group:<\/span> <span id=\"out-blood-group\" class=\"font-semibold text-stone-800\">B+ Positive<\/span><\/div>\n <div class=\"flex items-baseline\"><span class=\"w-24 text-[var(--subtext)] font-medium shrink-0\">Mother Tongue:<\/span> <span id=\"out-mother-tongue\" class=\"font-semibold text-stone-800\">Hindi<\/span><\/div>\n <div class=\"flex items-baseline\"><span class=\"w-24 text-[var(--subtext)] font-medium shrink-0\">Marital Status:<\/span> <span id=\"out-marital-status\" class=\"font-semibold text-stone-800\">Never Married<\/span><\/div>\n <\/div>\n <div class=\"pt-1 border-t border-[var(--border)] border-opacity-30 flex items-baseline\">\n <span class=\"w-24 text-[var(--subtext)] font-medium shrink-0\">Religion \/ Caste:<\/span>\n <span id=\"out-caste\" class=\"font-semibold text-stone-800\">Hindu – Brahmin (Kanyakubja)<\/span>\n <\/div>\n <\/div>\n\n \n <div id=\"out-photo-wrap\" class=\"shrink-0 flex flex-col items-center\">\n <div class=\"w-20 h-26 sm:w-24 sm:h-30 arch-frame overflow-hidden border-2 border-[var(--accent)] shadow-xs bg-white p-0.5\">\n <img decoding=\"async\" id=\"out-photo-img\" src=\"https:\/\/images.unsplash.com\/photo-1507003211169-0a1dd7228f2d?w=300&auto=format&fit=crop&q=80\" alt=\"Candidate Portrait\" class=\"w-full h-full object-cover arch-frame\" crossorigin=\"anonymous\">\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"space-y-1\">\n <div class=\"flex items-center space-x-1.5 border-b border-[var(--border)] border-opacity-40 pb-0.5\">\n <span class=\"text-[var(--accent)] text-xs font-bold\">\u2756<\/span>\n <h4 class=\"font-cinzel font-bold text-xs tracking-wider text-[var(--heading)] uppercase\">Horoscope & Kundali Details<\/h4>\n <\/div>\n <div class=\"grid grid-cols-2 sm:grid-cols-3 gap-x-3 gap-y-1 pt-0.5 text-[11px] sm:text-[11.5px]\">\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">Rashi (Moon Sign)<\/span><span id=\"out-rashi\" class=\"font-semibold text-stone-800\">Tula (Libra)<\/span><\/div>\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">Nakshatra & Charan<\/span><span id=\"out-nakshatra\" class=\"font-semibold text-stone-800\">Swati (Charan 2)<\/span><\/div>\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">Gotra<\/span><span id=\"out-gotra\" class=\"font-semibold text-stone-800\">Kashyap<\/span><\/div>\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">Manglik Status<\/span><span id=\"out-manglik\" class=\"font-semibold text-stone-800\">Non-Manglik<\/span><\/div>\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">Lagna (Ascendant)<\/span><span id=\"out-lagna\" class=\"font-semibold text-stone-800\">Vrishabh (Taurus)<\/span><\/div>\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">Gana & Nadi<\/span><span id=\"out-gana\" class=\"font-semibold text-stone-800\">Dev Gana, Antya Nadi<\/span><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"space-y-1\">\n <div class=\"flex items-center space-x-1.5 border-b border-[var(--border)] border-opacity-40 pb-0.5\">\n <span class=\"text-[var(--accent)] text-xs font-bold\">\u2756<\/span>\n <h4 class=\"font-cinzel font-bold text-xs tracking-wider text-[var(--heading)] uppercase\">Education & Profession<\/h4>\n <\/div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-3 gap-y-1 pt-0.5 text-[11px] sm:text-[11.5px]\">\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">Highest Qualification<\/span><span id=\"out-education\" class=\"font-semibold text-stone-800\">B.Tech (Computer Science) & M.S.<\/span><\/div>\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">University \/ Alma Mater<\/span><span id=\"out-college\" class=\"font-semibold text-stone-800\">IIT Bombay & RWTH Aachen University<\/span><\/div>\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">Designation & Role<\/span><span id=\"out-occupation\" class=\"font-semibold text-stone-800\">Senior Software Architect<\/span><\/div>\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">Organization \/ Employer<\/span><span id=\"out-company\" class=\"font-semibold text-stone-800\">Global Tech Solutions GmbH<\/span><\/div>\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">Annual Income<\/span><span id=\"out-income\" class=\"font-semibold text-stone-800\">\u20ac 88,000 p.a. (Approx. \u20b9 78 LPA)<\/span><\/div>\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">Work Location<\/span><span id=\"out-work-location\" class=\"font-semibold text-stone-800\">Frankfurt, Germany<\/span><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"space-y-1\">\n <div class=\"flex items-center space-x-1.5 border-b border-[var(--border)] border-opacity-40 pb-0.5\">\n <span class=\"text-[var(--accent)] text-xs font-bold\">\u2756<\/span>\n <h4 class=\"font-cinzel font-bold text-xs tracking-wider text-[var(--heading)] uppercase\">Family Details<\/h4>\n <\/div>\n <div class=\"space-y-1 pt-0.5 text-[11px] sm:text-[11.5px]\">\n <div class=\"flex flex-col sm:flex-row sm:items-baseline\"><span class=\"w-32 text-[var(--subtext)] font-medium shrink-0\">Father’s Details:<\/span> <span id=\"out-father\" class=\"font-semibold text-stone-800\">Mr. Rajesh Sharma (Retd. Chief Engineer, Railways)<\/span><\/div>\n <div class=\"flex flex-col sm:flex-row sm:items-baseline\"><span class=\"w-32 text-[var(--subtext)] font-medium shrink-0\">Mother’s Details:<\/span> <span id=\"out-mother\" class=\"font-semibold text-stone-800\">Mrs. Sunita Sharma (Senior High School Educator)<\/span><\/div>\n <div class=\"flex flex-col sm:flex-row sm:items-baseline\"><span class=\"w-32 text-[var(--subtext)] font-medium shrink-0\">Brothers & Sisters:<\/span> <span id=\"out-siblings\" class=\"font-semibold text-stone-800\">1 Younger Sister (Married, Architect in London)<\/span><\/div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2 pt-0.5\">\n <div class=\"flex items-baseline\"><span class=\"w-32 text-[var(--subtext)] font-medium shrink-0\">Family Values:<\/span> <span id=\"out-family-values\" class=\"font-semibold text-stone-800\">Nuclear Family \/ Cultured Moderate<\/span><\/div>\n <div class=\"flex items-baseline\"><span class=\"w-24 text-[var(--subtext)] font-medium shrink-0\">Native Roots:<\/span> <span id=\"out-native\" class=\"font-semibold text-stone-800\">Jaipur, Rajasthan<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"space-y-1\">\n <div class=\"flex items-center space-x-1.5 border-b border-[var(--border)] border-opacity-40 pb-0.5\">\n <span class=\"text-[var(--accent)] text-xs font-bold\">\u2756<\/span>\n <h4 class=\"font-cinzel font-bold text-xs tracking-wider text-[var(--heading)] uppercase\">Hobbies, Likes & Future Aspirations<\/h4>\n <\/div>\n <div class=\"space-y-1 pt-0.5 text-[11px] sm:text-[11.5px]\">\n <div class=\"flex flex-col sm:flex-row sm:items-baseline\">\n <span class=\"w-32 text-[var(--subtext)] font-medium shrink-0\">Hobbies & Interests:<\/span>\n <span id=\"out-hobbies\" class=\"font-semibold text-stone-800\">Classical Indian flute, Alpine hiking, Vedic philosophy, Cooking<\/span>\n <\/div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2\">\n <div class=\"flex flex-col sm:flex-row sm:items-baseline\">\n <span class=\"w-16 text-[var(--subtext)] font-medium shrink-0\">Likes:<\/span>\n <span id=\"out-likes\" class=\"font-semibold text-stone-800\">Nature trails, peaceful mornings, acoustic concerts<\/span>\n <\/div>\n <div class=\"flex flex-col sm:flex-row sm:items-baseline\">\n <span class=\"w-16 text-[var(--subtext)] font-medium shrink-0\">Dislikes:<\/span>\n <span id=\"out-dislikes\" class=\"font-semibold text-stone-800\">Smoking, dishonesty, clutter & unpunctuality<\/span>\n <\/div>\n <\/div>\n <div class=\"flex flex-col sm:flex-row sm:items-baseline pt-0.5\">\n <span class=\"w-32 text-[var(--subtext)] font-medium shrink-0\">Future Plans:<\/span>\n <span id=\"out-future-plans\" class=\"text-stone-800 leading-snug\">Planning to establish sustainable tech solutions in Europe and subsequently in India. Values spiritual living and mindful career growth.<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-[var(--accent-soft)] p-2.5 sm:p-3 rounded-xl border border-[var(--border)] border-opacity-40 space-y-1\">\n <div class=\"flex items-center justify-between border-b border-[var(--border)] border-opacity-40 pb-1\">\n <div class=\"flex items-center space-x-1.5\">\n <span class=\"text-[var(--accent)] text-xs font-bold\">\u2756<\/span>\n <h4 class=\"font-cinzel font-bold text-xs tracking-wider text-[var(--heading)] uppercase\">Partner Preferences & Expectations<\/h4>\n <\/div>\n <span id=\"out-partner-badge\" class=\"px-2 py-0.5 rounded-full text-[9.5px] font-bold uppercase tracking-wider bg-[var(--badge-bg)] border border-[var(--badge-border)] text-[var(--primary)]\">\n Seeking Bride\n <\/span>\n <\/div>\n\n <div class=\"grid grid-cols-2 sm:grid-cols-4 gap-2 text-[10.5px] pt-0.5\">\n <div>\n <span class=\"text-[var(--subtext)] block text-[9px]\">Age Range<\/span>\n <span id=\"out-partner-age\" class=\"font-semibold text-stone-800\">24 – 28 Years<\/span>\n <\/div>\n <div>\n <span class=\"text-[var(--subtext)] block text-[9px]\">Height<\/span>\n <span id=\"out-partner-height\" class=\"font-semibold text-stone-800\">5′ 2″ to 5′ 7″<\/span>\n <\/div>\n <div>\n <span class=\"text-[var(--subtext)] block text-[9px]\">Diet Habits<\/span>\n <span id=\"out-partner-diet\" class=\"font-semibold text-stone-800\">Vegetarian \/ Flexible<\/span>\n <\/div>\n <div>\n <span class=\"text-[var(--subtext)] block text-[9px]\">Location<\/span>\n <span id=\"out-partner-location\" class=\"font-semibold text-stone-800\">Open to Europe \/ India<\/span>\n <\/div>\n <\/div>\n\n <div class=\"pt-1 border-t border-[var(--border)] border-opacity-25 text-[10.5px] space-y-0.5\">\n <div class=\"flex flex-col sm:flex-row sm:items-baseline\">\n <span class=\"w-32 text-[var(--subtext)] font-medium shrink-0\">Education & Work:<\/span>\n <span id=\"out-partner-edu\" class=\"font-semibold text-stone-800\">Graduate\/Postgraduate working professionally (IT, Medicine, Finance, Architecture).<\/span>\n <\/div>\n <div class=\"flex flex-col sm:flex-row sm:items-baseline\">\n <span class=\"w-32 text-[var(--subtext)] font-medium shrink-0\">Expectations:<\/span>\n <span id=\"out-partner-expectations\" class=\"text-stone-800 leading-snug\">Looking for a warm, educated, and cheerful life partner who values shared cultural heritage, mutual respect, open communication, and individual personal growth.<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"space-y-1\">\n <div class=\"flex items-center space-x-1.5 border-b border-[var(--border)] border-opacity-40 pb-0.5\">\n <span class=\"text-[var(--accent)] text-xs font-bold\">\u2756<\/span>\n <h4 class=\"font-cinzel font-bold text-xs tracking-wider text-[var(--heading)] uppercase\">Contact Details<\/h4>\n <\/div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-3 gap-y-1 pt-0.5 text-[11px] sm:text-[11.5px]\">\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">Contact Person<\/span><span id=\"out-contact-person\" class=\"font-semibold text-stone-800\">Mr. Rajesh Sharma (Father)<\/span><\/div>\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">Phone \/ WhatsApp<\/span><span id=\"out-phone\" class=\"font-semibold text-stone-800\">+49 176 12345678 \/ +91 98765 43210<\/span><\/div>\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">Email Address<\/span><span id=\"out-email\" class=\"font-semibold text-stone-800\">family.sharma96@example.com<\/span><\/div>\n <div><span class=\"text-[var(--subtext)] block text-[9.5px]\">Residence<\/span><span id=\"out-address\" class=\"font-semibold text-stone-800\">Flat 402, Shivam Residency, Baner, Pune – 411045<\/span><\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"pt-3 pb-0.5 text-center border-t border-[var(--border)] border-opacity-40 mt-2 flex items-center justify-between text-[10.5px] text-stone-500\">\n <span class=\"italic text-[var(--accent)] font-cinzel tracking-wider\">|| \u0936\u0941\u092d \u0935\u093f\u0935\u093e\u0939 \u0938\u0902\u0927\u093e\u0928\u092e\u094d ||<\/span>\n <span class=\"text-stone-400 font-medium\">Created via <strong class=\"text-stone-700 font-semibold\">srabons.de<\/strong><\/span>\n <\/div>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n\n <\/section>\n\n <\/main>\n\n \n <div id=\"mobile-bottom-bar\" class=\"no-print lg:hidden fixed bottom-0 left-0 right-0 z-40 bg-white\/95 backdrop-blur-md border-t border-stone-200 px-3 py-2 flex items-center justify-between shadow-lg\">\n <div class=\"flex items-center space-x-1.5 w-full\">\n <button onclick=\"downloadAsPDF()\" class=\"flex-1 py-2 px-2 bg-gradient-to-r from-red-800 to-amber-700 text-white rounded-xl font-semibold text-xs flex items-center justify-center space-x-1 shadow-sm active:scale-95 transition-transform\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\/><\/svg>\n <span>Download PDF<\/span>\n <\/button>\n\n <button onclick=\"downloadAsImage()\" class=\"flex-1 py-2 px-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-semibold text-xs flex items-center justify-center space-x-1 shadow-sm active:scale-95 transition-transform\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\/><\/svg>\n <span>Share Image<\/span>\n <\/button>\n\n <button onclick=\"toggleMobileViewQuick()\" id=\"btn-quick-toggle\" class=\"p-2 border border-stone-300 rounded-xl bg-stone-100 text-stone-700 shrink-0\">\n <svg id=\"icon-quick-preview\" class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"\/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"loading-modal\" class=\"fixed inset-0 bg-stone-900\/60 backdrop-blur-xs z-50 hidden flex items-center justify-center p-4\">\n <div class=\"bg-white rounded-2xl max-w-xs w-full p-6 shadow-2xl border border-stone-200 text-center space-y-3.5\">\n <div class=\"relative w-14 h-14 mx-auto\">\n <div class=\"w-14 h-14 rounded-full border-4 border-amber-200 border-t-amber-700 animate-spin\"><\/div>\n <div class=\"absolute inset-0 flex items-center justify-center text-amber-800 font-cinzel text-xs font-bold\">\u5350<\/div>\n <\/div>\n <div>\n <h4 id=\"loading-title\" class=\"text-sm font-bold text-stone-900\">Preparing Bio Data…<\/h4>\n <p id=\"loading-desc\" class=\"text-xs text-stone-500 mt-1\">Generating high-resolution document for mobile download.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"reset-modal\" class=\"fixed inset-0 bg-stone-900\/50 backdrop-blur-xs z-50 hidden flex items-center justify-center p-4\">\n <div class=\"bg-white rounded-2xl max-w-sm w-full p-6 shadow-xl border border-stone-200 text-center space-y-4\">\n <div class=\"w-12 h-12 rounded-full bg-red-100 text-red-700 flex items-center justify-center mx-auto\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\/><\/svg>\n <\/div>\n <div>\n <h3 class=\"text-base font-bold text-stone-900\">Reset Bio Data Form?<\/h3>\n <p class=\"text-xs text-stone-500 mt-1\">This will clear all details. You can easily click ‘Sample Data’ anytime to reload the prefilled layout.<\/p>\n <\/div>\n <div class=\"flex items-center space-x-2 pt-1\">\n <button type=\"button\" onclick=\"closeResetModal()\" class=\"w-1\/2 py-2 px-3 rounded-lg border border-stone-300 text-xs font-semibold text-stone-700 hover:bg-stone-50\">Cancel<\/button>\n <button type=\"button\" onclick=\"confirmReset()\" class=\"w-1\/2 py-2 px-3 rounded-lg bg-red-700 hover:bg-red-800 text-xs font-semibold text-white shadow-xs\">Yes, Clear All<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"toast\" class=\"fixed bottom-16 sm:bottom-6 right-4 sm:right-6 bg-stone-900 text-white text-xs px-4 py-2.5 rounded-xl shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center space-x-2 pointer-events-none\">\n <svg class=\"w-4 h-4 text-emerald-400 shrink-0\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"\/><\/svg>\n <span id=\"toast-text\">Action completed successfully<\/span>\n <\/div>\n\n \n <script>\n let uploadedPhotoBase64 = \"https:\/\/images.unsplash.com\/photo-1507003211169-0a1dd7228f2d?w=300&auto=format&fit=crop&q=80\";\n let activeTheme = \"theme-royal-maroon\";\n let currentMobileView = \"form\";\n\n \/\/ Synchronize Form Inputs with Live A4 Preview\n function updateLive() {\n \/\/ 1. Shlokas & Invocations\n syncText('out-shloka-sanskrit', 'in-shloka-sanskrit', '|| \u0936\u094d\u0930\u0940 \u0917\u0923\u0947\u0936\u093e\u092f \u0928\u092e\u0903 ||');\n syncText('out-shloka-english', 'in-shloka-english', '|| Om Sri Ganeshaya Namaha ||');\n\n \/\/ 2. Personal Information\n syncText('out-name', 'in-name', 'Candidate Full Name');\n syncText('out-dob', 'in-dob', '-');\n syncText('out-tob', 'in-tob', '-');\n syncText('out-pob', 'in-pob', '-');\n syncText('out-height', 'in-height', '-');\n syncText('out-complexion', 'in-complexion', '-');\n syncText('out-blood-group', 'in-blood-group', '-');\n syncText('out-mother-tongue', 'in-mother-tongue', '-');\n syncText('out-marital-status', 'in-marital-status', 'Never Married');\n syncText('out-caste', 'in-caste', '-');\n\n \/\/ 3. Kundali \/ Astro Details\n syncText('out-rashi', 'in-rashi', '-');\n syncText('out-nakshatra', 'in-nakshatra', '-');\n syncText('out-gotra', 'in-gotra', '-');\n syncText('out-manglik', 'in-manglik', 'Non-Manglik');\n syncText('out-lagna', 'in-lagna', '-');\n syncText('out-gana', 'in-gana', '-');\n\n \/\/ 4. Education & Profession\n syncText('out-education', 'in-education', '-');\n syncText('out-college', 'in-college', '-');\n syncText('out-occupation', 'in-occupation', '-');\n syncText('out-company', 'in-company', '-');\n syncText('out-income', 'in-income', '-');\n syncText('out-work-location', 'in-work-location', '-');\n\n \/\/ 5. Family Details\n syncText('out-father', 'in-father', '-');\n syncText('out-mother', 'in-mother', '-');\n syncText('out-siblings', 'in-siblings', '-');\n syncText('out-family-values', 'in-family-values', '-');\n syncText('out-native', 'in-native', '-');\n\n \/\/ 6. Lifestyle, Hobbies & Future Plans\n syncText('out-hobbies', 'in-hobbies', '-');\n syncText('out-likes', 'in-likes', '-');\n syncText('out-dislikes', 'in-dislikes', '-');\n syncText('out-future-plans', 'in-future-plans', '-');\n\n \/\/ 7. Partner Preferences & Expectations\n const seekingVal = document.getElementById('in-partner-seeking').value;\n const partnerBadge = document.getElementById('out-partner-badge');\n if (partnerBadge) {\n partnerBadge.textContent = seekingVal === 'Groom' ? 'Seeking Groom' : 'Seeking Bride';\n }\n syncText('out-partner-age', 'in-partner-age', '-');\n syncText('out-partner-height', 'in-partner-height', '-');\n syncText('out-partner-diet', 'in-partner-diet', '-');\n syncText('out-partner-location', 'in-partner-location', '-');\n syncText('out-partner-edu', 'in-partner-edu', '-');\n syncText('out-partner-expectations', 'in-partner-expectations', '-');\n\n \/\/ 8. Contact Information\n syncText('out-contact-person', 'in-contact-person', '-');\n syncText('out-phone', 'in-phone', '-');\n syncText('out-email', 'in-email', '-');\n syncText('out-address', 'in-address', '-');\n\n \/\/ Candidate Photo Toggle\n const photoToggle = document.getElementById('in-photo-toggle').checked;\n const photoWrap = document.getElementById('out-photo-wrap');\n if (photoToggle && uploadedPhotoBase64) {\n photoWrap.classList.remove('hidden');\n document.getElementById('out-photo-img').src = uploadedPhotoBase64;\n } else {\n photoWrap.classList.add('hidden');\n }\n }\n\n function syncText(targetId, sourceId, placeholder) {\n const src = document.getElementById(sourceId);\n const tgt = document.getElementById(targetId);\n if (src && tgt) {\n const val = src.value.trim();\n tgt.textContent = val !== \"\" ? val : placeholder;\n }\n }\n\n \/\/ Photo Upload Handler\n function processPhotoUpload(e) {\n const file = e.target.files[0];\n if (!file) return;\n\n if (!file.type.startsWith('image\/')) {\n showToast('Please select a valid image file');\n return;\n }\n\n const reader = new FileReader();\n reader.onload = function(event) {\n uploadedPhotoBase64 = event.target.result;\n document.getElementById('out-photo-img').src = uploadedPhotoBase64;\n\n const thumb = document.getElementById('photo-thumb-container');\n thumb.innerHTML = `<img decoding=\"async\" src=\"${uploadedPhotoBase64}\" class=\"w-full h-full object-cover\">`;\n\n document.getElementById('btn-photo-remove').classList.remove('hidden');\n document.getElementById('in-photo-toggle').checked = true;\n updateLive();\n showToast('Candidate photo loaded');\n };\n reader.readAsDataURL(file);\n }\n\n function removePhoto() {\n uploadedPhotoBase64 = \"\";\n document.getElementById('in-photo-file').value = \"\";\n document.getElementById('photo-thumb-container').innerHTML = `\n <svg class=\"w-6 h-6 text-stone-300\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\/><\/svg>\n `;\n document.getElementById('btn-photo-remove').classList.add('hidden');\n updateLive();\n showToast('Candidate photo removed');\n }\n\n \/\/ Sacred Theme Swapping\n function applyTheme(themeClass, el) {\n activeTheme = themeClass;\n const sheet = document.getElementById('biodata-sheet');\n sheet.className = `a4-page ${themeClass} shadow-2xl rounded-sm border border-stone-200 relative p-5 sm:p-8 flex flex-col justify-between`;\n\n document.querySelectorAll('.theme-choice-btn').forEach(btn => {\n btn.classList.remove('border-2', 'border-red-800', 'bg-red-50', 'border-amber-700', 'bg-amber-50');\n btn.classList.add('border-stone-200');\n });\n\n if (el) {\n el.classList.add('border-2', 'border-red-800', 'bg-red-50');\n }\n showToast('Theme updated');\n }\n\n \/\/ Accordion Toggle\n function toggleSection(id) {\n const sec = document.getElementById(id);\n const arr = document.getElementById('arr-' + id);\n if (sec.classList.contains('hidden')) {\n sec.classList.remove('hidden');\n if (arr) arr.classList.add('rotate-180');\n } else {\n sec.classList.add('hidden');\n if (arr) arr.classList.remove('rotate-180');\n }\n }\n\n \/\/ Mobile View Tab Switcher\n function switchMobileTab(view) {\n currentMobileView = view;\n const formPanel = document.getElementById('form-panel');\n const previewPanel = document.getElementById('preview-panel');\n const tabForm = document.getElementById('tab-btn-form');\n const tabPrev = document.getElementById('tab-btn-preview');\n\n if (view === 'form') {\n formPanel.classList.remove('hidden');\n previewPanel.classList.add('hidden');\n tabForm.classList.add('bg-white', 'text-stone-900', 'shadow-xs');\n tabForm.classList.remove('text-stone-600');\n tabPrev.classList.remove('bg-white', 'text-stone-900', 'shadow-xs');\n tabPrev.classList.add('text-stone-600');\n } else {\n formPanel.classList.add('hidden');\n previewPanel.classList.remove('hidden');\n tabPrev.classList.add('bg-white', 'text-stone-900', 'shadow-xs');\n tabPrev.classList.remove('text-stone-600');\n tabForm.classList.remove('bg-white', 'text-stone-900', 'shadow-xs');\n tabForm.classList.add('text-stone-600');\n }\n }\n\n function toggleMobileViewQuick() {\n switchMobileTab(currentMobileView === 'form' ? 'preview' : 'form');\n }\n\n \/\/ ========================================================\n \/\/ CRITICAL ENGINE: MOBILE OFF-SCREEN STAGING EXPORT\n \/\/ Overcomes hidden elements, mobile viewports & blank canvas\n \/\/ ========================================================\n function createStagedBiodataElement() {\n \/\/ 1. Ensure live preview data is 100% current\n updateLive();\n\n const originalSheet = document.getElementById('biodata-sheet');\n const clone = originalSheet.cloneNode(true);\n clone.id = 'biodata-staged-clone';\n\n \/\/ 2. Set strict pixel dimensions corresponding to 794px A4 standard width (96-150 DPI)\n clone.style.width = '794px';\n clone.style.maxWidth = '794px';\n clone.style.minHeight = '1123px';\n clone.style.margin = '0 auto';\n clone.style.boxShadow = 'none';\n clone.style.transform = 'none';\n\n \/\/ 3. Staging container positioned offscreen but fully visible to html2canvas\n const stagingContainer = document.createElement('div');\n stagingContainer.id = 'pdf-staging-wrapper';\n stagingContainer.style.position = 'fixed';\n stagingContainer.style.left = '-9999px';\n stagingContainer.style.top = '0';\n stagingContainer.style.width = '820px';\n stagingContainer.style.zIndex = '-9999';\n stagingContainer.style.background = '#ffffff';\n stagingContainer.style.overflow = 'visible';\n\n stagingContainer.appendChild(clone);\n document.body.appendChild(stagingContainer);\n\n return { stagingContainer, clone };\n }\n\n function cleanupStaging(stagingContainer) {\n if (stagingContainer && stagingContainer.parentNode) {\n stagingContainer.parentNode.removeChild(stagingContainer);\n }\n }\n\n \/\/ ========================================================\n \/\/ DOWNLOAD AS HIGH-RESOLUTION PDF (html2pdf.js)\n \/\/ ========================================================\n async function downloadAsPDF() {\n showLoading('Generating Auspicious PDF...', 'Rendering high-resolution A4 document for your phone...');\n\n const candidateName = (document.getElementById('in-name').value.trim() || 'Candidate').replace(\/[^a-zA-Z0-9_-]\/g, '_');\n const fileName = `Hindu_Marriage_Biodata_${candidateName}.pdf`;\n\n const { stagingContainer, clone } = createStagedBiodataElement();\n\n \/\/ Ensure clone portrait image is ready\n const cloneImg = clone.querySelector('#out-photo-img');\n if (cloneImg && !cloneImg.complete) {\n await new Promise((resolve) => {\n cloneImg.onload = resolve;\n cloneImg.onerror = resolve;\n setTimeout(resolve, 600);\n });\n }\n\n \/\/ Small pause to allow styles and fonts to paint in staging\n await new Promise(r => setTimeout(r, 200));\n\n const opt = {\n margin: [4, 4, 4, 4], \/\/ mm margin\n filename: fileName,\n image: { type: 'jpeg', quality: 0.98 },\n html2canvas: {\n scale: 2.2, \/\/ Crisp retina scaling\n useCORS: true,\n allowTaint: true,\n logging: false,\n scrollY: 0,\n scrollX: 0\n },\n jsPDF: {\n unit: 'mm',\n format: 'a4',\n orientation: 'portrait'\n }\n };\n\n try {\n await html2pdf().set(opt).from(clone).save();\n showToast('PDF downloaded successfully');\n } catch (err) {\n console.error('html2pdf generation error:', err);\n showToast('Direct PDF failed, opening system print...');\n window.print();\n } finally {\n cleanupStaging(stagingContainer);\n hideLoading();\n }\n }\n\n \/\/ ========================================================\n \/\/ DOWNLOAD AS HIGH-RESOLUTION PNG (html2canvas)\n \/\/ Ideal for WhatsApp & Social Sharing\n \/\/ ========================================================\n async function downloadAsImage() {\n showLoading('Generating HD Image...', 'Rendering WhatsApp-friendly portrait image...');\n\n const candidateName = (document.getElementById('in-name').value.trim() || 'Candidate').replace(\/[^a-zA-Z0-9_-]\/g, '_');\n const fileName = `Hindu_Marriage_Biodata_${candidateName}.png`;\n\n const { stagingContainer, clone } = createStagedBiodataElement();\n\n const cloneImg = clone.querySelector('#out-photo-img');\n if (cloneImg && !cloneImg.complete) {\n await new Promise((resolve) => {\n cloneImg.onload = resolve;\n cloneImg.onerror = resolve;\n setTimeout(resolve, 600);\n });\n }\n\n await new Promise(r => setTimeout(r, 200));\n\n try {\n const canvas = await html2canvas(clone, {\n scale: 2.2,\n useCORS: true,\n allowTaint: true,\n backgroundColor: '#FFFDF9',\n width: 794,\n windowWidth: 794\n });\n\n const imageUri = canvas.toDataURL('image\/png');\n const link = document.createElement('a');\n link.download = fileName;\n link.href = imageUri;\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n\n showToast('High-res image downloaded');\n } catch (err) {\n console.error('Image generation error:', err);\n showToast('Could not generate image');\n } finally {\n cleanupStaging(stagingContainer);\n hideLoading();\n }\n }\n\n \/\/ Modal & Toast Helpers\n function showLoading(title, desc) {\n document.getElementById('loading-title').textContent = title;\n document.getElementById('loading-desc').textContent = desc;\n document.getElementById('loading-modal').classList.remove('hidden');\n }\n\n function hideLoading() {\n document.getElementById('loading-modal').classList.add('hidden');\n }\n\n function openResetModal() {\n document.getElementById('reset-modal').classList.remove('hidden');\n }\n\n function closeResetModal() {\n document.getElementById('reset-modal').classList.add('hidden');\n }\n\n function confirmReset() {\n document.getElementById('biodata-form').reset();\n removePhoto();\n updateLive();\n closeResetModal();\n showToast('All form fields cleared');\n }\n\n function showToast(msg) {\n const toast = document.getElementById('toast');\n const text = document.getElementById('toast-text');\n text.textContent = msg;\n toast.classList.remove('translate-y-20', 'opacity-0');\n toast.classList.add('translate-y-0', 'opacity-100');\n setTimeout(() => {\n toast.classList.add('translate-y-20', 'opacity-0');\n toast.classList.remove('translate-y-0', 'opacity-100');\n }, 3200);\n }\n\n \/\/ Rich Sample Profile Loader\n function fillSampleData() {\n document.getElementById('in-shloka-sanskrit').value = \"|| \u0936\u094d\u0930\u0940 \u0917\u0923\u0947\u0936\u093e\u092f \u0928\u092e\u0903 ||\";\n document.getElementById('in-shloka-english').value = \"|| Om Sri Ganeshaya Namaha ||\";\n\n document.getElementById('in-name').value = \"Aarav Sharma\";\n document.getElementById('in-dob').value = \"14th October 1996\";\n document.getElementById('in-tob').value = \"09:25 AM\";\n document.getElementById('in-pob').value = \"Pune, Maharashtra\";\n document.getElementById('in-height').value = \"5' 10\\\" (178 cm)\";\n document.getElementById('in-complexion').value = \"Fair & Athletic\";\n document.getElementById('in-blood-group').value = \"B+ Positive\";\n document.getElementById('in-mother-tongue').value = \"Hindi\";\n document.getElementById('in-marital-status').value = \"Never Married\";\n document.getElementById('in-caste').value = \"Hindu - Brahmin (Kanyakubja)\";\n\n document.getElementById('in-rashi').value = \"Tula (Libra)\";\n document.getElementById('in-nakshatra').value = \"Swati (Charan 2)\";\n document.getElementById('in-gotra').value = \"Kashyap\";\n document.getElementById('in-manglik').value = \"Non-Manglik\";\n document.getElementById('in-lagna').value = \"Vrishabh (Taurus)\";\n document.getElementById('in-gana').value = \"Dev Gana, Antya Nadi\";\n\n document.getElementById('in-education').value = \"B.Tech (Computer Science) & M.S.\";\n document.getElementById('in-college').value = \"IIT Bombay & RWTH Aachen University\";\n document.getElementById('in-occupation').value = \"Senior Software Architect\";\n document.getElementById('in-company').value = \"Global Tech Solutions GmbH\";\n document.getElementById('in-income').value = \"\u20ac 88,000 p.a. (Approx. \u20b9 78 LPA)\";\n document.getElementById('in-work-location').value = \"Frankfurt, Germany\";\n\n document.getElementById('in-father').value = \"Mr. Rajesh Sharma (Retd. Chief Engineer, Railways)\";\n document.getElementById('in-mother').value = \"Mrs. Sunita Sharma (Senior High School Educator)\";\n document.getElementById('in-siblings').value = \"1 Younger Sister (Married, Architect in London)\";\n document.getElementById('in-family-values').value = \"Nuclear Family \/ Cultured Moderate\";\n document.getElementById('in-native').value = \"Jaipur, Rajasthan\";\n\n document.getElementById('in-hobbies').value = \"Classical Indian flute, Alpine hiking, Vedic philosophy, Cooking\";\n document.getElementById('in-likes').value = \"Nature trails, peaceful mornings, acoustic concerts, artisanal tea\";\n document.getElementById('in-dislikes').value = \"Smoking, dishonesty, clutter & unpunctuality\";\n document.getElementById('in-future-plans').value = \"Planning to continue working in Europe for the next 4-5 years before establishing an eco-friendly tech venture in India. Values spiritual living and mindful career growth.\";\n\n document.getElementById('in-partner-seeking').value = \"Bride\";\n document.getElementById('in-partner-age').value = \"24 - 28 Years\";\n document.getElementById('in-partner-height').value = \"5' 2\\\" to 5' 7\\\"\";\n document.getElementById('in-partner-diet').value = \"Vegetarian \/ Flexible\";\n document.getElementById('in-partner-location').value = \"Open to Europe \/ India\";\n document.getElementById('in-partner-edu').value = \"Graduate\/Postgraduate working professionally (IT, Medicine, Finance, Architecture).\";\n document.getElementById('in-partner-expectations').value = \"Looking for a warm, educated, and cheerful life partner who values shared cultural heritage, mutual respect, open communication, and individual personal growth.\";\n\n document.getElementById('in-contact-person').value = \"Mr. Rajesh Sharma (Father)\";\n document.getElementById('in-phone').value = \"+49 176 12345678 \/ +91 98765 43210\";\n document.getElementById('in-email').value = \"family.sharma96@example.com\";\n document.getElementById('in-address').value = \"Flat 402, Shivam Residency, Baner, Pune - 411045\";\n\n uploadedPhotoBase64 = \"https:\/\/images.unsplash.com\/photo-1507003211169-0a1dd7228f2d?w=300&auto=format&fit=crop&q=80\";\n document.getElementById('photo-thumb-container').innerHTML = `<img decoding=\"async\" src=\"${uploadedPhotoBase64}\" class=\"w-full h-full object-cover\">`;\n document.getElementById('btn-photo-remove').classList.remove('hidden');\n document.getElementById('in-photo-toggle').checked = true;\n\n updateLive();\n showToast('Sample matrimonial profile loaded');\n }\n\n \/\/ App Initialization\n window.onload = function() {\n updateLive();\n if (window.innerWidth < 1024) {\n switchMobileTab('form');\n }\n };\n <\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Hindu Marriage Bio Data Builder | srabons.de srabons.de Matrimonial Hindu Marriage Bio Data Builder Sample Data Sample Clear Share PNG Download PDF Studio View: Edit Form Live Preview Sacred Aesthetic Theme Royal Maroon Gold & Sindoor Sandalwood Warm Ochre Peacock Green Sacred Emerald Royal Navy Ivory & Brass 1 Header & Profile Photo Lord Ganesha […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kb_optimizer_status":1,"footnotes":""},"class_list":["post-1006","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages\/1006","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/comments?post=1006"}],"version-history":[{"count":6,"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages\/1006\/revisions"}],"predecessor-version":[{"id":1013,"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages\/1006\/revisions\/1013"}],"wp:attachment":[{"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/media?parent=1006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}