.admin-panel { position: fixed; top: 0; right: -400px; width: 400px; height: 100vh; background: var(--white); box-shadow: var(--shadow-lg); transition: right var(--transition-normal); z-index: 1500; overflow-y: auto; } .admin-panel.active { right: 0; } .admin-header { padding: 1rem; background: var(--primary-color); color: var(--white); display: flex; justify-content: space-between; align-items: center; } .admin-nav { display: flex; gap: 0.5rem; padding: 1rem; background: var(--gray-100); } .admin-nav button { padding: 0.5rem 1rem; background: none; border: none; border-radius: var(--border-radius-md); cursor: pointer; transition: var(--transition-fast); } .admin-nav button.active { background: var(--primary-color); color: var(--white); } .admin-content { padding: 1.5rem; } .tab-content { display: none; } .tab-content.active { display: block; } /* Product Management */ .product-manager { margin-bottom: 2rem; } .product-list { display: grid; gap: 1rem; } .product-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--gray-100); border-radius: var(--border-radius-md); } .product-item img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--border-radius-sm); } .product-actions { margin-left: auto; display: flex; gap: 0.5rem; } /* Settings Form */ .settings-form { display: grid; gap: 1.5rem; } .settings-section { padding: 1rem; background: var(--gray-100); border-radius: var(--border-radius-md); } .settings-title { margin-bottom: 1rem; font-weight: 600; }