/* ==========================================================================Base Styles & Reset within the App Wrapper to prevent theme conflicts========================================================================== */#nl-app-wrapper {max-width: 800px;margin: 0 auto;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;background: #ffffff;padding: 30px;color: #333333;border-radius: 24px;box-shadow: 0 15px 50px rgba(0, 0, 0, 0.06);box-sizing: border-box;line-height: 1.6;}#nl-app-wrapper * {box-sizing: border-box;}/* ==========================================================================Brand Colors & Utility Classes========================================================================== */#nl-app-wrapper .nl-pink { color: #E91E63; }#nl-app-wrapper .nl-blue { color: #2196F3; }#nl-app-wrapper .nl-green { color: #4CAF50; }#nl-app-wrapper .nl-dark { color: #0f172a; }#nl-app-wrapper .nl-bg-green { background-color: #10b981; color: #ffffff; }#nl-app-wrapper .nl-bg-blue { background-color: #2196F3; color: #ffffff; }#nl-app-wrapper .nl-bg-pink { background-color: #E91E63; color: #ffffff; }#nl-app-wrapper .nl-hidden { display: none !important; }#nl-app-wrapper .nl-mt-10 { margin-top: 10px; }#nl-app-wrapper .nl-mt-15 { margin-top: 15px; }#nl-app-wrapper .nl-mt-25 { margin-top: 25px; }#nl-app-wrapper .nl-text-center { text-align: center; }#nl-app-wrapper .nl-text-sm { font-size: 14px; color: #64748b; line-height: 1.5; }/* ==========================================================================Navigation & Header========================================================================== */#nl-app-wrapper .nl-top-nav {display: flex;justify-content: space-between;align-items: center;border-bottom: 2px solid #f1f5f9;padding-bottom: 20px;margin-bottom: 30px;}#nl-app-wrapper .nl-logo {font-size: 26px;font-weight: 800;margin: 0;letter-spacing: -0.5px;color: #1e293b;}#nl-app-wrapper .nl-icon-btn {background: #f1f5f9;border: none;padding: 10px 18px;border-radius: 12px;cursor: pointer;font-weight: 700;color: #2196F3;transition: all 0.3s ease;font-size: 14px;display: flex;align-items: center;gap: 8px;}#nl-app-wrapper .nl-icon-btn:hover {background: #e2e8f0;transform: translateY(-2px);}/* ==========================================================================Search Section========================================================================== */#nl-app-wrapper .nl-search-section {text-align: center;margin-bottom: 40px;background: #f8fafc;padding: 35px 25px;border-radius: 20px;border: 1px solid #e2e8f0;}#nl-app-wrapper .nl-search-box {display: flex;gap: 12px;flex-wrap: wrap;justify-content: center;max-width: 600px;margin: 0 auto;}#nl-app-wrapper .nl-input {width: 100%;padding: 16px 20px;border: 2px solid #cbd5e1;border-radius: 14px;font-size: 16px;transition: all 0.3s ease;outline: none;background: #ffffff;color: #1e293b;font-family: inherit;}#nl-app-wrapper .nl-search-box input {flex: 1;min-width: 240px;}#nl-app-wrapper .nl-input:focus {border-color: #2196F3;box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.15);}/* ==========================================================================Buttons========================================================================== */#nl-app-wrapper .nl-btn {padding: 16px 28px;border: none;border-radius: 14px;font-size: 16px;font-weight: 700;cursor: pointer;color: #ffffff;transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);text-decoration: none;display: inline-block;text-align: center;letter-spacing: 0.3px;font-family: inherit;}#nl-app-wrapper .nl-btn:hover {transform: translateY(-3px);box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);}#nl-app-wrapper .nl-btn:active {transform: translateY(-1px);}#nl-app-wrapper .nl-btn-green { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }#nl-app-wrapper .nl-btn-blue { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }#nl-app-wrapper .nl-btn-pink { background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%); }#nl-app-wrapper .nl-btn-block { width: 100%; display: block; }/* ==========================================================================Dashboard Cards & Stats========================================================================== */#nl-app-wrapper .nl-card {background: #ffffff;border: 1px solid #e2e8f0;border-radius: 20px;padding: 30px;margin-bottom: 30px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);}#nl-app-wrapper .nl-dash-header {display: flex;justify-content: space-between;align-items: center;border-bottom: 2px solid #f1f5f9;padding-bottom: 15px;margin-bottom: 25px;}#nl-app-wrapper .nl-dash-header h3 {margin: 0;font-size: 20px;font-weight: 700;color: #1e293b;display: flex;align-items: center;gap: 8px;}#nl-app-wrapper .nl-badge {padding: 6px 14px;border-radius: 20px;font-size: 13px;font-weight: 700;text-transform: uppercase;letter-spacing: 0.5px;}#nl-app-wrapper .nl-dash-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));gap: 15px;}#nl-app-wrapper .nl-dash-item {background: #f8fafc;padding: 20px;border-radius: 16px;border: 1px solid #e2e8f0;text-align: center;transition: transform 0.3s ease;}#nl-app-wrapper .nl-dash-item:hover {transform: translateY(-3px);border-color: #cbd5e1;}#nl-app-wrapper .nl-dash-item span {display: block;font-size: 13px;color: #64748b;margin-bottom: 8px;font-weight: 600;text-transform: uppercase;}#nl-app-wrapper .nl-dash-item strong {font-size: 22px;color: #0f172a;font-weight: 800;}/* ==========================================================================Pricing Section========================================================================== */#nl-app-wrapper .nl-pricing-section { margin-top: 40px; }#nl-app-wrapper .nl-section-title {text-align: center;font-size: 24px;margin-bottom: 35px;font-weight: 800;color: #0f172a;}#nl-app-wrapper .nl-pricing-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));gap: 25px;}#nl-app-wrapper .nl-price-card {background: #ffffff;border: 2px solid #e2e8f0;border-radius: 24px;padding: 35px 25px;text-align: center;position: relative;transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);display: flex;flex-direction: column;}#nl-app-wrapper .nl-price-card:hover {transform: translateY(-8px);box-shadow: 0 20px 40px rgba(59, 130, 246, 0.12);border-color: #3b82f6;}#nl-app-wrapper .nl-price-badge {position: absolute;top: -15px;right: -10px;font-size: 13px;padding: 6px 16px;box-shadow: 0 4px 10px rgba(0,0,0,0.1);}#nl-app-wrapper .nl-price-card h4 {font-size: 20px;color: #334155;margin: 0 0 10px 0;font-weight: 700;}#nl-app-wrapper .nl-price-amount {font-size: 40px;font-weight: 900;color: #0f172a;margin: 10px 0 25px 0;display: flex;justify-content: center;align-items: baseline;}#nl-app-wrapper .nl-currency {font-size: 18px;color: #64748b;margin-left: 6px;font-weight: 700;}#nl-app-wrapper .nl-price-features {list-style: none;padding: 0;margin: 0 0 30px 0;text-align: left;font-size: 15px;color: #475569;flex-grow: 1;}#nl-app-wrapper .nl-price-features li {padding: 12px 0;border-bottom: 1px solid #f1f5f9;display: flex;align-items: center;gap: 10px;}#nl-app-wrapper .nl-price-features li:last-child { border-bottom: none; }/* ==========================================================================Modals (Fixed Overlay)========================================================================== /
.nl-modal {
position: fixed !important;
z-index: 999999 !important;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background-color: rgba(15, 23, 42, 0.75); / Darker blur overlay /
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: none; / Handled by JS */overflow-y: auto;padding: 20px;box-sizing: border-box;}/* Modal Content Centering /
.nl-modal-content {
background-color: #ffffff;
margin: 8vh auto; / Centers it vertically a bit */padding: 35px;border-radius: 24px;width: 100%;max-width: 450px;position: relative;box-shadow: 0 25px 60px rgba(0,0,0,0.4);animation: nl-slideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1);box-sizing: border-box;}.nl-modal-content-lg { max-width: 650px; }@keyframes nl-slideUpFade {from { transform: translateY(40px) scale(0.95); opacity: 0; }to { transform: translateY(0) scale(1); opacity: 1; }}.nl-close {position: absolute;right: 20px;top: 20px;font-size: 28px;cursor: pointer;color: #94a3b8;line-height: 1;transition: all 0.2s;background: #f1f5f9;width: 36px;height: 36px;display: flex;align-items: center;justify-content: center;border-radius: 50%;z-index: 10;}.nl-close:hover {color: #e11d48;background: #ffe4e6;transform: rotate(90deg);}/* ==========================================================================Beautiful Search Result UI (New Update)========================================================================== */.nl-protected-box {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}.nl-result-header {text-align: center;margin-bottom: 25px;position: relative;}/* The Circular Image /
.nl-result-image {
width: 130px;
height: 130px;
border-radius: 50%;
object-fit: cover;
border: 4px solid #ffffff;
box-shadow: 0 10px 25px rgba(33, 150, 243, 0.25);
margin: 0 auto 15px auto;
display: block;
pointer-events: none; / Prevents long-press save on mobile */}/* The Clean Data Grid / List */.nl-clean-data-list {background: #f8fafc;border: 1px solid #e2e8f0;border-radius: 16px;padding: 10px 20px;}.nl-data-row {display: flex;justify-content: space-between;align-items: center;padding: 14px 0;border-bottom: 1px solid #e2e8f0;}.nl-data-row:last-child {border-bottom: none;}.nl-data-label {color: #64748b;font-size: 14px;font-weight: 600;text-transform: capitalize;}.nl-data-value {color: #0f172a;font-size: 15px;font-weight: 700;text-align: right;max-width: 60%;word-wrap: break-word;}/* ==========================================================================Family Management Table========================================================================== */.nl-custom-table-wrapper {overflow-x: auto;border-radius: 12px;border: 1px solid #e2e8f0;background: #fff;}.nl-custom-table {width: 100%;border-collapse: separate;border-spacing: 0;font-size: 14px;text-align: left;}.nl-custom-table th,.nl-custom-table td {padding: 14px 16px;border-bottom: 1px solid #e2e8f0;}.nl-custom-table th {background: #f8fafc;color: #475569;font-weight: 700;text-transform: uppercase;font-size: 12px;letter-spacing: 0.5px;}.nl-custom-table tr:last-child td { border-bottom: none; }.nl-custom-table tbody tr:hover { background-color: #f8fafc; }.nl-btn-sm-del {background: #fff1f2;color: #e11d48;border: 1px solid #fecdd3;padding: 6px 12px;border-radius: 8px;cursor: pointer;font-size: 12px;font-weight: 700;transition: all 0.2s;}.nl-btn-sm-del:hover {background: #e11d48;color: #ffffff;}/* ==========================================================================Toast Notifications========================================================================== */#nl-toast-container {position: fixed;top: 24px;right: 24px;z-index: 9999999;display: flex;flex-direction: column;gap: 12px;}.nl-toast {min-width: 280px;color: #ffffff;border-radius: 12px;padding: 16px 20px;box-shadow: 0 10px 30px rgba(0,0,0,0.15);animation: nl-fadeinRight 0.4s cubic-bezier(0.16, 1, 0.3, 1);font-weight: 600;font-size: 14px;display: flex;align-items: center;gap: 12px;}.nl-toast-success { background: #10b981; border-left: 5px solid #047857; }.nl-toast-error { background: #ef4444; border-left: 5px solid #b91c1c; }.nl-toast-info { background: #3b82f6; border-left: 5px solid #1d4ed8; }@keyframes nl-fadeinRight {from { transform: translateX(100%); opacity: 0; }to { transform: translateX(0); opacity: 1; }}@keyframes nl-fadeoutRight {from { transform: translateX(0); opacity: 1; }to { transform: translateX(100%); opacity: 0; }}/* ==========================================================================Responsive Adjustments (Mobile Friendly)========================================================================== */@media (max-width: 650px) {#nl-app-wrapper { padding: 20px; border-radius: 16px; }.nl-modal-content { padding: 25px; margin: 5vh auto; border-radius: 20px; }#nl-app-wrapper .nl-dash-header { flex-direction: column; gap: 12px; text-align: center; }#nl-app-wrapper .nl-top-nav { flex-direction: column; gap: 15px; text-align: center; }.nl-data-row { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 0; }
.nl-data-value { text-align: left; max-width: 100%; font-size: 16px; }

#nl-toast-container { top: 15px; left: 15px; right: 15px; align-items: stretch; }
.nl-toast { min-width: unset; width: 100%; }
}