.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}.focus-visible{outline:2px solid var(--theme-accent, #3b82f6);outline-offset:2px}@media (prefers-contrast: high){.dropdown-trigger,.form-input,.form-checkbox,.btn{border-width:2px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.dropdown-container{position:relative;width:100%}.dropdown-label{display:block;margin-bottom:.5rem;font-weight:600;color:#374151;font-size:.875rem}.dropdown-label.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}.required-indicator{color:#ef4444;margin-left:.25rem}.dropdown-wrapper{position:relative}.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.75rem 1rem;background-color:#fff;border:1px solid #d1d5db;border-radius:.375rem;font-size:.875rem;line-height:1.25rem;color:#374151;cursor:pointer;transition:all .15s ease-in-out}.dropdown-trigger:hover:not(:disabled){border-color:#9ca3af;background-color:#f9fafb}.dropdown-trigger:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.dropdown-trigger:disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}.dropdown-trigger.error{border-color:#ef4444}.dropdown-trigger.error:focus{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.dropdown-trigger.open{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.dropdown-value{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-arrow{margin-left:.5rem;color:#6b7280;font-size:.75rem;transition:transform .15s ease-in-out}.dropdown-trigger.open .dropdown-arrow{transform:rotate(180deg)}.dropdown-content{position:absolute;top:100%;left:0;right:0;z-index:50;margin-top:.25rem;background-color:#fff;border:1px solid #d1d5db;border-radius:.375rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;opacity:0;transform:translateY(-.5rem);transition:all .15s ease-out;pointer-events:none}.dropdown-content.open{opacity:1;transform:translateY(0);pointer-events:auto}.dropdown-search{padding:.75rem;border-bottom:1px solid #e5e7eb}.dropdown-search-input{width:100%;padding:.5rem .75rem;border:1px solid #d1d5db;border-radius:.25rem;font-size:.875rem;outline:none}.dropdown-search-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.dropdown-listbox{max-height:300px;overflow-y:auto;padding:.25rem 0;margin:0;list-style:none}.dropdown-listbox:focus{outline:none}.dropdown-option{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;cursor:pointer;font-size:.875rem;color:#374151;transition:background-color .15s ease-in-out}.dropdown-option:hover:not(.disabled){background-color:#f3f4f6}.dropdown-option.highlighted{background-color:#eff6ff;color:#1d4ed8}.dropdown-option.selected{background-color:#dbeafe;color:#1e40af;font-weight:600}.dropdown-option.disabled{color:#9ca3af;cursor:not-allowed}.dropdown-option.loading,.dropdown-option.empty{color:#6b7280;font-style:italic;cursor:default}.option-label{flex:1}.option-description{font-size:.75rem;color:#6b7280;margin-top:.25rem}.option-checkmark{margin-left:.5rem;color:#10b981;font-weight:700}.dropdown-error{margin-top:.5rem;font-size:.875rem;color:#ef4444}.dropdown-help{margin-top:.5rem;font-size:.875rem;color:#6b7280}.modal-backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background-color:#00000080;padding:1rem;opacity:0;animation:fadeIn .3s ease-out forwards}.modal-backdrop.animated{animation:fadeIn .3s ease-out forwards}.modal{position:relative;width:100%;background-color:#fff;border-radius:.5rem;box-shadow:0 25px 50px -12px #00000040;transform:scale(.95) translateY(-1rem);animation:modalSlideIn .3s ease-out forwards;outline:none}.modal.animated{animation:modalSlideIn .3s ease-out forwards}.modal:focus{outline:2px solid #3b82f6;outline-offset:2px}.modal-sm{max-width:24rem}.modal-md{max-width:32rem}.modal-lg{max-width:48rem}.modal-xl{max-width:64rem}.modal-full{max-width:calc(100vw - 2rem);max-height:calc(100vh - 2rem)}.modal-content{display:flex;flex-direction:column;max-height:calc(100vh - 2rem)}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 1.5rem 0;border-bottom:1px solid #e5e7eb;margin-bottom:1rem}.modal-title{margin:0;font-size:1.25rem;font-weight:600;color:#111827}.modal-close-button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:none;border:none;border-radius:.25rem;color:#6b7280;cursor:pointer;font-size:1.5rem;line-height:1;transition:all .15s ease-in-out}.modal-close-button:hover{background-color:#f3f4f6;color:#374151}.modal-close-button:focus{outline:none;background-color:#f3f4f6;box-shadow:0 0 0 3px #3b82f61a}.modal-body{flex:1;padding:0 1.5rem 1.5rem;overflow-y:auto}.modal-loading{display:flex;align-items:center;justify-content:center;padding:2rem;color:#6b7280}.loading-spinner{display:inline-block;width:1rem;height:1rem;margin-right:.5rem;border:2px solid #e5e7eb;border-top:2px solid var(--theme-accent, #3b82f6);border-radius:50%;animation:spin 1s linear infinite}.loading-text{font-size:.875rem}.modal-confirmation .modal-header{border-bottom-color:#fbbf24}.modal-alert .modal-header{border-bottom-color:#ef4444}[data-theme=dark] .modal{background-color:#1f2937;box-shadow:0 25px 50px -12px #00000080}[data-theme=dark] .modal-header{border-bottom-color:#374151}[data-theme=dark] .modal-title{color:#f9fafb}[data-theme=dark] .modal-close-button{color:#9ca3af}[data-theme=dark] .modal-close-button:hover{background-color:#374151;color:#f3f4f6}[data-theme=dark] .modal-close-button:focus{background-color:#374151;box-shadow:0 0 0 3px rgba(var(--theme-accent-rgb, 59, 130, 246),.2)}[data-theme=dark] .confirmation-message,[data-theme=dark] .alert-message{color:#d1d5db}.confirmation-modal-content{text-align:center}.confirmation-message{margin-bottom:1.5rem;font-size:1rem;color:#374151}.confirmation-actions{display:flex;gap:.75rem;justify-content:center}.alert-modal-content{display:flex;flex-direction:column;align-items:center;text-align:center}.alert-icon{font-size:3rem;margin-bottom:1rem}.alert-message{margin-bottom:1.5rem;font-size:1rem;color:#374151}.alert-actions{display:flex;justify-content:center}.form-field{margin-bottom:1.5rem}.form-field.error .form-label{color:#ef4444}.form-label{display:block;margin-bottom:.5rem;font-weight:600;color:#374151;font-size:.875rem}.form-input{width:100%;padding:.75rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;font-size:.875rem;line-height:1.25rem;color:#374151;background-color:#fff;transition:all .15s ease-in-out}.form-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.form-input:disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}.form-input.error{border-color:#ef4444}.form-input.error:focus{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.checkbox-field{margin-bottom:1rem}.checkbox-wrapper{display:flex;align-items:flex-start;gap:.75rem}.form-checkbox{width:1rem;height:1rem;margin-top:.125rem;border:1px solid #d1d5db;border-radius:.25rem;background-color:#fff;cursor:pointer;transition:all .15s ease-in-out}.form-checkbox:checked{background-color:#3b82f6;border-color:#3b82f6}.form-checkbox:focus{outline:none;box-shadow:0 0 0 3px #3b82f61a}.form-checkbox:disabled{background-color:#f3f4f6;border-color:#d1d5db;cursor:not-allowed}.form-checkbox.error{border-color:#ef4444}.checkbox-label{flex:1;font-weight:600;color:#374151;font-size:.875rem;cursor:pointer}.checkbox-description{margin-top:.25rem;font-size:.75rem;color:#6b7280;margin-left:1.75rem}.form-error{margin-top:.5rem;font-size:.875rem;color:#ef4444}.form-help{margin-top:.5rem;font-size:.875rem;color:#6b7280}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.5rem;border:1px solid transparent;border-radius:.375rem;font-size:.875rem;font-weight:600;line-height:1.25rem;text-decoration:none;cursor:pointer;transition:all .15s ease-in-out;outline:none}.btn:focus{box-shadow:0 0 0 3px rgba(var(--theme-accent-rgb, 59, 130, 246),.1)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--theme-accent, #3b82f6);color:#fff}.btn-primary:hover:not(:disabled){background-color:var(--theme-accent-hover, #2563eb)}.btn-secondary{background-color:#6b7280;color:#fff}.btn-secondary:hover:not(:disabled){background-color:#4b5563}.btn-danger{background-color:#ef4444;color:#fff}.btn-danger:hover:not(:disabled){background-color:#dc2626}.btn-warning{background-color:#f59e0b;color:#fff}.btn-warning:hover:not(:disabled){background-color:#d97706}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalSlideIn{0%{opacity:0;transform:scale(.95) translateY(-1rem)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.demo-container{max-width:1200px;margin:0 auto;padding:2rem}.demo-header{text-align:center;margin-bottom:3rem}.demo-header h1{font-size:2.5rem;font-weight:700;color:#111827;margin-bottom:1rem}.demo-header p{font-size:1.125rem;color:#6b7280;max-width:600px;margin:0 auto}.demo-section{margin-bottom:3rem}.demo-section h2{font-size:1.875rem;font-weight:600;color:#111827;margin-bottom:1.5rem}.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.demo-item{padding:1.5rem;border:1px solid #e5e7eb;border-radius:.5rem;background-color:#fff}.demo-item h3{font-size:1.25rem;font-weight:600;color:#111827;margin-bottom:1rem}.demo-actions{display:flex;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}.notifications{background-color:#f0f9ff;border:1px solid #0ea5e9;border-radius:.5rem;padding:1rem;margin-bottom:2rem}.notifications h2{font-size:1.125rem;font-weight:600;color:#0c4a6e;margin-bottom:.5rem}.notifications ul{list-style:none;padding:0;margin:0 0 1rem}.notification{padding:.5rem 0;color:#0c4a6e}.current-user{background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:.5rem;padding:1.5rem;margin-top:1rem}.current-user h3{font-size:1.125rem;font-weight:600;color:#111827;margin-bottom:1rem}.current-user dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;margin:0}.current-user dt{font-weight:600;color:#374151}.current-user dd{color:#6b7280;margin:0}.user-form{width:100%}.form-grid{display:grid;gap:1rem;margin-bottom:2rem}.form-actions{display:flex;gap:1rem;justify-content:flex-end;padding-top:1rem;border-top:1px solid #e5e7eb}.selected-colors{margin-top:1rem}.color-swatches{display:flex;gap:.5rem;margin-top:.5rem}.color-swatch{width:2rem;height:2rem;border-radius:.25rem;border:1px solid #d1d5db}.accessibility-info{background-color:#f8fafc;border-radius:.5rem;padding:2rem}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.feature-item h3{font-size:1.125rem;font-weight:600;color:#111827;margin-bottom:.75rem}.feature-item ul{list-style:none;padding:0;margin:0}.feature-item li{padding:.25rem 0;color:#6b7280;font-size:.875rem}.feature-item li:before{content:"✓ ";color:#10b981;font-weight:700;margin-right:.5rem}