html,body{margin:0;width:100%;height:100%}*{margin:0;box-sizing:border-box;padding:0}:root{--color-bg: #0f0f0f;--color-surface: #1a1a1a;--color-surface-elevated: #242424;--color-text: rgba(255, 255, 255, .87);--color-text-secondary: rgba(255, 255, 255, .6);--color-primary: #2563eb;--color-primary-hover: #1d4ed8;--color-success: #10b981;--color-error: #ef4444;--color-border: rgba(255, 255, 255, .1);--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;background-color:var(--color-bg);color:var(--color-text);min-height:100vh;display:flex;flex-direction:column}.app-header{background-color:var(--color-surface);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:100;box-shadow:var(--shadow-sm)}.header-container{max-width:1440px;margin:0 auto;padding:var(--spacing-md) var(--spacing-xl);display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-lg)}.logo-area{flex-shrink:0}.app-logo{font-size:1.25rem;font-weight:600;margin:0;color:var(--color-text)}.main-nav{display:flex;gap:var(--spacing-sm);flex:1}.nav-link{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);color:var(--color-text-secondary);text-decoration:none;font-weight:500;transition:all .2s}.nav-link:hover{color:var(--color-text);background-color:var(--color-surface-elevated)}.nav-link.active{color:var(--color-primary);background-color:#2563eb1a}.cart-toggle,#logout{position:relative;background:none;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-sm);color:var(--color-text);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.cart-toggle:hover,#logout:hover{background-color:var(--color-surface-elevated);border-color:var(--color-primary)}.cart-badge{position:absolute;top:-8px;right:-8px;background-color:var(--color-primary);color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600}.app-main{flex:1;max-width:1440px;width:100%;margin:0 auto;padding:var(--spacing-2xl) var(--spacing-xl)}.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--spacing-xl)}.product-card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-md);transition:all .3s}.product-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--color-primary)}.product-image{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-md);background-color:var(--color-surface-elevated)}.product-info{display:flex;flex-direction:column;gap:var(--spacing-sm)}.product-name{font-size:1.125rem;font-weight:600;color:var(--color-text)}.product-price{font-size:1.25rem;font-weight:700;color:var(--color-primary)}.product-description{font-size:.875rem;color:var(--color-text-secondary);line-height:1.6}.product-actions{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-top:auto}.quantity-selector{display:flex;align-items:center;gap:var(--spacing-sm)}.quantity-selector label{font-size:.875rem;color:var(--color-text-secondary)}.quantity-selector input{width:60px;padding:var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-surface-elevated);color:var(--color-text);font-size:.875rem;text-align:center}.btn{padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--radius-md);font-weight:500;font-size:.875rem;cursor:pointer;transition:all .2s;text-align:center}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background-color:var(--color-primary);color:#fff}.btn-primary:hover{background-color:var(--color-primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-secondary{background-color:var(--color-surface-elevated);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover{background-color:var(--color-surface);border-color:var(--color-primary)}.btn-outline{background-color:transparent;color:var(--color-text);border:1px solid var(--color-border)}.btn-outline:hover{background-color:var(--color-surface-elevated);border-color:var(--color-primary)}.shopping-cart{position:fixed;top:0;right:0;width:100%;max-width:400px;height:100vh;background-color:var(--color-surface);border-left:1px solid var(--color-border);display:flex;flex-direction:column;transform:translate(100%);transition:transform .3s ease-in-out;z-index:200;box-shadow:var(--shadow-xl)}.shopping-cart.open{transform:translate(0)}.cart-header{padding:var(--spacing-lg) var(--spacing-xl);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between}.cart-header h2{font-size:1.25rem;font-weight:600}.cart-close{background:none;border:none;font-size:2rem;color:var(--color-text-secondary);cursor:pointer;line-height:1;transition:color .2s}.cart-close:hover{color:var(--color-text)}.cart-content{flex:1;overflow-y:auto;padding:var(--spacing-lg)}.cart-items{display:flex;flex-direction:column;gap:var(--spacing-md)}.cart-item{display:flex;gap:var(--spacing-md);padding:var(--spacing-md);background-color:var(--color-surface-elevated);border-radius:var(--radius-md)}.cart-item-image{width:80px;height:80px;object-fit:cover;border-radius:var(--radius-sm);background-color:var(--color-bg)}.cart-item-details{flex:1;display:flex;flex-direction:column;gap:var(--spacing-xs)}.cart-item-name{font-weight:600;font-size:.875rem}.cart-item-price{color:var(--color-text-secondary);font-size:.875rem}.cart-item-controls{display:flex;align-items:center;gap:var(--spacing-sm);margin-top:var(--spacing-xs)}.cart-item-controls button{width:24px;height:24px;padding:0;border:1px solid var(--color-border);background-color:var(--color-surface);color:var(--color-text);border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;line-height:1}.cart-item-controls button:hover{background-color:var(--color-bg);border-color:var(--color-primary)}.cart-item-quantity{font-size:.875rem;min-width:30px;text-align:center}.cart-item-remove{background:none;border:none;color:var(--color-error);cursor:pointer;font-size:.75rem;padding:var(--spacing-xs);margin-left:auto}.cart-item-remove:hover{text-decoration:underline}.cart-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--color-text-secondary);text-align:center}.cart-footer{padding:var(--spacing-lg) var(--spacing-xl);border-top:1px solid var(--color-border);display:flex;flex-direction:column;gap:var(--spacing-md)}.cart-total{display:flex;justify-content:space-between;align-items:center;font-size:1.125rem;font-weight:600;color:var(--color-text)}.total-amount{color:var(--color-primary);font-size:1.5rem}.btn-checkout{width:100%;padding:var(--spacing-md);font-size:1rem}dialog{padding:0;margin:auto;border:none;border-radius:var(--radius-xl);background-color:var(--color-surface);max-width:90vw;max-height:90vh;box-shadow:var(--shadow-xl)}dialog::backdrop{background-color:#000c;backdrop-filter:blur(4px)}.dialog-header{padding:var(--spacing-lg) var(--spacing-xl);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between}.dialog-header h3{font-size:1.25rem;font-weight:600;color:var(--color-text)}.dialog-close{background:none;border:none;font-size:2rem;color:var(--color-text-secondary);cursor:pointer;line-height:1;transition:color .2s}.dialog-close:hover{color:var(--color-text)}.gallery-dialog{width:90vw;max-width:1200px}.gallery-carousel{display:grid;grid-auto-columns:100%;grid-auto-flow:column;overflow-x:scroll;scroll-snap-type:x mandatory;scroll-behavior:smooth;gap:var(--spacing-md);padding:var(--spacing-xl);scrollbar-width:thin}.gallery-carousel::-webkit-scrollbar{height:8px}.gallery-carousel::-webkit-scrollbar-track{background:var(--color-surface-elevated);border-radius:var(--radius-sm)}.gallery-carousel::-webkit-scrollbar-thumb{background:var(--color-primary);border-radius:var(--radius-sm)}.gallery-carousel::scroll-button(left),.gallery-carousel::scroll-button(right){background-color:var(--color-surface-elevated);color:var(--color-text);border:1px solid var(--color-border);border-radius:50%;width:48px;height:48px;cursor:pointer;transition:all .2s}.gallery-carousel::scroll-button(left){content:"◄";font-size:1.25rem;position:absolute;top:50%}.gallery-carousel::scroll-button(right){content:"►";font-size:1.25rem;position:absolute;top:50%;right:0}.gallery-carousel::scroll-button(left):hover,.gallery-carousel::scroll-button(right):hover{background-color:var(--color-primary);border-color:var(--color-primary);transform:scale(1.1)}.gallery-carousel::scroll-button(left):disabled,.gallery-carousel::scroll-button(right):disabled{opacity:.3;cursor:not-allowed}.gallery-item{scroll-snap-align:center;display:flex;align-items:center;justify-content:center;width:100%}.gallery-item img,.gallery-item video{max-width:100%;max-height:70vh;border-radius:var(--radius-lg);object-fit:contain}.order-dialog{width:90vw;max-width:800px}.order-tabs{display:flex;border-bottom:1px solid var(--color-border)}.tab-button{flex:1;padding:var(--spacing-md) var(--spacing-lg);background:none;border:none;color:var(--color-text-secondary);font-weight:500;cursor:pointer;transition:all .2s;position:relative}.tab-button:hover{color:var(--color-text);background-color:var(--color-surface-elevated)}.tab-button.active{color:var(--color-primary)}.tab-button.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--color-primary)}.order-tab-content{padding:var(--spacing-xl);max-height:60vh;overflow-y:auto}.tab-panel{display:none}.tab-panel.active{display:block}.order-items-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.order-item{display:flex;gap:var(--spacing-md);padding:var(--spacing-md);background-color:var(--color-surface-elevated);border-radius:var(--radius-md)}.order-item-image{width:60px;height:60px;object-fit:cover;border-radius:var(--radius-sm);background-color:var(--color-bg)}.order-item-details{flex:1;display:flex;flex-direction:column;gap:var(--spacing-xs)}.order-item-name{color:var(--color-text);font-weight:600}.order-item-quantity{color:var(--color-text-secondary);font-size:.875rem}.order-item-price{font-weight:600;color:var(--color-primary);margin-left:auto}.order-tracking-timeline{display:flex;flex-direction:column;gap:var(--spacing-lg)}.tracking-step{display:flex;gap:var(--spacing-md);position:relative}.tracking-step:not(:last-child):before{content:"";position:absolute;left:15px;top:40px;bottom:-24px;width:2px;background-color:var(--color-border)}.tracking-step.completed:not(:last-child):before{background-color:var(--color-success)}.tracking-icon{width:32px;height:32px;border-radius:50%;background-color:var(--color-surface-elevated);border:2px solid var(--color-border);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1}.tracking-step.completed .tracking-icon{background-color:var(--color-success);border-color:var(--color-success);color:#fff}.tracking-step.active .tracking-icon{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff}.tracking-details{flex:1}.tracking-title{color:var(--color-text);font-weight:600;margin-bottom:var(--spacing-xs)}.tracking-date{color:var(--color-text-secondary);font-size:.875rem}.tracking-notes{color:var(--color-primary)}.tracking-info{margin-top:var(--spacing-md);padding:var(--spacing-md);background-color:var(--color-surface-elevated);border-radius:var(--radius-md)}.tracking-info-row{display:flex;justify-content:space-between;padding:var(--spacing-sm) 0}.tracking-info-row:not(:last-child){border-bottom:1px solid var(--color-border)}.tracking-info-label{color:var(--color-text-secondary);font-size:.875rem}.tracking-info-value{color:var(--color-text);font-weight:500}.orders-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.order-card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);cursor:pointer;transition:all .2s}.order-card:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.order-card-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:var(--spacing-md)}.order-number{font-weight:600;font-size:1.125rem}.order-date{color:var(--color-text-secondary);font-size:.875rem}.order-status{padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.order-status.order-placed,.order-status.pending{background-color:#fbbf241a;color:#fbbf24}.order-status.processing,.order-status.in-production{background-color:#2563eb1a;color:#2563eb}.order-status.shipped{background-color:#10b9811a;color:#10b981}.order-status.delivered{background-color:#22c55e1a;color:#22c55e}.order-status.cancelled{background-color:#ef44441a;color:#ef4444}.order-total{font-size:1.25rem;font-weight:600;color:var(--color-primary);margin-top:var(--spacing-sm)}.notification{position:fixed;bottom:var(--spacing-xl);right:var(--spacing-xl);background-color:var(--color-success);color:#fff;padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);transform:translateY(150%);opacity:0;transition:all .3s ease-in-out;z-index:300;max-width:320px}.notification.show{transform:translateY(0);opacity:1}.page-header{margin-bottom:var(--spacing-2xl)}.page-title{font-size:2rem;font-weight:700;margin-bottom:var(--spacing-sm)}.page-description{color:var(--color-text-secondary);font-size:1rem}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-2xl);text-align:center;color:var(--color-text-secondary);min-height:400px}.empty-state-icon{font-size:4rem;margin-bottom:var(--spacing-lg);opacity:.3}.empty-state-title{font-size:1.25rem;font-weight:600;margin-bottom:var(--spacing-sm);color:var(--color-text)}.empty-state-description{max-width:400px}@media(max-width:768px){.header-container{padding:var(--spacing-md)}.app-logo{font-size:1rem}.main-nav{gap:var(--spacing-xs)}.nav-link{padding:var(--spacing-xs) var(--spacing-sm);font-size:.875rem}.app-main{padding:var(--spacing-lg) var(--spacing-md)}.products-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--spacing-md)}.shopping-cart{max-width:100%}.page-title{font-size:1.5rem}}@media(max-width:480px){.products-grid{grid-template-columns:1fr}.cart-header,.cart-footer{padding:var(--spacing-md)}dialog{max-width:95vw;max-height:95vh}.gallery-carousel{padding:var(--spacing-md)}}@media(prefers-color-scheme:light){:root{--color-bg: #f9fafb;--color-surface: #ffffff;--color-surface-elevated: #f3f4f6;--color-text: #111827;--color-text-secondary: #6b7280;--color-border: #e5e7eb}}