:root{--space-0: 0;--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;--space-24: 6rem;--blue-50: #eff6ff;--blue-100: #dbeafe;--blue-200: #bfdbfe;--blue-300: #93c5fd;--blue-400: #60a5fa;--blue-500: #3b82f6;--blue-600: #2563eb;--blue-700: #1d4ed8;--blue-800: #1e40af;--blue-900: #1e3a8a;--brand-blue-50: #e6f2f7;--brand-blue-100: #b3d9e6;--brand-blue-200: #80c0d5;--brand-blue-300: #4da7c4;--brand-blue-400: #2c7a9e;--brand-blue-500: #1e5f7a;--brand-blue-600: #1a4d66;--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;--gray-950: #030712;--green-50: #f0fdf4;--green-500: #22c55e;--green-600: #16a34a;--red-50: #fef2f2;--red-500: #ef4444;--red-600: #dc2626;--amber-50: #fffbeb;--amber-500: #f59e0b;--amber-600: #d97706;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-mono: "source-code-pro", "Menlo", "Monaco", "Consolas", "Courier New", monospace;--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;--text-5xl: 3rem;--leading-none: 1;--leading-tight: 1.25;--leading-normal: 1.5;--leading-relaxed: 1.625;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--radius-sm: .125rem;--radius-md: .375rem;--radius-lg: .5rem;--radius-xl: .75rem;--radius-2xl: 1rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .08);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--shadow-card: 0 4px 12px rgba(0, 0, 0, .08);--shadow-modal: 0 10px 30px rgba(0, 0, 0, .15);--duration-fast: .1s;--duration-normal: .2s;--duration-slow: .3s;--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--ease-in-out: cubic-bezier(.4, 0, .2, 1);--color-primary: var(--brand-blue-400);--color-primary-hover: var(--brand-blue-500);--color-primary-dark: var(--brand-blue-600);--color-success: var(--green-600);--color-warning: var(--amber-500);--color-error: var(--red-600);--color-text: var(--gray-900);--color-text-secondary: var(--gray-600);--color-text-muted: var(--gray-400);--color-bg: var(--gray-50);--color-surface: white;--color-surface-secondary: var(--gray-100);--color-border: var(--gray-200);--btn-height-sm: 32px;--btn-height-md: 40px;--btn-height-lg: 48px;--input-height: 40px;--focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary);--focus-ring-offset: 2px}[data-theme=dark]{--color-text: var(--gray-100);--color-text-secondary: var(--gray-300);--color-text-muted: var(--gray-500);--color-bg: var(--gray-900);--color-surface: var(--gray-800);--color-surface-secondary: var(--gray-700);--color-border: var(--gray-700)}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}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sr-only:focus{position:static;width:auto;height:auto;padding:inherit;margin:inherit;overflow:visible;clip:auto;white-space:normal}.skip-link{position:absolute;top:-100%;left:0;padding:var(--space-2) var(--space-4);background:var(--color-primary);color:#fff;text-decoration:none;font-weight:var(--font-semibold);z-index:10000;border-radius:0 0 var(--radius-md) 0}.skip-link:focus{top:0;outline:2px solid white;outline-offset:2px}.toast{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;min-width:300px;max-width:500px;animation:toastSlideIn .3s ease-out;position:relative;border-left:4px solid}.toast--success{border-left-color:#10b981}.toast--error{border-left-color:#ef4444}.toast--warning{border-left-color:#f59e0b}.toast--info{border-left-color:#3b82f6}.toast__icon{font-size:20px;font-weight:700;flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#0000000d}.toast--success .toast__icon{color:#10b981;background:#10b9811a}.toast--error .toast__icon{color:#ef4444;background:#ef44441a}.toast--warning .toast__icon{color:#f59e0b;background:#f59e0b1a}.toast--info .toast__icon{color:#3b82f6;background:#3b82f61a}.toast__message{flex:1;font-size:.95rem;color:#333;line-height:1.4}.toast__dismiss{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:#666;transition:color .2s ease;flex-shrink:0;border-radius:4px}.toast__dismiss:hover{color:#333;background:#0000000d}.toast__dismiss:focus-visible{outline:2px solid #5ba3c6;outline-offset:2px}@keyframes toastSlideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.toast.toast--exiting{animation:toastSlideOut .2s ease-in forwards}@keyframes toastSlideOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@media (prefers-reduced-motion: reduce){.toast,.toast.toast--exiting{animation:none}}.toast-container{position:fixed;top:20px;right:20px;z-index:2000;display:flex;flex-direction:column;gap:12px;max-width:500px;pointer-events:none}.toast-container>*{pointer-events:auto}@media (max-width: 768px){.toast-container{top:10px;right:10px;left:10px;max-width:none}.toast-container .toast{min-width:auto;max-width:none}}.App{text-align:center;padding:var(--space-4)}.header{display:flex;align-items:center;padding:.8vw;background:linear-gradient(135deg,var(--brand-blue-400) 0%,var(--brand-blue-500) 100%);border-radius:var(--radius-xl) var(--radius-xl) 0 0;margin:calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) .8vw calc(-1 * var(--space-4));min-height:60px;overflow:visible}.user-info{display:flex;flex-direction:column;align-items:flex-start;color:#fff;min-width:0;flex:1}.user-info h1{margin:0;font-size:clamp(.9rem,1.2vw,1.4rem);font-weight:600;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.weekly-reward{font-size:clamp(.7rem,.9vw,.9rem);color:#ffffffe6;margin-top:2px;font-weight:500;white-space:nowrap}.user-picture{width:clamp(50px,5vw,70px);height:clamp(50px,5vw,70px);border-radius:50%;object-fit:cover;margin-right:.6vw;flex-shrink:0;display:block;border:2px solid rgba(255,255,255,.8);box-shadow:0 4px 15px #0003}.chores-container{position:relative;max-width:100%;padding:0 .5rem}ul{list-style-type:none;padding:0;margin:0}li{margin:0;font-size:16px;display:flex;align-items:center}.chore-item{display:flex;align-items:center;padding:0;margin:.4vw 0;list-style:none}.chore-item-button{display:flex;align-items:center;width:100%;padding:.5vw;margin:0;background:var(--color-surface-secondary);border:none;border-radius:var(--radius-lg);border-left:3px solid var(--color-primary);cursor:pointer;transition:all var(--duration-slow) var(--ease-in-out);text-align:left;font-family:inherit;font-size:inherit;color:inherit}.chore-item-button:hover{background:var(--gray-200);transform:translate(2px)}.chore-item-button:focus-visible{outline:2px solid var(--color-primary);outline-offset:var(--focus-ring-offset);background:var(--gray-200)}.chore-item-button:active{transform:translate(2px) scale(.98)}.dashboard-wrapper.headless .chore-item-button,.dashboard-wrapper[data-headless=true] .chore-item-button{min-height:48px;min-width:100%;padding:var(--space-3) var(--space-4)}.dashboard-wrapper.headless .complete-btn,.dashboard-wrapper[data-headless=true] .complete-btn{min-height:48px;min-width:160px;padding:var(--space-4) var(--space-6)}.headless-avatar-dropdown-item{min-height:48px;padding:var(--space-3) var(--space-4);gap:var(--space-3)}.chore-icon-container{position:relative;display:flex;align-items:center;justify-content:center;margin-right:.5vw;flex-shrink:0}.chore-icon{width:clamp(35px,3.5vw,50px);height:clamp(35px,3.5vw,50px);border-radius:6px;object-fit:cover;margin-left:0;transition:filter .3s ease;border:2px solid #5ba3c6;box-shadow:0 2px 8px #5ba3c633}.chore-icon-small{width:clamp(25px,2.5vw,35px);height:clamp(25px,2.5vw,35px);border-radius:4px;object-fit:cover;margin-left:0;transition:filter .3s ease}.chore-icon.completed{filter:grayscale(100%);opacity:.6}.checkmark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#28a745;color:#fff;font-size:clamp(8px,.8vw,12px);border-radius:50%;width:clamp(18px,2vw,28px);height:clamp(18px,2vw,28px);display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0 2px 8px #28a74566}.chore-details{display:flex;flex-direction:column;align-items:flex-start;flex:1;min-width:0}.chore-name{font-size:clamp(.7rem,.9vw,.95rem);font-weight:600;color:#333;text-align:left;margin-bottom:.1rem;display:flex;align-items:center;flex-wrap:wrap;gap:.3vw}.chore-next-due{font-size:clamp(.6rem,.7vw,.8rem);text-align:left;color:#555}.chore-picture{width:50px;height:50px;border-radius:50%;object-fit:cover;margin-right:15px}.no-chores{text-align:center;padding:1vw .5vw}.no-chores-gif{width:clamp(100px,15vw,200px);height:auto;max-width:100%;border-radius:8px;object-fit:contain}.completion-gif-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fffffff2;display:flex;justify-content:center;align-items:flex-start;padding-top:40px;z-index:10;border-radius:8px}.completion-gif-overlay img{width:clamp(100px,15vw,200px);height:auto;max-width:clamp(100px,15vw,200px);max-height:clamp(100px,15vw,200px);border-radius:8px;object-fit:contain;animation:fadeInOut 10s ease-in-out}@keyframes fadeInOut{0%{opacity:0}10%{opacity:1}90%{opacity:1}to{opacity:0}}.chore-icon-skeleton{width:clamp(35px,3.5vw,50px);height:clamp(35px,3.5vw,50px);margin-left:0;border-radius:6px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}.chore-icon-error{width:clamp(35px,3.5vw,50px);height:clamp(35px,3.5vw,50px);margin-left:0;border-radius:6px;background-color:#f0f0f0;display:flex;align-items:center;justify-content:center;font-size:clamp(1rem,1.2vw,1.5rem);color:#ccc}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:2000}.modal-content{background:var(--color-surface);padding:var(--space-6);border-radius:var(--radius-xl);text-align:center;max-width:320px;width:90%;box-shadow:var(--shadow-modal);position:relative;animation:fadeIn var(--duration-slow) var(--ease-in-out)}.modal-content h3{font-size:1.1rem;margin-bottom:1rem;color:#333;font-weight:600}.modal-divider{border:none;border-top:2px solid #e9ecef;margin:1rem 0;opacity:.6}.complete-btn{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-hover) 100%);color:#fff;padding:var(--space-3) var(--space-6);border:none;cursor:pointer;border-radius:var(--radius-lg);font-size:var(--text-base);font-weight:var(--font-semibold);transition:all var(--duration-slow) var(--ease-in-out);margin:var(--space-2) auto var(--space-5) auto;min-width:140px;display:block;box-shadow:var(--shadow-md)}.complete-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.complete-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:var(--focus-ring-offset);background:linear-gradient(135deg,var(--color-primary-hover) 0%,var(--color-primary-dark) 100%)}.close-btn{background:#6c757d;color:#fff;padding:10px 16px;border:none;cursor:pointer;border-radius:6px;font-size:.9rem;font-weight:600;transition:all .3s ease;margin:10px auto 6px;min-width:80px;display:block}.close-btn:hover{background:#5a6268;transform:translateY(-2px)}.close-btn:focus-visible{outline:2px solid #6c757d;outline-offset:2px;background:#5a6268}.modal-content .user-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:clamp(8px,1.5vw,12px);margin-top:1rem;padding:8px}.modal-content .user-card{text-align:center;cursor:pointer;background:#f8f9fa;color:#333;border-radius:10px;padding:clamp(8px,1vw,12px);box-shadow:0 2px 8px #00000014;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;border:2px solid transparent}.modal-content .user-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026;border-color:#5ba3c6}.modal-content .user-avatar{width:clamp(40px,8vw,60px);height:clamp(40px,8vw,60px);border-radius:50%;object-fit:cover;border:2px solid #e9ecef;transition:border .3s ease;flex-shrink:0}.modal-content .user-card:hover .user-avatar{border-color:#5ba3c6}.days-late-badge{display:inline-block;padding:2px 6px;border-radius:8px;font-size:clamp(8px,.6vw,10px);font-weight:600;text-transform:uppercase;letter-spacing:.3px;box-shadow:0 2px 4px #0000001a}.days-late-badge.slightly-late{background:linear-gradient(135deg,gold,#ffb700);color:#333}.days-late-badge.late{background:linear-gradient(135deg,#ff8c00,tomato);color:#fff}.days-late-badge.very-late{background:linear-gradient(135deg,#dc143c,#8b0000);color:#fff;animation:pulse-urgent 1.5s ease-in-out infinite}@keyframes pulse-urgent{0%,to{transform:scale(1);box-shadow:0 2px 4px #0000001a}50%{transform:scale(1.05);box-shadow:0 4px 8px #dc143c66}}.container{max-width:800px;margin:0 auto;padding:20px;font-family:Arial,sans-serif}h1{text-align:center;margin-bottom:20px}table{width:100%;border-collapse:collapse;margin:20px 0}table th,table td{border:1px solid #ddd;padding:8px;text-align:center}table th{background-color:#f4f4f4;font-weight:700}table tr:nth-child(2n){background-color:#f9f9f9}table tr:hover{background-color:#f1f1f1}.spinner{text-align:center;font-size:18px}.error{color:red;text-align:center;font-size:16px}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}