:root{--color-primary:#6366f1;--color-primary-dark:#4f46e5;--color-primary-light:#818cf8;--color-success:#10b981;--color-success-dark:#059669;--color-danger:#ef4444;--color-text:#1f2937;--color-text-light:#6b7280;--color-bg:#f8fafc;--color-bg-secondary:#fff;--color-border:#e2e8f0;--gradient-primary:linear-gradient(135deg,#667eea 0%,#764ba2 100%);--gradient-success:linear-gradient(135deg,#10b981 0%,#059669 100%);--gradient-card:linear-gradient(135deg,#ffffffe6 0%,#fffc 100%);--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--touch-target:44px;--input-height:52px;--radius-sm:6px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--shadow-sm:0 1px 3px 0 #00000014,0 1px 2px -1px #00000014;--shadow-md:0 4px 6px -1px #00000014,0 2px 4px -2px #00000014;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--color-bg:#0f172a;--color-bg-secondary:#1e293b;--color-text:#f1f5f9;--color-text-light:#cbd5e1;--color-border:#334155;--gradient-card:linear-gradient(135deg,#1e293be6 0%,#1e293bcc 100%)}}*{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100vh;margin:0;padding:0}body{background-color:var(--color-bg);color:var(--color-text);min-width:320px;font-size:16px}#root{min-height:100vh}h1{color:var(--color-text);font-size:clamp(1.5rem,5vw,2rem);font-weight:700;line-height:1.2}h2{color:var(--color-text);font-size:clamp(1.25rem,4vw,1.5rem);font-weight:600;line-height:1.3}p{line-height:1.6}button{cursor:pointer;touch-action:manipulation;border:none;font-family:inherit;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}button:before{content:"";background:#fff3;border-radius:50%;width:0;height:0;transition:width .6s,height .6s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}button:active:before{width:300px;height:300px}button:active{transform:scale(.97)}button:disabled{opacity:.6;cursor:not-allowed;transform:none}input{font-family:inherit;font-size:1rem}input:focus{outline:none}.visually-hidden{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.participant-input{width:100%}.input-group{gap:var(--space-sm);display:flex}.participant-input-field{height:var(--input-height);padding:0 var(--space-md);border:2px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-secondary);color:var(--color-text);box-shadow:var(--shadow-sm);flex:1;font-size:1rem;transition:all .3s cubic-bezier(.4,0,.2,1)}.participant-input-field:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #6366f11a,var(--shadow-md);transform:translateY(-1px)}.participant-input-field::placeholder{color:var(--color-text-light)}.add-btn{min-width:var(--touch-target);height:var(--input-height);padding:0 var(--space-xl);background:var(--gradient-primary);color:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);font-size:1rem;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1)}.add-btn:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.error-message{color:var(--color-danger);margin-top:var(--space-sm);padding:var(--space-sm)var(--space-md);border-radius:var(--radius-md);border-left:3px solid var(--color-danger);background:#ef44441a;font-size:.875rem}.participant-list{width:100%}.participant-list h2{margin-bottom:var(--space-lg);color:var(--color-text)}.empty-state{padding:var(--space-xl);text-align:center;color:var(--color-text-light);background:var(--gradient-card);border-radius:var(--radius-lg);border:2px dashed var(--color-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.participant-items{gap:var(--space-md);flex-direction:column;list-style:none;display:flex}.participant-item{padding:var(--space-lg);background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);justify-content:space-between;align-items:center;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.participant-item:hover{box-shadow:var(--shadow-lg);border-color:var(--color-primary-light);transform:translateY(-2px)}.participant-name{color:var(--color-text);font-size:1rem;font-weight:500}.remove-btn{min-width:var(--touch-target);min-height:var(--touch-target);padding:var(--space-sm);color:var(--color-danger);border-radius:var(--radius-md);background:0 0;font-size:1.5rem;line-height:1;transition:all .3s cubic-bezier(.4,0,.2,1)}.remove-btn:hover{background:#ef444426;transform:rotate(90deg)}.assignment-generator{gap:var(--space-md);flex-direction:column;align-items:center;display:flex}.generate-btn{width:100%;height:56px;padding:0 var(--space-xl);background:var(--gradient-success);color:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);font-size:1.125rem;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1)}.generate-btn:hover:not(:disabled){box-shadow:var(--shadow-xl);transform:translateY(-3px)}.generate-btn:disabled{background:var(--color-border);color:var(--color-text-light);box-shadow:var(--shadow-sm)}.hint-text{color:var(--color-text-light);text-align:center;font-size:.875rem}@media (min-width:640px){.generate-btn{max-width:450px}}.person-selector{gap:var(--space-lg);flex-direction:column;width:100%;display:flex}.selector-title{text-align:center;margin-bottom:var(--space-sm);background:var(--gradient-primary);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.selector-subtitle{text-align:center;color:var(--color-text-light);font-size:.9375rem}.person-buttons{gap:var(--space-md);grid-template-columns:1fr;display:grid}.person-button{min-height:64px;padding:var(--space-md)var(--space-lg);background:var(--color-bg-secondary);color:var(--color-text);border:2px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);font-size:1.125rem;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1)}.person-button:hover{border-color:var(--color-primary);background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-xl);transform:translateY(-3px)scale(1.02)}@media (min-width:640px){.person-buttons{grid-template-columns:repeat(2,1fr)}}.assignment-reveal{width:100%;max-width:550px;padding:var(--space-xl);background:var(--gradient-primary);color:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);gap:var(--space-lg);text-align:center;flex-direction:column;margin:0 auto;animation:.4s cubic-bezier(.4,0,.2,1) fadeInScale;display:flex}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.private-warning{text-transform:uppercase;letter-spacing:.05em;opacity:.95;padding:var(--space-sm)var(--space-md);border-radius:var(--radius-md);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff3;font-size:.875rem;font-weight:600}.assignment-content{padding:var(--space-xl)0}.assignment-text{margin-bottom:var(--space-md);opacity:.95;font-size:clamp(1.25rem,4vw,1.5rem);font-weight:500}.receiver-name{margin:var(--space-lg)0;word-break:break-word;text-shadow:0 2px 10px #0000001a;font-size:clamp(2.25rem,8vw,3.5rem);font-weight:800;line-height:1.1}.remember-warning{padding:var(--space-md);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;border:1px solid #fff3;font-size:.875rem;line-height:1.6}.confirm-btn{width:100%;height:var(--input-height);margin-top:var(--space-md);color:var(--color-primary);border-radius:var(--radius-lg);background:#fff;font-size:1.125rem;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 6px #0003}.confirm-btn:hover{background:#f8f9fa;transform:translateY(-2px);box-shadow:0 6px 12px #00000040}.reveal-container{justify-content:center;align-items:center;gap:var(--space-xl);flex-direction:column;flex:1;width:100%;display:flex}.progress-info{text-align:center;color:var(--color-text-light);padding:var(--space-sm)var(--space-lg);background:var(--color-bg-secondary);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);font-size:.9375rem;font-weight:600}.all-revealed{justify-content:center;align-items:center;gap:var(--space-xl);text-align:center;padding:var(--space-xl);flex-direction:column;flex:1;animation:.5s cubic-bezier(.4,0,.2,1) fadeInScale;display:flex}.success-icon{background:var(--gradient-success);color:#fff;width:100px;height:100px;box-shadow:var(--shadow-xl);border-radius:50%;justify-content:center;align-items:center;font-size:3.5rem;animation:1s ease-in-out bounce;display:flex}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.all-revealed h2{margin-bottom:var(--space-sm);background:var(--gradient-success);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.all-revealed p{color:var(--color-text-light);max-width:450px;line-height:1.7}.success-emoji{margin-top:var(--space-md);font-size:4rem;animation:2s ease-in-out infinite rotate}@keyframes rotate{0%,to{transform:rotate(0)}50%{transform:rotate(10deg)}}.share-link{width:100%;padding:var(--space-xl);background:var(--gradient-card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid var(--color-primary);border-radius:var(--radius-xl);gap:var(--space-lg);box-shadow:var(--shadow-lg);flex-direction:column;display:flex}.share-link h3{background:var(--gradient-primary);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0;font-size:1.375rem}.share-description{color:var(--color-text-light);margin:0;font-size:.9375rem;line-height:1.6}.url-container{width:100%}.url-input{width:100%;padding:var(--space-md);background:var(--color-bg);color:var(--color-text);border:2px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;box-shadow:var(--shadow-sm);font-family:Monaco,Courier New,monospace;font-size:.875rem;transition:all .3s cubic-bezier(.4,0,.2,1)}.url-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #6366f11a,var(--shadow-md);outline:none}.share-buttons{gap:var(--space-sm);flex-direction:column;display:flex}.copy-btn,.whatsapp-btn{height:var(--input-height);padding:0 var(--space-xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);font-size:1rem;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1)}.copy-btn{background:var(--gradient-primary);color:#fff}.copy-btn:hover{box-shadow:var(--shadow-xl);transform:translateY(-2px)}.whatsapp-btn{color:#fff;background:linear-gradient(135deg,#25d366 0%,#1da851 100%)}.whatsapp-btn:hover{box-shadow:var(--shadow-xl);transform:translateY(-2px)}.share-warning{color:var(--color-text-light);padding:var(--space-sm)var(--space-md);border-radius:var(--radius-md);border-left:3px solid var(--color-primary);background:#6366f10d;margin:0;font-size:.8125rem;font-style:italic}@media (min-width:640px){.share-buttons{flex-direction:row}.copy-btn,.whatsapp-btn{flex:1}}.app{max-width:100%;min-height:100vh;padding:var(--space-md);flex-direction:column;display:flex}.app-header{padding:var(--space-lg)var(--space-md);background:var(--color-bg-secondary);border-radius:var(--radius-xl);margin-bottom:var(--space-xl);box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);justify-content:space-between;align-items:center;display:flex}.app-header h1{background:var(--gradient-primary);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0}.reset-btn{min-height:var(--touch-target);padding:var(--space-sm)var(--space-lg);color:var(--color-danger);border:2px solid var(--color-danger);border-radius:var(--radius-lg);background:0 0;font-size:.875rem;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1)}.reset-btn:hover{background:var(--color-danger);color:#fff;box-shadow:var(--shadow-lg);transform:translateY(-2px)}.setup-phase,.reveal-phase{gap:var(--space-xl);flex-direction:column;flex:1;display:flex}@media (min-width:640px){.app{max-width:650px;padding:var(--space-xl);margin:0 auto}.app-header{padding:var(--space-xl)var(--space-lg)}}