body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-primary);color:var(--text-primary);transition:background-color var(--transition-normal),color var(--transition-normal)}html{background-color:var(--bg-primary);color:var(--text-primary)}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--primary-light: #667eea;--primary-dark: #764ba2;--white: #ffffff;--gray-50: #f9fafb;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-300: #d1d5db;--gray-400: #9ca3af;--gray-500: #6b7280;--gray-600: #4b5563;--gray-700: #374151;--gray-800: #1f2937;--gray-900: #111827;--success: #10b981;--warning: #f59e0b;--error: #ef4444;--info: #3b82f6;--bg-primary: #ffffff;--bg-secondary: #f9fafb;--bg-tertiary: #f3f4f6;--bg-elevated: #ffffff;--bg-overlay: rgba(0, 0, 0, .7);--text-primary: #111827;--text-secondary: #4b5563;--text-tertiary: #6b7280;--text-muted: #9ca3af;--border-primary: #e5e7eb;--border-secondary: #d1d5db;--border-accent: #667eea;--shadow-color: rgba(0, 0, 0, .1);--shadow-color-strong: rgba(0, 0, 0, .25)}[data-theme=dark]{--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-tertiary: #334155;--bg-elevated: #1e293b;--bg-overlay: rgba(0, 0, 0, .8);--text-primary: #f8fafc;--text-secondary: #cbd5e1;--text-tertiary: #94a3b8;--text-muted: #64748b;--border-primary: #334155;--border-secondary: #475569;--border-accent: #667eea;--shadow-color: rgba(0, 0, 0, .3);--shadow-color-strong: rgba(0, 0, 0, .5)}:root{--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem}:root{--font-light: 300;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700}:root{--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem}:root{--radius-sm: .25rem;--radius-md: .375rem;--radius-lg: .5rem;--radius-xl: .75rem;--radius-2xl: 1rem;--radius-3xl: 1.5rem}:root{--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .25)}:root{--transition-fast: .15s ease-in-out;--transition-normal: .3s ease-in-out;--transition-slow: .5s ease-in-out}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-center{text-align:center}.w-full{width:100%}.h-full{height:100%}.p-4{padding:var(--space-4)}.p-6{padding:var(--space-6)}.p-8{padding:var(--space-8)}.px-4{padding-left:var(--space-4);padding-right:var(--space-4)}.py-4{padding-top:var(--space-4);padding-bottom:var(--space-4)}.m-4{margin:var(--space-4)}.mb-4{margin-bottom:var(--space-4)}.mt-4{margin-top:var(--space-4)}.ml-4{margin-left:var(--space-4)}.mr-4{margin-right:var(--space-4)}.bg-primary{background:var(--primary-gradient)}.bg-white{background-color:var(--white)}.bg-gray-50{background-color:var(--gray-50)}.bg-gray-100{background-color:var(--gray-100)}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-white{color:var(--white)}.text-success{color:var(--success)}.text-error{color:var(--error)}.text-warning{color:var(--warning)}.text-info{color:var(--info)}.border{border:1px solid var(--border-primary)}.border-primary{border-color:var(--border-primary)}.border-secondary{border-color:var(--border-secondary)}.rounded{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.shadow{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.shadow-xl{box-shadow:var(--shadow-xl)}.transition{transition:all var(--transition-normal)}.transition-fast{transition:all var(--transition-fast)}.transition-slow{transition:all var(--transition-slow)}@media (max-width: 768px){.md\:hidden{display:none}.md\:block{display:block}.md\:flex{display:flex}}@media (max-width: 480px){.sm\:hidden{display:none}.sm\:block{display:block}.sm\:text-center{text-align:center}}.success-message{background-color:#10b9811a;color:var(--success);padding:var(--space-4);border-radius:var(--radius-lg);margin-bottom:var(--space-6);font-size:var(--text-base);font-weight:var(--font-medium);border:2px solid var(--success);display:flex;align-items:center;gap:var(--space-3)}.success-message:before{content:"✅";font-size:1.2rem;flex-shrink:0}.error-message{background-color:#ef44441a;color:var(--error);padding:var(--space-4);border-radius:var(--radius-lg);margin-bottom:var(--space-6);font-size:var(--text-base);font-weight:var(--font-medium);border:2px solid var(--error);display:flex;align-items:center;gap:var(--space-3)}.error-message:before{content:"❌";font-size:1.2rem;flex-shrink:0}.warning-message{background-color:#f59e0b1a;color:var(--warning);padding:var(--space-4);border-radius:var(--radius-lg);margin-bottom:var(--space-6);font-size:var(--text-base);font-weight:var(--font-medium);border:2px solid var(--warning);display:flex;align-items:center;gap:var(--space-3)}.warning-message:before{content:"⚠️";font-size:1.2rem;flex-shrink:0}.info-message{background-color:#3b82f61a;color:var(--info);padding:var(--space-4);border-radius:var(--radius-lg);margin-bottom:var(--space-6);font-size:var(--text-base);font-weight:var(--font-medium);border:2px solid var(--info);display:flex;align-items:center;gap:var(--space-3)}.info-message:before{content:"ℹ️";font-size:1.2rem;flex-shrink:0}.message-compact{padding:var(--space-3);margin-bottom:var(--space-4);font-size:var(--text-sm)}.message-large{padding:var(--space-6);margin-bottom:var(--space-8);font-size:var(--text-lg)}[data-theme=dark] .success-message{background-color:#10b98133;border-color:var(--success)}[data-theme=dark] .error-message{background-color:#ef444433;border-color:var(--error)}[data-theme=dark] .warning-message{background-color:#f59e0b33;border-color:var(--warning)}[data-theme=dark] .info-message{background-color:#3b82f633;border-color:var(--info)}*{box-sizing:border-box;margin:0;padding:0}.App{min-height:100vh;background:var(--primary-gradient);background-color:var(--bg-primary);color:var(--text-primary);display:flex;flex-direction:column}.App-header{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:var(--space-8);color:var(--white);border-bottom:1px solid rgba(255,255,255,.2);background-color:var(--bg-elevated);border-bottom-color:var(--border-primary)}.header-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-4)}.header-left{flex:1;text-align:left}.header-right{display:flex;gap:var(--space-4);align-items:center;flex-wrap:wrap}.header-toggle{margin-right:var(--space-2)}.manage-family-btn,.switch-family-btn,.logout-btn{background:#fff3;color:var(--white);border:1px solid rgba(255,255,255,.3);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);cursor:pointer;font-size:var(--text-sm);font-weight:var(--font-medium);transition:all var(--transition-normal);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-primary);background-color:var(--bg-elevated);border-color:var(--border-primary)}.manage-family-btn:hover,.switch-family-btn:hover,.logout-btn:hover{background:#ffffff4d;border-color:#ffffff80}.App-header h1{font-size:var(--text-4xl);margin-bottom:var(--space-2);font-weight:var(--font-light);color:var(--text-primary)}.App-header p{font-size:var(--text-lg);opacity:.9;color:var(--text-secondary)}.App-main{padding:var(--space-8);max-width:1200px;margin:0 auto;background-color:var(--bg-primary);color:var(--text-primary);min-height:calc(100vh - 200px);flex:1}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;color:var(--white);background-color:var(--bg-primary)}.loading-spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.3);border-top:4px solid var(--white);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:var(--space-4)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.admin-btn{background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff;border:2px solid rgba(231,76,60,.8);padding:.75rem 1.5rem;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 15px #e74c3c4d}.admin-btn:hover{background:linear-gradient(135deg,#c0392b,#a93226);border-color:#e74c3c;transform:translateY(-2px);box-shadow:0 6px 20px #e74c3c66}body,#root{margin:0;padding:0;min-height:100vh}#root{display:flex;flex-direction:column}@supports (padding: max(0px)){.App-header{padding-top:max(1.5rem,env(safe-area-inset-top));padding-left:max(1.5rem,env(safe-area-inset-left));padding-right:max(1.5rem,env(safe-area-inset-right))}.App-main{padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right));padding-bottom:max(1rem,env(safe-area-inset-bottom))}}.mobile-app{min-height:100vh;min-height:-webkit-fill-available}@supports (-webkit-touch-callout: none){.mobile-app{-webkit-overflow-scrolling:touch}.App-header{padding-top:max(1.5rem,env(safe-area-inset-top,1.5rem));padding-left:max(1.5rem,env(safe-area-inset-left,1.5rem));padding-right:max(1.5rem,env(safe-area-inset-right,1.5rem))}.App-main{padding-left:max(1rem,env(safe-area-inset-left,1rem));padding-right:max(1rem,env(safe-area-inset-right,1rem));padding-bottom:max(1rem,env(safe-area-inset-bottom,1rem))}}@media (max-width: 768px){.App-header{padding:1rem;padding-top:max(1rem,env(safe-area-inset-top,1rem))}.App-header h1{font-size:1.5rem;margin-bottom:.25rem}.App-main{padding:.75rem;padding-left:max(.75rem,env(safe-area-inset-left,.75rem));padding-right:max(.75rem,env(safe-area-inset-right,.75rem));padding-bottom:max(.75rem,env(safe-area-inset-bottom,.75rem))}.header-right{flex-direction:column;align-items:stretch;width:100%;margin-top:1rem}.header-right>*{margin-bottom:.5rem}}@media (max-width: 480px){.App-header h1{font-size:1.25rem;margin-bottom:.25rem}.App-header p{font-size:.875rem;margin-bottom:.5rem}.App-header{padding:.75rem;padding-top:max(.75rem,env(safe-area-inset-top,.75rem))}.App-main{padding:.5rem;padding-left:max(.5rem,env(safe-area-inset-left,.5rem));padding-right:max(.5rem,env(safe-area-inset-right,.5rem));padding-bottom:max(.5rem,env(safe-area-inset-bottom,.5rem))}}@media screen and (max-width: 414px) and (max-height: 896px){.App-header{padding-top:max(2rem,env(safe-area-inset-top,2rem))}}@media screen and (max-width: 375px) and (max-height: 812px){.App-header{padding-top:max(2rem,env(safe-area-inset-top,2rem))}}