:root{--color-primary-light: #da70d6;--color-primary-main: #b366ff;--color-primary-dark: #6366f1;--color-secondary-light: #f472b6;--color-secondary-main: #d946ef;--color-secondary-dark: #7c3aed;--color-neutral-white: #ffffff;--color-neutral-light: #f9fafb;--color-neutral-lighter: #f3f4f6;--color-neutral-medium: #e5e7eb;--color-neutral-dark: #6b7280;--color-neutral-darker: #374151;--color-neutral-black: #111827;--color-success: #10b981;--color-warning: #f59e0b;--color-error: #ef4444;--color-info: #3b82f6;--color-accent-blue: #3b82f6;--color-accent-purple: #8b5cf6;--color-accent-pink: #ec4899;--color-accent-yellow: #fbbf24;--gradient-primary: linear-gradient(135deg, #da70d6 0%, #b366ff 50%, #6366f1 100%);--gradient-secondary: linear-gradient(180deg, #da70d6 0%, #7c3aed 100%);--gradient-subtle: linear-gradient(135deg, #f3f4f6 0%, #ffffff 100%);--font-family-primary: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;--font-family-secondary: Georgia, serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-size-5xl: 3rem;--font-weight-light: 300;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 800;--line-height-tight: 1.2;--line-height-snug: 1.375;--line-height-normal: 1.5;--line-height-relaxed: 1.625;--line-height-loose: 2;--spacing-0: 0rem;--spacing-1: .25rem;--spacing-2: .5rem;--spacing-3: .75rem;--spacing-4: 1rem;--spacing-5: 1.25rem;--spacing-6: 1.5rem;--spacing-8: 2rem;--spacing-10: 2.5rem;--spacing-12: 3rem;--spacing-16: 4rem;--spacing-20: 5rem;--spacing-24: 6rem;--radius-none: 0;--radius-sm: .25rem;--radius-base: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-3xl: 2rem;--radius-full: 9999px;--shadow-none: none;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-base: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--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-purple: 0 20px 25px -5px rgba(179, 102, 255, .3);--transition-fast: .15s ease-out;--transition-base: .2s ease-out;--transition-slow: .3s ease-out;--transition-slower: .5s ease-out;--z-hide: -1;--z-base: 0;--z-dropdown: 1000;--z-sticky: 1010;--z-fixed: 1020;--z-backdrop: 1030;--z-offcanvas: 1040;--z-modal: 1050;--z-popover: 1060;--z-tooltip: 1070}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-normal);line-height:var(--line-height-normal);color:var(--color-neutral-darker);background-color:var(--color-neutral-light);overflow-x:hidden}h1{font-size:var(--font-size-4xl);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);letter-spacing:-.02em;margin-bottom:var(--spacing-4)}h2{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);letter-spacing:-.02em;margin-bottom:var(--spacing-3)}h3{font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);line-height:var(--line-height-snug);letter-spacing:-.01em;margin-bottom:var(--spacing-2)}h4{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);line-height:var(--line-height-snug);margin-bottom:var(--spacing-2)}p{margin-bottom:var(--spacing-4)}small{font-size:var(--font-size-sm);font-weight:var(--font-weight-normal);line-height:var(--line-height-normal)}strong{font-weight:var(--font-weight-bold)}a{color:var(--color-primary-main);text-decoration:none;transition:color var(--transition-base)}a:hover{color:var(--color-primary-dark);text-decoration:underline}code,pre{font-family:Courier New,Courier,monospace;font-size:var(--font-size-sm);background-color:var(--color-neutral-lighter);border-radius:var(--radius-md)}code{padding:.125em .375em;color:var(--color-error)}pre{padding:var(--spacing-4);overflow-x:auto;margin-bottom:var(--spacing-4)}input,textarea,select{font-family:inherit;font-size:inherit;line-height:inherit}input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=tel],input[type=url],textarea,select{width:100%;padding:var(--spacing-2) var(--spacing-4);border:2px solid var(--color-neutral-medium);border-radius:var(--radius-md);font-size:var(--font-size-base);transition:border-color var(--transition-base),box-shadow var(--transition-base)}input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=number]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=url]:focus,textarea:focus,select:focus{outline:none;border-color:var(--color-primary-main);box-shadow:0 0 0 3px #b366ff1a}input::placeholder,textarea::placeholder{color:var(--color-neutral-dark);opacity:.7}textarea{resize:vertical;min-height:100px}.container{width:100%;max-width:1280px;margin:0 auto;padding:0 var(--spacing-4)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.hidden{display:none!important}.inline{display:inline}.inline-block{display:inline-block}.block{display:block}.flex{display:flex}.grid{display:grid}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;align-items:center;justify-content:space-between}.flex-col{display:flex;flex-direction:column}html{scroll-behavior:smooth}*:focus-visible{outline:2px solid var(--color-primary-main);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media print{*{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}img{max-width:100%!important}h1,h2,h3,h4,h5,h6,p{page-break-after:avoid}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);padding:var(--spacing-3) var(--spacing-6);border:none;border-radius:var(--radius-md);font-family:inherit;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-base);text-decoration:none;white-space:nowrap;-webkit-user-select:none;user-select:none;outline:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:focus-visible{outline:2px solid var(--color-primary-main);outline-offset:2px}.btn-primary{background:var(--gradient-primary);color:var(--color-neutral-white);box-shadow:var(--shadow-md)}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-secondary{background-color:var(--color-secondary-main);color:var(--color-neutral-white);box-shadow:var(--shadow-md)}.btn-secondary:hover:not(:disabled){background-color:var(--color-secondary-dark);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-secondary:active:not(:disabled){transform:translateY(0)}.btn-outline{background-color:transparent;color:var(--color-primary-main);border:2px solid var(--color-primary-main)}.btn-outline:hover:not(:disabled){background-color:var(--color-primary-main);color:var(--color-neutral-white)}.btn-ghost{background-color:transparent;color:var(--color-primary-main)}.btn-ghost:hover:not(:disabled){background-color:#b366ff1a}.btn-danger{background-color:var(--color-error);color:var(--color-neutral-white)}.btn-danger:hover:not(:disabled){background-color:#dc2626;box-shadow:var(--shadow-md)}.btn-success:hover:not(:disabled){background-color:#059669;box-shadow:var(--shadow-md)}.btn-sm{padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-sm);height:32px}.btn-md{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-base);height:40px}.btn-lg{padding:var(--spacing-4) var(--spacing-8);font-size:var(--font-size-lg);height:48px}.btn-full{width:100%}.card{background-color:var(--color-neutral-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:var(--spacing-6);transition:all var(--transition-base)}.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}.card-elevated{box-shadow:var(--shadow-lg)}.card-flat{box-shadow:none;border:1px solid var(--color-neutral-medium)}.card-ghost{background-color:transparent;box-shadow:none;padding:0}.card-gradient{background:var(--gradient-primary);color:var(--color-neutral-white);box-shadow:var(--shadow-purple)}.card-header{margin-bottom:var(--spacing-4)}.card-header h2,.card-header h3{margin-bottom:var(--spacing-2)}.card-body{margin-bottom:var(--spacing-4)}.card-footer{padding-top:var(--spacing-4);border-top:1px solid var(--color-neutral-medium);margin-top:var(--spacing-4)}.input-group{display:flex;flex-direction:column;margin-bottom:var(--spacing-4)}.input-label{display:block;margin-bottom:var(--spacing-2);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-neutral-darker)}.input-field{width:100%;padding:var(--spacing-2) var(--spacing-4);border:2px solid var(--color-neutral-medium);border-radius:var(--radius-md);font-size:var(--font-size-base);transition:border-color var(--transition-base),box-shadow var(--transition-base)}.input-field:focus{outline:none;border-color:var(--color-primary-main);box-shadow:0 0 0 3px #b366ff1a}.input-field:disabled{background-color:var(--color-neutral-lighter);cursor:not-allowed;opacity:.6}.input-field::placeholder{color:var(--color-neutral-dark);opacity:.7}.input-error{border-color:var(--color-error);background-color:#ef44440d}.input-error:focus{box-shadow:0 0 0 3px #ef44441a}.input-success{border-color:var(--color-success);background-color:#10b9810d}.input-success:focus{box-shadow:0 0 0 3px #10b9811a}.input-help-text{display:block;margin-top:var(--spacing-1);font-size:var(--font-size-sm);color:var(--color-neutral-dark)}.input-error-text{color:var(--color-error)}.badge{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-1) var(--spacing-3);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:var(--spacing-1)}.badge-primary{background:#b366ff33;color:var(--color-primary-dark)}.badge-secondary{background:#d946ef33;color:var(--color-secondary-dark)}.badge-success{background:#10b98133;color:var(--color-success)}.badge-warning{background:#f59e0b33;color:var(--color-warning)}.badge-error{background:#ef444433;color:var(--color-error)}.alert{padding:var(--spacing-4);border-radius:var(--radius-lg);border-left:4px solid transparent;margin-bottom:var(--spacing-4);display:flex;gap:var(--spacing-3);align-items:flex-start}.alert-info{background-color:#3b82f61a;border-left-color:var(--color-info);color:var(--color-info)}.alert-success{background-color:#10b9811a;border-left-color:var(--color-success);color:var(--color-success)}.alert-warning{background-color:#f59e0b1a;border-left-color:var(--color-warning);color:var(--color-warning)}.alert-error{background-color:#ef44441a;border-left-color:var(--color-error);color:var(--color-error)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:var(--z-backdrop);display:flex;align-items:center;justify-content:center}.modal{background-color:var(--color-neutral-white);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);max-width:500px;width:90%;padding:var(--spacing-8);z-index:var(--z-modal);animation:modalSlideUp .3s ease-out}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header,.modal-body{margin-bottom:var(--spacing-6)}.modal-footer{display:flex;gap:var(--spacing-3);justify-content:flex-end;border-top:1px solid var(--color-neutral-medium);padding-top:var(--spacing-4)}.nav{display:flex;align-items:center;gap:var(--spacing-2)}.nav-item{padding:var(--spacing-2) var(--spacing-4);border-radius:var(--radius-md);transition:all var(--transition-base);cursor:pointer;text-decoration:none;color:var(--color-neutral-darker)}.nav-item:hover{background-color:var(--color-neutral-lighter);color:var(--color-primary-main)}.nav-item.active{background:var(--gradient-primary);color:var(--color-neutral-white)}.navbar{background-color:var(--color-neutral-white);box-shadow:var(--shadow-sm);padding:var(--spacing-4);position:sticky;top:0;z-index:var(--z-sticky)}.navbar-container{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}.tabs{border-bottom:2px solid var(--color-neutral-medium);display:flex;gap:0}.tab{padding:var(--spacing-3) var(--spacing-6);border-bottom:3px solid transparent;margin-bottom:-2px;cursor:pointer;transition:all var(--transition-base);color:var(--color-neutral-dark);font-weight:var(--font-weight-medium)}.tab:hover{color:var(--color-primary-main)}.tab.active{border-bottom-color:var(--color-primary-main);color:var(--color-primary-main)}.tab-content{padding:var(--spacing-6) 0}.spinner{display:inline-block;width:20px;height:20px;border:3px solid rgba(179,102,255,.2);border-top-color:var(--color-primary-main);border-radius:var(--radius-full);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.spinner-lg{width:40px;height:40px;border-width:4px}.dropdown{position:relative;display:inline-block}.dropdown-toggle{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);background-color:transparent;border:none;cursor:pointer;font-size:var(--font-size-base);color:var(--color-neutral-darker)}.dropdown-menu{position:absolute;top:100%;left:0;min-width:200px;background-color:var(--color-neutral-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:var(--z-dropdown);margin-top:var(--spacing-2)}.dropdown-item{display:block;width:100%;padding:var(--spacing-3) var(--spacing-4);background-color:transparent;border:none;cursor:pointer;text-align:left;transition:background-color var(--transition-base);color:var(--color-neutral-darker);text-decoration:none}.dropdown-item:hover{background-color:var(--color-neutral-lighter)}.dropdown-divider{height:1px;background-color:var(--color-neutral-medium);margin:var(--spacing-1) 0}.progress{width:100%;height:8px;background-color:var(--color-neutral-lighter);border-radius:var(--radius-full);overflow:hidden;margin-bottom:var(--spacing-3)}.progress-bar{height:100%;background:var(--gradient-primary);border-radius:var(--radius-full);transition:width var(--transition-slow)}.progress-sm{height:4px}.progress-lg{height:12px}.avatar{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-full);background:var(--gradient-primary);color:var(--color-neutral-white);font-weight:var(--font-weight-semibold);overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.avatar-sm{width:32px;height:32px;font-size:var(--font-size-sm)}.avatar-lg{width:56px;height:56px;font-size:var(--font-size-lg)}.avatar-xl{width:80px;height:80px;font-size:var(--font-size-2xl)}.tooltip{position:relative;display:inline-block}.tooltip-content{visibility:hidden;background-color:var(--color-neutral-black);color:var(--color-neutral-white);text-align:center;border-radius:var(--radius-md);padding:var(--spacing-2) var(--spacing-3);position:absolute;z-index:var(--z-tooltip);bottom:125%;left:50%;transform:translate(-50%);white-space:nowrap;font-size:var(--font-size-sm);opacity:0;transition:opacity var(--transition-base)}.tooltip:hover .tooltip-content{visibility:visible;opacity:1}.tooltip-content:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:var(--color-neutral-black)}.divider{border:none;border-top:1px solid var(--color-neutral-medium);margin:var(--spacing-4) 0}.divider-vertical{border:none;border-left:1px solid var(--color-neutral-medium);height:24px;display:inline-block;margin:0 var(--spacing-2)}.divider-dashed{border-top-style:dashed}@media(max-width:768px){.btn-lg{padding:var(--spacing-3) var(--spacing-5);font-size:var(--font-size-base);height:40px}.modal{width:95%;padding:var(--spacing-6)}.card{padding:var(--spacing-4)}}.app-container{min-height:100vh;padding:var(--spacing-8);background:linear-gradient(135deg,var(--color-background-tertiary) 0%,var(--color-background-primary) 100%)}.app-content{max-width:48rem;margin:0 auto}.app-title{font-size:var(--font-size-4xl);font-weight:var(--font-weight-bold);text-align:center;margin-bottom:var(--spacing-2);background:var(--gradient-primary);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.app-subtitle{text-align:center;color:var(--color-neutral-dark);margin-bottom:var(--spacing-8);font-size:var(--font-size-base)}.todo-form{margin-bottom:var(--spacing-8)}.form-group{display:flex;gap:var(--spacing-2)}.form-input{flex:1;padding:var(--spacing-3);border:2px solid var(--color-primary-light);border-radius:var(--radius-lg);font-family:inherit;font-size:var(--font-size-base);transition:all var(--transition-base)}.form-input:focus{outline:none;border-color:var(--color-primary-main);box-shadow:0 0 0 3px #b366ff1a}.form-input::placeholder{color:var(--color-neutral-medium)}.todo-container{background:var(--color-background-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--spacing-6)}.todo-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--spacing-2)}.todo-item{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-3);background:var(--color-background-secondary);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:all var(--transition-base)}.todo-item:hover{box-shadow:var(--shadow-md)}.todo-checkbox{width:1.25rem;height:1.25rem;cursor:pointer;accent-color:var(--color-primary-main)}.todo-text{flex:1;color:var(--color-neutral-black);font-size:var(--font-size-base);transition:all var(--transition-base)}.todo-text-completed{text-decoration:line-through;color:var(--color-neutral-dark)}.todo-list-empty{text-align:center;padding:var(--spacing-12)}.todo-list-empty p{color:var(--color-neutral-dark);font-size:var(--font-size-lg)}.btn-sm{padding:var(--spacing-1) var(--spacing-3);font-size:var(--font-size-sm)}.btn-success{background-color:var(--color-success);color:var(--color-neutral-white)}.btn-success:hover:not(:disabled){background-color:#059669}.btn-info{background-color:var(--color-info);color:var(--color-neutral-white)}.btn-info:hover:not(:disabled){background-color:#2563eb}.btn-error{background-color:var(--color-error);color:var(--color-neutral-white)}.btn-error:hover:not(:disabled){background-color:#dc2626}