.home-page{min-height:calc(100vh - 200px);animation:fadeIn var(--transition-slow) ease-out}.hero-section{background:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 100%);border-radius:var(--radius-2xl);padding:var(--spacing-3xl) var(--spacing-2xl);margin-bottom:var(--spacing-3xl);position:relative;overflow:hidden;box-shadow:var(--shadow-2xl);animation:scaleIn var(--transition-slow) ease-out}.hero-section:before{content:"";position:absolute;top:-50%;right:-20%;width:500px;height:500px;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);border-radius:50%;animation:float 8s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0) translate(0)}50%{transform:translateY(-30px) translate(20px)}}.hero-content{position:relative;z-index:1;text-align:center;max-width:900px;margin:0 auto}.hero-title{font-size:clamp(2rem,5vw,3.5rem);font-weight:var(--font-weight-bold);color:#fff;margin-bottom:var(--spacing-lg);line-height:1.2;animation:fadeInUp var(--transition-slow) .2s ease-out backwards}.hero-gradient{display:block;background:linear-gradient(90deg,#ffffff 0%,var(--accent-color) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:fadeInUp var(--transition-slow) .4s ease-out backwards}.hero-description{font-size:var(--font-size-lg);color:#fffffff2;margin-bottom:var(--spacing-2xl);line-height:1.8;animation:fadeInUp var(--transition-slow) .6s ease-out backwards}.hero-stats{display:flex;justify-content:center;gap:var(--spacing-3xl);flex-wrap:wrap;animation:fadeInUp var(--transition-slow) .8s ease-out backwards}.stat-item{text-align:center;padding:var(--spacing-lg);background:#ffffff1a;border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);min-width:140px;transition:all var(--transition-base)}.stat-item:hover{transform:translateY(-8px);background:#ffffff26;box-shadow:var(--shadow-xl)}.stat-number{font-size:var(--font-size-4xl);font-weight:var(--font-weight-bold);color:#fff;margin-bottom:var(--spacing-xs)}.stat-label{font-size:var(--font-size-sm);color:#ffffffe6;text-transform:uppercase;letter-spacing:1px}.products-section{animation:fadeInUp var(--transition-slow) 1s ease-out backwards}.section-header{text-align:center;margin-bottom:var(--spacing-3xl)}.section-title{font-size:var(--font-size-3xl);color:var(--text-primary);margin-bottom:var(--spacing-md);position:relative;display:inline-block}.section-divider{width:80px;height:4px;background:linear-gradient(90deg,var(--primary-color),var(--accent-color));margin:0 auto;border-radius:var(--radius-full)}.empty-state{animation:fadeIn var(--transition-slow) ease-out}.empty-icon{font-size:5rem;margin-bottom:var(--spacing-lg);animation:bounce 2s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.empty-state h3{font-size:var(--font-size-2xl);color:var(--text-primary);margin-bottom:var(--spacing-sm)}@media (max-width: 768px){.hero-section{padding:var(--spacing-2xl) var(--spacing-lg)}.hero-stats{gap:var(--spacing-lg)}.stat-item{min-width:110px;padding:var(--spacing-md)}.stat-number{font-size:var(--font-size-2xl)}}.auth-page{min-height:calc(100vh - 200px);display:flex;align-items:center;justify-content:center;padding:var(--spacing-2xl) var(--spacing-lg);position:relative;overflow:hidden}.auth-container{position:relative;z-index:1;width:100%;max-width:480px}.auth-card{background:var(--background-primary);padding:var(--spacing-3xl);border-radius:var(--radius-2xl);box-shadow:var(--shadow-2xl);border:1px solid var(--border-color);animation:slideInUp var(--transition-slow) ease-out;position:relative;overflow:hidden}@keyframes slideInUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}.auth-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary-color),var(--accent-color),var(--secondary-color));background-size:200% 100%;animation:gradientShift 3s ease infinite}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.auth-header{text-align:center;margin-bottom:var(--spacing-2xl);animation:fadeInUp var(--transition-slow) .2s ease-out backwards}.auth-icon{font-size:4rem;margin-bottom:var(--spacing-lg);display:inline-block;animation:iconBounce 1s ease-in-out}@keyframes iconBounce{0%,to{transform:translateY(0)}25%{transform:translateY(-20px)}50%{transform:translateY(-10px)}75%{transform:translateY(-15px)}}.auth-title{font-size:var(--font-size-3xl);color:var(--text-primary);margin-bottom:var(--spacing-sm);font-weight:var(--font-weight-bold)}.auth-subtitle{color:var(--text-secondary);font-size:var(--font-size-base);margin:0}.auth-divider{position:relative;text-align:center;margin:var(--spacing-xl) 0;animation:fadeIn var(--transition-slow) .6s ease-out backwards}.auth-divider:before,.auth-divider:after{content:"";position:absolute;top:50%;width:42%;height:1px;background:var(--border-color)}.auth-divider:before{left:0}.auth-divider:after{right:0}.auth-divider span{background:var(--background-primary);padding:0 var(--spacing-md);color:var(--text-muted);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.auth-link{text-align:center;color:var(--text-secondary);font-size:var(--font-size-base);animation:fadeIn var(--transition-slow) .8s ease-out backwards}.auth-link a{color:var(--primary-color);font-weight:var(--font-weight-semibold);text-decoration:none;position:relative;transition:color var(--transition-base)}.auth-link a:after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--primary-color);transition:width var(--transition-base)}.auth-link a:hover{color:var(--primary-hover)}.auth-link a:hover:after{width:100%}.auth-decoration{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}.decoration-circle{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(44,95,125,.08) 0%,transparent 70%);animation:floatCircle 20s ease-in-out infinite}.circle-1{width:400px;height:400px;top:-200px;right:-200px;animation-delay:0s}.circle-2{width:300px;height:300px;bottom:-150px;left:-150px;animation-delay:5s}.circle-3{width:250px;height:250px;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:10s}@keyframes floatCircle{0%,to{transform:translate(0) scale(1)}33%{transform:translate(30px,-30px) scale(1.1)}66%{transform:translate(-20px,20px) scale(.9)}}@media (max-width: 768px){.auth-card{padding:var(--spacing-2xl)}.auth-icon{font-size:3rem}.auth-title{font-size:var(--font-size-2xl)}}.profile-page{padding:var(--spacing-2xl) 0;min-height:calc(100vh - 200px);animation:fadeIn var(--transition-slow) ease-out}.container-profile{max-width:1100px;margin:0 auto;padding:0 var(--spacing-lg)}.profile-header{display:flex;align-items:center;gap:var(--spacing-2xl);padding:var(--spacing-3xl);background:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 100%);border-radius:var(--radius-2xl);margin-bottom:var(--spacing-3xl);box-shadow:var(--shadow-2xl);position:relative;overflow:hidden;animation:slideInUp var(--transition-slow) ease-out}.profile-header:before{content:"";position:absolute;top:-50%;right:-20%;width:400px;height:400px;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);border-radius:50%}.profile-avatar-wrapper{position:relative;z-index:1;flex-shrink:0}.avatar-circle{width:140px;height:140px;border-radius:50%;background:linear-gradient(135deg,#ffffff 0%,var(--accent-color) 100%);display:flex;align-items:center;justify-content:center;font-size:3.5rem;font-weight:var(--font-weight-bold);color:var(--primary-color);box-shadow:var(--shadow-xl);border:4px solid white;animation:scaleIn var(--transition-slow) .3s ease-out}.avatar-badge{position:absolute;bottom:5px;right:5px;width:36px;height:36px;background:var(--success-color);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem;border:3px solid white;box-shadow:var(--shadow-md)}.profile-header-info{flex:1;z-index:1}.profile-header-info h1{color:#fff;font-size:var(--font-size-4xl);margin-bottom:var(--spacing-xs);animation:fadeInUp var(--transition-slow) .4s ease-out backwards}.profile-email{color:#ffffffe6;font-size:var(--font-size-lg);margin-bottom:var(--spacing-lg);animation:fadeInUp var(--transition-slow) .6s ease-out backwards}.profile-badges{display:flex;gap:var(--spacing-md);flex-wrap:wrap;animation:fadeInUp var(--transition-slow) .8s ease-out backwards}.badge-item{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-lg);background:#fff3;border-radius:var(--radius-full);color:#fff;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3)}.badge-icon{font-size:1rem}.profile-content{animation:fadeInUp var(--transition-slow) 1s ease-out backwards}.profile-card{background:var(--background-primary);border-radius:var(--radius-xl);padding:var(--spacing-2xl);box-shadow:var(--shadow-lg);border:1px solid var(--border-color);margin-bottom:var(--spacing-2xl)}.profile-card .card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-lg);border-bottom:2px solid var(--border-color)}.profile-card .card-header h3{font-size:var(--font-size-xl);color:var(--text-primary);margin:0}.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--spacing-xl)}.info-item{display:flex;flex-direction:column;gap:var(--spacing-sm);padding:var(--spacing-lg);background:var(--background-secondary);border-radius:var(--radius-lg);transition:all var(--transition-base)}.info-item:hover{background:var(--background-tertiary);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.info-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.info-value{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--text-primary)}.type-badge{display:inline-block;padding:var(--spacing-xs) var(--spacing-md);background:linear-gradient(135deg,var(--primary-color),var(--primary-hover));color:#fff;border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:var(--font-weight-bold)}.profile-actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--spacing-lg)}.action-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--spacing-2xl);background:var(--background-primary);border:2px solid var(--border-color);border-radius:var(--radius-xl);cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-sm)}.action-card:hover{border-color:var(--primary-color);transform:translateY(-8px);box-shadow:var(--shadow-xl);background:var(--primary-light)}.action-icon{font-size:3rem;margin-bottom:var(--spacing-md);transition:transform var(--transition-base)}.action-card:hover .action-icon{transform:scale(1.2) rotate(5deg)}.action-card h4{font-size:var(--font-size-lg);color:var(--text-primary);margin-bottom:var(--spacing-xs)}.action-card p{color:var(--text-secondary);font-size:var(--font-size-sm);margin:0}@media (max-width: 768px){.profile-header{flex-direction:column;text-align:center;padding:var(--spacing-2xl)}.profile-header-info h1{font-size:var(--font-size-2xl)}.profile-badges{justify-content:center}.info-grid,.profile-actions-grid{grid-template-columns:1fr}}.product-detail-page{padding:var(--spacing-2xl) 0;animation:fadeIn var(--transition-slow) ease-out}.back-button{background:transparent;border:none;color:var(--primary-color);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);cursor:pointer;padding:var(--spacing-sm) var(--spacing-md);margin-bottom:var(--spacing-xl);transition:all var(--transition-base);display:inline-flex;align-items:center;gap:var(--spacing-xs);border-radius:var(--radius-md)}.back-button:hover{background:var(--primary-light);transform:translate(-4px)}.product-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-3xl);animation:fadeInUp var(--transition-slow) .2s ease-out}.product-gallery{position:sticky;top:calc(var(--spacing-2xl) + 60px);height:fit-content}.main-image{position:relative;border-radius:var(--radius-xl);overflow:hidden;background:var(--background-secondary);box-shadow:var(--shadow-xl);border:1px solid var(--border-color);animation:scaleIn var(--transition-slow) ease-out}.gallery-image{width:100%;height:auto;display:block;transition:transform var(--transition-slow)}.main-image:hover .gallery-image{transform:scale(1.05)}.image-badge{position:absolute;top:var(--spacing-lg);right:var(--spacing-lg);background:linear-gradient(135deg,var(--accent-color),var(--accent-hover));color:#fff;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);text-transform:uppercase;letter-spacing:.5px;box-shadow:var(--shadow-lg);animation:pulse 2s ease-in-out infinite}.product-info{animation:fadeInUp var(--transition-slow) .4s ease-out backwards}.product-meta{display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.product-brand,.product-category{display:inline-block;padding:var(--spacing-xs) var(--spacing-md);background:var(--background-tertiary);border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.product-title{font-size:var(--font-size-3xl);color:var(--text-primary);margin-bottom:var(--spacing-lg);line-height:1.3}.product-rating{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-lg);border-bottom:1px solid var(--border-color)}.stars{display:flex;gap:2px}.star{font-size:1.2rem;filter:grayscale(100%);opacity:.3;transition:all var(--transition-base)}.star.filled{filter:grayscale(0%);opacity:1;animation:starPop .3s ease-out}@keyframes starPop{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.rating-text{color:var(--text-secondary);font-size:var(--font-size-sm)}.product-price-section{background:linear-gradient(135deg,var(--primary-light) 0%,var(--background-tertiary) 100%);padding:var(--spacing-xl);border-radius:var(--radius-lg);margin-bottom:var(--spacing-xl)}.price-wrapper{display:flex;align-items:center;gap:var(--spacing-md);flex-wrap:wrap}.current-price{font-size:var(--font-size-4xl);font-weight:var(--font-weight-bold);color:var(--primary-color)}.original-price{font-size:var(--font-size-xl);color:var(--text-muted);text-decoration:line-through}.discount-badge{background:var(--danger-color);color:#fff;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);animation:pulse 2s ease-in-out infinite}.product-description{color:var(--text-secondary);font-size:var(--font-size-lg);line-height:1.8;margin-bottom:var(--spacing-xl)}.product-specs{background:var(--background-secondary);padding:var(--spacing-lg);border-radius:var(--radius-lg);margin-bottom:var(--spacing-xl)}.spec-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) 0}.spec-label{color:var(--text-secondary);font-weight:var(--font-weight-medium)}.spec-value{font-weight:var(--font-weight-semibold);padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-md)}.spec-value.in-stock{color:var(--success-color);background:#48bb781a}.spec-value.out-stock{color:var(--danger-color);background:#f565651a}.quantity-selector{display:flex;align-items:center;gap:var(--spacing-lg);margin-bottom:var(--spacing-xl);padding:var(--spacing-lg);background:var(--background-secondary);border-radius:var(--radius-lg)}.quantity-selector label{font-weight:var(--font-weight-semibold);color:var(--text-primary);font-size:var(--font-size-lg)}.qty-controls{display:flex;align-items:center;gap:var(--spacing-sm);background:var(--background-primary);border-radius:var(--radius-md);padding:var(--spacing-xs);border:2px solid var(--border-color)}.qty-btn{width:40px;height:40px;border:none;background:var(--primary-color);color:#fff;border-radius:var(--radius-sm);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);cursor:pointer;transition:all var(--transition-base);display:flex;align-items:center;justify-content:center}.qty-btn:hover:not(:disabled){background:var(--primary-hover);transform:scale(1.1)}.qty-btn:disabled{opacity:.3;cursor:not-allowed}.qty-input{width:70px;text-align:center;border:none;background:transparent;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--text-primary)}.qty-input:focus{outline:none}.product-actions{margin-bottom:var(--spacing-2xl)}.product-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-lg);padding:var(--spacing-xl);background:var(--background-tertiary);border-radius:var(--radius-lg)}.feature-item{display:flex;align-items:flex-start;gap:var(--spacing-md);padding:var(--spacing-md);background:var(--background-primary);border-radius:var(--radius-md);transition:all var(--transition-base)}.feature-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}.feature-icon{font-size:2rem}.feature-item strong{display:block;color:var(--text-primary);margin-bottom:var(--spacing-xs);font-size:var(--font-size-base)}.feature-item p{color:var(--text-secondary);font-size:var(--font-size-sm);margin:0}@media (max-width: 1024px){.product-detail-grid{grid-template-columns:1fr;gap:var(--spacing-2xl)}.product-gallery{position:static}}@media (max-width: 768px){.product-title{font-size:var(--font-size-2xl)}.current-price{font-size:var(--font-size-3xl)}.product-features{grid-template-columns:1fr}.quantity-selector{flex-direction:column;align-items:flex-start}}.orders-page{padding:var(--spacing-2xl) 0;min-height:calc(100vh - 200px)}.page-subtitle{color:var(--text-secondary);font-size:var(--font-size-base);margin:var(--spacing-sm) 0 0 0}.orders-list{display:flex;flex-direction:column;gap:var(--spacing-lg)}.order-card-wrapper{animation:slideInRight var(--transition-slow) ease-out backwards}@media (max-width: 768px){.page-header{flex-direction:column;gap:var(--spacing-md)}.page-header button{width:100%}}.order-detail-page{padding:var(--spacing-2xl) 0;min-height:calc(100vh - 200px);animation:fadeIn var(--transition-slow) ease-out}.order-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--spacing-2xl);padding:var(--spacing-xl);background:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 100%);border-radius:var(--radius-xl);color:#fff;box-shadow:var(--shadow-xl);animation:slideInUp var(--transition-slow) ease-out}.order-header h1{color:#fff;margin-bottom:var(--spacing-xs)}.order-id{color:#ffffffe6;font-size:var(--font-size-base);margin:0}.order-status-badge{display:flex;gap:var(--spacing-sm);flex-direction:column;align-items:flex-end}.order-status-badge .status{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.status.paid,.status.delivered{background:#48bb784d;border:1px solid rgba(255,255,255,.5)}.status.pending,.status.processing{background:#ed89364d;border:1px solid rgba(255,255,255,.5)}.order-detail-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--spacing-2xl)}.order-section{display:flex;flex-direction:column;gap:var(--spacing-lg);animation:fadeInUp var(--transition-slow) .3s ease-out backwards}.section-card{background:var(--background-primary);border-radius:var(--radius-xl);padding:var(--spacing-2xl);box-shadow:var(--shadow-md);border:1px solid var(--border-color)}.section-title{font-size:var(--font-size-xl);margin-bottom:var(--spacing-lg);color:var(--text-primary);padding-bottom:var(--spacing-md);border-bottom:2px solid var(--border-color)}.order-items-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.order-item{display:flex;gap:var(--spacing-lg);align-items:center;padding:var(--spacing-lg);background:var(--background-secondary);border-radius:var(--radius-lg);transition:all var(--transition-base)}.order-item:hover{background:var(--background-tertiary);transform:translate(4px)}.order-item img{width:80px;height:80px;object-fit:cover;border-radius:var(--radius-md)}.item-info{flex:1}.item-info h4{font-size:var(--font-size-base);color:var(--text-primary);margin-bottom:var(--spacing-xs)}.item-meta{color:var(--text-secondary);font-size:var(--font-size-sm);margin:0}.item-total{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--primary-color)}.address-info,.payment-info{padding:var(--spacing-lg);background:var(--background-secondary);border-radius:var(--radius-lg)}.address-info p{margin:var(--spacing-xs) 0;color:var(--text-secondary);line-height:1.6}.payment-method-badge{display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-lg);background:var(--primary-light);color:var(--primary-color);border-radius:var(--radius-md);font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-md)}.payment-status{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);border-radius:var(--radius-md);font-weight:var(--font-weight-medium)}.payment-status.paid{background:#48bb781a;color:var(--success-color)}.payment-status.unpaid{background:#ed89361a;color:var(--warning-color)}.status-icon{font-size:1.2rem}.order-summary-sidebar{animation:fadeInUp var(--transition-slow) .5s ease-out backwards}.summary-card.sticky{position:sticky;top:calc(var(--spacing-2xl) + 60px)}.order-timeline{margin-top:var(--spacing-2xl);padding-top:var(--spacing-xl);border-top:2px solid var(--border-color)}.timeline-item{display:flex;gap:var(--spacing-md);padding:var(--spacing-md);margin-bottom:var(--spacing-md);border-radius:var(--radius-md);transition:all var(--transition-base);opacity:.5}.timeline-item.completed{opacity:1;background:var(--background-secondary)}.timeline-icon{font-size:1.8rem;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--background-tertiary);flex-shrink:0}.timeline-item.completed .timeline-icon{background:var(--success-color);color:#fff;animation:pulse 2s ease-in-out infinite}.timeline-content strong{display:block;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.timeline-content p{color:var(--text-secondary);font-size:var(--font-size-sm);margin:0}@media (max-width: 1024px){.order-detail-grid{grid-template-columns:1fr}.summary-card.sticky{position:static}}@media (max-width: 768px){.order-header{flex-direction:column;gap:var(--spacing-md)}.order-status-badge{align-items:flex-start}.order-item{flex-direction:column;text-align:center}.order-item img{width:100%;height:200px}}.my-products-page,.payment-page{padding:var(--spacing-2xl) 0;min-height:calc(100vh - 200px);animation:fadeIn var(--transition-slow) ease-out}.payment-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--spacing-3xl);margin-top:var(--spacing-xl)}.payment-form-section{animation:slideInRight var(--transition-slow) ease-out}.section-header h1{margin-bottom:var(--spacing-xs)}.section-header p{color:var(--text-secondary);margin-bottom:var(--spacing-2xl)}.payment-form{background:var(--background-primary);border-radius:var(--radius-xl);padding:var(--spacing-2xl);box-shadow:var(--shadow-lg);border:1px solid var(--border-color)}.payment-methods{margin-bottom:var(--spacing-2xl)}.payment-methods h3{font-size:var(--font-size-lg);margin-bottom:var(--spacing-lg);color:var(--text-primary)}.method-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-md)}.method-option{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-lg);border:2px solid var(--border-color);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);background:var(--background-secondary)}.method-option:hover{border-color:var(--primary-color);transform:translateY(-2px);box-shadow:var(--shadow-md)}.method-option.active{border-color:var(--primary-color);background:var(--primary-light);box-shadow:var(--shadow-md)}.method-option input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border:2px solid var(--border-color);border-radius:50%;position:relative;cursor:pointer}.method-option input[type=radio]:checked{border-color:var(--primary-color)}.method-option input[type=radio]:checked:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;background:var(--primary-color);border-radius:50%}.method-icon{font-size:1.5rem}.method-option span:last-child{font-weight:var(--font-weight-semibold);color:var(--text-primary)}.card-details{animation:fadeIn var(--transition-base) ease-out}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md)}.payment-submit{margin-top:var(--spacing-xl);position:relative;overflow:hidden}.spinner-small{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;margin-right:var(--spacing-sm)}.security-badges{display:flex;justify-content:center;gap:var(--spacing-lg);margin-top:var(--spacing-xl);padding-top:var(--spacing-lg);border-top:1px solid var(--border-color);font-size:var(--font-size-sm);color:var(--text-muted);flex-wrap:wrap}.error-alert{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background:#f565651a;border:1px solid var(--danger-color);border-radius:var(--radius-md);color:var(--danger-color);margin-top:var(--spacing-lg);animation:shake .3s}.error-alert span{font-size:1.2rem}.error-alert p{margin:0}.order-summary-section{animation:fadeInUp var(--transition-slow) .3s ease-out backwards}.summary-card{background:var(--background-primary);border-radius:var(--radius-xl);padding:var(--spacing-2xl);box-shadow:var(--shadow-lg);border:1px solid var(--border-color);position:sticky;top:calc(var(--spacing-2xl) + 60px)}.summary-card h3{font-size:var(--font-size-xl);margin-bottom:var(--spacing-lg);color:var(--text-primary)}.summary-items{margin-bottom:var(--spacing-lg);max-height:300px;overflow-y:auto}.summary-item-row{display:flex;gap:var(--spacing-md);align-items:center;padding:var(--spacing-md);background:var(--background-secondary);border-radius:var(--radius-md);margin-bottom:var(--spacing-sm);transition:all var(--transition-base)}.summary-item-row:hover{background:var(--background-tertiary);transform:translate(4px)}.summary-item-row img{width:60px;height:60px;object-fit:cover;border-radius:var(--radius-sm)}.item-details{flex:1}.item-name{font-weight:var(--font-weight-semibold);color:var(--text-primary);margin:0 0 var(--spacing-xs) 0;font-size:var(--font-size-sm)}.item-qty{color:var(--text-secondary);font-size:var(--font-size-xs);margin:0}.item-price{font-weight:var(--font-weight-bold);color:var(--primary-color);margin:0}.summary-divider{border-top:1px solid var(--border-color);margin:var(--spacing-lg) 0}.summary-totals{margin-bottom:var(--spacing-xl)}.summary-row{display:flex;justify-content:space-between;margin-bottom:var(--spacing-sm);color:var(--text-secondary);font-size:var(--font-size-base)}.summary-row.total{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--text-primary);margin-top:var(--spacing-md)}.summary-row.total span:last-child{color:var(--primary-color)}.shipping-info{padding:var(--spacing-lg);background:var(--background-secondary);border-radius:var(--radius-md)}.shipping-info h4{font-size:var(--font-size-base);margin-bottom:var(--spacing-sm);color:var(--text-primary)}.shipping-info p{margin:0;color:var(--text-secondary);font-size:var(--font-size-sm);line-height:1.6}@media (max-width: 1024px){.payment-grid{grid-template-columns:1fr}.summary-card{position:static}}@media (max-width: 768px){.payment-form{padding:var(--spacing-xl)}.method-options,.form-row{grid-template-columns:1fr}}:root{--primary-color: #2c5f7d;--primary-hover: #1a4458;--primary-light: #e8f1f5;--secondary-color: #5c8374;--secondary-hover: #4a6d5f;--accent-color: #d4a574;--accent-hover: #b88b5d;--background-primary: #ffffff;--background-secondary: #f8fafb;--background-tertiary: #f0f4f7;--text-primary: #1a2332;--text-secondary: #4a5568;--text-muted: #718096;--success-color: #48bb78;--danger-color: #f56565;--warning-color: #ed8936;--info-color: #4299e1;--border-color: #e2e8f0;--border-color-hover: #cbd5e0;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--spacing-3xl: 4rem;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-family-heading: "Inter", -apple-system, BlinkMacSystemFont, sans-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-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 9999px;--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--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-2xl: 0 25px 50px -12px rgba(0, 0, 0, .25);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .35s cubic-bezier(.4, 0, .2, 1);--transition-bounce: .4s cubic-bezier(.68, -.55, .27, 1.55);--z-dropdown: 1000;--z-sticky: 1020;--z-fixed: 1030;--z-modal-backdrop: 1040;--z-modal: 1050;--z-popover: 1060;--z-tooltip: 1070}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-normal);line-height:1.6;color:var(--text-primary);background-color:var(--background-secondary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInRight{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.container{max-width:1280px;margin:0 auto;padding:0 var(--spacing-lg)}h1,h2,h3,h4,h5,h6{font-family:var(--font-family-heading);font-weight:var(--font-weight-bold);line-height:1.2;color:var(--text-primary);margin-bottom:var(--spacing-md)}h1{font-size:var(--font-size-4xl);animation:fadeInUp var(--transition-slow) ease-out}h2{font-size:var(--font-size-3xl)}h3{font-size:var(--font-size-2xl)}p{margin-bottom:var(--spacing-md);color:var(--text-secondary)}a{color:var(--primary-color);text-decoration:none;transition:color var(--transition-base)}a:hover{color:var(--primary-hover)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-lg);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);text-align:center;border:2px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);position:relative;overflow:hidden;white-space:nowrap}.btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width var(--transition-slow),height var(--transition-slow)}.btn:hover:before{width:300px;height:300px}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.btn:active:not(:disabled){transform:scale(.97)}.btn-primary{background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-hover) 100%);color:#fff;box-shadow:var(--shadow-sm)}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-secondary{background:linear-gradient(135deg,var(--secondary-color) 0%,var(--secondary-hover) 100%);color:#fff;box-shadow:var(--shadow-sm)}.btn-secondary:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-outline{background:transparent;border-color:var(--primary-color);color:var(--primary-color)}.btn-outline:hover:not(:disabled){background:var(--primary-color);color:#fff;transform:translateY(-2px)}.btn-danger{background:linear-gradient(135deg,var(--danger-color) 0%,#e53e3e 100%);color:#fff}.btn-danger:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-full{width:100%}.btn-sm{padding:var(--spacing-xs) var(--spacing-md);font-size:var(--font-size-sm)}.btn-lg{padding:var(--spacing-md) var(--spacing-xl);font-size:var(--font-size-lg)}.form-group{margin-bottom:var(--spacing-lg);animation:fadeInUp var(--transition-slow) ease-out backwards}.form-group:nth-child(1){animation-delay:.1s}.form-group:nth-child(2){animation-delay:.2s}.form-group:nth-child(3){animation-delay:.3s}.form-group:nth-child(4){animation-delay:.4s}.form-group label{display:block;margin-bottom:var(--spacing-sm);font-weight:var(--font-weight-medium);color:var(--text-primary);font-size:var(--font-size-sm)}.form-control{width:100%;padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-base);font-family:var(--font-family);color:var(--text-primary);background-color:var(--background-primary);border:2px solid var(--border-color);border-radius:var(--radius-md);transition:all var(--transition-base)}.form-control:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #2c5f7d1a;transform:translateY(-1px)}.form-control:hover{border-color:var(--border-color-hover)}.form-control::placeholder{color:var(--text-muted)}.form-control.error{border-color:var(--danger-color);animation:shake .3s}@keyframes shake{0%,to{transform:translate(0)}25%,75%{transform:translate(-5px)}50%{transform:translate(5px)}}.error-message{color:var(--danger-color);font-size:var(--font-size-sm);margin-top:var(--spacing-xs);display:flex;align-items:center;gap:var(--spacing-xs)}.card{background:var(--background-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--spacing-lg);margin-bottom:var(--spacing-lg);border:1px solid var(--border-color);transition:all var(--transition-base);animation:scaleIn var(--transition-slow) ease-out}.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:var(--border-color-hover)}.card-header{padding-bottom:var(--spacing-md);margin-bottom:var(--spacing-md);border-bottom:1px solid var(--border-color)}.card-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--text-primary);margin:0}.spinner-container{display:flex;justify-content:center;align-items:center;min-height:300px}.spinner{width:50px;height:50px;border:4px solid var(--primary-light);border-top:4px solid var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}.header{background:linear-gradient(135deg,var(--text-primary) 0%,#283747 100%);color:#fff;padding:var(--spacing-md) 0;box-shadow:var(--shadow-md);position:sticky;top:0;z-index:var(--z-sticky);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:slideInRight var(--transition-slow) ease-out}.header .container{display:flex;justify-content:space-between;align-items:center}.logo{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:#fff;text-decoration:none;transition:transform var(--transition-base)}.logo:hover{transform:scale(1.05);color:#fff}.nav-list{display:flex;list-style:none;gap:var(--spacing-xl);align-items:center}.nav-link{color:#ffffffe6;text-decoration:none;position:relative;font-weight:var(--font-weight-medium);padding:var(--spacing-xs) 0;transition:color var(--transition-base)}.nav-link:after{content:"";position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--accent-color);transition:width var(--transition-base)}.nav-link:hover{color:#fff}.nav-link:hover:after{width:100%}.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;background:linear-gradient(135deg,var(--danger-color) 0%,#e53e3e 100%);color:#fff;border-radius:var(--radius-full);padding:0 6px;font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);margin-left:var(--spacing-xs);animation:pulse 2s ease-in-out infinite}.footer{background:linear-gradient(135deg,var(--text-primary) 0%,#283747 100%);color:#ffffffe6;text-align:center;padding:var(--spacing-2xl) 0;margin-top:auto;border-top:4px solid var(--primary-color)}.app{display:flex;flex-direction:column;min-height:100vh}.main-content{flex:1;padding:var(--spacing-2xl) 0;animation:fadeIn var(--transition-slow) ease-out}.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--spacing-xl);margin-top:var(--spacing-xl)}.product-card{animation:fadeInUp var(--transition-slow) ease-out backwards}.product-card:nth-child(1){animation-delay:.1s}.product-card:nth-child(2){animation-delay:.2s}.product-card:nth-child(3){animation-delay:.3s}.product-card:nth-child(4){animation-delay:.4s}.product-card:nth-child(5){animation-delay:.5s}.product-card:nth-child(6){animation-delay:.6s}.product-card img{width:100%;height:220px;object-fit:cover;border-radius:var(--radius-md);transition:transform var(--transition-base)}.product-card:hover img{transform:scale(1.05)}.product-footer{display:flex;justify-content:space-between;align-items:center;margin-top:var(--spacing-md);gap:var(--spacing-md)}.price{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--primary-color)}.cart-content{display:grid;grid-template-columns:1fr 380px;gap:var(--spacing-2xl);margin-top:var(--spacing-xl)}.cart-item{display:flex;gap:var(--spacing-lg);padding:var(--spacing-lg);background:var(--background-primary);border-radius:var(--radius-lg);border:1px solid var(--border-color);margin-bottom:var(--spacing-md);transition:all var(--transition-base);animation:slideInRight var(--transition-base) ease-out}.cart-item:hover{box-shadow:var(--shadow-md);transform:translate(4px)}.cart-item img{width:120px;height:120px;object-fit:cover;border-radius:var(--radius-md)}.cart-summary{background:var(--background-primary);padding:var(--spacing-xl);border-radius:var(--radius-lg);border:1px solid var(--border-color);box-shadow:var(--shadow-md);height:fit-content;position:sticky;top:calc(var(--spacing-2xl) + 60px);animation:fadeInUp var(--transition-slow) .3s ease-out}.summary-item{display:flex;justify-content:space-between;margin-bottom:var(--spacing-md);color:var(--text-secondary)}.summary-divider{border-top:2px solid var(--border-color);margin:var(--spacing-lg) 0}.summary-item.total{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--text-primary);margin-top:var(--spacing-lg)}.auth-page{display:flex;justify-content:center;align-items:center;min-height:70vh;padding:var(--spacing-xl) 0}.auth-card{background:var(--background-primary);padding:var(--spacing-2xl);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);border:1px solid var(--border-color);width:100%;max-width:440px;animation:scaleIn var(--transition-slow) ease-out}.auth-card h1{text-align:center;margin-bottom:var(--spacing-xl);color:var(--text-primary)}.auth-link{text-align:center;margin-top:var(--spacing-lg);color:var(--text-secondary)}.auth-link a{color:var(--primary-color);font-weight:var(--font-weight-semibold);transition:color var(--transition-base)}.auth-link a:hover{color:var(--primary-hover);text-decoration:underline}.profile-page{max-width:700px;margin:var(--spacing-2xl) auto;padding:0 var(--spacing-lg);animation:fadeInUp var(--transition-slow) ease-out}.profile-card{background:var(--background-primary);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);border:1px solid var(--border-color);padding:var(--spacing-2xl)}.profile-card h1{margin-bottom:var(--spacing-xl);color:var(--text-primary);font-size:var(--font-size-3xl)}.profile-info{display:flex;flex-direction:column;gap:var(--spacing-xl);margin-bottom:var(--spacing-2xl)}.profile-item{display:flex;flex-direction:column;gap:var(--spacing-sm);padding:var(--spacing-md);background:var(--background-secondary);border-radius:var(--radius-md);transition:all var(--transition-base)}.profile-item:hover{background:var(--background-tertiary);transform:translate(4px)}.profile-item label{font-weight:var(--font-weight-semibold);color:var(--text-muted);font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.5px}.profile-item span{color:var(--text-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-medium)}.profile-avatar{width:140px;height:140px;border-radius:50%;object-fit:cover;border:4px solid var(--primary-color);margin-top:var(--spacing-sm);box-shadow:var(--shadow-lg);transition:transform var(--transition-base)}.profile-avatar:hover{transform:scale(1.05)}.profile-actions{margin-top:var(--spacing-2xl);display:flex;flex-direction:column;gap:var(--spacing-md)}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-2xl);padding-bottom:var(--spacing-lg);border-bottom:2px solid var(--border-color);animation:slideInRight var(--transition-slow) ease-out}.page-header h1{margin:0}.empty-state{text-align:center;padding:var(--spacing-3xl) var(--spacing-xl);background:var(--background-primary);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);border:2px dashed var(--border-color);animation:fadeIn var(--transition-slow) ease-out}.empty-state p{margin-bottom:var(--spacing-xl);color:var(--text-muted);font-size:var(--font-size-lg)}.file-label{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-xl);border:2px dashed var(--border-color);border-radius:var(--radius-lg);background:var(--background-secondary);cursor:pointer;transition:all var(--transition-base);font-weight:var(--font-weight-medium)}.file-label:hover{border-color:var(--primary-color);background:var(--primary-light);transform:translateY(-2px)}.image-preview{position:relative;border:2px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden;max-width:350px;margin-top:var(--spacing-md);animation:scaleIn var(--transition-base) ease-out}.image-preview img{width:100%;height:auto;display:block}.remove-preview{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);width:36px;height:36px;border-radius:50%;background:var(--danger-color);color:#fff;border:none;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;transition:all var(--transition-base);box-shadow:var(--shadow-md)}.remove-preview:hover{background:#e53e3e;transform:scale(1.1) rotate(90deg)}.clickable{cursor:pointer;transition:all var(--transition-base)}.clickable:hover{transform:translateY(-2px)}.clickable:active{transform:translateY(0)}@media (max-width: 1024px){.cart-content{grid-template-columns:1fr}.cart-summary{position:static}}@media (max-width: 768px){.container{padding:0 var(--spacing-md)}.product-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--spacing-lg)}.nav-list{flex-wrap:wrap;gap:var(--spacing-md);justify-content:center}.page-header{flex-direction:column;gap:var(--spacing-md);align-items:stretch}h1{font-size:var(--font-size-3xl)}h2{font-size:var(--font-size-2xl)}.auth-card,.profile-card{padding:var(--spacing-xl)}}@media (max-width: 480px){.product-grid{grid-template-columns:1fr}.cart-item{flex-direction:column}.cart-item img{width:100%;height:200px}}.text-center{text-align:center}.mt-1{margin-top:var(--spacing-xs)}.mt-2{margin-top:var(--spacing-sm)}.mt-3{margin-top:var(--spacing-md)}.mt-4{margin-top:var(--spacing-lg)}.mt-5{margin-top:var(--spacing-xl)}.mb-1{margin-bottom:var(--spacing-xs)}.mb-2{margin-bottom:var(--spacing-sm)}.mb-3{margin-bottom:var(--spacing-md)}.mb-4{margin-bottom:var(--spacing-lg)}.mb-5{margin-bottom:var(--spacing-xl)}.fade-in{animation:fadeIn var(--transition-base) ease-out}.slide-in{animation:slideInRight var(--transition-base) ease-out}.scale-in{animation:scaleIn var(--transition-base) ease-out}